InterviewDB
Experience
·
USA
Frontend Coding: Implement a Draggable Kanban Board with Column Management
Interview Experience
Round 1 Frontend
Problem
Build a Kanban board in React with at least three columns (To Do, In Progress, Done). Cards should be draggable between columns using the HTML5 Drag and Drop API (no external libraries). Each column shows its card count.
jsx
const initialCards = [
{ id: 1, title: "Design DB schema", column: "todo" },
{ id: 2, title: "Write API endpoints", column: "inprogress" },
{ id: 3, title: "Deploy to staging", column: "done" },
];
function KanbanBoard() {
// Your implementation
}
Example
Initial state:
| To Do (1) | In Progress (1) | Done (1) |
| Design DB schema | Write API endpoints | Deploy to staging|
User drags "Design DB schema" to "In Progress":
| To Do (0) | In Progress (2) | Done (1) |
| | Design DB schema | Deploy to staging|
| | Write API endpoints | |
Follow-ups
- How do you preserve card order within a column when a card is dropped at a specific position?
- How would you persist board state to
localStorageso it survives a page refresh? - How do you add an "Add Card" form to a column inline, and cancel it with Escape?
- How would you make the board accessible for keyboard-only users who cannot drag?
Full Details
Round 1 Frontend
Problem
Build a Kanban board in React with at least three columns (To Do, In Progress, Done). Cards should be draggable between columns using the HTML5 Drag and Drop API (no external libraries). Each column shows its card count.
jsx
const initialCards = [
{ id: 1, title: "Design DB schema", column: "todo" },
{ id: 2, title: "Write API endpoints", column: "inprogress" },
{ id: 3, title: "Deploy to staging", column: "done" },
];
function KanbanBoard() {
// Your implementation
}
Example
Initial state:
| To Do (1) | In Progress (1) | Done (1) |
| Design DB schema | Write API endpoints | Deploy to staging|
User drags "Design DB schema" to "In Progress":
| To Do (0) | In Progress (2) | Done (1) |
| | Design DB schema | Deploy to staging|
| | Write API endpoints | |
Follow-ups
- How do you preserve card order within a column when a card is dropped at a specific position?
- How would you persist board state to
localStorageso it survives a page refresh? - How do you add an "Add Card" form to a column inline, and cancel it with Escape?
- How would you make the board accessible for keyboard-only users who cannot drag?
Free preview. Unlock all Patreon questions →
About This Question
This is a candidate experience report from a patreon interview for a frontend role during the onsite round.