17โ โโโ database/
18โ โ โโโ queries.ts # SQLite database operations
19โ โโโ index.ts # Hono API server
20โโโ frontend/
21โ โโโ components/
32
33- Uses Hono as the web framework
34- Provides RESTful API endpoints for todo operations
35- Serves the frontend static files
36- Uses Val Town's SQLite for data persistence
40- Built with React
41- Uses Tailwind CSS for styling
42- Communicates with the backend API
43- Implements optimistic UI updates
44
45## API Endpoints
46
47- `GET /api/todos` - Get all todos
48- `GET /api/todos/:id` - Get a specific todo
49- `POST /api/todos` - Create a new todo
50- `PATCH /api/todos/:id` - Update a todo
51- `DELETE /api/todos/:id` - Delete a todo
52
53## Getting Started
3import { Todo, CreateTodoInput, UpdateTodoInput } from "../../shared/types.ts";
4
5// Get the base URL for API requests
6const getApiBaseUrl = () => {
7 // In production, use the current URL
8 return window.location.origin;
17 const [error, setError] = useState<string | null>(null);
18
19 // Fetch todos from the API
20 const fetchTodos = async () => {
21 try {
22 setIsLoading(true);
23 setError(null);
24 const response = await fetch(`${getApiBaseUrl()}/api/todos`);
25 if (!response.ok) {
26 throw new Error("Failed to fetch todos");
44 setIsLoading(true);
45 setError(null);
46 const response = await fetch(`${getApiBaseUrl()}/api/todos`, {
47 method: "POST",
48 headers: {
78 );
79
80 const response = await fetch(`${getApiBaseUrl()}/api/todos/${id}`, {
81 method: "PATCH",
82 headers: {
114 setTodos(todos.filter((todo) => todo.id !== id));
115
116 const response = await fetch(`${getApiBaseUrl()}/api/todos/${id}`, {
117 method: "DELETE",
118 });
1import { searchWithSerpApi } from "https://esm.town/v/charmaine/searchWithSerpApi";
2import { discordWebhook } from "https://esm.town/v/stevekrouse/discordWebhook";
3
4// Customize your search parameters
5const KEYWORDS = "\"SAAS\" OR \"SaaS\" OR \"saas\"";
6const DISCORD_API_KEY = Deno.env.get("mentionsDiscord");
7const SERP_API_KEY = Deno.env.get("SERP_API_KEY");
8
9// Set isProd = false for testing and = true for production
13
14export async function redditAlert({ lastRunAt }: Interval) {
15 if (!SERP_API_KEY || !DISCORD_API_KEY) {
16 console.error("Missing SERP_API_KEY or Discord webhook URL. Exiting.");
17 return;
18 }
19
20 // Determine the time frame for the search
21 // Details on as_qdr: https://serpapi.com/advanced-google-query-parameters#api-parameters-advanced-search-query-parameters-as-qdr
22 const timeFrame = isProd
23 ? lastRunAt
27
28 try {
29 const response = await searchWithSerpApi({
30 query: KEYWORDS,
31 site: "reddit.com",
32 apiKey: SERP_API_KEY,
33 as_qdr: timeFrame,
34 });
61 if (isProd) {
62 await discordWebhook({
63 url: DISCORD_API_KEY,
64 content,
65 });
375 <title>Customer Response Generator</title>
376 <meta name="viewport" content="width=device-width, initial-scale=1">
377 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
378 <style>
379 body { margin: 0; font-family: 'Inter', sans-serif; }
72. Send notifications to your preferred platform (Discord, Slack, email, etc.)
8
9Reddit does not have an API that allows users to scrape data, so we are doing this with the Google Search API, [Serp](https://serpapi.com/).
10
11---
29
30---
31### 3. Get a SerpApi Key
32This template requires a [SerpApi](https://serpapi.com/) key to search Reddit posts via Google search results.
33
341. **Get a SerpApi key**:
35 - Sign up at [SerpApi](https://serpapi.com/) to create an account.
36 - Generate an API key from your account dashboard.
37
382. **Add the SerpApi key to your environment variables**:
39 - Go to your [Val Town environment variables](https://www.val.town/settings/environment-variables).
40 - Add a new key:
41 - Key: `SERP_API_KEY`
42 - Value: Your SERP API key.
43
44Without this key, the val will not function correctly.
75
76### NOTE: Usage Limits
77- **SerpApi:** Free SerpApi accounts have monthly call limits.
1import { searchWithSerpApi } from "https://esm.town/v/charmaine/searchWithSerpApi";
2import { discordWebhook } from "https://esm.town/v/stevekrouse/discordWebhook";
3
4// Customize your search parameters
5const KEYWORDS = "\"node\" OR \"node.js\"";
6const DISCORD_API_KEY = Deno.env.get("mentionsDiscord");
7const SERP_API_KEY = Deno.env.get("SERP_API_KEY");
8
9// Set isProd = false for testing and = true for production
13
14export async function redditAlert({ lastRunAt }: Interval) {
15 if (!SERP_API_KEY || !DISCORD_API_KEY) {
16 console.error("Missing SERP_API_KEY or Discord webhook URL. Exiting.");
17 return;
18 }
19
20 // Determine the time frame for the search
21 // Details on as_qdr: https://serpapi.com/advanced-google-query-parameters#api-parameters-advanced-search-query-parameters-as-qdr
22 const timeFrame = isProd
23 ? lastRunAt
27
28 try {
29 const response = await searchWithSerpApi({
30 query: KEYWORDS,
31 site: "reddit.com",
32 apiKey: SERP_API_KEY,
33 as_qdr: timeFrame,
34 });
62 if (isProd) {
63 await discordWebhook({
64 url: DISCORD_API_KEY,
65 content,
66 });
72. Send notifications to your preferred platform (Discord, Slack, email, etc.)
8
9Reddit does not have an API that allows users to scrape data, so we are doing this with the Google Search API, [Serp](https://serpapi.com/).
10
11---
29
30---
31### 3. Get a SerpApi Key
32This template requires a [SerpApi](https://serpapi.com/) key to search Reddit posts via Google search results.
33
341. **Get a SerpApi key**:
35 - Sign up at [SerpApi](https://serpapi.com/) to create an account.
36 - Generate an API key from your account dashboard.
37
382. **Add the SerpApi key to your environment variables**:
39 - Go to your [Val Town environment variables](https://www.val.town/settings/environment-variables).
40 - Add a new key:
41 - Key: `SERP_API_KEY`
42 - Value: Your SERP API key.
43
44Without this key, the val will not function correctly.
75
76### NOTE: Usage Limits
77- **SerpApi:** Free SerpApi accounts have monthly call limits.
1import { searchWithSerpApi } from "https://esm.town/v/charmaine/searchWithSerpApi";
2import { discordWebhook } from "https://esm.town/v/stevekrouse/discordWebhook";
3
4// Customize your search parameters
5const KEYWORDS = "\"SAAS\" OR \"SaaS\" OR \"saas\"";
6const DISCORD_API_KEY = Deno.env.get("mentionsDiscord");
7const SERP_API_KEY = Deno.env.get("SERP_API_KEY");
8
9// Set isProd = false for testing and = true for production
13
14export async function redditAlert({ lastRunAt }: Interval) {
15 if (!SERP_API_KEY || !DISCORD_API_KEY) {
16 console.error("Missing SERP_API_KEY or Discord webhook URL. Exiting.");
17 return;
18 }
19
20 // Determine the time frame for the search
21 // Details on as_qdr: https://serpapi.com/advanced-google-query-parameters#api-parameters-advanced-search-query-parameters-as-qdr
22 const timeFrame = isProd
23 ? lastRunAt
27
28 try {
29 const response = await searchWithSerpApi({
30 query: KEYWORDS,
31 site: "reddit.com",
32 apiKey: SERP_API_KEY,
33 as_qdr: timeFrame,
34 });
62 if (isProd) {
63 await discordWebhook({
64 url: DISCORD_API_KEY,
65 content,
66 });
404 <head>
405 <title>Secure Vault</title>
406 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
407 <meta name="viewport" content="width=device-width, initial-scale=1">
408 <style>
11 },
12 {
13 "prompt": "weather dashboard for nyc using open-meteo API for NYC with icons",
14 "title": "Weather App",
15 "code": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>NYC Weather</title>\n <link href=\"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css\" rel=\"stylesheet\">\n <style>\n .weather-icon {\n font-size: 48px;\n margin-bottom: 16px;\n }\n </style>\n</head>\n<body class=\"h-screen bg-blue-100 flex justify-center items-center p-4\">\n <div class=\"bg-white p-8 rounded-md shadow-md w-full max-w-sm md:p-12 lg:p-16 xl:p-20\">\n <h1 class=\"text-2xl font-bold mb-4 text-center text-blue-500\">NYC Weather</h1>\n <div id=\"weather\" class=\"mb-4 p-4 text-center\">\n <div id=\"temperature\" class=\"text-4xl font-bold mb-4\"></div>\n <div id=\"condition\" class=\"text-xl font-medium mb-4\"></div>\n <div id=\"humidity\" class=\"text-lg font-light mb-2\">Humidity: <span id=\"humidity-value\"></span>%</div>\n <div id=\"wind\" class=\"text-lg font-light mb-2\">Wind: <span id=\"wind-value\"></span> mph</div>\n <i id=\"weather-icon\" class=\"weather-icon text-blue-500\"></i>\n </div>\n </div>\n <p class=\"fixed bottom-0 left-0 right-0 text-center p-4 text-gray-600 md:p-6 lg:p-8 xl:p-10\">\n Built on <a class=\"text-blue-600\" href=\"https://cerebrascoder.com\">Cerebras Coder</a>\n </p>\n\n <script>\n // Sample weather data\n const weatherData = {\n temperature: 75,\n condition: 'Sunny',\n humidity: 60,\n wind: 10,\n icon: 'sun'\n };\n\n document.getElementById('temperature').innerText = `${weatherData.temperature}ยฐF`;\n document.getElementById('condition').innerText = weatherData.condition;\n document.getElementById('humidity-value').innerText = weatherData.humidity;\n document.getElementById('wind-value').innerText = weatherData.wind;\n\n // Map weather icon\n const weatherIcons = {\n 'sun': '☀',\n 'cloud': '☀',\n 'rain': '☃',\n 'snow': '☄'\n };\n\n document.getElementById('weather-icon').innerHTML = weatherIcons[weatherData.icon] || '';\n </script>\n</body>\n</html>",
