Project 13: Kanban Board (Trello Clone)

📋 Project Brief

Build a Kanban task management board (Trello clone) with drag-and-drop card and column reordering using the native HTML5 Drag and Drop API — no external libraries. Focus on state persistence, visual feedback during drags, and a nested sub-task system.

✅ Feature Requirements

Feature 1: Native Drag & Drop

Acceptance Criteria:

• Cards can be dragged between columns (e.g., "To Do" → "In Progress" → "Done")
• Cards can be reordered within the same column
• Columns themselves can be reordered by dragging their headers
• Must use the native dragstart, dragover, drop events — no libraries
• Handle the dragenter/dragleave events to highlight valid drop zones

Feature 2: Column & Card Persistence

Acceptance Criteria:

• All board state (columns, cards, order) persists in localStorage
• Refreshing the page restores the exact board state
• Support multiple boards (a board selector dropdown)
• "New Board" and "Delete Board" actions with confirmation dialogs

Feature 3: Task Nesting (Sub-tasks)

Acceptance Criteria:

• Each card can have sub-tasks (checklist items)
• The card preview shows a progress indicator: "3/5 sub-tasks complete"
• Sub-tasks can be checked/unchecked
• When all sub-tasks are complete, the card gets a visual "completed" badge

Feature 4: Visual Drag Feedback

Acceptance Criteria:

• While dragging, the card becomes semi-transparent at its original position
• A "ghost" preview follows the cursor
• Valid drop zones highlight with a dashed border and subtle background color
• Invalid zones (e.g., dropping a column onto a card) show no highlight

Feature 5: Archive System

Acceptance Criteria:

• Deleted cards go to an "Archive" rather than being permanently removed
• An "Archive" panel shows all deleted cards with timestamps
• Cards can be restored from the archive back to any column
• Archived cards older than 30 days are automatically purged

📊 Data Model

Entity	Fields
Board	id, name, createdAt
Column	id, boardId, title, order, color
Card	id, columnId, title, description, order, createdAt, labels[], subtasks[]
SubTask	id, text, isComplete
ArchivedCard	...Card fields + archivedAt

🧪 Testing Checklist

• Unit test card ordering logic (insert at position, reorder array)
• Unit test archive auto-purge (cards older than 30 days removed)
• Integration test: drag card from column A to column B
• Integration test: refresh page → board state preserved
• A11y: cards must be movable via keyboard (arrow keys + Enter to confirm)

🚀 Stretch Goals

• Add card labels/tags with color coding
• Implement due dates with overdue highlighting
• Add a "Filter by Label" system
• Implement card comments/notes