Build a File Explorer with Nested Drag-and-Drop

Question

Accepted Answer

**Requirements**
- Render a tree from JSON: `{ id, name, type: "file"|"folder", children? }` with unlimited nesting.
- Expand/collapse folders with animation; show indentation guides and icons.
- Drag any file/folder to reorder or move into another folder (including nesting). Prevent dropping a folder into itself/descendant.
- Support rename (double-click), delete, new file/folder, and keyboard nav (↑/↓/Enter).

**Architecture**
- Normalize tree to keep O(1) lookup: `Map<id, node>` + `parentMap`.
- DnD via HTML5 `draggable` or `@dnd-kit` / `react-arborist`. On `dragover`, compute drop position (inside / before / after) via pointer Y vs row middle.
- Immutable tree update: remove node from old parent, insert into new parent at index; guard `isDescendant(dragId, dropId)`.

**What interviewers look for:** recursive tree rendering, normalized state, drag payload (`dataTransfer`), drop indicators, cycle prevention, accessibility.

**Reference implementation (core logic)**
```jsx
function mo

Build a File Explorer with Nested Drag-and-Drop

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.