How would you design a drag-and-drop Kanban board in React?

🧩 Scenario

Build a Kanban board with columns (To Do, In Progress, Done) where:

• Cards can be dragged between columns and reordered inside a column
• State persists to localStorage (simulate backend persistence)
• Optimistic UI updates with rollback on failure (simulate error)
• Keyboard accessibility for moving cards

🧠 Answer (Design Overview)

Key decisions:

1. Use a data model: { columns: { id, title, cardIds: [] }, cards: { id, title, description } }.
2. Keep the state normalized to make reordering efficient.
3. For drag-and-drop choose either a library (recommended) or HTML5 DnD for simplicity.
4. Implement optimistic updates: update UI immediately, then persist; on failure, restore previous state.
5. Provide keyboard controls to move focused card left/right/up/down for accessibility.

Tradeoffs:

• Libraries handle edge cases, animations, and mobile better.
• Native DnD can be simpler but requires more work for reordering logic and keyboard support.

🎮 Live Demo: Drag & Drop Kanban Board

🔍 Real-World Tips

• Use normalized state (like Redux or Zustand) for large boards.
• For production, prefer dnd-kit or react-beautiful-dnd for better mobile support and smoother animations.
• Debounce persistence calls or batch them to reduce server load.
• Use server-side ordering metadata (position numbers) to avoid O(n) reordering conflicts.

🧭 Diagram (Flow)

sequenceDiagram
  participant User
  participant UI
  participant State
  participant API
  User->>UI: drag card
  UI->>State: optimistic reorder
  State->>UI: render updated board
  UI->>API: persist change
  API-->>UI: success/failure
  UI->>State: keep or rollback

Quick Practice

1. Replace native DnD with dnd-kit and compare code complexity.
2. Persist changes to a mock server (json-server) and handle concurrent edits.
3. Add inline editing of card title and syncing.

Summary

• Normalize board state for efficient updates.
• Use optimistic updates with rollback for responsive UX.
• Prefer battle-tested DnD libraries for production workloads.
• Add keyboard controls for accessibility.