📈 Reacti-Do - The Ultimate MERN Stack To-Do List App

Reacti-Do is a sleek, high-performance MERN stack (MongoDB, Express, React, Node.js) based to-do list application.

It offers user authentication, protected routes, dynamic theming, smooth UI transitions, and CRUD operations for lists and items — all optimized with best practices, modern design, and full SEO support!

---

📸 Preview

Here are some screenshots showcasing Reacti-Do:

---

📁 Folder Structure

reacti-do/
│
├── backend/
│   ├── package-lock.json
│   ├── package.json
│   └── src/
│       ├── server.js
│       ├── controllers/
│       │   ├── auth.controller.js
│       │   ├── todoItem.controller.js
│       │   └── todoList.controller.js
│       ├── data/
│       │   └── seedDataForExisting.js
│       ├── lib/
│       │   ├── cloudinary.js
│       │   ├── db.js
│       │   └── utils.js
│       ├── middleware/
│       │   └── protectRoute.middleware.js
│       ├── models/
│       │   ├── todoItem.model.js
│       │   ├── todoList.model.js
│       │   └── user.model.js
│       └── routes/
│           ├── auth.route.js
│           ├── todoItem.route.js
│           └── todoList.route.js
│
├── frontend/
│   ├── package-lock.json
│   ├── package.json
│   ├── public/
│   │   └── logo.svg
│   │   └── manifest.json
│   │   └── robots.txt
│   │   └── sitemap.xml
│   └── src/
│       ├── assets/
│       │   ├── login.svg
│       │   └── signup.svg
│       ├── components/
│       │   ├── AuthenticationRightSide.jsx
│       │   ├── AuthRoute.jsx
│       │   ├── CreatorInput.jsx
│       │   ├── EditableInput.jsx
│       │   ├── Header.jsx
│       │   ├── InputField.jsx
│       │   ├── ProtectedRoute.jsx
│       │   ├── TodoItems.jsx
│       │   └── TodoLists.jsx
│       ├── lib/
│       │   ├── axiosInstance.js
│       │   ├── constants.js
│       │   └── utils.js
│       ├── pages/
│       │   ├── HomePage.jsx
│       │   ├── LoginPage.jsx
│       │   ├── ProfilePage.jsx
│       │   ├── SettingsPage.jsx
│       │   └── SignupPage.jsx
│       ├── store/
│       │   ├── useAuthStore.js
│       │   ├── useThemeStore.js
│       │   ├── useTodoItemStore.js
│       │   └── useTodoListStore.js
│       ├── App.jsx
│       ├── index.css
│       └── main.jsx
│
├── .vscode/
├── .gitignore
├── .env-example
├── LICENSE
└── README.md

---

🚀 Features

• User authentication (signup, login, logout, profile update)
• Secured user-specific CRUD operations
• Create, update, and delete todo lists
• Add, edit, complete, and delete todo items
• Profile management with profile picture upload
• Theme selection (multiple themes) 35 unique Themes
• Responsive and modern UI
• Toast notifications for actions
• Protected routes for authenticated users
• Clean, intuitive user interface for ultimate productivity.

---

🛠️ Tech Stack

🧩 Frontend

⚙️ Backend

---

⚡ Getting Started

Prerequisites

• Node.js (v22+ recommended)
• npm
• Express.js version 5
• MongoDB instance (local or cloud)
• Cloudinary account (for profile picture uploads)

1. Setup Instructions

# Clone the repository
git clone https://github.com/thekiranmahajan/reacti-do.git
cd reacti-do

# Navigate to backend
cd reacti-do/backend
npm install

# Navigate to frontend
cd ../frontend
npm install

# Start backend server
cd ../backend
npm run dev

# Start frontend Vite dev server
cd ../frontend
npm run dev

2. Setup Environment Variables

Create a .env file in the root directory with the following (fill in your values):

MONGODB_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret
CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret
NODE_ENV=development
PORT=5000

📋 License

This project is licensed under the MIT License.

---

✨ Author

• Kiran Mahajan
• LinkedIn : thekiranmahajan

---

Built with 🥭 by Kiran Mahajan