Question 1

Build a Dark Mode Toggle

Accepted Answer

**Target Audience:** Beginners preparing for a frontend machine coding round. You know useState and have seen useEffect; browser APIs like matchMedia and localStorage are new. **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 exact words an interviewer listens for. All code comes from the runnable solution next to this tutoria

Question 2

Build a Traffic Light

Accepted Answer

**Target Audience:** Beginners preparing for a frontend machine coding round. You know a little JavaScript and React; state machines, timeouts, refs and effect cleanup are explained from zero. **Difficulty:** Easy > **How to read this doc:** Plain language first, then 📌 Interview term: callouts with the vocabulary interviewers expect. Every output under "Verified" was printed by running this exact solution on React 19.3.1 inside in jsdom. ## 1. Why

Question 3

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 4

Build a Skeleton Loader

Accepted Answer

**Target Audience:** Beginners preparing for a frontend machine coding round. You need basic React (props, `useState`, `useEffect`); data-loading patterns and 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 fr

Question 5

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 6

Build dependent (Country–State) dropdowns

Accepted Answer

**Target Audience:** Frontend candidates preparing for a machine coding round. You know a little HTML and JavaScript; no React form experience is assumed. **Difficulty:** Medium > **How to read this doc:** Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the exact words an interviewer listens for. Code excerpts are copied from the runnable solution, and the output in section 6 was produced by actually running it on React 19.3.1

Question 7

Build a Search Bar with History

Accepted Answer

**Target Audience:** Frontend developers preparing for a machine coding round. Assumes basic React state and events; `localStorage` and focus management are explained from zero. **Difficulty:** Medium > **How to read this doc:** Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the exact words an interviewer listens for. The Verified output was produced by running the solution on React 19.3.1 in jsdom, with a driver that typed, p

Question 8

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 9

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 10

Build a Tabs Component with URL Sync & Lazy Mounting

Accepted Answer

**Target Audience:** Developers who can already build an accessible tabs component and want the next step: URL state and lazy panels. If roles and roving tabindex are new to you, start with [Build a Tabs component](/interview-question/build-a-tabs-component). **Difficulty:** Medium > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. Code excerpts are copied from the runnable solution. The Verified blocks are real output: React 19.3.1 in StrictMode dr

FRONTEND MACHINE CODINGDECODED.

Easy

Build a Dark Mode Toggle

Build a Traffic Light

Build a Breadcrumbs component

Build a Skeleton Loader

Build an Accordion component

Medium

Build dependent (Country–State) dropdowns

Build a Search Bar with History

Build a Nested Comments widget

Build a Command Palette (kbar / cmdk) with Fuzzy Search

Build a Tabs Component with URL Sync & Lazy Mounting

Build a File Explorer (tree view)

Build a Poll / Voting widget

Build a Job Board (paginated fetch)

Hard

Build an E-commerce Product Filter grid

Build a File Explorer with Nested Drag-and-Drop

Build a Kanban board with drag and drop

Build a data-fetching hook with caching, deduplication and retry

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

Build a Canvas Drawing Board

Build a Data Table with Virtualized Rows, Sorting & Filtering

Build Whack-a-Mole