🚀 MERN Todo App with OTP Authentication

A modern, full-stack Todo application built with MERN stack featuring OTP-based email authentication, beautiful UI with Tailwind CSS, and JWT token management.

✨ Features

Authentication

• ✅ OTP-based Login - Secure email verification using 6-digit OTP
• ✅ Email Verification - Nodemailer integration for sending OTPs
• ✅ JWT Authentication - Secure token-based authentication with HTTP-only cookies
• ✅ Smart Redirections - Automatic routing based on user status
  • Existing users → Login → Home
  • New users → OTP → Signup → Home

Todo Management

• ✅ CRUD Operations - Create, Read, Update, Delete tasks
• ✅ Task Completion - Mark tasks as complete/incomplete
• ✅ Priority Levels - Low, Medium, High priority tags
• ✅ Filtering - View All, Pending, or Completed tasks
• ✅ Beautiful UI - Modern design with Tailwind CSS and smooth animations

🛠️ Tech Stack

Frontend:

• React 18
• React Router v6
• Tailwind CSS
• Axios
• React Hot Toast
• Lucide React Icons
• Vite

Backend:

• Node.js
• Express.js
• MongoDB with Mongoose
• JWT (jsonwebtoken)
• Nodemailer
• Cookie Parser
• CORS

📋 Prerequisites

Before running this project, make sure you have:

• Node.js (v16 or higher)
• MongoDB (running locally or MongoDB Atlas)
• Gmail account (for sending OTPs) with App Password enabled

🚀 Installation & Setup

1. Clone the repository

cd c:\Users\LENOVO\Desktop\fsd

2. Backend Setup

cd backend
npm install

3. Configure Environment Variables

Create a .env file in the backend folder:

PORT=5000
CLIENT_URL=http://localhost:3000

# MongoDB
MONGODB_URI=mongodb://localhost:27017/todo-app

# JWT Secret (change this to a random string)
JWT_SECRET=your_super_secret_jwt_key_change_this_to_random_string

# Email Configuration (Gmail)
EMAIL_USER=your-email@gmail.com
EMAIL_PASS=your-gmail-app-password

# OTP Expiry (in minutes)
OTP_EXPIRY=10

Important: To get Gmail App Password:

1. Go to Google Account Settings
2. Enable 2-Factor Authentication
3. Go to Security → App Passwords
4. Generate a new app password for "Mail"
5. Use that 16-character password in EMAIL_PASS

4. Frontend Setup

cd ../frontend
npm install

5. Start MongoDB

Make sure MongoDB is running:

# If using local MongoDB
mongod

Or use MongoDB Atlas (cloud) and update MONGODB_URI accordingly.

6. Run the Application

Terminal 1 - Backend:

cd backend
npm run dev

Terminal 2 - Frontend:

cd frontend
npm run dev

The application will be available at:

• Frontend: http://localhost:3000
• Backend: http://localhost:5000

📱 Usage

First Time User Flow:

1. Enter your email on login page
2. Receive OTP in your email
3. Enter the 6-digit OTP
4. Complete signup with your name
5. Get redirected to home page

Returning User Flow:

1. Enter your email on login page
2. Receive OTP in your email
3. Enter the 6-digit OTP
4. Get redirected directly to home page

Managing Tasks:

1. Add new tasks with title, description, and priority
2. Mark tasks as complete by clicking the checkbox
3. Edit tasks using the edit icon
4. Delete tasks using the trash icon
5. Filter tasks by All, Pending, or Completed

📁 Project Structure

fsd/
├── backend/
│   ├── controllers/
│   │   ├── authController.js
│   │   └── taskController.js
│   ├── middleware/
│   │   └── authMiddleware.js
│   ├── models/
│   │   ├── User.js
│   │   └── Task.js
│   ├── routes/
│   │   ├── authRoutes.js
│   │   └── taskRoutes.js
│   ├── utils/
│   │   ├── emailService.js
│   │   └── otpHelper.js
│   ├── server.js
│   ├── package.json
│   └── .env
│
└── frontend/
    ├── src/
    │   ├── api/
    │   │   └── axios.js
    │   ├── context/
    │   │   └── AuthContext.jsx
    │   ├── pages/
    │   │   ├── Login.jsx
    │   │   ├── VerifyOTP.jsx
    │   │   ├── Signup.jsx
    │   │   └── Home.jsx
    │   ├── App.jsx
    │   ├── main.jsx
    │   └── index.css
    ├── index.html
    ├── vite.config.js
    ├── tailwind.config.js
    └── package.json

🔐 API Endpoints

Authentication Routes

• POST /api/auth/send-otp - Send OTP to email
• POST /api/auth/verify-otp - Verify OTP
• POST /api/auth/signup - Complete user signup
• POST /api/auth/logout - Logout user
• GET /api/auth/me - Get current user (protected)

Task Routes (All Protected)

• GET /api/tasks - Get all tasks (with optional filter query)
• POST /api/tasks - Create new task
• PUT /api/tasks/:id - Update task
• DELETE /api/tasks/:id - Delete task
• PATCH /api/tasks/:id/toggle - Toggle task completion

🎨 UI Features

• Gradient Backgrounds - Beautiful purple-indigo gradients
• Smooth Animations - Hover effects and transitions
• Responsive Design - Works on all screen sizes
• Toast Notifications - User-friendly feedback messages
• Loading States - Spinners for async operations
• Icons - Lucide React icons for modern look

🔒 Security Features

• HTTP-only cookies for JWT storage
• OTP expiration (10 minutes by default)
• Protected API routes with JWT verification
• CORS configuration
• Secure password handling (OTP-based, no passwords stored)

🐛 Troubleshooting

OTP Email Not Sending

• Verify Gmail App Password is correct
• Check if 2FA is enabled on Gmail account
• Ensure EMAIL_USER and EMAIL_PASS are set in .env

MongoDB Connection Error

• Make sure MongoDB is running
• Verify MONGODB_URI in .env is correct
• Check MongoDB Atlas whitelist if using cloud

Frontend Not Connecting to Backend

• Verify backend is running on port 5000
• Check CORS settings in server.js
• Ensure proxy is configured in vite.config.js

📝 License

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

👨‍💻 Author

Created with ❤️ using MERN Stack

🙏 Acknowledgments

• React Team
• Express.js
• MongoDB
• Tailwind CSS
• Nodemailer

---

Happy Coding! 🚀