File Explorer

Start with a single Create src button. From there every folder expands, collapses, and offers an Add control that asks for a type and a name — and folders created that way are themselves addable, so the tree can go arbitrarily deep.

Two companies asked this independently in 2025, which is a fair signal it is worth practising.

Two ideas carry it. The first is recursion in the component tree: one Node that renders a row and then renders itself for each child. Arbitrary depth then needs no per-level code, and the "new folders must also be addable" requirement becomes free rather than a second branch.

The second is immutable insertion, and it is where most attempts break. Finding the target folder, pushing onto its children array, and calling setRoot(root) re-renders nothing at all — React compares by reference and the root is the same object it already had. The data is then silently out of step with the screen, which is a confusing bug to chase. The fix is to rebuild the path: return a new object for the target folder and for every ancestor down to it, leaving untouched branches shared. That is the same structural sharing that Immer and hand-written Redux reducers rely on.

Whether expanded state belongs in each node or in a map at the top is a judgment call, and being able to say when you would move it — the moment a "collapse all" requirement appears — is part of the answer.