🗂️ TaskFlow

TaskFlow is a full-stack task management application that allows users to create, update, edit, and delete tasks with secure authentication. It features a responsive UI, JWT-based authentication, and stores data in MongoDB.

---

🌟 Features

✨ User Signup & Login
🔐 Secure authentication using JWT & bcrypt
📝 Create tasks with:

• Task title
• Task description
• Due date

✏️ Edit & update tasks
🗑️ Delete tasks
📱 Fully responsive design
💾 MongoDB database integration

---

🌐 Live Preview

🚀 Live Demo:
👉 TaskFlow Live Preview

Backend deployed separately and connected via REST API.

---

🛠️ Tech Stack

🚀 Frontend

• Next.js
• Tailwind CSS

⚙️ Backend

• Node.js
• Express.js
• MongoDB
• JWT
• bcrypt
• dotenv
• cors

---

📂 Folder Structure

TaskFlow/
│
├── backend/
│   ├── middleware/
│   │   └── authMiddleware.js
│   │
│   ├── models/
│   │   ├── Task.js
│   │   └── User.js
│   │
│   ├── routes/
│   │   ├── auth.js
│   │   ├── profile.js
│   │   └── tasks.js
│   │
│   ├── index.js
│   ├── package.json
│   └── package-lock.json
│
├── taskflow-frontend/
│   ├── app/
│   │   ├── login/
│   │   │   └── page.js
│   │   ├── signup/
│   │   │   └── page.js
│   │   ├── favicon.ico
│   │   ├── globals.css
│   │   ├── layout.js
│   │   └── page.js
│   │
│   ├── components/
│   │   ├── Footer.js
│   │   ├── Navbar.js
│   │   └── Tasks.js
│   │
│   ├── contexts/
│   │   └── AuthContext.js
│   │
│   ├── hooks/
│   │   └── useFetch.js
│   │
│   ├── public/
│   │   ├── file.svg
│   │   ├── github.svg
│   │   ├── globe.svg
│   │   ├── login.jpg
│   │   ├── login1.avif
│   │   ├── logo.png
│   │   ├── next.svg
│   │   ├── sugnup.avif
│   │   ├── task.jpg
│   │   ├── vercel.svg
│   │   └── window.svg
│   │
│   ├── styles/
│   │   └── globals.css
│   │
│   ├── .gitignore
│   ├── eslint.config.mjs
│   ├── jsconfig.json
│   ├── next.config.mjs
│   ├── postcss.config.mjs
│   ├── package.json
│   └── package-lock.json
│
├── .gitignore
├── MobileView.png
├── TaskFlowHome.png
├── TaskFlowLogIn.png
├── TaskFlowSignUp.png
└── package-lock.json

---

⚡ Installation & Setup

1️⃣ Clone the Repository

git clone https://github.com/Abad-Ali/TaskFlow.git
cd TaskFlow

---

2️⃣ Backend Setup

cd backend
npm install

Create a .env file:

PORT=5000
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret

Run the backend server:

npm start

---

3️⃣ Frontend Setup

cd taskflow-frontend
npm install
npm run dev

---

🔒 Authentication

• Users must sign up or log in
• JWT is used for secure authorization
• Passwords are hashed using bcrypt
• Protected routes secured via auth middleware

---

📱 Responsive UI

TaskFlow is optimized for:

• 📱 Mobile devices
• 💻 Laptops
• 🖥️ Desktop screens

---

🤝 Contributing

Contributions are welcome! Fork the repo, create a new branch, and submit a pull request 🚀

---

📸 Screenshots

Click to expand

---

👤 Author

Abad Ali

Thanks for checking out TaskFlow! Feel free to star ⭐ this repo.