Kanban Board

Real-time Kanban task board (Trello-like) with drag & drop and WebSocket live updates.

Tech Stack

• Frontend: React (Vite) + @dnd-kit
• Backend: Node.js + Express
• Database: JSON file (lowdb)
• Real-time: WebSocket (ws)

Features

• 3 columns: To Do, In Progress, Done
• Drag & drop cards between columns
• Create, edit, delete cards (title, description, color label)
• REST API: GET/POST/PUT/DELETE /api/tasks
• WebSocket: real-time sync across all clients
• Dark/light theme toggle
• Responsive design

Quick Start

# Install all dependencies
npm run install:all

# Start both frontend and backend
npm run dev

• Frontend: http://localhost:5173
• Backend API: http://localhost:3001
• WebSocket: ws://localhost:3001

API Endpoints

Method	Endpoint	Description
GET	/api/tasks	Get all tasks
POST	/api/tasks	Create a task
PUT	/api/tasks/:id	Update a task
PUT	/api/tasks	Batch reorder
DELETE	/api/tasks/:id	Delete a task

Project Structure

kanban-board/
├── client/          # React + Vite frontend
│   ├── src/
│   │   ├── App.jsx
│   │   ├── Column.jsx
│   │   ├── TaskCard.jsx
│   │   ├── TaskModal.jsx
│   │   ├── useWebSocket.js
│   │   ├── api.js
│   │   └── styles.css
│   └── index.html
├── server/          # Express + WebSocket backend
│   └── index.js
└── package.json     # Root with concurrently