\n \n \n \n",[120,111],"86507752108474235dba7bb07567975d3efa40edf2f9d30451e6ef274c8276d0","frontend","5c059140-3996-11f1-a04c-42b51c65c3df","5404b440-f52b-11ef-99f0-569c3dd06744","a59cbf44-f528-11ef-ae42-569c3dd06744",74,["D",1776345337676],"\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[120,111],"1ea8b3da4e18d579298229ba24af91b14b14ae02565f57c996f9acaa1f8333bc","frontend/components/App.tsx",{"_32":143,"_13":133,"_81":144,"_83":145,"_84":33,"_85":146,"_87":26,"_34":147,"_40":148,"_90":138,"_92":149,"_66":48,"_94":-5,"_95":-7,"_74":150,"_97":151},{"_32":132,"_13":133,"_81":134,"_83":135,"_84":58,"_85":136,"_87":26,"_34":137,"_40":89,"_90":138,"_92":139,"_66":48,"_94":-5,"_95":-7,"_74":140,"_97":141},"2f8af389-17b6-49d5-a012-62205912cdab","App.tsx","019f76c9-48eb-72d8-ad33-f2fdd02bc82a","019f76c9-48ec-747c-8230-2dcaac3b7e51",7,["D",1784404418188],"script","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { Filter, Todo } from \"../../shared/types.ts\";\nimport { TodoInput } from \"./TodoInput.tsx\";\nimport { TodoItem } from \"./TodoItem.tsx\";\n\nasync function api(path: string, options?: RequestInit): Promise {\n const res = await fetch(path, {\n headers: { \"Content-Type\": \"application/json\" },\n ...options,\n });\n if (!res.ok) {\n const body = await res.json().catch(() => ({}));\n throw new Error(body.error || `Request failed (${res.status})`);\n }\n return res.json();\n}\n\nconst FILTERS: Filter[] = [\"all\", \"active\", \"completed\"];\n\nexport function App() {\n const [todos, setTodos] = useState([]);\n const [filter, setFilter] = useState(\"all\");\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n\n function showError(message: string) {\n setError(message);\n setTimeout(() => setError(null), 4000);\n }\n\n async function refresh() {\n try {\n setTodos(await api(\"/api/todos\"));\n setError(null);\n } catch (e) {\n showError(e instanceof Error ? e.message : \"Failed to load todos\");\n } finally {\n setLoading(false);\n }\n }\n\n useEffect(() => {\n refresh();\n }, []);\n\n async function addTodo(text: string) {\n try {\n const todo = await api(\"/api/todos\", {\n method: \"POST\",\n body: JSON.stringify({ text }),\n });\n setTodos((prev) => [todo, ...prev]);\n } catch (e) {\n showError(e instanceof Error ? e.message : \"Failed to add todo\");\n throw e;\n }\n }\n\n async function toggleTodo(todo: Todo) {\n // Optimistic update, roll back on failure\n setTodos((prev) =>\n prev.map((t) => t.id === todo.id ? { ...t, completed: !t.completed } : t)\n );\n try {\n await api(`/api/todos/${todo.id}`, {\n method: \"PATCH\",\n body: JSON.stringify({ completed: !todo.completed }),\n });\n } catch (e) {\n setTodos((prev) => prev.map((t) => t.id === todo.id ? todo : t));\n showError(e instanceof Error ? e.message : \"Failed to update todo\");\n }\n }\n\n async function editTodo(id: number, text: string) {\n const previous = todos;\n setTodos((prev) => prev.map((t) => t.id === id ? { ...t, text } : t));\n try {\n await api(`/api/todos/${id}`, {\n method: \"PATCH\",\n body: JSON.stringify({ text }),\n });\n } catch (e) {\n setTodos(previous);\n showError(e instanceof Error ? e.message : \"Failed to edit todo\");\n }\n }\n\n async function deleteTodo(id: number) {\n const previous = todos;\n setTodos((prev) => prev.filter((t) => t.id !== id));\n try {\n await api<{ ok: boolean }>(`/api/todos/${id}`, { method: \"DELETE\" });\n } catch (e) {\n setTodos(previous);\n showError(e instanceof Error ? e.message : \"Failed to delete todo\");\n }\n }\n\n async function clearCompleted() {\n const previous = todos;\n setTodos((prev) => prev.filter((t) => !t.completed));\n try {\n await api<{ cleared: number }>(\"/api/todos/clear-completed\", {\n method: \"POST\",\n });\n } catch (e) {\n setTodos(previous);\n showError(e instanceof Error ? e.message : \"Failed to clear completed\");\n }\n }\n\n const visible = todos.filter((t) =>\n filter === \"all\" ? true : filter === \"active\" ? !t.completed : t.completed\n );\n const activeCount = todos.filter((t) => !t.completed).length;\n const completedCount = todos.length - activeCount;\n\n return (\n

\n ✅ Todos\n

\n {activeCount} {activeCount === 1 ? \"task\" : \"tasks\"} remaining\n

\n\n {error && (\n \n {error}\n

\n )}\n\n \n\n

\n {FILTERS.map((f) => (\n setFilter(f)}\n class={`px-3 py-1 rounded-lg capitalize transition-colors cursor-pointer ${\n filter === f\n ? \"bg-indigo-100 text-indigo-700 font-medium\"\n : \"text-gray-500 hover:bg-gray-100\"\n }`}\n >\n {f}\n \n ))}\n

\n {completedCount > 0 && (\n \n Clear completed ({completedCount})\n \n )}\n

\n\n {loading\n ?

Loading…

\n : visible.length === 0\n ? (\n

\n {todos.length === 0\n ? \"No todos yet. Add one above! 🎉\"\n : `No ${filter} todos.`}\n

\n )\n : (\n

\n ))}\n

\n )}\n\n \n \n );\n}\n",[120,142,133],"e2a2b2289067ca1a9e12c823fe8b948a509568c9304eb77bd5507a94d511a179","components","5d7e5e30-3996-11f1-bbdd-42b51c65c3df","6e585892-f52b-11ef-a8e1-569c3dd06744","69ed66bc-f52b-11ef-9dac-569c3dd06744",75,["D",1776345339930],5,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Counter } from \"./Counter.tsx\";\n\nexport function App() {\n return (\n

React + Hono Starter

\n \n

\n View source\n

\n );\n}\n",[120,142,133],"de0a7e5fc76c6fd6135aff964af1a5835e04e2758b23f3d0c7d9fabffe514df7","README.md",{"_32":161,"_13":152,"_81":162,"_83":-5,"_84":33,"_85":60,"_87":48,"_34":163,"_40":164,"_90":116,"_92":165,"_66":48,"_94":-5,"_95":-7,"_74":166,"_97":167},{"_32":155,"_13":152,"_81":156,"_83":-5,"_84":58,"_85":57,"_87":26,"_34":157,"_40":89,"_90":116,"_92":158,"_66":48,"_94":-5,"_95":-7,"_74":159,"_97":160},"ff87bc3c-a176-47db-93e9-431b73889970","019f76c9-48ec-747c-8230-43f68aa2cb1a",["D",1784404457706],"# Todo App\n\nA production-ready todo app built with React, Hono, and SQLite on Val Town.\n\n## Features\n\n- ✅ Add, edit (double-click), complete, and delete todos\n- 🔍 Filter by all / active / completed\n- 🧹 Clear all completed todos at once\n- ⚡ Optimistic UI updates with automatic rollback on failure\n- 💾 Persistent storage in val-scoped SQLite\n- 🛡️ Server-side input validation (1–500 chars, type checks)\n- 🚨 User-visible error messages + client errors surfaced to val logs\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser[\"React SPA
(frontend/)\"] -->|\"fetch /api/todos\"| Hono[\"index.ts
(Hono server)\"]\n Hono --> DB[\"backend/db.ts
(SQLite)\"]\n Hono -->|serves| Static[\"frontend/ files\"]\n```\n\n## File structure\n\n```\nindex.ts ← HTTP entrypoint: Hono server (static files + API)\nbackend/\n db.ts ← SQLite schema + query functions\nshared/\n types.ts ← Todo/Filter types shared by client & server\nfrontend/\n index.html ← HTML shell (Twind + React)\n index.tsx ← React entrypoint\n components/\n App.tsx ← Root component: state, API calls, filters\n TodoInput.tsx ← New-todo form\n TodoItem.tsx ← Single todo row (toggle/edit/delete)\n```\n\n## API\n\n| Method | Path | Description |\n| --- | --- | --- |\n| `GET` | `/api/todos` | List all todos |\n| `POST` | `/api/todos` | Create — body: `{ text }` |\n| `PATCH` | `/api/todos/:id` | Update — body: `{ text?, completed? }` |\n| `DELETE` | `/api/todos/:id` | Delete a todo |\n| `POST` | `/api/todos/clear-completed` | Delete all completed todos |\n\nAll endpoints return JSON; errors are `{ error: string }` with 400/404 status codes.\n\n## Notes\n\n- Data is stored in this val's scoped SQLite database (`todos_v1` table).\n- Schema setup is idempotent (`CREATE TABLE IF NOT EXISTS`), safe across restarts.\n- All queries are parameterized — no SQL injection.\n",[152],"3976e4b8433ef9e1df3373ca16fb39aee90ebe09d72369fe123edbceb3f332b7","b9c749c0-59e1-11f1-bb5f-ee650bb23af1","a50c3760-f53e-11ef-bd6d-569c3dd06744",["D",1779896144390],31,"# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| **[`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter)** *(you're here)* | Client-side React SPA with a Hono API backend. |\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|serves| HTML[\"index.html\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (serves frontend + API routes)\nfrontend/\n index.html ← HTML shell (loads Twind + React)\n index.tsx ← React entrypoint (mounts )\n favicon.svg ← App icon\n components/\n App.tsx ← Root component (layout + view source link)\n Counter.tsx ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n frontend and any API routes you add.\n2. **`frontend/index.html`** loads Twind and the React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n a full-stack example with database, queries, and shared types\n",[152],"aaa4f5cc8e5bd01528335cdd2066e164bf95353ce2fe37c616b3e6406f49331e",{"_74":169,"_76":170,"_78":-7},"frontend/components/Counter.tsx",{"_32":171,"_13":172,"_81":173,"_83":145,"_84":33,"_85":174,"_87":26,"_34":175,"_40":176,"_90":138,"_92":177,"_66":48,"_94":-5,"_95":-7,"_74":178,"_97":179},"57a8cc52-3996-11f1-8db6-42b51c65c3df","Counter.tsx","57a8cd2e-3996-11f1-8db6-42b51c65c3df",73,["D",1776345330366],0,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function Counter() {\n const [count, setCount] = useState(0);\n return (\n

\n Clicked\n setCount((c) => c + 1)}\n class=\"bg-blue-500 hover:bg-blue-600 text-white font-medium px-4 py-2 rounded-lg transition-colors cursor-pointer\"\n >\n {count}\n \n times\n

\n );\n}\n",[120,142,172],"10ce4fbd7e41af337e504c3877201698031249b437d941845f0f7cdc52a79e66",{"_74":232,"_76":-7,"_78":233},{"_74":221,"_76":-7,"_78":222},{"_74":212,"_76":-7,"_78":213},{"_74":202,"_76":-7,"_78":203},{"_74":196,"_76":-7,"_78":197},{"_74":186,"_76":-7,"_78":187},"shared/types.ts",{"_32":188,"_13":189,"_81":190,"_83":191,"_84":58,"_85":22,"_87":26,"_34":192,"_40":176,"_90":138,"_92":193,"_66":48,"_94":-5,"_95":-7,"_74":194,"_97":195},"134e0c1a-5bfe-40c2-9bf5-2b750d398217","types.ts","32a3c1ce-82e2-11f1-9ce7-1607ee4eb77e","328bcb98-fcc7-4755-a03b-b14a85ac6061",["D",1784404344892],"export interface Todo {\n id: number;\n text: string;\n completed: boolean;\n createdAt: string;\n}\n\nexport type Filter = \"all\" | \"active\" | \"completed\";\n",[196,189],"cbc250a0a9c510f44b3eb4bd66c0a516a7a1cdc8ca6eb3da4f261e1610c42ac1","shared",{"_32":198,"_13":196,"_81":191,"_83":-5,"_84":58,"_85":22,"_87":26,"_34":199,"_40":176,"_90":200,"_92":-5,"_66":48,"_94":-5,"_95":-7,"_74":201,"_97":-5},"3be65090-91e1-4d70-9ae5-c96d783baa9b",["D",1784404344892],"directory",[196],"frontend/components/TodoItem.tsx",{"_32":204,"_13":205,"_81":206,"_83":135,"_84":58,"_85":207,"_87":26,"_34":208,"_40":176,"_90":138,"_92":209,"_66":48,"_94":-5,"_95":-7,"_74":210,"_97":211},"92c760e2-8423-4a18-9a9e-5db1a68d10b2","TodoItem.tsx","4ff57344-82e2-11f1-8733-1607ee4eb77e",6,["D",1784404394083],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { Todo } from \"../../shared/types.ts\";\n\ninterface Props {\n todo: Todo;\n onToggle: (todo: Todo) => void;\n onDelete: (id: number) => void;\n onEdit: (id: number, text: string) => Promise;\n}\n\nexport function TodoItem({ todo, onToggle, onDelete, onEdit }: Props) {\n const [editing, setEditing] = useState(false);\n const [draft, setDraft] = useState(todo.text);\n\n async function commitEdit() {\n const trimmed = draft.trim();\n if (!trimmed) {\n setDraft(todo.text);\n setEditing(false);\n return;\n }\n if (trimmed !== todo.text) {\n await onEdit(todo.id, trimmed);\n }\n setEditing(false);\n }\n\n return (\n

\n onToggle(todo)}\n aria-label={todo.completed ? \"Mark as active\" : \"Mark as completed\"}\n class={`w-6 h-6 shrink-0 rounded-full border-2 flex items-center justify-center transition-colors cursor-pointer ${\n todo.completed\n ? \"bg-emerald-500 border-emerald-500 text-white\"\n : \"border-gray-300 hover:border-indigo-400 text-transparent\"\n }`}\n >\n ✓\n \n\n {editing\n ? (\n setDraft(e.target.value)}\n onBlur={commitEdit}\n onKeyDown={(e) => {\n if (e.key === \"Enter\") commitEdit();\n if (e.key === \"Escape\") {\n setDraft(todo.text);\n setEditing(false);\n }\n }}\n autoFocus\n class=\"flex-1 px-2 py-1 rounded border border-indigo-300 focus:outline-none focus:ring-2 focus:ring-indigo-400\"\n />\n )\n : (\n setEditing(true)}\n title=\"Double-click to edit\"\n class={`flex-1 cursor-text break-words min-w-0 ${\n todo.completed ? \"line-through text-gray-400\" : \"text-gray-800\"\n }`}\n >\n {todo.text}\n \n )}\n\n onDelete(todo.id)}\n aria-label=\"Delete todo\"\n class=\"opacity-0 group-hover:opacity-100 focus:opacity-100 text-gray-300 hover:text-red-500 transition-all text-xl leading-none cursor-pointer px-1\"\n >\n ×\n \n

\n );\n}\n",[120,142,205],"c45c881f91fce554984e3b7e63d7c527fdcc038453aa2359817adc8863c1eb54","frontend/components/TodoInput.tsx",{"_32":214,"_13":215,"_81":216,"_83":135,"_84":58,"_85":148,"_87":26,"_34":217,"_40":176,"_90":138,"_92":218,"_66":48,"_94":-5,"_95":-7,"_74":219,"_97":220},"4d06a363-5284-4530-9465-6e9ef3f9c8e2","TodoInput.tsx","4a6dd7ae-82e2-11f1-98d1-1607ee4eb77e",["D",1784404384799],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\ninterface Props {\n onAdd: (text: string) => Promise;\n disabled?: boolean;\n}\n\nexport function TodoInput({ onAdd, disabled }: Props) {\n const [text, setText] = useState(\"\");\n const [submitting, setSubmitting] = useState(false);\n\n async function handleSubmit(e: { preventDefault: () => void }) {\n e.preventDefault();\n const trimmed = text.trim();\n if (!trimmed || submitting) return;\n setSubmitting(true);\n try {\n await onAdd(trimmed);\n setText(\"\");\n } finally {\n setSubmitting(false);\n }\n }\n\n return (\n

\n setText(e.target.value)}\n placeholder=\"What needs to be done?\"\n maxLength={500}\n disabled={disabled || submitting}\n autoFocus\n class=\"flex-1 px-4 py-3 rounded-xl border border-gray-200 bg-white shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-transparent placeholder-gray-400 disabled:opacity-50\"\n />\n \n Add\n \n \n );\n}\n",[120,142,215],"84b6a26a648850d9f61fe8ec46842913cbddeff07409b3cfb4d22f1f582a93d2","backend/db.ts",{"_32":223,"_13":224,"_81":225,"_83":226,"_84":58,"_85":227,"_87":26,"_34":228,"_40":176,"_90":138,"_92":229,"_66":48,"_94":-5,"_95":-7,"_74":230,"_97":231},"71051082-14a9-4218-8526-23fa0f80018a","db.ts","37e20f6a-82e2-11f1-838b-1607ee4eb77e","bae2d9a3-6411-466b-a8b2-8da9bfef0d43",3,["D",1784404353689],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport type { Todo } from \"../shared/types.ts\";\n\nconst TABLE = \"todos_v1\";\n\n// Idempotent schema setup\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS ${TABLE} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n text TEXT NOT NULL,\n completed INTEGER NOT NULL DEFAULT 0,\n created_at TEXT NOT NULL DEFAULT (strftime('%Y-%m-%dT%H:%M:%fZ', 'now'))\n)`);\n\nfunction rowToTodo(row: Record): Todo {\n return {\n id: Number(row.id),\n text: String(row.text),\n completed: Boolean(row.completed),\n createdAt: String(row.created_at),\n };\n}\n\nexport async function listTodos(): Promise {\n const result = await sqlite.execute(\n `SELECT * FROM ${TABLE} ORDER BY completed ASC, created_at DESC`,\n );\n return result.rows.map(rowToTodo);\n}\n\nexport async function createTodo(text: string): Promise {\n const result = await sqlite.execute({\n sql: `INSERT INTO ${TABLE} (text) VALUES (?) RETURNING *`,\n args: [text],\n });\n return rowToTodo(result.rows[0]);\n}\n\nexport async function updateTodo(\n id: number,\n fields: { text?: string; completed?: boolean },\n): Promise {\n const sets: string[] = [];\n const args: (string | number)[] = [];\n if (fields.text !== undefined) {\n sets.push(\"text = ?\");\n args.push(fields.text);\n }\n if (fields.completed !== undefined) {\n sets.push(\"completed = ?\");\n args.push(fields.completed ? 1 : 0);\n }\n if (sets.length === 0) return getTodo(id);\n args.push(id);\n const result = await sqlite.execute({\n sql: `UPDATE ${TABLE} SET ${sets.join(\", \")} WHERE id = ? RETURNING *`,\n args,\n });\n return result.rows.length ? rowToTodo(result.rows[0]) : null;\n}\n\nexport async function getTodo(id: number): Promise {\n const result = await sqlite.execute({\n sql: `SELECT * FROM ${TABLE} WHERE id = ?`,\n args: [id],\n });\n return result.rows.length ? rowToTodo(result.rows[0]) : null;\n}\n\nexport async function deleteTodo(id: number): Promise {\n const result = await sqlite.execute({\n sql: `DELETE FROM ${TABLE} WHERE id = ?`,\n args: [id],\n });\n return result.rowsAffected > 0;\n}\n\nexport async function clearCompleted(): Promise {\n const result = await sqlite.execute(\n `DELETE FROM ${TABLE} WHERE completed = 1`,\n );\n return result.rowsAffected;\n}\n",[232,224],"0cba710a34663205b3e8b6c2ed3f0962f3056f9028e6c2341f659d2751a985a9","backend",{"_32":234,"_13":232,"_81":226,"_83":-5,"_84":58,"_85":227,"_87":26,"_34":235,"_40":176,"_90":200,"_92":-5,"_66":48,"_94":-5,"_95":-7,"_74":236,"_97":-5},"e0f9aee7-2e17-4ac4-bd25-dd16ba86c183",["D",1784404353689],[232],["D",1784404330602],"legacyEnvVars","httpPrivacy","description","Production-ready todo app with React + Hono + SQLite","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789534799&sig=2fe932419d898cd124d0961cab25a5a9c3bd76c8b30cb3b9e71257c7b34e60a2","userId","23d6c179-74ab-40bf-910d-c9f38f237b3e","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","019f76c7-863b-76f6-960c-e9095bbf0cf4","tursoName","96de70b5cf69437388befba56284d53f","tursoHostname","96de70b5cf69437388befba56284d53f-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789472446807],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_280":276},"org",{"_11":12,"_273":274,"_275":276,"_244":245,"_277":278,"_279":48},"branch","displayName","Sammit Badodekar","avatar","https://lh3.googleusercontent.com/a/ACg8ocIQo7pgMGin8u5Xt1nd4WrJ3iSmUTsxwqbXj1smuSwPDnHPDUXn=s96-c","tier","free","canRestrictVals","profileImageUrl","","adoptOrgId",{"_32":59,"_13":14,"_34":390,"_46":-5,"_238":48,"_49":50,"_239":50,"_240":241,"_242":243,"_244":245,"_246":82,"_247":26,"_248":-5,"_249":-5,"_250":176,"_53":251,"_252":253,"_254":255,"_256":391,"_258":-5,"_259":260,"_261":260,"_262":263,"_264":263,"_265":263,"_266":260,"_267":260,"_268":392,"_270":393,"_272":394,"_47":48},"tree",[335,337,345,347,348],"files",[335,336,337,338,339,340,341,342,343,344,345,346,347,348],"counts",{"_325":176,"_326":89,"_327":176,"_328":329,"_330":331},"contents",[309,310,311,312,313],"upstreamProject",{"_32":39,"_13":56,"_240":306,"_242":243,"_49":50,"_268":307},"upstreamBranch",{"_32":33,"_34":304,"_36":305,"_13":16,"_38":39,"_40":41,"_42":-5,"_43":-5,"_44":45,"_46":-5,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],["D",1785420707976],"Starter template with client-side React & Hono server",{"_11":52,"_280":308},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789534799&sig=94d49ad984a50880ef894a3794e08842e7b9b626be771ff48da114d7d9a149ed",{"_32":234,"_13":232,"_81":226,"_83":-5,"_84":58,"_85":227,"_87":26,"_34":323,"_40":176,"_90":200,"_92":-5,"_66":48,"_94":-5,"_74":324},{"_32":320,"_13":120,"_81":113,"_83":-5,"_84":58,"_85":89,"_87":26,"_34":321,"_40":176,"_90":200,"_92":-5,"_66":48,"_94":-5,"_74":322},{"_32":198,"_13":196,"_81":191,"_83":-5,"_84":58,"_85":22,"_87":26,"_34":318,"_40":176,"_90":200,"_92":-5,"_66":48,"_94":-5,"_74":319},{"_32":155,"_13":152,"_81":156,"_83":-5,"_84":58,"_85":57,"_87":26,"_34":316,"_40":89,"_90":116,"_92":158,"_66":48,"_94":-5,"_74":317},{"_32":80,"_13":75,"_81":82,"_83":-5,"_84":58,"_85":86,"_87":26,"_34":314,"_40":89,"_90":91,"_92":93,"_66":48,"_94":-5,"_74":315},["D",1784404372218],[75],["D",1784404457706],[152],["D",1784404344892],[196],"89f3b209-221b-44b6-ab94-610eff048f3e",["D",1784404330602],[120],["D",1784404353689],[232],"pulls","branches","forks","envVars",{"_332":176,"_334":176},"connections",{"_332":176,"_333":176},"count","unfilledCount","emptyCount",{"_32":234,"_13":232,"_81":226,"_83":-5,"_84":58,"_85":227,"_87":26,"_34":235,"_40":176,"_90":200,"_92":-5,"_66":48,"_94":-5,"_95":388,"_74":389},{"_32":223,"_13":224,"_81":225,"_83":226,"_84":58,"_85":227,"_87":26,"_34":228,"_40":176,"_90":138,"_92":229,"_66":48,"_94":-5,"_95":386,"_74":387},{"_32":320,"_13":120,"_81":113,"_83":-5,"_84":58,"_85":89,"_87":26,"_34":383,"_40":176,"_90":200,"_92":-5,"_66":48,"_94":-5,"_95":384,"_74":385},{"_32":379,"_13":142,"_81":135,"_83":113,"_84":58,"_85":89,"_87":26,"_34":380,"_40":176,"_90":200,"_92":-5,"_66":48,"_94":-5,"_95":381,"_74":382},{"_32":132,"_13":133,"_81":134,"_83":135,"_84":58,"_85":136,"_87":26,"_34":137,"_40":89,"_90":138,"_92":139,"_66":48,"_94":-5,"_95":377,"_74":378},{"_32":214,"_13":215,"_81":216,"_83":135,"_84":58,"_85":148,"_87":26,"_34":217,"_40":176,"_90":138,"_92":218,"_66":48,"_94":-5,"_95":375,"_74":376},{"_32":204,"_13":205,"_81":206,"_83":135,"_84":58,"_85":207,"_87":26,"_34":208,"_40":176,"_90":138,"_92":209,"_66":48,"_94":-5,"_95":373,"_74":374},{"_32":366,"_13":367,"_81":368,"_83":113,"_84":58,"_85":89,"_87":26,"_34":369,"_40":176,"_90":116,"_92":370,"_66":48,"_94":-5,"_95":371,"_74":372},{"_32":110,"_13":111,"_81":112,"_83":113,"_84":58,"_85":114,"_87":26,"_34":115,"_40":89,"_90":116,"_92":117,"_66":48,"_94":-5,"_95":364,"_74":365},{"_32":357,"_13":358,"_81":359,"_83":113,"_84":58,"_85":89,"_87":26,"_34":360,"_40":176,"_90":138,"_92":361,"_66":48,"_94":-5,"_95":362,"_74":363},{"_32":198,"_13":196,"_81":191,"_83":-5,"_84":58,"_85":22,"_87":26,"_34":199,"_40":176,"_90":200,"_92":-5,"_66":48,"_94":-5,"_95":355,"_74":356},{"_32":188,"_13":189,"_81":190,"_83":191,"_84":58,"_85":22,"_87":26,"_34":192,"_40":176,"_90":138,"_92":193,"_66":48,"_94":-5,"_95":353,"_74":354},{"_32":155,"_13":152,"_81":156,"_83":-5,"_84":58,"_85":57,"_87":26,"_34":157,"_40":89,"_90":116,"_92":158,"_66":48,"_94":-5,"_95":351,"_74":352},{"_32":80,"_13":75,"_81":82,"_83":-5,"_84":58,"_85":86,"_87":26,"_34":88,"_40":89,"_90":91,"_92":93,"_66":48,"_94":-5,"_95":349,"_74":350},[],[75],[],[152],[],[196,189],[346],[196],"197d34ae-8cac-4cc6-87e5-b3388ea9a01e","index.tsx","019f76c9-48ec-747c-8230-38243d5ac0dc",["D",1784404330602],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[120,358],[],[120,111],"034b04ff-51bf-42d5-a1ad-e1c7d334e8b0","favicon.svg","019f76c9-48ec-747c-8230-30a96bf481c2",["D",1784404330602],"\n",[],[120,367],[],[120,142,205],[],[120,142,215],[],[120,142,133],"1f35f3e6-6deb-4bcf-be5d-4586c6af4f7e",["D",1784404330602],[339,340,341],[120,142],["D",1784404330602],[338,342,343,344],[120],[],[232,224],[336],[232],["D",1784404330602],["D",1789472446807],{"_11":12,"_280":276},{"_11":12,"_273":274,"_275":276,"_244":245,"_277":278,"_279":48},{"_40":57,"_13":16,"_32":58,"_38":59,"_42":33,"_43":60,"_61":50,"_62":39,"_63":54,"_55":14,"_51":12},"ctx",{"_268":-5,"_301":428,"_429":430,"_431":432,"_433":48,"_434":48,"_435":48,"_436":26,"_437":-5,"_438":-7,"_439":-7,"_440":176,"_441":48,"_442":48,"_443":-5,"_444":48,"_445":48,"_446":48,"_447":-5},"ENV",{"_399":400,"_401":402,"_403":16,"_404":405,"_406":407,"_408":409,"_410":411,"_412":413,"_414":415,"_416":417,"_418":419,"_420":421,"_422":423,"_424":425,"_426":427},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Compare

Mergesammitbadodekar/mainintotemplates/main

README.md+37-43

frontend/components/App.tsx+191-7

frontend/index.html+1-1

Hindex.ts+82-2

backend

backend/db.ts+82-0

frontend/components/TodoInput.tsx+47-0

frontend/components/TodoItem.tsx+83-0

shared

shared/types.ts+8-0

frontend/components/Counter.tsx+0-18