Todo Application

A modern, full-stack todo application built with Next.js 15, React 19, and MongoDB. Features user authentication, real-time todo management, and a beautiful responsive UI.

🚀 Features

• User Authentication: Secure login and registration system
• Todo Management: Create, read, update, and delete todos
• Real-time Updates: Instant UI updates with React Context
• Progress Tracking: Visual progress bar showing completion status
• Responsive Design: Mobile-first design with Tailwind CSS
• Data Persistence: MongoDB integration with Mongoose ODM
• JWT Authentication: Secure token-based authentication
• Modern UI: Beautiful gradient backgrounds and smooth animations

🛠️ Tech Stack

Frontend

• Next.js 15 - React framework with App Router
• React 19 - Latest React with new features
• Tailwind CSS 4 - Utility-first CSS framework
• Lucide React - Beautiful icon library
• React Toastify - Toast notifications

Backend

• Next.js API Routes - Serverless API endpoints
• MongoDB - NoSQL database
• Mongoose - MongoDB object modeling
• JWT - JSON Web Token authentication
• bcrypt - Password hashing

📁 Project Structure

todo/
├── app/                    # Next.js App Router
│   ├── api/               # API routes
│   │   ├── task/          # Todo CRUD endpoints
│   │   └── user/          # User authentication endpoints
│   ├── login/             # Login page
│   ├── register/          # Registration page
│   ├── layout.js          # Root layout
│   ├── page.js            # Home page
│   └── globals.css        # Global styles
├── components/             # React components
│   ├── AddTodo.js         # Add new todo form
│   ├── Card.js            # Statistics card component
│   ├── EditTodo.js        # Edit todo modal
│   ├── NavBar.js          # Navigation bar
│   ├── ProgressBar.js     # Progress visualization
│   ├── ShowTodo.js        # Individual todo display
│   └── TodoList.js        # Todo list container
├── context/                # React Context
│   └── TodoContext.js     # Global state management
├── lib/                    # Utility functions
├── models/                 # Database models
│   ├── todo.model.js      # Todo schema
│   └── user.model.js      # User schema
├── public/                 # Static assets
└── middleware.js           # Next.js middleware

🚀 Getting Started

Prerequisites

• Node.js 18+
• MongoDB database
• npm or yarn package manager

Installation

1. Clone the repository

   git clone <repository-url>
   cd todo

2. Install dependencies

   npm install

3. Environment Setup Create a .env.local file in the root directory:

   MONGODB_URI=your_mongodb_connection_string
   JWT_SECRET=your_jwt_secret_key

4. Run the development server

   npm run dev

5. Open your browser Navigate to http://localhost:3000

📱 Usage

Authentication

• Register: Create a new account with name, email, and password
• Login: Sign in with your credentials
• Secure Routes: Protected todo management after authentication

Todo Management

• Add Todo: Click the "Add Todo" button to create new tasks
• Edit Todo: Click the edit icon to modify existing todos
• Delete Todo: Remove todos with the delete button
• Mark Complete: Toggle todo completion status
• Progress Tracking: Monitor your productivity with the progress bar

Dashboard

• Statistics Cards: View total, completed, and remaining tasks
• Progress Bar: Visual representation of completion percentage
• Todo List: Organized display of all your tasks

🔧 Available Scripts

• npm run dev - Start development server with Turbopack
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint for code quality

🗄️ Database Schema

User Model

{
  name: String (required, min: 3),
  email: String (required, unique, min: 6),
  password: String (required, hashed),
  todos: [ObjectId references],
  timestamps: true
}

Todo Model

{
  text: String (required, min: 5),
  completed: Boolean (default: false),
  userId: ObjectId (required, references User),
  timestamps: true
}

🔒 Security Features

• Password Hashing: bcrypt for secure password storage
• JWT Tokens: Stateless authentication
• Input Validation: Mongoose schema validation
• Protected Routes: Middleware-based route protection
• Secure Headers: Next.js security middleware

🎨 UI/UX Features

• Gradient Backgrounds: Beautiful color schemes
• Responsive Grid: Mobile-first responsive design
• Smooth Animations: Enhanced user experience
• Toast Notifications: User feedback for actions
• Loading States: Better perceived performance

Happy Coding! 🎉