Question 1

Build a Kanban Board with Swimlanes & WIP Limits

Accepted Answer

**Target Audience:** Candidates who can already build a basic drag-and-drop board and now need rules on top of it. Comfortable with React state; WIP limits, swimlanes and the "refuse a drop" side of HTML5 drag and drop are explained from zero. **Difficulty:** Medium > **How to read this doc:** Plain words first, then 📌 Interview term: callouts. This doc assumes the fundamentals from [Build a Kanban board with drag and drop](/interview-question/build-a-kanban-board-with-drag-and-dr

Question 2

Build a File Explorer with Nested Drag-and-Drop

Accepted Answer

**Target Audience:** Experienced frontend candidates who can build a recursive tree and want the hardest common extension: nested drag-and-drop. **Difficulty:** Hard > **How to read this doc:** Plain words first, then a 📌 Interview term: tag. This question assumes [the tree view](/interview-question/build-a-file-explorer-tree-view) (recursion, expand state, immutable updates) and, for UI conventions, [the toolbar question](/interview-question/build-a-file-explorer-toolbar-breadcru

Question 3

Build a Kanban board with drag and drop

Accepted Answer

**Target Audience:** Frontend candidates preparing for a machine coding round. You should know basic React (components, props, `useState`); drag and drop, focus management and live regions are explained from zero. **Difficulty:** Hard > **How to read this doc:** Each idea is explained in plain words first, then tagged with 📌 Interview term: so you also learn the vocabulary an interviewer listens for. Every code excerpt is copied from the runnable solution, and the output in sectio

Question 4

Build a Drag-and-drop file uploader with configurable chunk size

Accepted Answer

**Target Audience:** React developers preparing for a machine coding round who know hooks and promises but have not built an upload pipeline. **Difficulty:** Hard > **How to read this doc:** Every idea is explained in plain words first, then tagged with a 📌 Interview term: callout giving the vocabulary an interviewer expects. Anything marked "Verified" was printed by the real code: React 19 in StrictMode in jsdom against the simulated server, with real timers, and the same compone

Question 5

Build a Collaborative Kanban Board with Yjs (CRDT)

Accepted Answer

**Target Audience:** Candidates aiming at senior frontend roles who can already build a drag-and-drop board. No prior knowledge of CRDTs, logical clocks or Yjs is assumed; each idea is introduced before it is used. **Difficulty:** Hard > **How to read this doc:** Plain words first, then 📌 Interview term: callouts. The board basics (drag events, insert-before indexes) come from [Build a Kanban board with drag and drop](/interview-question/build-a-kanban-board-with-drag-and-drop) an

FRONTEND MACHINE CODINGDECODED.

Medium

Build a Kanban Board with Swimlanes & WIP Limits

Hard

Build a File Explorer with Nested Drag-and-Drop

Build a Kanban board with drag and drop

Build a Drag-and-drop file uploader with configurable chunk size

Build a Collaborative Kanban Board with Yjs (CRDT)