📝 Todo App

\n {totalCount === 0\n ? \"No todos yet. Add one below!\"\n : `${completedCount} of ${totalCount} completed`}\n

\n\n {/* Add new todo */}\n

\n setNewTodoText(e.target.value)}\n onKeyDown={handleKeyPress}\n placeholder=\"What needs to be done?\"\n className=\"flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n disabled={loading}\n />\n \n {loading ? \"Adding...\" : \"Add\"}\n \n

\n\n {/* Todo list */}\n

\n {todos.length === 0 ? (\n

📋

Your todo list is empty

Add a task above to get started!

\n ) : (\n todos.map((todo) => (\n \n ))\n )}\n

\n\n {/* Stats */}\n {totalCount > 0 && (\n

\n Total: {totalCount}\n Active: {totalCount - completedCount}\n Completed: {completedCount}\n

\n )}\n

\n );\n}",[],[213,220,226],{"_102":234,"_95":235,"_143":236,"_145":221,"_146":132,"_147":215,"_149":150,"_104":237,"_99":31,"_152":170,"_154":238,"_155":27,"_156":-5,"_157":239,"_98":240},"082a4460-377d-11f0-ab87-9e149126039e","TodoItem.tsx","082a450a-377d-11f0-ab87-9e149126039e",["D",1747967059586],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { Todo } from \"../../shared/types.ts\";\n\ninterface TodoItemProps {\n todo: Todo;\n onUpdate: (id: number, updates: { text?: string; completed?: boolean }) => void;\n onDelete: (id: number) => void;\n}\n\nexport default function TodoItem({ todo, onUpdate, onDelete }: TodoItemProps) {\n const [isEditing, setIsEditing] = useState(false);\n const [editText, setEditText] = useState(todo.text);\n\n const handleToggleComplete = () => {\n onUpdate(todo.id, { completed: !todo.completed });\n };\n\n const handleEdit = () => {\n setIsEditing(true);\n setEditText(todo.text);\n };\n\n const handleSave = () => {\n if (editText.trim() !== todo.text) {\n onUpdate(todo.id, { text: editText.trim() });\n }\n setIsEditing(false);\n };\n\n const handleCancel = () => {\n setEditText(todo.text);\n setIsEditing(false);\n };\n\n const handleKeyPress = (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\") {\n handleSave();\n } else if (e.key === \"Escape\") {\n handleCancel();\n }\n };\n\n return (\n

\n \n \n {isEditing ? (\n setEditText(e.target.value)}\n onKeyDown={handleKeyPress}\n onBlur={handleSave}\n className=\"flex-1 px-2 py-1 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\"\n autoFocus\n />\n ) : (\n \n {todo.text}\n \n )}\n \n

\n {!isEditing && (\n \n ✏️\n \n )}\n \n onDelete(todo.id)}\n className=\"px-2 py-1 text-sm text-red-600 hover:text-red-800 focus:outline-none\"\n >\n 🗑️\n \n

\n );\n}",[],[213,220,235],[213,220],{"_102":243,"_95":244,"_143":245,"_145":214,"_146":132,"_147":246,"_149":150,"_104":247,"_99":31,"_152":248,"_154":249,"_155":27,"_156":-5,"_157":250,"_98":251},"1c1c0a6c-377d-11f0-a1e5-9e149126039e","index.html","1c1c0b02-377d-11f0-a1e5-9e149126039e",10,["D",1747967093049],"file","\n\n\n \n \n Todo App\n \n \n\n\n

\n \n\n",[],[213,244],{"_102":253,"_95":254,"_143":255,"_145":214,"_146":132,"_147":256,"_149":150,"_104":257,"_99":31,"_152":170,"_154":258,"_155":27,"_156":-5,"_157":259,"_98":260},"18d2f53c-377d-11f0-a1cc-9e149126039e","index.tsx","18d2f5d2-377d-11f0-a1cc-9e149126039e",9,["D",1747967087535],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"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 = createRoot(document.getElementById(\"root\")!);\nroot.render();",[],[213,254],[213],{"_102":263,"_95":264,"_143":265,"_145":-5,"_146":132,"_147":205,"_149":150,"_104":266,"_99":31,"_152":153,"_154":-5,"_155":27,"_156":-5,"_157":267,"_98":276},"e9556b8c-377c-11f0-80b4-9e149126039e","shared","169d2db2-9d80-4708-a07a-f428fbb17b23",["D",1747967007860],[268],{"_102":269,"_95":270,"_143":271,"_145":265,"_146":132,"_147":205,"_149":150,"_104":272,"_99":31,"_152":170,"_154":273,"_155":27,"_156":-5,"_157":274,"_98":275},"e9554c06-377c-11f0-80b4-9e149126039e","types.ts","e9554d00-377c-11f0-80b4-9e149126039e",["D",1747967007860],"export interface Todo {\n id: number;\n text: string;\n completed: boolean;\n created_at: string;\n}\n\nexport interface CreateTodoRequest {\n text: string;\n}\n\nexport interface UpdateTodoRequest {\n text?: string;\n completed?: boolean;\n}",[],[264,270],[264],{"_102":278,"_95":279,"_143":280,"_145":-5,"_146":132,"_147":281,"_149":150,"_104":282,"_99":31,"_152":248,"_154":283,"_155":27,"_156":-5,"_157":284,"_98":285},"e764c818-377c-11f0-9dd7-9e149126039e","README.md","e764c8cc-377c-11f0-9dd7-9e149126039e",1,["D",1747967004604],"# Todo App\n\nA simple todo application built with Hono backend and React frontend, using SQLite for data persistence.\n\n## Features\n\n- ✅ Add new todos\n- ✅ Mark todos as complete/incomplete\n- ✅ Delete todos\n- ✅ Persistent storage with SQLite\n- ✅ Real-time updates\n\n## Project Structure\n\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Database schema\n│ │ └── queries.ts # Database operations\n│ ├── routes/\n│ │ └── todos.ts # Todo API routes\n│ └── index.ts # Main Hono app\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx # Main React component\n│ │ └── TodoItem.tsx # Individual todo component\n│ ├── index.html # HTML template\n│ └── index.tsx # React entry point\n└── shared/\n └── types.ts # Shared TypeScript types\n```\n\n## API Endpoints\n\n- `GET /api/todos` - Get all todos\n- `POST /api/todos` - Create a new todo\n- `PUT /api/todos/:id` - Update a todo\n- `DELETE /api/todos/:id` - Delete a todo\n\n## Development\n\nThe app runs on Val Town with automatic deployment. The database is automatically initialized on first run.",[],[279],"files",[140,159,165,174,184,191,200,211,218,224,233,242,252,262,268,277],"counts",{"_290":31,"_291":281,"_292":31,"_293":31},"pulls","branches","forks","envVars","contents",[296,299,302,305],{"_102":141,"_95":142,"_143":144,"_145":-5,"_146":132,"_147":148,"_149":150,"_104":297,"_99":31,"_152":153,"_154":-5,"_155":27,"_156":-5,"_98":298},["D",1747967012403],[142],{"_102":212,"_95":213,"_143":214,"_145":-5,"_146":132,"_147":215,"_149":150,"_104":300,"_99":31,"_152":153,"_154":-5,"_155":27,"_156":-5,"_98":301},["D",1747967059586],[213],{"_102":263,"_95":264,"_143":265,"_145":-5,"_146":132,"_147":205,"_149":150,"_104":303,"_99":31,"_152":153,"_154":-5,"_155":27,"_156":-5,"_98":304},["D",1747967007860],[264],{"_102":278,"_95":279,"_143":280,"_145":-5,"_146":132,"_147":281,"_149":150,"_104":306,"_99":31,"_152":248,"_154":283,"_155":27,"_156":-5,"_98":307},["D",1747967004604],[279],"upstream","emptyEnvVars","isNew","routes/_app.x.$handle.$name.branch.$branch.history",{"_93":94,"_95":96,"_97":41,"_100":313,"_317":318,"_402":31,"_403":27},{"_102":103,"_95":96,"_104":314,"_106":-5,"_107":27,"_108":109,"_110":-5,"_111":-5,"_12":112,"_113":-5,"_114":27,"_115":-5,"_116":31,"_117":118,"_119":118,"_120":121,"_122":121,"_123":121,"_124":118,"_125":27,"_21":315,"_129":316},["D",1747966973525],{"_93":94,"_127":128},{"_99":131,"_95":41,"_102":132,"_133":103,"_134":-5,"_135":-5,"_136":-5,"_137":-5},"history",[319,324,332,337,342,347,358,365,373,378,389,397],{"_143":203,"_99":131,"_104":320,"_146":132,"_286":321},["D",1747967103358],[322],{"_102":201,"_146":132,"_143":203,"_95":202,"_154":207,"_152":206,"_99":205,"_145":144,"_104":320,"_147":131,"_156":-5,"_149":150,"_155":27,"_98":323},[142,202],{"_143":203,"_99":325,"_104":326,"_146":132,"_286":327},11,["D",1747967096344],[328],{"_102":329,"_146":132,"_143":203,"_95":202,"_154":330,"_152":206,"_99":281,"_145":144,"_104":326,"_147":325,"_156":-5,"_149":27,"_155":27,"_98":331},"1e13cc10-377d-11f0-8ce0-9e149126039e","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { initializeDatabase } from \"./database/migrations.ts\";\nimport { getAllTodos } from \"./database/queries.ts\";\nimport todosRouter from \"./routes/todos.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Initialize database on startup\nawait initializeDatabase();\n\n// API routes\napp.route(\"/api/todos\", todosRouter);\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Serve the main page with initial data\napp.get(\"/\", async (c) => {\n try {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Inject initial todos data to avoid extra round-trip\n const initialTodos = await getAllTodos();\n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n } catch (error) {\n console.error(\"Error serving index:\", error);\n return c.text(\"Error loading page\", 500);\n }\n});\n\nexport default app;",[142,202],{"_143":245,"_99":246,"_104":333,"_146":132,"_286":334},["D",1747967093049],[335],{"_102":243,"_146":132,"_143":245,"_95":244,"_154":249,"_152":248,"_99":31,"_145":214,"_104":333,"_147":246,"_156":-5,"_149":150,"_155":27,"_98":336},[213,244],{"_143":255,"_99":256,"_104":338,"_146":132,"_286":339},["D",1747967087535],[340],{"_102":253,"_146":132,"_143":255,"_95":254,"_154":258,"_152":170,"_99":31,"_145":214,"_104":338,"_147":256,"_156":-5,"_149":150,"_155":27,"_98":341},[213,254],{"_143":227,"_99":228,"_104":343,"_146":132,"_286":344},["D",1747967081001],[345],{"_102":225,"_146":132,"_143":227,"_95":226,"_154":230,"_152":170,"_99":31,"_145":221,"_104":343,"_147":228,"_156":-5,"_149":150,"_155":27,"_98":346},[213,220,226],{"_143":214,"_99":215,"_104":348,"_146":132,"_286":349},["D",1747967059586],[350,352,355],{"_102":212,"_146":132,"_143":214,"_95":213,"_154":-5,"_152":153,"_99":31,"_145":-5,"_104":348,"_147":215,"_156":-5,"_149":150,"_155":27,"_98":351},[213],{"_102":219,"_146":132,"_143":221,"_95":220,"_154":-5,"_152":153,"_99":31,"_145":214,"_104":353,"_147":215,"_156":-5,"_149":150,"_155":27,"_98":354},["D",1747967059586],[213,220],{"_102":234,"_146":132,"_143":236,"_95":235,"_154":238,"_152":170,"_99":31,"_145":221,"_104":356,"_147":215,"_156":-5,"_149":150,"_155":27,"_98":357},["D",1747967059586],[213,220,235],{"_143":203,"_99":359,"_104":360,"_146":132,"_286":361},6,["D",1747967046357],[362],{"_102":363,"_146":132,"_143":203,"_95":202,"_154":330,"_152":170,"_99":31,"_145":144,"_104":360,"_147":359,"_156":-5,"_149":27,"_155":27,"_98":364},"004828b6-377d-11f0-b5e5-9e149126039e",[142,202],{"_143":194,"_99":188,"_104":366,"_146":132,"_286":367},["D",1747967036218],[368,370],{"_102":192,"_146":132,"_143":194,"_95":193,"_154":196,"_152":170,"_99":31,"_145":187,"_104":366,"_147":188,"_156":-5,"_149":150,"_155":27,"_98":369},[142,186,193],{"_102":185,"_146":132,"_143":187,"_95":186,"_154":-5,"_152":153,"_99":31,"_145":144,"_104":371,"_147":188,"_156":-5,"_149":150,"_155":27,"_98":372},["D",1747967036218],[142,186],{"_143":177,"_99":178,"_104":374,"_146":132,"_286":375},["D",1747967023462],[376],{"_102":175,"_146":132,"_143":177,"_95":176,"_154":180,"_152":170,"_99":31,"_145":162,"_104":374,"_147":178,"_156":-5,"_149":150,"_155":27,"_98":377},[142,161,176],{"_143":168,"_99":148,"_104":379,"_146":132,"_286":380},["D",1747967012403],[381,383,386],{"_102":166,"_146":132,"_143":168,"_95":167,"_154":171,"_152":170,"_99":31,"_145":162,"_104":379,"_147":148,"_156":-5,"_149":150,"_155":27,"_98":382},[142,161,167],{"_102":141,"_146":132,"_143":144,"_95":142,"_154":-5,"_152":153,"_99":31,"_145":-5,"_104":384,"_147":148,"_156":-5,"_149":150,"_155":27,"_98":385},["D",1747967012403],[142],{"_102":160,"_146":132,"_143":162,"_95":161,"_154":-5,"_152":153,"_99":31,"_145":144,"_104":387,"_147":148,"_156":-5,"_149":150,"_155":27,"_98":388},["D",1747967012403],[142,161],{"_143":265,"_99":205,"_104":390,"_146":132,"_286":391},["D",1747967007860],[392,394],{"_102":263,"_146":132,"_143":265,"_95":264,"_154":-5,"_152":153,"_99":31,"_145":-5,"_104":390,"_147":205,"_156":-5,"_149":150,"_155":27,"_98":393},[264],{"_102":269,"_146":132,"_143":271,"_95":270,"_154":273,"_152":170,"_99":31,"_145":265,"_104":395,"_147":205,"_156":-5,"_149":150,"_155":27,"_98":396},["D",1747967007860],[264,270],{"_143":280,"_99":281,"_104":398,"_146":132,"_286":399},["D",1747967004604],[400],{"_102":278,"_146":132,"_143":280,"_95":279,"_154":283,"_152":248,"_99":31,"_145":-5,"_104":398,"_147":281,"_156":-5,"_149":150,"_155":27,"_98":401},[279],"page","hasNext","routes/_app","actionData","errors"]

History