TaskFlow — Frontend Task Management System

TaskFlow is a minimal task management system built as a frontend-only application.
It simulates real-world project management features such as authentication, project listing, task creation, filtering, and status updates using a mock API layer.

---

🚀 Tech Stack

• React (TypeScript)
• React Router
• React Bootstrap
• Axios
• Context API (Auth + Theme)
• Mock API (in-memory simulation)
• Docker + Nginx (production build)

---

📌 Features

🔐 Authentication

• Login / Register (mock authentication)
• Persistent auth state using Context + localStorage
• Protected routes

📁 Projects

• View all projects
• Navigate to project details

✅ Tasks

• Create task (modal UI)
• View tasks under a project
• Filter tasks by status:
  • Todo
  • In Progress
  • Done
• Update task status
• Delete task

🌙 UI Features

• Dark / Light mode toggle (persistent)
• Responsive UI (mobile + desktop)
• Clean Bootstrap-based layout
• Loading and empty states

---

🧠 Architecture Decisions

1. Frontend-only Mock API

Instead of a real backend, I implemented a mock API layer using in-memory data structures.
This allowed full simulation of:

• CRUD operations
• async behavior using Promises
• realistic API response delays

---

2. Context API for State Management

Used React Context for:

• Authentication state
• Theme (dark/light mode)

This avoided prop drilling and kept global state centralized.

---

3. Component Design

• Pages are separated from reusable components
• TaskModal is reusable and isolated
• API logic separated in /api

---

4. Tradeoffs

• No backend integration (intentionally for frontend scope)
• No persistent database (data resets on refresh in mock layer)
• Filtering is client-side only

---

📦 Running Locally

1. Clone the repository

git clone https://github.com/Amit1405/taskflow-Amit-Chhipa.git
cd frontend

### 2. Install Dependencies 
npm install

### 3. Start Development Server
npm start