TodoHub

A simple full-stack Todo application built with React, Express, and SQLite.

Features

• View todos sorted by status (active first, newest at top)
• Add new todos with instant optimistic UI
• Complete/uncomplete todos with a single click
• Delete todos with a 5-second undo window

Prerequisites

• Node.js 20+
• npm 10+

Getting Started

# Install dependencies
cd backend && npm install
cd ../frontend && npm install

Terminal 1 — Backend:

cd backend
npm run dev

Backend starts at http://localhost:3001. The SQLite database is created automatically on first run.

Terminal 2 — Frontend:

cd frontend
npm run dev

Open http://localhost:5173 in your browser.

Running Tests

cd backend && npm test
cd ../frontend && npm test

Tech Stack

Layer	Technology
Frontend	React 18, Vite, TypeScript
Backend	Express 5, TypeScript
Database	SQLite (better-sqlite3)
Testing	Vitest, React Testing Library

Project Structure

todohub/
├── backend/src/
│   ├── db.ts              # SQLite connection & schema
│   ├── models/todo.ts     # Data access layer
│   ├── routes/todos.ts    # REST API endpoints
│   ├── middleware/         # Error handling & validation
│   ├── app.ts             # Express setup
│   └── index.ts           # Server entry point
├── frontend/src/
│   ├── components/        # React components
│   ├── hooks/useTodos.ts  # State management
│   ├── services/api.ts    # HTTP client
│   └── types/todo.ts      # Shared types
└── specs/                 # Feature specifications

For detailed setup and API examples, see specs/001-todo-crud-app/quickstart.md.