Question 1

Build a Color Picker

Accepted Answer

**Target Audience:** Frontend candidates preparing for a machine coding round. You know React components and useState; no colour theory is assumed. **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. Code excerpts come from the runnable solution; every number in the Verified section was printed by running the code (React 19.3.1, No

Question 2

Build dependent (Country–State) dropdowns

Accepted Answer

**Target Audience:** Frontend candidates preparing for a machine coding round. You know a little HTML and JavaScript; no React form experience is assumed. **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. Code excerpts are copied from the runnable solution, and the output in section 6 was produced by actually running it on React 19.3.1

Question 3

Build a Password Generator

Accepted Answer

**Target Audience:** Frontend candidates preparing for a machine coding round. You know a little HTML and JavaScript; no React or cryptography background is assumed. **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. Code excerpts are copied from the runnable solution, and every output in section 6 was produced by actually running it: th

Question 4

Build an Autocomplete / Typeahead search

Accepted Answer

**Target Audience:** Frontend developers preparing for a machine coding round. Assumes basic React state and effects; keyboard navigation, caching and ARIA roles 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 scripted dri

Question 5

Build a Job Board (paginated fetch)

Accepted Answer

**Target Audience:** Developers preparing for a frontend machine coding round who know useState and useEffect and want to handle a two-step paginated fetch with loading, errors and retries properly. **Difficulty:** Medium > **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. The Hacker News API is **simulated**

Question 6

Build a Signup Form with async username availability check

Accepted Answer

**Target Audience:** Frontend candidates preparing for a machine coding round. Assumes you have built a basic validated form; the [Form with validation](/interview-question/build-a-form-with-validation) question covers that ground. **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. Code excerpts are copied from the runnable solution, and

Question 7

Build Infinite Scroll

Accepted Answer

**Target Audience:** React developers new to infinite scrolling who know useState and useEffect and want to build it from first principles with a scroll listener. **Difficulty:** Medium > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. The Verified output was produced by running the solution on React 19.3.1 under StrictMode in jsdom, with the scroll container given a fixed clientHeight and a content-based

Question 8

Build a Form with validation

Accepted Answer

**Target Audience:** Frontend candidates preparing for a machine coding round. You know a little HTML and JavaScript; no React form experience is assumed. **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. All code excerpts are copied from the runnable solution, and the output in section 6 was produced by actually running it on React 19.

Question 9

Build a Virtualized List with react-window (Fixed Size)

Accepted Answer

**Target Audience:** React developers who already understand the basic windowing maths (if not, start with [Build a Virtualized List](/interview-question/build-a-virtualized-list)) and want to understand, and rebuild, the API of a production library. **Difficulty:** Hard > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. The Verified section quotes output from running the solution on React 19.3.1 in jsdom, plus the real react-window 1.8.11 and 2.3.4

Question 10

Build a Chat UI

Accepted Answer

**Target Audience:** Developers who know React state, refs and effects, preparing for a frontend round where "build a chat" tests real-time data, optimistic UI and scroll behaviour together. **Difficulty:** Hard > **How to read this doc:** Plain language first, then 📌 Interview term: callouts with the words an interviewer listens for. The Verified output was printed by the real solution in React 19.3.1 under `StrictMode` in jsdom. The socket is simulated with `setTimeout`, and bec

FRONTEND MACHINE CODINGDECODED.

Medium