---

🖥️ Kanban Board Frontend

This is the frontend application for the Kanban Task Management system.
It provides a beautiful drag-and-drop interface to manage tasks across Todo, Progress, and Completed columns.
Built with React.js, it integrates with the backend API to store boards and tasks.

---

🔗 Live Site
📂 Backend Repository

🚀 Features

• User authentication (via Firebase)
• Create, update, and delete boards
• Add, update, delete tasks
• Drag-and-drop tasks between columns with instant UI updates
• Optimistic UI updates (instant UI changes before backend confirmation)
• Backend sync (MongoDB + Express)
• Toast notifications for actions

---

🛠️ Tech Stack

• React.js (Frontend library)
• React Router (Routing)
• Tailwind CSS (Styling)
• @dnd-kit/core (Drag-and-drop)
• Axios (API calls)
• LocalStorage (Temporary storage before backend integration)

---

📂 Project Structure

kanban-frontend/
├── src/
│   ├── components/
│   │   ├── TaskColumn.jsx         # Task column UI (Todo/Progress/Completed)
│   │   ├── AddTaskModal.jsx       # Modal for adding tasks
│   │   ├── NavBar.jsx             # Navigation bar
│   ├── context/
│   │   ├── BoardContext.js        # Board and task state management
│   ├── pages/
│   │   ├── Board.jsx              # Single board page with columns
│   │   ├── Home.jsx               # Board list page
│   ├── utils/
│   │   ├── helper.js              # Helper functions for saving/loading boards
│   ├── App.js
│   ├── main.jsx
├── public/
├── package.json
└── README.md

---

⚙️ Installation & Setup

1️⃣ Clone the repository

git clone https://github.com/your-username/kanban-frontend.git
cd kanban-frontend

2️⃣ Install dependencies

npm install

3️⃣ Configure environment variables

Create a .env file in the root directory:

VITE_API_URL=http://localhost:5000

4️⃣ Run the development server

npm run dev

The frontend will run at http://localhost:5173

---

🧪 Features in Detail

1. Create a Board

• Click the "Add Board" button.
• Provide a board name and select a color.
• Board will be saved in localStorage (or backend if connected).

2. Add a Task

• Click the + button in any column (Todo/Progress/Completed).
• Fill the task title in the modal.
• Task will be added to the respective column.

3. Drag & Drop Tasks

• Drag a task card from one column to another.
• The task status updates automatically.
• The column dynamically expands and collapses while dragging.

4. Delete Tasks

• Click the delete (🗑️) icon to remove a task.
• The UI updates instantly.

---

🖱️ Drag-and-Drop Explanation

We use @dnd-kit for drag-and-drop functionality:

• useDraggable → Makes a task draggable.
• useDroppable → Makes each column a drop zone.
• When a task is dragged over a column, that column expands dynamically.
• On drop, the task status updates and is saved to localStorage or backend.

---

📌 API Integration

If you are connected to the backend:

• Boards and tasks are synced with MongoDB.

• API Endpoints:

  • GET /api/boards → Fetch boards
  • POST /api/boards → Create a new board
  • POST /api/boards/:boardId/tasks → Add a task
  • PATCH /api/boards/:boardId/tasks/:taskId → Update task status
  • DELETE /api/boards/:boardId/tasks/:taskId → Delete a task

For now, the frontend also supports localStorage mode for offline usage.

---

🧑‍💻 Scripts

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm run preview	Preview production build

---

🏗️ Future Improvements

• User authentication (Firebase or JWT)
• Realtime updates with WebSockets
• Task priorities and due dates
• Board sharing with multiple users
• Dark mode toggle

---

📜 License

This project is licensed under the MIT License.

---

Would you also like me to add **frontend screenshots/gifs section** in README (with placeholders), so your GitHub project looks very attractive? (e.g. board view, drag-and-drop demo)