Todo List

A Next.js todo list application with TypeScript and Tailwind CSS.

Features

• Add, complete, and delete todos
• Optional due date with date picker when creating todos
• Filter todos by All, Today, or Overdue with count badges
• Overdue indicator: incomplete todos with past due dates show red styling
• Persistent storage with localStorage
• Jest + React Testing Library tests

Getting Started

npm run dev

Open http://localhost:3000 with your browser to see the result.

Testing

npm run test        # Run tests
npm run test:watch  # Run tests in watch mode
npm run test:coverage # Run tests with coverage report

Tech Stack

• Framework: Next.js 16 (App Router)
• Styling: Tailwind CSS v4
• Language: TypeScript (strict mode)
• Testing: Jest + React Testing Library

Project Structure

app/
  layout.tsx    # Root layout with fonts and metadata
  page.tsx      # Main page
components/
  TodoApp.tsx   # Main app container
  TodoInput.tsx # Todo input form with date picker
  TodoItem.tsx  # Individual todo item with overdue styling
  TodoList.tsx  # Todo list display
  FilterTabs.tsx # Filter tabs with count badges