Question 1

Build a Segmented Control

Accepted Answer

**Target Audience:** Beginners preparing for a frontend machine coding round. You need basic React (props, `useState`); controlled components and the radio group pattern 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

Question 2

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 3

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 4

Build a Lazy-loaded Image

Accepted Answer

**Target Audience:** Frontend candidates preparing for a machine coding round. Assumes basic React (components, props, `useState`); every browser API is explained from zero. **Difficulty:** Medium > **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. The output in section 6 was produced by actually running the solution on React 19.3.1, in jsdom and in headless Chromiu

Question 5

Build Infinite Scroll with IntersectionObserver & Skeleton

Accepted Answer

**Target Audience:** React developers who have built (or read) [infinite scroll with a scroll listener](/interview-question/build-infinite-scroll) and want the IntersectionObserver version with skeleton loading cards. **Difficulty:** Medium > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. The Verified section has two parts. In jsdom, which has no IntersectionObserver, the driver installed a small stub and decided by hand when the sentinel was visi

Question 6

Build a Speed Dial Menu

Accepted Answer

**Target Audience:** Frontend candidates preparing for a machine coding round. Assumes React state and props; `inert`, staggered transitions and outside-press handling 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; layout, the real stagger, Tab order and hit testing were checked in Chromium 141, because jsdom has no layout or animation. ## 1. Why This Even Mat

Question 7

Build a Split Pane (Horizontal & Vertical) with Constraints

Accepted Answer

**Target Audience:** Candidates comfortable with React components and hooks. It assumes the single-handle basics from [Resizable Panels with useResizable](/interview-question/build-resizable-panels-with-useresizable-hook) (pointer events, computing from the drag start, listener clean-up) and explains the new parts from zero: two axes, nesting, fractions versus pixels and constraints on both sides.
**Difficulty:** Medium

> **How to read this doc:** Plain words first, then <code>📌 Interview term

Question 8

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 9

Build Resizable Panels with useResizable Hook

Accepted Answer

**Target Audience:** Frontend candidates who know React components and `useState`. Pointer events, pointer capture, custom hook design and the separator role are explained from zero. **Difficulty:** Medium > **How to read this doc:** Plain words first, then 📌 Interview term: callouts. Every excerpt is copied from the runnable solution. jsdom, where the solution was verified, has no layout, so the drag was driven by `clientX` values; a second run in real Chromium 141 checked the re

Question 10

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

FRONTEND MACHINE CODINGDECODED.

Easy

Build a Segmented Control

Build a Read More / Show Less text component

Build a Skeleton Loader

Medium

Build a Lazy-loaded Image

Build Infinite Scroll with IntersectionObserver & Skeleton

Build a Speed Dial Menu

Build a Split Pane (Horizontal & Vertical) with Constraints

Build a Markdown Previewer

Build Resizable Panels with useResizable Hook

Build a Collapsible Sidebar Menu

Hard

Build a Chat UI

Build a Variable-Size Virtualized Feed (Dynamic Heights)

Build a Calendar Day View with overlapping events

Build @Mentions in a textarea