Build a Kanban Board with Swimlanes & WIP Limits

Question

Accepted Answer

**Requirements** - Columns with WIP limits (e.g. Doing max 3); show count badge red when exceeded. - Swimlanes grouping cards by assignee; drag across columns and lanes. - Card modal with description, assignee, labels, due date; optimistic update. **Architecture** - State: `columns: {id, title, wipLimit, cardIds[]} ` + `cards: Map` + `swimlaneKey`. - On drop, check `targetColumn.cardIds.length >= wipLimit ? reject + shake animation : allow`. - Render swimlane rows: `lanes.map(lane => columns.map(col => filter(col.cards, lane)))`. Use CSS grid. **What interviewers look for:** WIP validation before commit, lane grouping derivation, nested DnD contexts, optimistic UI. **Reference implementation** ```jsx function canMove(cards, targetCol, wipLimit) { return wipLimit == null || cards.filter(c => c.columnId === targetCol.id).length < wipLimit; } function Kanban({ columns, cards, onMove }) { const handleDragEnd = ({ active, over }) => { const card = cards.find(c => c.id

Build a Kanban Board with Swimlanes & WIP Limits

Understand the problem

Attempt it yourself

Study the solution

Solution ready — 2 min read

Join the discussion

Discussion (0)

KEEP THE
STREAK ALIVE.

Understand the problem

Attempt it yourself

Study the solution

Solution ready — 2 min read

Join the discussion

Discussion (0)

KEEP THESTREAK ALIVE.

KEEP THE
STREAK ALIVE.