A lightweight Kanban board application built with React + TypeScript + Ant Design + Vite, supporting:

• Multiple columns
• Draggable cards across columns
• Add, edit, and delete columns
• Add, edit, and prioritize cards
• Local storage persistence

1. Features
2. Tech Stack
3. Setup & Run
4. Docker Setup
5. Usage Guide
6. Visual Workflow
7. Storage Mechanism
8. File Structure

• Add, rename, and delete columns
• Add cards with title, description, and priority
• Drag and drop cards between columns
• Persist board state in localStorage
• Mobile-friendly and scrollable layout

• Frontend: React + TypeScript
• UI Library: Ant Design
• Bundler: Vite
• Drag & Drop: Custom implementation with React useRef + event handlers
• Storage: Browser localStorage
• Containerization: Docker + Nginx for production

• Node.js v20+
• npm v9+

1. Clone the repository:

git clone https://github.com/collinskandie/Modolos_Kanban.git
cd kanban-board

2. Install dependencies:

npm ci

3. Run in development mode:

npm run dev

Open http://localhost:5173 in your browser.

4. Build for production:

npm run build

This generates a dist/ folder (or build/ if configured via vite.config.ts).

Build Docker Image

docker build -t kanban-app .

Run Docker Container

docker run -d -p 80:80 kanban-app

Open http://localhost to see the app in action.

bash bash

• Add Column: Click + Add Column
• Rename Column: Click ✏️ Edit
• Delete Column: Click 🗑️ Delete

• Add Card: Click + on a column
• Card properties:
  • Title (required)
  • Description (optional)
  • Priority: Low / Medium / High
• Drag & Drop: Reorder cards or move to another column

• Green → Low
• Orange → Medium
• Red → High

• Drag cards horizontally to move between columns
• Drag vertically to reorder within the same column
• Click icons to add/edit/delete columns or cards

• Uses browser localStorage
• Key: kanbanColumns
• Column structure:

type Column = {
  id: string;
  title: string;
  items: CardItem[];
};

type CardItem = {
  id: number;
  title: string;
  description?: string;
  priority?: "Low" | "Medium" | "High";
};

Changes to columns/cards automatically update localStorage

Limitation: Clearing browser data will erase the board

kanban-board/ │ ├─ src/ │ ├─ App.tsx # Root component │ ├─ KanbanBoard.tsx # Main Kanban logic │ ├─ components/ │ │ └─ DraggableList.tsx # Reusable drag-and-drop component │ └─ main.tsx # Vite entry │ ├─ public/ # Static assets ├─ package.json ├─ tsconfig.json ├─ vite.config.ts └─ Dockerfile