Todo List App

A simple todo list application built for Val Town using React, Hono, and SQLite.

Features

  • Create, read, update, and delete todos
  • Mark todos as completed
  • Responsive design with Tailwind CSS
  • Optimistic UI updates for a smooth user experience
  • Persistent storage using Val Town's SQLite

Project Structure

├── backend/
│   ├── database/
│   │   └── queries.ts    # SQLite database operations
│   └── index.ts          # Hono API server
├── frontend/
│   ├── components/
│   │   └── App.tsx       # Main React component
│   ├── index.html        # HTML template
│   └── index.tsx         # React entry point
└── shared/
    └── types.ts          # Shared TypeScript interfaces

How It Works

Backend

  • Uses Hono as the web framework
  • Provides RESTful API endpoints for todo operations
  • Serves the frontend static files
  • Uses Val Town's SQLite for data persistence

Frontend

  • Built with React
  • Uses Tailwind CSS for styling
  • Communicates with the backend API
  • Implements optimistic UI updates

API Endpoints

  • GET /api/todos - Get all todos
  • GET /api/todos/:id - Get a specific todo
  • POST /api/todos - Create a new todo
  • PATCH /api/todos/:id - Update a todo
  • DELETE /api/todos/:id - Delete a todo

Getting Started

  1. Fork this project in Val Town
  2. The app will automatically create its database table on first run
  3. Access the app through your Val Town URL