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 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 3

Build Wordle

Accepted Answer

**Target Audience:** Frontend developers preparing for a machine coding round. You know React components and useState; the game rules and the scoring algorithm 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 words an interviewer listens for. The Verified section is real output from booting the solution on React 19.3.1 in StrictMode and

Question 4

Build a Selectable Cell Grid (drag to select)

Accepted Answer

**Target Audience:** Frontend candidates who know React components and `useState`. Pointer capture, coordinate-to-cell mapping, derived selection and the roving tabindex are explained from zero. **Difficulty:** Medium > **How to read this doc:** Plain words first, then 📌 Interview term: callouts. Excerpts come from the runnable solution. jsdom has no layout, so the verifier gave the grid a known box and sent pointer events with chosen coordinates; a second run in real Chromium 141

Question 5

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 6

Build Grid Lights

Accepted Answer

**Target Audience:** Frontend candidates preparing for a machine coding round. Comfortable with React state and props; this question is mostly about timers and effects, 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 words an interviewer listens for. Excerpts come from the runnable solution on this page, and the Verified section quotes timings measured

Question 7

Build a Kanban Board with Swimlanes & WIP Limits

Accepted Answer

**Target Audience:** Candidates who can already build a basic drag-and-drop board and now need rules on top of it. Comfortable with React state; WIP limits, swimlanes and the "refuse a drop" side of HTML5 drag and drop are explained from zero. **Difficulty:** Medium > **How to read this doc:** Plain words first, then 📌 Interview term: callouts. This doc assumes the fundamentals from [Build a Kanban board with drag and drop](/interview-question/build-a-kanban-board-with-drag-and-dr

Question 8

Build an E-commerce Product Filter grid

Accepted Answer

**Target Audience:** Developers preparing for a senior frontend machine coding round. Assumes React state, effects and list rendering; the derived-state ideas are explained from scratch. **Difficulty:** Hard > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. Code excerpts are copied from the runnable solution, and the Verified section quotes what it printed on React 19.3.1 while a script ticked filters, typed prices and removed chips. The catalogue

Question 9

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 10

Build a Mini Spreadsheet (Excel)

Accepted Answer

**Target Audience:** Frontend candidates preparing for a hard machine coding round. Assumes basic React; parsing and graph ideas are explained from zero. **Difficulty:** Hard > **How to read this doc:** Plain words first, then a 📌 Interview term: callout with the exact vocabulary. All "Verified" output was printed by the real code: the engine run directly in Node 22, and the React 19.3.1 component mounted in StrictMode inside jsdom and driven by a script. ## 1. Why This Even Matt

FRONTEND MACHINE CODINGDECODED.

Easy

Build a Generate Table (rows x columns)

Build an Accordion component

Medium

Build Wordle

Build a Selectable Cell Grid (drag to select)

Build an Image Gallery with lightbox

Build Grid Lights

Build a Kanban Board with Swimlanes & WIP Limits

Hard

Build an E-commerce Product Filter grid

Build a Calendar / Date Picker

Build a Mini Spreadsheet (Excel)

Build a Date Picker Calendar with Range Selection

Build a Data Table with Virtualized Rows, Sorting & Filtering

Build a Sudoku board with validation

Build a Memory (flip-card) Game

Build Minesweeper