Question 1

Build an Accordion component

Accepted Answer

**Target Audience:** Beginners preparing for a frontend machine coding round. You need basic React (components, props, `useState`); no accessibility background is assumed. **Difficulty:** Easy > **How to read this doc:** Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the words an interviewer listens for. All code excerpts are copied from the runnable solution, and every "Verified" block is real output from running it (React 19

Question 2

Build a File Explorer Toolbar — Breadcrumbs, Search & Context Menu

Accepted Answer

**Target Audience:** Frontend candidates who can already render a recursive tree in React and want the "power user" layer on top. **Difficulty:** Medium > **How to read this doc:** Plain words first, then a 📌 Interview term: tag. This question assumes the tree itself; if recursion, `expanded` sets or immutable tree updates are new to you, start with [Build a File Explorer (tree view)](/interview-question/build-a-file-explorer-tree-view). Every snippet is from the runnable solution

Question 3

Build a Nested Comments widget

Accepted Answer

**Target Audience:** Frontend candidates who know React basics and want a clean answer to the classic recursive UI question. **Difficulty:** Medium > **How to read this doc:** Plain words first, then a 📌 Interview term: tag. All code comes from the runnable solution and the Verified section quotes its output on React 19.3.1. The harder sibling, with voting, sorting and depth limits, is [Nested Comments with Collapsible Threads & Voting](/interview-question/build-nested-comments-wi

Question 4

Build a File Explorer (tree view)

Accepted Answer

**Target Audience:** Frontend candidates preparing for a machine coding round. You know a little React (components, `useState`); no tree or accessibility experience needed. **Difficulty:** Medium > **How to read this doc:** Every idea is explained in plain words first, then tagged with 📌 Interview term: so you also learn the vocabulary an interviewer listens for. All code comes from the runnable solution next to this tutorial, and the Verified section quotes what it printed when a

Question 5

Build an Accessible Modal with Focus Trap & Scroll Lock

Accepted Answer

**Target Audience:** Frontend candidates who can already build a basic portal modal (see [Build a Modal dialog](/interview-question/build-a-modal-dialog)) and now need to make it pass an accessibility review. **Difficulty:** Medium > **How to read this doc:** Plain words first, then a 📌 Interview term: callout with the precise vocabulary. Every output below was printed by the real solution on React 19.3.1, in jsdom and in real Chromium 141, where real Tab presses, `inert`, scroll

Question 6

Build a Modal dialog

Accepted Answer

**Target Audience:** Frontend candidates preparing for a machine coding round. Assumes basic React (`useState`, props, children); portals, effects and refs are explained here. **Difficulty:** Medium > **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 expects. The outputs below were printed by the real solution, run on React 19.3.1 in jsdom and in real Chromium 141. ## 1. Why Th

Question 7

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 8

Build Nested Checkboxes (tri-state)

Accepted Answer

**Target Audience:** Frontend candidates comfortable with React state who have never built a hierarchical checkbox. **Difficulty:** Hard > **How to read this doc:** Plain words first, then a 📌 Interview term: tag. All code comes from the runnable solution, and the Verified section quotes what it printed on React 19.3.1, including the real `indeterminate` property of every box. ## 1. Why This Even Matters — A Story First Picture a family grocery list on the fridge with categories

Question 9

Build Nested Comments with Collapsible Threads & Voting

Accepted Answer

**Target Audience:** Experienced frontend candidates who can build a recursive comments list and now need the interaction details that real products have. **Difficulty:** Hard > **How to read this doc:** Plain words first, then a 📌 Interview term: tag. It assumes [Build a Nested Comments widget](/interview-question/build-a-nested-comments-widget) (recursion, tree helpers, reply boxes), so replying is not rebuilt here. The vote API is **simulated** in the solution with a 300 ms `se

FRONTEND MACHINE CODINGDECODED.

Easy