Todo App

A modern todo application built with React and @sqlife/react for local-first data management.

• ✅ Add, edit, and delete todos
• 📌 Pin important todos to the top
• ✓ Mark todos as completed
• 🔍 Filter todos by status (All, Active, Completed)
• 📱 Responsive design with Tailwind CSS
• 💾 Local-first data storage with SQLite

• Frontend: React 18.2.0 with TypeScript
• Database: SQLite via @sqlife/react
• Styling: Tailwind CSS
• Backend: Hono for serving static files
• Platform: Val Town

The app uses a SQLite table with the following structure:

CREATE TABLE todo (
  id TEXT PRIMARY KEY NOT NULL,
  title TEXT NOT NULL,
  completed BOOLEAN NOT NULL DEFAULT 0,
  created_at TEXT NOT NULL,
  updated_at TEXT NOT NULL,
  completed_at TEXT NOT NULL DEFAULT "",
  pinned INTEGER NOT NULL DEFAULT 0
)

├── index.ts                    # Main HTTP handler
├── frontend/
│   ├── index.html             # HTML template
│   ├── index.tsx              # React app entry point
│   └── components/
│       ├── App.tsx            # Main app component
│       ├── TodoItem.tsx       # Individual todo item
│       └── AddTodoForm.tsx    # Form for adding new todos
└── README.md

1. Add todos: Type in the input field and click "Add Todo" or press Enter
2. Complete todos: Click the checkbox next to any todo
3. Pin todos: Click the 📌 icon to pin important todos to the top
4. Edit todos: Click on the todo text to edit it inline
5. Delete todos: Click the 🗑️ icon to delete a todo
6. Filter todos: Use the All/Active/Completed buttons to filter the view

This app uses @sqlife/react which provides:

• Client-side SQLite database
• Reactive queries that automatically update the UI
• Offline-first functionality
• No server-side database required

The database is created automatically when the first todo is added.