Build a Kanban task board with columns, drag-and-drop, and local persistence

[ibuzzardo]

Overview

A Kanban-style task board where users can create tasks, organize them into columns (To Do, In Progress, Done), and drag-and-drop tasks between columns. Uses localStorage for persistence with a clean, modern UI.

Requirements

Core Features

1. Three columns: To Do, In Progress, Done
2. Add new task: Click "+" button on any column to add a task with title and optional description
3. Drag and drop: Move tasks between columns by dragging
4. Delete task: Click X button on a task card to remove it
5. Task count: Show number of tasks in each column header
6. Persistence: Save board state to localStorage, restore on page load

UI Requirements

• Clean, modern design with Tailwind CSS
• Column headers with distinct colors (blue for To Do, yellow for In Progress, green for Done)
• Task cards with subtle shadow and hover effect
• Responsive layout that works on desktop and mobile
• Empty state message when a column has no tasks
• Modal or inline form for adding new tasks

Technical Requirements

• Next.js 15 App Router with TypeScript
• Client-side only (localStorage for persistence)
• Use @hello-pangea/dnd for drag-and-drop (React 18 compatible fork of react-beautiful-dnd)
• Tailwind CSS for styling
• Generate unique IDs for tasks using crypto.randomUUID()

File Structure

src/app/layout.tsx          — Root layout with metadata
src/app/page.tsx            — Main page, renders Board component
src/app/globals.css         — Global styles + Tailwind directives
src/components/Board.tsx    — Main board with DragDropContext
src/components/Column.tsx   — Single column (Droppable)
src/components/TaskCard.tsx — Individual task card (Draggable)
src/components/AddTask.tsx  — Add task form/modal
src/lib/types.ts            — TypeScript interfaces (Task, Column, Board)
src/lib/storage.ts          — localStorage read/write helpers
tailwind.config.ts          — Tailwind configuration

Data Model

interface Task {
  id: string;
  title: string;
  description?: string;
  createdAt: string;
}

interface Column {
  id: string;
  title: string;
  taskIds: string[];
}

interface BoardState {
  tasks: Record<string, Task>;
  columns: Record<string, Column>;
  columnOrder: string[];
}

Acceptance Criteria

• Three columns render with correct headers
• Can add a new task to any column
• Can drag a task from one column to another
• Board state persists across page reloads
• Can delete a task
• Responsive on mobile screens
• TypeScript strict mode, no any types

Dependencies

{
  "@hello-pangea/dnd": "^16.6.0"
}

Edge Cases

• Handle empty board (first visit)
• Handle corrupted localStorage (fallback to default board)
• Prevent adding tasks with empty titles
• Handle drag cancellation (drop outside valid area)