Log inSign up
project logo

stevekrouse

todo-test-app

Public
Remixed
Simple todo list app with React UI and SQLite persistence
Edit with AI
1 Branch
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Sign up now
index.ts
README.md

📝 Todo List App

A simple todo list app built with client-side React and a Hono API backend on Val Town. Todos persist in SQLite — they survive page reloads and server restarts.

Features

  • ✅ Add todos
  • ☑️ Toggle done / not done
  • 🗑️ Delete todos
  • 📊 Remaining count
  • 💾 SQLite persistence (val-scoped database)

Architecture

Rendering mermaid diagram...

File structure

index.ts                      ← Hono backend (serves frontend + todo API)
frontend/
  index.html                  ← HTML shell (loads Twind + React)
  index.tsx                   ← React entrypoint (mounts <App />)
  favicon.svg                 ← App icon
  components/
    App.tsx                    ← Root component (layout + view source link)
    TodoApp.tsx                ← Todo UI (add, toggle, delete)

API

MethodRouteBodyDescription
GET/api/todos—List all todos
POST/api/todos{ "text": "..." }Create a todo
PATCH/api/todos/:id{ "done": true } and/or { "text": "..." }Update a todo
DELETE/api/todos/:id—Delete a todo

How it works

  1. index.ts is the HTTP entrypoint — a Hono server that serves the frontend and the REST API. On startup it creates the todos table if it doesn't already exist.
  2. frontend/index.html loads Twind (Tailwind at runtime) and the React entrypoint.
  3. frontend/index.tsx mounts the React app.
  4. frontend/components/App.tsx is the root layout — renders <TodoApp />.
  5. frontend/components/TodoApp.tsx is the main UI — fetches, creates, toggles, and deletes todos via the API.