📝 Todo List

\n {totalCount === 0 ? \"No todos yet\" : `${completedCount} of ${totalCount} completed`}\n

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

Loading todos...

\n ) : todos.length === 0 ? (\n

🎯

No todos yet

Add your first todo above to get started!

\n ) : (\n

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

\n )}\n

\n );\n}",[],[228,235,241],{"_106":249,"_96":250,"_158":251,"_160":236,"_161":141,"_162":230,"_164":165,"_108":252,"_102":32,"_167":185,"_169":253,"_170":22,"_171":-5,"_172":254,"_100":255},"33005990-6f1d-11f0-98ed-0224a6c84d84","TodoForm.tsx","33005abc-6f1d-11f0-98ed-0224a6c84d84",["D",1754083164879],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\n\ninterface TodoFormProps {\n onAddTodo: (text: string) => void;\n isLoading?: boolean;\n}\n\nexport default function TodoForm({ onAddTodo, isLoading = false }: TodoFormProps) {\n const [text, setText] = useState(\"\");\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n if (text.trim()) {\n onAddTodo(text.trim());\n setText(\"\");\n }\n };\n\n return (\n \n );\n}",[],[228,235,250],{"_106":257,"_96":258,"_158":259,"_160":236,"_161":141,"_162":260,"_164":165,"_108":261,"_102":32,"_167":185,"_169":262,"_170":22,"_171":-5,"_172":263,"_100":264},"395434c4-6f1d-11f0-a878-0224a6c84d84","TodoItem.tsx","3954356e-6f1d-11f0-a878-0224a6c84d84",8,["D",1754083175500],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport type { Todo } from \"../../shared/types.ts\";\n\ninterface TodoItemProps {\n todo: Todo;\n onToggle: (id: number) => void;\n onDelete: (id: number) => void;\n isUpdating?: boolean;\n}\n\nexport default function TodoItem({ todo, onToggle, onDelete, isUpdating = false }: TodoItemProps) {\n const formatDate = (dateString: string) => {\n return new Date(dateString).toLocaleDateString(\"en-US\", {\n month: \"short\",\n day: \"numeric\",\n hour: \"2-digit\",\n minute: \"2-digit\",\n });\n };\n\n return (\n

\n onToggle(todo.id)}\n disabled={isUpdating}\n className=\"w-5 h-5 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2\"\n />\n \n

\n {todo.text}\n

\n Created {formatDate(todo.created_at)}\n {todo.updated_at !== todo.created_at && (\n • Updated {formatDate(todo.updated_at)}\n )}\n

\n \n onDelete(todo.id)}\n disabled={isUpdating}\n className=\"p-2 text-red-600 hover:bg-red-50 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors\"\n title=\"Delete todo\"\n >\n \n \n

\n );\n}",[],[228,235,258],[228,235],{"_106":267,"_96":268,"_158":269,"_160":229,"_161":141,"_162":270,"_164":165,"_108":271,"_102":32,"_167":272,"_169":273,"_170":22,"_171":-5,"_172":274,"_100":275},"4b262428-6f1d-11f0-bfdc-0224a6c84d84","index.html","4b2624f0-6f1d-11f0-bfdc-0224a6c84d84",11,["D",1754083205394],"file","\n\n\n \n \n Todo List App\n \n \n\n\n

\n \n\n",[],[228,268],{"_106":277,"_96":278,"_158":279,"_160":229,"_161":141,"_162":280,"_164":165,"_108":281,"_102":32,"_167":185,"_169":282,"_170":22,"_171":-5,"_172":283,"_100":284},"48855e0a-6f1d-11f0-b29a-0224a6c84d84","index.tsx","48855edc-6f1d-11f0-b29a-0224a6c84d84",10,["D",1754083200985],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0,react-dom@18.2.0\";\nimport App from \"./components/App.tsx\";\n\nconst container = document.getElementById(\"root\");\nif (container) {\n const root = createRoot(container);\n root.render();\n} else {\n console.error(\"Root element not found\");\n}",[],[228,278],[228],{"_106":287,"_96":288,"_158":289,"_160":-5,"_161":141,"_162":220,"_164":165,"_108":290,"_102":32,"_167":168,"_169":-5,"_170":22,"_171":-5,"_172":291,"_100":300},"181acdcc-6f1d-11f0-897b-0224a6c84d84","shared","16d9fa24-0f59-40e7-9888-156d848be2bf",["D",1754083119753],[292],{"_106":293,"_96":294,"_158":295,"_160":289,"_161":141,"_162":220,"_164":165,"_108":296,"_102":32,"_167":185,"_169":297,"_170":22,"_171":-5,"_172":298,"_100":299},"181ac19c-6f1d-11f0-897b-0224a6c84d84","types.ts","181ac26e-6f1d-11f0-897b-0224a6c84d84",["D",1754083119753],"export interface Todo {\n id: number;\n text: string;\n completed: boolean;\n created_at: string;\n updated_at: string;\n}\n\nexport interface CreateTodoRequest {\n text: string;\n}\n\nexport interface UpdateTodoRequest {\n text?: string;\n completed?: boolean;\n}\n\nexport interface ApiResponse {\n success: boolean;\n data?: T;\n error?: string;\n}",[],[288,294],[288],{"_106":302,"_96":303,"_158":304,"_160":-5,"_161":141,"_162":194,"_164":22,"_108":305,"_102":32,"_167":272,"_169":306,"_170":22,"_171":-5,"_172":307,"_100":308},"15ecb2cc-6f1d-11f0-afb6-0224a6c84d84","README.md","15ecb484-6f1d-11f0-afb6-0224a6c84d84",["D",1754083116095],"# Todo List App\n\nA simple persistent todo list application built with:\n- **Backend**: Hono API framework with SQLite database\n- **Frontend**: React with TypeScript\n- **Styling**: TailwindCSS\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│ │ └── TodoForm.tsx # Add todo form\n│ ├── index.html # HTML template\n│ └── index.tsx # React entry point\n├── shared/\n│ └── types.ts # Shared TypeScript types\n└── README.md\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 backend serves both the API and static frontend files.",[],[303],"files",[155,174,180,189,199,206,215,226,233,239,248,256,266,276,286,292,301],"counts",{"_313":32,"_314":163,"_315":32,"_316":317},"pulls","branches","forks","envVars",{"_318":32,"_319":32},"count","emptyCount","contents",[322,325,328],{"_106":240,"_96":241,"_158":242,"_160":236,"_161":141,"_162":243,"_164":165,"_108":323,"_102":32,"_167":185,"_169":245,"_170":22,"_171":-5,"_100":324},["D",1754083196025],[228,235,241],{"_106":249,"_96":250,"_158":251,"_160":236,"_161":141,"_162":230,"_164":165,"_108":326,"_102":32,"_167":185,"_169":253,"_170":22,"_171":-5,"_100":327},["D",1754083164879],[228,235,250],{"_106":257,"_96":258,"_158":259,"_160":236,"_161":141,"_162":260,"_164":165,"_108":329,"_102":32,"_167":185,"_169":262,"_170":22,"_171":-5,"_100":330},["D",1754083175500],[228,235,258],{"_106":234,"_161":141,"_158":236,"_96":235,"_169":-5,"_167":168,"_102":32,"_160":229,"_108":332,"_162":230,"_171":-5,"_100":333},["D",1754083164879],[228,235],"upstreamProject","upstreamBranch",{"_106":144,"_108":337,"_338":339,"_96":44,"_142":107,"_102":146,"_143":-5,"_145":-5,"_340":341,"_110":-5,"_152":22,"_112":113,"_151":95,"_16":122,"_150":97},["D",1754073022039],"updatedAt",["D",1754080666692],"lockfileKey","1754080581284-esm.town_v_stevekrouse_ettsdfasf@11-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_94":95,"_96":97,"_98":99,"_102":103,"_100":101,"_104":348,"_153":353,"_309":405,"_272":406,"_320":409,"_416":417,"_420":-5,"_421":140,"_422":146,"_423":424},{"_106":107,"_96":97,"_108":349,"_110":-5,"_111":22,"_112":113,"_114":73,"_115":73,"_14":116,"_117":-5,"_118":22,"_119":-5,"_120":-5,"_121":32,"_16":122,"_123":124,"_125":124,"_126":127,"_128":127,"_129":127,"_130":124,"_131":124,"_23":350,"_135":351,"_138":352,"_152":22},["D",1754073022039],{"_94":95,"_133":134},{"_94":95,"_137":134,"_14":116},{"_102":140,"_96":99,"_106":141,"_142":107,"_143":144,"_145":146,"_147":113,"_148":107,"_149":122,"_150":97,"_151":95},[354,375,396,402],{"_106":156,"_96":157,"_158":159,"_160":-5,"_161":141,"_162":163,"_164":165,"_108":166,"_102":32,"_167":168,"_169":-5,"_170":22,"_171":-5,"_172":355,"_100":374},[356,365,371],{"_106":175,"_96":176,"_158":177,"_160":159,"_161":141,"_162":163,"_164":165,"_108":178,"_102":32,"_167":168,"_169":-5,"_170":22,"_171":-5,"_172":357,"_100":364},[358,361],{"_106":181,"_96":182,"_158":183,"_160":177,"_161":141,"_162":163,"_164":165,"_108":184,"_102":32,"_167":185,"_169":186,"_170":22,"_171":-5,"_172":359,"_100":360},[],[157,176,182],{"_106":190,"_96":191,"_158":192,"_160":177,"_161":141,"_162":103,"_164":22,"_108":193,"_102":194,"_167":185,"_169":195,"_170":22,"_171":-5,"_172":362,"_100":363},[],[157,176,191],[157,176],{"_106":200,"_96":201,"_158":202,"_160":159,"_161":141,"_162":203,"_164":165,"_108":204,"_102":32,"_167":168,"_169":-5,"_170":22,"_171":-5,"_172":366,"_100":370},[367],{"_106":207,"_96":208,"_158":209,"_160":202,"_161":141,"_162":203,"_164":165,"_108":210,"_102":32,"_167":185,"_169":211,"_170":22,"_171":-5,"_172":368,"_100":369},[],[157,201,208],[157,201],{"_106":216,"_96":217,"_158":218,"_160":159,"_161":141,"_162":146,"_164":165,"_108":219,"_102":220,"_167":221,"_169":222,"_170":22,"_171":-5,"_172":372,"_100":373},[],[157,217],[157],{"_106":227,"_96":228,"_158":229,"_160":-5,"_161":141,"_162":230,"_164":165,"_108":231,"_102":32,"_167":168,"_169":-5,"_170":22,"_171":-5,"_172":376,"_100":395},[377,389,392],{"_106":234,"_96":235,"_158":236,"_160":229,"_161":141,"_162":230,"_164":165,"_108":237,"_102":32,"_167":168,"_169":-5,"_170":22,"_171":-5,"_172":378,"_100":388},[379,382,385],{"_106":240,"_96":241,"_158":242,"_160":236,"_161":141,"_162":243,"_164":165,"_108":244,"_102":32,"_167":185,"_169":245,"_170":22,"_171":-5,"_172":380,"_100":381},[],[228,235,241],{"_106":249,"_96":250,"_158":251,"_160":236,"_161":141,"_162":230,"_164":165,"_108":252,"_102":32,"_167":185,"_169":253,"_170":22,"_171":-5,"_172":383,"_100":384},[],[228,235,250],{"_106":257,"_96":258,"_158":259,"_160":236,"_161":141,"_162":260,"_164":165,"_108":261,"_102":32,"_167":185,"_169":262,"_170":22,"_171":-5,"_172":386,"_100":387},[],[228,235,258],[228,235],{"_106":267,"_96":268,"_158":269,"_160":229,"_161":141,"_162":270,"_164":165,"_108":271,"_102":32,"_167":272,"_169":273,"_170":22,"_171":-5,"_172":390,"_100":391},[],[228,268],{"_106":277,"_96":278,"_158":279,"_160":229,"_161":141,"_162":280,"_164":165,"_108":281,"_102":32,"_167":185,"_169":282,"_170":22,"_171":-5,"_172":393,"_100":394},[],[228,278],[228],{"_106":287,"_96":288,"_158":289,"_160":-5,"_161":141,"_162":220,"_164":165,"_108":290,"_102":32,"_167":168,"_169":-5,"_170":22,"_171":-5,"_172":397,"_100":401},[398],{"_106":293,"_96":294,"_158":295,"_160":289,"_161":141,"_162":220,"_164":165,"_108":296,"_102":32,"_167":185,"_169":297,"_170":22,"_171":-5,"_172":399,"_100":400},[],[288,294],[288],{"_106":302,"_96":303,"_158":304,"_160":-5,"_161":141,"_162":194,"_164":22,"_108":305,"_102":32,"_167":272,"_169":306,"_170":22,"_171":-5,"_172":403,"_100":404},[],[303],[354,356,358,361,365,367,371,375,377,379,382,385,389,392,396,398,402],{"_106":234,"_96":235,"_158":236,"_160":229,"_161":141,"_162":230,"_164":165,"_108":407,"_102":32,"_167":168,"_169":-5,"_170":22,"_171":-5,"_100":408},["D",1754083164879],[228,235],[410,412,414],{"_106":240,"_96":241,"_158":242,"_160":236,"_161":141,"_162":243,"_164":165,"_108":323,"_102":32,"_167":185,"_169":245,"_170":22,"_171":-5,"_100":411},[228,235,241],{"_106":249,"_96":250,"_158":251,"_160":236,"_161":141,"_162":230,"_164":165,"_108":326,"_102":32,"_167":185,"_169":253,"_170":22,"_171":-5,"_100":413},[228,235,250],{"_106":257,"_96":258,"_158":259,"_160":236,"_161":141,"_162":260,"_164":165,"_108":329,"_102":32,"_167":185,"_169":262,"_170":22,"_171":-5,"_100":415},[228,235,258],"upstream",{"_106":144,"_108":418,"_338":419,"_96":44,"_142":107,"_102":146,"_143":-5,"_145":-5,"_340":341,"_110":-5,"_152":22,"_112":113,"_151":95,"_16":122,"_150":97},["D",1754073022039],["D",1754080666692],"pull","ahead","behind","templates",[],"actionData","errors"]

stevekrouse

todo-list-test