🚀 TaskFlow — Task Management Dashboard

TaskFlow is a modern and responsive full-stack task management dashboard built with React, Tailwind CSS, Node.js, Express, and MongoDB.

It provides a clean interface for managing tasks, tracking progress, viewing deadlines, and monitoring overall productivity.

✨ Features

• 📊 Dynamic dashboard statistics
• 📋 Task management
• ➕ Add new tasks
• ✏️ Edit and manage tasks
• 🗑️ Delete tasks
• 🔄 Real-time task data from MongoDB
• 📈 Task completion progress
• ⏳ Pending / In Progress / Completed task statuses
• 📅 Upcoming deadline tracking
• 🌙 Dark Mode / ☀️ Light Mode
• 📱 Responsive design for desktop, tablet, and mobile
• ⚡ REST API powered by Express
• 🗄️ MongoDB Atlas database integration

Preview

🛠️ Tech Stack

Frontend

• React
• React Router
• Tailwind CSS
• Vite
• JavaScript

Backend

• Node.js
• Express.js
• MongoDB
• Mongoose
• CORS
• dotenv

📁 Project Structure

task2-dashboard/ │ ├── frontend/ │ ├── src/ │ │ ├── components/ │ │ ├── pages/ │ │ ├── context/ │ │ └── ... │ ├── package.json │ └── ... │ ├── backend/ │ ├── server.js │ ├── package.json │ ├── package-lock.json │ └── .env │ ├── .gitignore └── README.md

⚙️ Installation

1. Clone the repository

git clone YOUR_GITHUB_REPOSITORY_URL cd task2-dashboard

2. Install frontend dependencies

cd frontend npm install

3. Install backend dependencies

Open another terminal:

cd backend npm install

4. Configure environment variables

Create a ".env" file inside the "backend" folder.

Add your MongoDB connection string:

MONGO_URI=your_mongodb_connection_string PORT=5000

«Never commit your ".env" file to GitHub.»

▶️ Run the Project Locally

Start Backend

cd backend npx nodemon server.js

The backend will run on:

http://localhost:5000

Start Frontend

Open another terminal:

cd frontend npm run dev

Then open the local Vite URL shown in the terminal.

🔌 API

The backend provides REST API endpoints for task management.

Example:

GET /api/tasks POST /api/tasks PUT /api/tasks/:id DELETE /api/tasks/:id

🗄️ Database

TaskFlow uses MongoDB Atlas to store task information.

Each task can contain information such as:

• Title
• Category
• Status
• Due Date

🎨 Theme

TaskFlow supports both:

• ☀️ Light Mode
• 🌙 Dark Mode

The interface is designed to remain responsive and visually consistent across different screen sizes.

📱 Responsive Design

The dashboard is optimized for:

• Desktop
• Laptop
• Tablet
• Mobile devices

🚀 Deployment

The project can be deployed using services such as:

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

👨‍💻 Author

Sunny Kumar

B.Tech — Computer Science & Engineering

Technologies

React • JavaScript • Tailwind CSS • Node.js • Express • MongoDB • Git • GitHub

---

⭐ If you find this project useful, feel free to explore the repository and give it a star!