Question 1

Build a Todo List

Accepted Answer

**Target Audience:** Beginners preparing for a first frontend machine coding round. Assumes you know basic HTML and JavaScript and have seen a React component once; nothing else. **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. The code excerpts are copied from the runnable solution in the playground, and the Verified section quotes what

Question 2

Build a File Explorer Toolbar — Breadcrumbs, Search & Context Menu

Accepted Answer

**Target Audience:** Frontend candidates who can already render a recursive tree in React and want the "power user" layer on top. **Difficulty:** Medium > **How to read this doc:** Plain words first, then a 📌 Interview term: tag. This question assumes the tree itself; if recursion, `expanded` sets or immutable tree updates are new to you, start with [Build a File Explorer (tree view)](/interview-question/build-a-file-explorer-tree-view). Every snippet is from the runnable solution

Question 3

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 4

Build a Todo App with Pagination, Filters & Optimistic Updates

Accepted Answer

**Target Audience:** Developers who can already build a local todo list (see [Build a Todo List](/interview-question/build-a-todo-list)) and now need to talk to a slow, unreliable server. Assumes useState, useEffect and keys. **Difficulty:** Medium > **How to read this doc:** Plain language first, then 📌 Interview term: callouts with the vocabulary interviewers listen for. Every code excerpt is copied from the runnable solution, and the Verified section q

Question 5

Build an E-commerce Product Filter grid

Accepted Answer

**Target Audience:** Developers preparing for a senior frontend machine coding round. Assumes React state, effects and list rendering; the derived-state ideas are explained from scratch. **Difficulty:** Hard > **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 while a script ticked filters, typed prices and removed chips. The catalogue

Question 6

Build a Dual Range (price) Slider

Accepted Answer

**Target Audience:** Frontend candidates preparing for a machine coding round. You know React components and useState; CSS tricks and pointer details are explained. **Difficulty:** Hard > **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 section quotes two kinds of real output: a jsdom run on Re

Question 7

Build a Data Table with Virtualized Rows, Sorting & Filtering

Accepted Answer

**Target Audience:** React developers who can build a basic sortable table (the medium version is [Build a Data Table with sorting and filtering](/interview-question/build-a-data-table-with-sorting-and-filtering)) and a windowed list ([Build a Virtualized List](/interview-question/build-a-virtualized-list)), and now need both at 20,000 rows. **Difficulty:** Hard > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. The Verified output was produced by r

Question 8

Build a Combobox (search + select)

Accepted Answer

**Target Audience:** Frontend developers preparing for a senior machine coding round. Assumes React components, state and props; the WAI-ARIA combobox pattern is explained from zero. **Difficulty:** Hard > **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 printe

FRONTEND MACHINE CODINGDECODED.

Easy