🚀 TaskFlow – Full Stack MERN Productivity App

TaskFlow is a modern full-stack productivity and task management web application built using the MERN stack (MongoDB, Express.js, React.js, and Node.js). The application helps users organize daily tasks securely with authentication, task priorities, due dates, Google Sign-In, protected routes, and a responsive animated dashboard.

The project focuses on clean UI/UX, real-world authentication systems, responsive frontend architecture, and scalable backend APIs. TaskFlow simulates the structure and workflow of modern SaaS productivity applications.

---

🌟 Features

🔐 Authentication

• JWT Authentication
• Secure Login & Registration
• Protected Routes
• Google OAuth Sign-In

✅ Task Management

• Create Tasks
• Edit Tasks
• Delete Tasks
• Mark Tasks as Completed
• Task Priority System
• Due Dates
• Progress Tracking

🎨 User Interface

• Fully Responsive Design
• Modern SaaS UI
• Framer Motion Animations
• Mobile Friendly Dashboard
• Smooth Hover Effects
• Interactive Components

⚙️ Backend Features

• REST API Architecture
• MongoDB Database Integration
• Express.js Server
• Authentication Middleware
• Secure Token Verification

---

🛠️ Tech Stack

Frontend

• React.js
• React Router DOM
• Axios
• Framer Motion
• CSS

Backend

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

Authentication

• JWT (JSON Web Token)
• Google OAuth

---

📂 Project Structure

TaskFlow/
│
├── backend/
│   ├── config/
│   ├── controllers/
│   ├── middleware/
│   ├── models/
│   ├── routes/
│   ├── server.js
│   └── .env
│
├── frontend/
│   ├── public/
│   ├── src/
│   │   ├── assets/
│   │   ├── components/
│   │   ├── pages/
│   │   ├── services/
│   │   ├── App.js
│   │   └── index.js
│   │
│   └── package.json
│
├── screenshots/
├── README.md
└── .gitignore

⚡ Installation Guide 1️⃣ Clone Repository git clone https://github.com/BandwarShlok/Task-Flow.git 2️⃣ Frontend Setup cd frontend

npm install

npm start

Frontend runs on:

http://localhost:3000 3️⃣ Backend Setup cd backend

npm install

npm start

Backend runs on:

http://localhost:5000 🔑 Environment Variables

Create a .env file inside backend folder.

MONGO_URI=your_mongodb_connection

JWT_SECRET=your_secret_key

GOOGLE_CLIENT_ID=your_google_client_id 🚀 Future Improvements Drag & Drop Tasks Dark / Light Theme Toggle Team Collaboration Calendar Integration Email Notifications Real-time Updates Task Categories Notes Support 🎯 Learning Outcomes

This project helped in understanding:

MERN Stack Architecture Authentication Systems REST APIs MongoDB Database Modeling Protected Routes Full Stack CRUD Operations Responsive UI Design State Management API Integration Real-world Project Structure 👨‍💻 Developer Shlok Bandwar

Full Stack MERN Developer

Skills React.js Node.js Express.js MongoDB JavaScript REST APIs JWT Authentication Responsive UI Development 📄 License

This project is created for educational and portfolio purposes.

⭐ Support

If you like this project, consider giving it a ⭐ on GitHub.

"# Task-Flow"