Log inSign up
project logo

sammitbadodekar

todo-app

Public
Remixed
Production-ready todo app with React + Hono + SQLite
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 App

A production-ready todo app built with React, Hono, and SQLite on Val Town.

Features

  • ✅ Add, edit (double-click), complete, and delete todos
  • 🔍 Filter by all / active / completed
  • 🧹 Clear all completed todos at once
  • ⚡ Optimistic UI updates with automatic rollback on failure
  • 💾 Persistent storage in val-scoped SQLite
  • 🛡️ Server-side input validation (1–500 chars, type checks)
  • 🚨 User-visible error messages + client errors surfaced to val logs

Architecture

Rendering mermaid diagram...

File structure

index.ts                  ← HTTP entrypoint: Hono server (static files + API)
backend/
  db.ts                   ← SQLite schema + query functions
shared/
  types.ts                ← Todo/Filter types shared by client & server
frontend/
  index.html              ← HTML shell (Twind + React)
  index.tsx               ← React entrypoint
  components/
    App.tsx               ← Root component: state, API calls, filters
    TodoInput.tsx         ← New-todo form
    TodoItem.tsx          ← Single todo row (toggle/edit/delete)

API

MethodPathDescription
GET/api/todosList all todos
POST/api/todosCreate — body: { text }
PATCH/api/todos/:idUpdate — body: { text?, completed? }
DELETE/api/todos/:idDelete a todo
POST/api/todos/clear-completedDelete all completed todos

All endpoints return JSON; errors are { error: string } with 400/404 status codes.

Notes

  • Data is stored in this val's scoped SQLite database (todos_v1 table).
  • Schema setup is idempotent (CREATE TABLE IF NOT EXISTS), safe across restarts.
  • All queries are parameterized — no SQL injection.