Question 1

Build a Breadcrumbs component

Accepted Answer

**Target Audience:** Beginners preparing for a frontend machine coding round. You need basic React (props, `useState`, lists with `key`); the accessibility details are explained here. **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. Code excerpts are copied from the runnable solution; the Verified blocks are real output from React 19.3.1 in St

Question 2

Build a Dropdown Menu

Accepted Answer

**Target Audience:** Frontend candidates preparing for a machine coding round. Assumes basic HTML, JavaScript and React components with `useState`; everything else is explained here. **Difficulty:** Easy > **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 output quoted below was printed by the real solution, run on React 19.3.1 in jsdom and again in real Chrom

Question 3

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 4

Build a Speed Dial Menu

Accepted Answer

**Target Audience:** Frontend candidates preparing for a machine coding round. Assumes React state and props; `inert`, staggered transitions and outside-press handling are explained here. **Difficulty:** Medium > **How to read this doc:** Plain words first, then a 📌 Interview term: callout. Logic was verified on React 19.3.1 in jsdom; layout, the real stagger, Tab order and hit testing were checked in Chromium 141, because jsdom has no layout or animation. ## 1. Why This Even Mat

Question 5

Build a Collapsible Sidebar Menu

Accepted Answer

**Target Audience:** Frontend candidates preparing for a machine coding round. Assumes React state, props and lists; lazy state initialisers, persistence and disclosure ARIA are explained here. **Difficulty:** Medium > **How to read this doc:** Plain words first, then a 📌 Interview term: callout. Logic was verified on React 19.3.1 in jsdom; widths, the transition, accessible names, reload persistence and Tab order were checked in Chromium 141. ## 1. Why This Even Matters — A Stor

Question 6

Build @Mentions in a textarea

Accepted Answer

**Target Audience:** Frontend developers preparing for a harder machine coding round. Assumes React hooks; text selection APIs, the mirror-div technique and the ARIA pattern are explained from zero. **Difficulty:** Hard > **How to read this doc:** Each idea in plain words first, then a 📌 Interview term: callout. The text logic was run with node and the component was driven on React 19.3.1 in jsdom (section 6). jsdom has no layout engine, so the pixel position of the menu was measu

FRONTEND MACHINE CODINGDECODED.

Easy