TaskFlow - Task Management App

TaskFlow is a Full-Stack Next.js Task Management Platform where users can sign up, log in, manage tasks, edit their profile, and log out securely.
It features JWT authentication, MongoDB integration, and a modern responsive UI built with Tailwind CSS and shadcn/ui.

🔗 Live Demo: https://taskflow-app-nu.vercel.app
🎥 Video Demo: https://youtu.be/etYtdwYO5pQ

---

🧩 Features

• User Authentication: Secure signup, login, and logout using JWT.
• Task Management: Create, update, delete, and mark tasks as completed.
• User Profile: View and update your name and bio.
• Database Integration: MongoDB Atlas used for persistent storage.
• Responsive Design: Built with Tailwind CSS and shadcn/ui.
• Error Handling: Graceful API error handling and toast notifications.
• Fully Deployed: Live on Vercel with serverless API routes.

---

🛠️ Tech Stack

Frontend:

• Next.js (App Router)
• TypeScript
• Tailwind CSS
• shadcn/ui
• Redux Toolkit
• Axios
• Sonner (toast notifications)
• Lucide React (icons)

Backend:

• Next.js API Routes
• Node.js
• MongoDB (Mongoose)
• JWT Authentication

Deployment:

• Frontend & Backend → Vercel
• Database → MongoDB Atlas

---

⚙️ Environment Variables

Create a .env file in the project root and add the following:

# Database
MONGODB_URI=your_mongodb_connection_string

# JWT Secret
JWT_SECRET=your_jwt_secret_key

# App URLs
NEXT_PUBLIC_API_URL=http://localhost:3000

---

🚀 Getting Started

1️⃣ Clone the Repository

git clone https://github.com/your-username/taskflow-app.git
cd taskflow-app

2️⃣ Install Dependencies

npm install

3️⃣ Run the App

npm run dev

Visit: http://localhost:3000

---

📂 Folder Structure

TASKFLOW-APP
├── app
│   ├── api
│   │   ├── auth
│   │   │   ├── login
│   │   │   ├── register
│   │   │   └── me
│   │   ├── tasks
│   │   │   ├── create
│   │   │   ├── update
│   │   │   └── delete
│   ├── profile
│   ├── tasks
│   ├── layout.tsx
│   └── page.tsx
├── components
├── lib
│   ├── db.ts
│   ├── auth.ts
│   └── axios.ts
├── models
│   ├── User.ts
│   └── Task.ts
├── store
│   ├── authSlice.ts
│   ├── taskSlice.ts
│   └── index.ts
├── public
├── styles
│   └── globals.css
├── postman_collection.json
├── Scaling_Note_by_Aman.md
└── TaskFlow_Scaling_and_Production_Note_by_Aman.md

---

🧠 Approach & Decisions

• Used Next.js App Router with API routes for serverless backend.
• Connected MongoDB using a reusable connection function.
• JWT tokens stored in cookies for secure authentication.
• Profile and task data fetched using protected API routes.
• Optimized UX with toast notifications and responsive UI.

---

📄 Postman Collection / API Docs

A complete Postman collection is included at:

• postman_collection.json

It contains endpoints for authentication (signup/login/logout), fetching user profile, and task CRUD operations with JWT authorization headers.

---

🏗️ Scaling Notes

A detailed explanation of how I would scale the frontend-backend integration for production is included in the following files:

• TaskFlow_Scaling_and_Production_Note.md

These documents describe how I would:

• Separate the backend into a standalone service
• Implement secure environment management
• Add connection pooling and indexes in MongoDB
• Use HTTP-only cookies for JWT storage
• Optimize the frontend with ISR and lazy loading
• Set up CI/CD pipelines for automated deployment

---

📸 Screenshots

Login Page

Dashboard Page

Profile Update Page

MongoDB Atlas

---

💡 Future Improvements

• Implement dark mode.
• Add drag-and-drop task reordering.
• Enable profile picture upload.

---