🚀 TaskFlow

Smart Task Manager built with the MERN Stack

A modern full-stack task management application with secure authentication, CRUD operations, search, priority filters and a responsive dashboard.

---

✨ Features

🔐 Authentication User Registration Secure Login JWT Authentication Protected Routes	✅ Task Management Create Tasks Edit Tasks Delete Tasks Mark Complete / Pending
🔍 Productivity Search Tasks Filter by Priority Dashboard Statistics User-specific Tasks	⚡ User Experience Loading States Error Handling Responsive UI Cloud Data Persistence

---

🛠️ Tech Stack

Frontend

Backend

Tools & Deployment

Layer	Technologies
Frontend	React, Vite, React Router, Axios, CSS
Backend	Node.js, Express.js
Database	MongoDB, Mongoose
Authentication	JWT, bcryptjs
Deployment	Vercel, Render, MongoDB Atlas

---

📸 Project Preview

TaskFlow Dashboard

Login Page

Edit Task

---

🏗️ Project Architecture

TaskFlow follows a clean MERN architecture where the React frontend communicates with the Node.js + Express backend through REST APIs, while MongoDB Atlas handles persistent cloud data storage.

                         ┌─────────────────────┐
                         │        USER         │
                         └──────────┬──────────┘
                                    │
                                    ▼
                         ┌─────────────────────┐
                         │    React + Vite     │
                         │      Frontend       │
                         │      (Vercel)       │
                         └──────────┬──────────┘
                                    │
                                    │ Axios
                                    │ REST API
                                    ▼
                         ┌─────────────────────┐
                         │ Node.js + Express   │
                         │       Backend       │
                         │      (Render)       │
                         └──────────┬──────────┘
                                    │
                                    │ Mongoose
                                    ▼
                         ┌─────────────────────┐
                         │    MongoDB Atlas    │
                         │      Database       │
                         └─────────────────────┘

🔄 Application Flow

User
  │
  │ Register / Login
  ▼
React Frontend
  │
  │ POST /api/auth/login
  ▼
Express Backend
  │
  │ Verify Credentials
  │ Generate JWT
  ▼
JWT Token
  │
  │ Stored in Local Storage
  ▼
Protected Dashboard
  │
  │ Authorization: Bearer <token>
  ▼
Task APIs
  │
  ├── Create Task
  ├── Fetch Tasks
  ├── Update Task
  └── Delete Task
  │
  ▼
MongoDB Atlas

📁 Project Structure

TaskFlow/
│
├── client/
│   │
│   ├── src/
│   │   │
│   │   ├── components/
│   │   │   └── ProtectedRoute.jsx
│   │   │
│   │   ├── pages/
│   │   │   ├── Login.jsx
│   │   │   ├── Register.jsx
│   │   │   ├── Dashboard.jsx
│   │   │   ├── Auth.css
│   │   │   └── Dashboard.css
│   │   │
│   │   ├── services/
│   │   │   └── api.js
│   │   │
│   │   ├── App.jsx
│   │   ├── main.jsx
│   │   └── index.css
│   │
│   ├── .env.example
│   ├── package.json
│   └── vite.config.js
│
├── server/
│   │
│   ├── config/
│   │   └── db.js
│   │
│   ├── controllers/
│   │   ├── authController.js
│   │   └── taskController.js
│   │
│   ├── middleware/
│   │   └── authMiddleware.js
│   │
│   ├── models/
│   │   ├── User.js
│   │   └── Task.js
│   │
│   ├── routes/
│   │   ├── authRoutes.js
│   │   └── taskRoutes.js
│   │
│   ├── .env.example
│   ├── server.js
│   └── package.json
│
├── screenshots/
│   ├── login.png
│   ├── dashboard.png
│   └── edit-task.png
│
├── .gitignore
└── README.md

⚙️ Architecture Breakdown

Layer	Technology	Responsibility
🎨 Frontend	React + Vite	UI, state management and user interactions
🔗 API Client	Axios	Communication between frontend and backend
🧭 Routing	React Router	Navigation and protected routes
⚙️ Backend	Node.js + Express	REST APIs and application logic
🔐 Authentication	JWT + bcryptjs	Secure login and password protection
🛡️ Middleware	JWT Middleware	Protects private API routes
🗃️ Database	MongoDB + Mongoose	Stores users and tasks
☁️ Database Hosting	MongoDB Atlas	Cloud database infrastructure
▲ Frontend Hosting	Vercel	Production React deployment
🚀 Backend Hosting	Render	Production Express API deployment

---

---

⭐ Support the Project

If you found TaskFlow useful or liked the project, consider giving the repository a ⭐ on GitHub.

🚀 TaskFlow

Organize. Prioritize. Complete.

Built with ❤️ using the MERN Stack

React • Node.js • Express.js • MongoDB • JWT • Vercel • Render