Question 1

Build a Notification Badge

Accepted Answer

**Target Audience:** Beginners preparing for a frontend machine coding round. Assumes basic HTML, CSS 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 was produced by mounting the solution with React 19.3.1 inside in jsdom and driving it with clicks and key presses. ## 1. Why This Even Matters — A Story First A post

Question 2

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 3

Build a Read More / Show Less text component

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 in jsdom and clicking through it with a script. jsdom has no layout engine, so the CSS line-clamp facts were measured separately in Chromium 141, and the

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

Question 6

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 7

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 8

Build an Analog Clock

Accepted Answer

**Target Audience:** Developers preparing for a frontend machine coding round who have built a simple React component before. Angles, SVG transforms and requestAnimationFrame are explained from zero. **Difficulty:** Medium > **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

Question 9

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 10

Build a Pagination component

Accepted Answer

**Target Audience:** Developers preparing for a frontend machine coding round who know React basics (props, state, lists with keys) and want to get the classic pagination algorithm exactly right. **Difficulty:** Medium > **How to read this doc:** Plain language first, then 📌 Interview term: callouts with the precise vocabulary. Code excerpts are copied from the runnable solution, and the Verified section quotes what it printed on React 19.3.1, plus an exhaustive property check of

FRONTEND MACHINE CODINGDECODED.

Easy

Build a Notification Badge

Build a Generate Table (rows x columns)

Build a Read More / Show Less text component

Medium

Build a Selectable Cell Grid (drag to select)

Build a Tabs Component with URL Sync & Lazy Mounting

Build an Image Gallery with lightbox

Build a Markdown Previewer

Build an Analog Clock

Build a Custom Multi-select Dropdown

Build a Pagination component

Build Autocomplete / Typeahead with Debounce & Highlight

Hard

Build a Virtualized List

Build a Drag-and-drop file uploader with configurable chunk size

Build the Snake Game

Build a basic Rich Text Editor