To-Do MERN Application

A full-stack task management application built with the MERN stack (MongoDB, Express, React, Node.js). This app allows users to create, manage, and organize their tasks with features like search, filtering, priority levels, tags, and detailed statistics.

🔗 Live Demo: Click here

Features

User Management

• Authentication: Secure user signup and login with JWT tokens
• Profile Management: Upload and manage user profile pictures
• Session Persistence: Automatic session management with cookies

Task Management

• Create Tasks: Add tasks with title, description, due date, and priority
• Edit Tasks: Update task details anytime
• Delete Tasks: Remove tasks permanently
• Mark Complete: Track task completion status
• Priority Levels: Set tasks as Low, Medium, or High priority
• Tags: Organize tasks with custom tags
• Pin Important Tasks: Mark important tasks as pinned
• Due Date Tracking: Set and track task deadlines

Search & Filtering

• Search Bar: Real-time search across all tasks
• Filter by Date: View tasks for Today, Upcoming, or All Tasks
• Filter by Tags: View tasks grouped by tags
• Calendar View: Visual task calendar

Statistics Dashboard

• Task Overview: View total Pending, Completed, and Due tasks
• Pie Chart: Visual representation of task distribution
• Daily Quote: Inspirational quotes for motivation
• User Profile: Display user information and statistics

User Interface

• Responsive Design: Works on desktop and mobile devices
• Dark/Light Mode: Toggle between themes
• Smooth Animations: Framer Motion animations for better UX
• Sidebar Navigation: Easy access to different sections
• Modal Dialogs: Clean interface for task creation and search

---

Tech Stack

Frontend

• React - UI library
• Vite - Build tool
• Tailwind CSS - Styling
• Framer Motion - Animations
• Zustand - State management
• Axios - HTTP client
• React Hot Toast - Notifications
• Recharts - Data visualization
• Lucide Icons - Icon library

Backend

• Node.js - Runtime environment
• Express.js - Web framework
• MongoDB - Database
• Mongoose - ODM
• JWT - Authentication
• Cloudinary - Image hosting
• Multer - File upload

---

Installation

Prerequisites

• Node.js (v18+)
• MongoDB (local or cloud)
• Cloudinary account (for image uploads)

Clone Repository

git clone https://github.com/yourusername/To-Do_MERN.git
cd To-Do_MERN
cd backend
npm install
cd frontend
npm install

Create .env file in backend folder

PORT=5001
MONGODB_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret
CLOUDINARY_CLOUD_NAME=your_cloudinary_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret
NODE_ENV=development

Start backend server

cd backend
npm run dev

Start frontend development server

cd frontend
npm run dev

Project Structure

To-Do_MERN/
├── frontend/
│   ├── src/
│   │   ├── components/     # React components
│   │   ├── pages/          # Page components
│   │   ├── store/          # Zustand stores
│   │   ├── lib/            # Utilities and Axios config
│   │   ├── hooks/          # Custom hooks
│   │   └── assets/         # Images and static files
│   └── vite.config.js
├── backend/
│   ├── src/
│   │   ├── controller/     # Route handlers
│   │   ├── routes/         # API routes
│   │   ├── model/          # MongoDB schemas
│   │   ├── middleware/     # Custom middleware
│   │   └── lib/            # Utilities
│   ├── index.js            # Server entry point
│   └── .env
└── README.md