Task Manager Web App

A modern and responsive MERN Stack Task Manager that helps users organize daily tasks with an intuitive interface. Users can create, update, delete, search, filter, sort, and track task progress in real time.

Live Demo

• Frontend: https://task-manager-web-app-roan.vercel.app/
• Backend API: https://task-manager-web-app-nfi6.onrender.com

---

Features

• Create new tasks
• Edit existing tasks
• Delete tasks
• Toggle task completion
• Search tasks by title
• Filter by:
  • Status
  • Priority
  • Due Date
• Progress bar showing completed tasks
• Due date support
• Priority levels (High, Medium, Low)
• Fully responsive UI
• Loading skeletons for better UX
• Real-time updates using REST APIs

---

Tech Stack

Frontend

• React
• Tailwind CSS
• Axios
• React Hooks

Backend

• Node.js
• Express.js
• MongoDB
• Mongoose

Deployment

• Frontend: Vercel
• Backend: Render
• Database: MongoDB Atlas

---

Project Structure

task-manager/
│
├── client/
│   ├── components/
│   ├── hooks/
│   ├── pages/
│   ├── services/
│   └── App.jsx
│
└── server/
    ├── config/
    ├── controllers/
    ├── models/
    ├── routes/
    ├── app.js
    └── server.js

---

Getting Started

1. Clone the Repository

git clone https://github.com/jdcodebase/task-manager-web-app
cd task-manager-web-app

---

2. Install Dependencies

Client

cd client
npm install

Server

cd ../server
npm install

---

3. Environment Variables

Create a .env file inside the server folder.

PORT=5000
MONGO_URI=your_mongodb_connection_string
CLIENT_URL=http://localhost:5173

---

4. Run the Backend

cd server
npm run dev

---

5. Run the Frontend

cd client
npm run dev

The application will be available at:

Frontend: http://localhost:5173
Backend:  http://localhost:5000

---

API Endpoints

Method	Endpoint	Description
GET	/tasks	Get all tasks
POST	/tasks	Create a task
PUT	/tasks/:id	Update a task
PATCH	/tasks/:id/toggle	Toggle task status
DELETE	/tasks/:id	Delete a task

---

Author

Jatin Dhamija

• GitHub: https://github.com/jdcodebase
• LinkedIn: https://www.linkedin.com/in/jatindhamija/

---

License

This project is licensed under the MIT License.

---

If you found this project helpful, consider giving it a star on GitHub!