TODO Task Management System

A full-stack task management application with Japanese language support, built with TypeScript, React, and Express.js.

Features

• ✅ Create, read, update, and delete tasks
• 📅 Set deadlines for tasks
• ⚠️ Visual warnings for approaching and overdue deadlines
• ✓ Mark tasks as completed
• 🇯🇵 Japanese date formatting (YYYY年MM月DD日 HH:mm)
• 📱 Responsive web interface
• 🚀 Real-time updates with React Query

Deadline Warnings

• Yellow highlight: Tasks due within 3 days (期限が近づいています)
• Red highlight: Overdue tasks (期限を過ぎています)

Tech Stack

Backend

• Node.js 22
• Express.js 5
• TypeScript
• SQLite3 (better-sqlite3)
• Zod for validation
• Winston for logging

Frontend

• React 19
• TypeScript
• React Router v7
• React Query (TanStack Query)
• Vite
• Axios

Prerequisites

• Node.js 22.x or higher
• npm 11.x or higher

Installation

1. Clone the repository:

git clone https://github.com/serverless-operations/todo-app-using-spec-kit.git
cd todo-app

2. Install dependencies:

# Install all dependencies (root, backend, and frontend)
npm run install:all

Development

Run both backend and frontend:

npm run dev

This will start:

• Backend API server on http://localhost:4000
• Frontend dev server on http://localhost:5173

Run services individually:

Backend only:

npm run dev:backend

Frontend only:

npm run dev:frontend

Building for Production

# Build both backend and frontend
npm run build

# Start production server
npm run start

Testing

Run all tests:

npm run test

Run backend tests:

npm run test:backend

Run frontend tests:

npm run test:frontend

Test Coverage:

cd backend && npm run test:coverage
cd frontend && npm run test:coverage

Project Structure

todo-app/
├── backend/
│   ├── src/
│   │   ├── db/           # Database initialization
│   │   ├── middleware/   # Express middleware
│   │   ├── models/       # Data models and validation
│   │   ├── routes/       # API routes
│   │   ├── services/     # Business logic
│   │   ├── types/        # TypeScript types
│   │   └── utils/        # Utility functions
│   ├── tests/
│   │   ├── contract/     # API contract tests
│   │   ├── integration/  # Integration tests
│   │   └── unit/        # Unit tests
│   └── data/            # SQLite database file
├── frontend/
│   ├── src/
│   │   ├── components/  # React components
│   │   ├── hooks/       # Custom React hooks
│   │   ├── pages/       # Page components
│   │   ├── providers/   # Context providers
│   │   ├── services/    # API services
│   │   └── types/       # TypeScript types
│   └── tests/          # Frontend tests
├── docs/               # Documentation
└── specs/             # Specifications

API Documentation

See docs/api.md for detailed API documentation.

Quick API Reference

Method	Endpoint	Description
GET	/api/tasks	Get all active tasks
GET	/api/tasks/completed	Get completed tasks
GET	/api/tasks/:id	Get task by ID
POST	/api/tasks	Create new task
PUT	/api/tasks/:id	Update task
DELETE	/api/tasks/:id	Delete task
PATCH	/api/tasks/:id/complete	Mark task as complete

Environment Variables

Backend (.env)

PORT=4000
FRONTEND_URL=http://localhost:5173

Frontend (.env)

VITE_API_URL=http://localhost:4000

Database

The application uses SQLite for data persistence. The database file is automatically created at backend/data/tasks.db on first run.

Database Schema

CREATE TABLE tasks (
  id TEXT PRIMARY KEY,
  content TEXT NOT NULL,
  deadline TEXT NOT NULL,
  status TEXT NOT NULL,
  created_at TEXT NOT NULL,
  completed_at TEXT
)

Scripts

Root package.json

• npm run dev - Run both backend and frontend in development mode
• npm run build - Build both backend and frontend
• npm run start - Start production server
• npm run test - Run all tests
• npm run install:all - Install all dependencies

Backend Scripts

• npm run dev - Start development server with hot reload
• npm run build - Compile TypeScript to JavaScript
• npm run start - Start production server
• npm run test - Run tests
• npm run db:init - Initialize database

Frontend Scripts

• npm run dev - Start Vite dev server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License.

Acknowledgments

Built with Spec-Driven Development methodology.