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

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 4

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

Question 5

Build a Poll Widget with Live Results & Confetti

Accepted Answer

**Target Audience:** React developers who can already build a basic poll and want the production version: live data, optimistic updates, persistence and a small hand-made animation. If percentages and single-vote guards are new, start with [Build a Poll / Voting widget](/interview-question/build-a-poll-voting-widget). **Difficulty:** Medium > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. The Verified output was printed by the real solution in Rea

Question 6

Build a Kanban board with drag and drop

Accepted Answer

**Target Audience:** Frontend candidates preparing for a machine coding round. You should know basic React (components, props, `useState`); drag and drop, focus management and live regions are explained from zero. **Difficulty:** Hard > **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. Every code excerpt is copied from the runnable solution, and the output in sectio

Question 7

Build @Mentions in a textarea

Accepted Answer

**Target Audience:** Frontend developers preparing for a harder machine coding round. Assumes React hooks; text selection APIs, the mirror-div technique and the ARIA pattern are explained from zero. **Difficulty:** Hard > **How to read this doc:** Each idea in plain words first, then a 📌 Interview term: callout. The text logic was run with node and the component was driven on React 19.3.1 in jsdom (section 6). jsdom has no layout engine, so the pixel position of the menu was measu

FRONTEND MACHINE CODINGDECODED.

Easy