Todo List App

A modern, responsive todo list application built with Next.js 15, TypeScript, and Tailwind CSS.

Features

Core Functionality

• ✅ Add new todos - Create new tasks with a simple text input
• ✅ Mark todos as complete - Check off completed items
• ✅ Delete todos - Remove unwanted tasks
• ✅ Search todos - Find specific tasks using the search functionality
• ✅ Filter todos - View ALL, ACTIVE, or COMPLETED tasks
• ✅ Persistent storage - Todos are saved to localStorage

UI/UX Features

• 🌓 Dark mode toggle - Switch between light and dark themes
• 📱 Responsive design - Works perfectly on mobile and desktop
• 🎨 Modern purple/blue theme - Beautiful gradient backgrounds and styling
• 📊 Progress tracking - See completion statistics and progress
• ♿ Accessibility - Proper ARIA labels and keyboard navigation

Technical Features

• ⚡ Next.js 15 with App Router - Latest Next.js features and performance
• 🔷 TypeScript - Full type safety throughout the application
• 🎨 Tailwind CSS - Utility-first CSS framework for styling
• 🪝 Custom React Hooks - Modular, reusable logic
• 💾 localStorage Integration - Data persistence across sessions

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository

git clone <repository-url>
cd todo

2. Install dependencies

npm install

3. Run the development server

npm run dev

4. Open http://localhost:3000 in your browser

Usage

Adding Todos

• Type your task in the input field at the bottom
• Press Enter or click the + button to add

Managing Todos

• Click the checkbox to mark a todo as complete/incomplete
• Click the X button to delete a todo
• Use the search bar to find specific todos
• Use the filter dropdown to view ALL, ACTIVE, or COMPLETED todos

Theme Toggle

• Click the sun/moon icon to switch between light and dark modes
• Your preference is automatically saved

Project Structure

src/
├── app/
│   ├── layout.tsx          # Root layout with metadata
│   ├── page.tsx            # Main todo application page
│   └── globals.css         # Global styles
├── components/
│   ├── AddTodo.tsx         # Add new todo component
│   ├── SearchAndFilter.tsx # Search and filter controls
│   ├── TodoItem.tsx        # Individual todo item
│   └── TodoStats.tsx       # Statistics display
├── hooks/
│   ├── useTodos.ts         # Todo management logic
│   └── useDarkMode.ts      # Dark mode functionality
└── types/
    └── todo.ts             # TypeScript type definitions

Built With

• Next.js 15 - React framework with App Router
• TypeScript - Type-safe JavaScript
• Tailwind CSS - Utility-first CSS framework
• React 19 - UI library with latest features

License

This project is open source and available under the MIT License.