Question 1

Build a Generate Table (rows x columns)

Accepted Answer

**Target Audience:** Beginners preparing for a frontend machine coding round. Assumes basic HTML and JavaScript; React ideas are explained as they come up. **Difficulty:** Easy > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. The Verified output comes from mounting the solution with React 19.3.1 inside in jsdom and driving the form with a script. ## 1. Why This Even Matters — A Story First Picture a cinema usher s

Question 2

Build a Todo List

Accepted Answer

**Target Audience:** Beginners preparing for a first frontend machine coding round. Assumes you know basic HTML and JavaScript and have seen a React component once; nothing else. **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. The code excerpts are copied from the runnable solution in the playground, and the Verified section quotes what

Question 3

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 4

Build a Markdown Previewer

Accepted Answer

**Target Audience:** Frontend developers preparing for a machine coding round. Assumes basic React; parsing and HTML escaping are explained from zero. **Difficulty:** Medium > **How to read this doc:** Plain words first, then 📌 Interview term: callouts. The parser was run directly with node, the component was driven on React 19.3.1 in jsdom, and the XSS payloads were also typed into the app in real Chromium 141, which is the only place a script could actually have run. Section 6 q

Question 5

Build a Custom Multi-select Dropdown

Accepted Answer

**Target Audience:** Frontend developers preparing for a machine coding round. Assumes React state and props; sets, chips, focus handling and multi-select ARIA 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 cl

Question 6

Build a Transfer List

Accepted Answer

**Target Audience:** Frontend developers preparing for a machine coding round. Assumes React state, props and lists; derived state, sets and the indeterminate checkbox 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 (StrictMode) in jsdom

Question 7

Build a Data Table with Virtualized Rows, Sorting & Filtering

Accepted Answer

**Target Audience:** React developers who can build a basic sortable table (the medium version is [Build a Data Table with sorting and filtering](/interview-question/build-a-data-table-with-sorting-and-filtering)) and a windowed list ([Build a Virtualized List](/interview-question/build-a-virtualized-list)), and now need both at 20,000 rows. **Difficulty:** Hard > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. The Verified output was produced by r

Question 8

Build a basic Rich Text Editor

Accepted Answer

**Target Audience:** React developers preparing for a machine coding round who have used `useRef` and `useEffect` but have never built an editor. **Difficulty:** Hard > **How to read this doc:** Every idea is explained in plain words first, then tagged with a 📌 Interview term: callout giving the vocabulary an interviewer expects. Anything marked "Verified" was printed by the real code: React 19 in StrictMode in jsdom, driven by a script, and the same component in headless Chromium

FRONTEND MACHINE CODINGDECODED.

Easy