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 Command Palette (kbar / cmdk) with Fuzzy Search

Accepted Answer

**Target Audience:** Frontend developers preparing for a machine coding round. Assumes React hooks; fuzzy matching, the combobox pattern and focus management are explained from zero. **Difficulty:** Medium > **How to read this doc:** Each idea in plain words first, then a 📌 Interview term: callout with the precise vocabulary. The matcher was run directly with node, and the whole palette was booted on React 19.3.1 in jsdom and driven with real key presses; section 6 quotes that out

Question 4

Build an Image Gallery with lightbox

Accepted Answer

**Target Audience:** Frontend candidates preparing for a machine coding round. Assumes basic React (`useState`, props, refs); dialogs, focus management and portals are explained from zero. **Difficulty:** Medium > **How to read this doc:** Each idea is explained in plain words, then tagged with 📌 Interview term: so you learn the vocabulary an interviewer expects. The output in section 6 was produced by running the solution on React 19.3.1 in jsdom and in headless Chromium 141. ##

Question 5

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 6

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 7

Build a Virtualized List

Accepted Answer

**Target Audience:** Frontend developers preparing for machine coding rounds who know basic React (components, `useState`, props) but have never built a virtualized list. **Difficulty:** Hard > **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. The output in the Verified section was produced by actually running the solution on React 19.3.1 in jsdom, and the browser nu

Question 8

Build a Calendar / Date Picker

Accepted Answer

**Target Audience:** Frontend candidates preparing for a machine coding round. Assumes basic React (state, props, effects) and no prior knowledge of calendar math or ARIA. **Difficulty:** Hard > **How to read this doc:** Every idea is explained in plain words first, then tagged with 📌 Interview term: so you also learn the exact vocabulary an interviewer listens for. All output quoted under "Verified" was printed by the real solution, mounted in jsdom with React 19.3.1 in StrictMod

Question 9

Build a Virtualized List with react-window (Fixed Size)

Accepted Answer

**Target Audience:** React developers who already understand the basic windowing maths (if not, start with [Build a Virtualized List](/interview-question/build-a-virtualized-list)) and want to understand, and rebuild, the API of a production library. **Difficulty:** Hard > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. The Verified section quotes output from running the solution on React 19.3.1 in jsdom, plus the real react-window 1.8.11 and 2.3.4

Question 10

Build a Date Picker Calendar with Range Selection

Accepted Answer

**Target Audience:** Candidates who can already build a single-date picker and want the harder range version. Assumes React state and effects. **Difficulty:** Hard > **How to read this doc:** Plain language first, then a 📌 Interview term: callout with the exact vocabulary. Every line under "Verified" was printed by the real solution, mounted with React 19.3.1 in StrictMode inside jsdom and driven by a script, with `TZ=America/New_York` so a daylight saving change sits inside the t

FRONTEND MACHINE CODINGDECODED.

Easy