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

Accepted Answer

**Target Audience:** Beginners preparing for a frontend machine coding round. You need basic React (props, `useState`); the accessibility pattern is explained from zero. **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 come from the runnable solution; the Verified blocks are real output from React 19.3.1 in StrictMode (jsdom) and

Question 3

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 4

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 5

Build a Collaborative Kanban Board with Yjs (CRDT)

Accepted Answer

**Target Audience:** Candidates aiming at senior frontend roles who can already build a drag-and-drop board. No prior knowledge of CRDTs, logical clocks or Yjs is assumed; each idea is introduced before it is used. **Difficulty:** Hard > **How to read this doc:** Plain words first, then 📌 Interview term: callouts. The board basics (drag events, insert-before indexes) come from [Build a Kanban board with drag and drop](/interview-question/build-a-kanban-board-with-drag-and-drop) an

Question 6

Build a Live Stock Ticker with throttled updates

Accepted Answer

**Target Audience:** Developers who know React state and effects and want to understand how to keep a UI smooth when data arrives faster than the screen can draw it. **Difficulty:** Hard > **How to read this doc:** Plain language first, then 📌 Interview term: callouts with the vocabulary an interviewer listens for. The render counts in the Verified section were measured by running the real solution in React 19.3.1 under `StrictMode` in jsdom. The market feed is simulated with a se

FRONTEND MACHINE CODINGDECODED.

Easy