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 Data Table with sorting and filtering

Accepted Answer

**Target Audience:** Developers preparing for a frontend machine coding round who know React state and lists and want to build a correct, reusable sortable and filterable table. **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 while a script clicked headers, typed and changed filters. ## 1. Why This Even Matt

Question 3

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 4

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 5

Build Nested Comments with Collapsible Threads & Voting

Accepted Answer

**Target Audience:** Experienced frontend candidates who can build a recursive comments list and now need the interaction details that real products have. **Difficulty:** Hard > **How to read this doc:** Plain words first, then a 📌 Interview term: tag. It assumes [Build a Nested Comments widget](/interview-question/build-a-nested-comments-widget) (recursion, tree helpers, reply boxes), so replying is not rebuilt here. The vote API is **simulated** in the solution with a 300 ms `se

Question 6

Build a Calendar Day View with overlapping events

Accepted Answer

**Target Audience:** Frontend candidates preparing for a machine coding round. Assumes basic React; no algorithms background beyond sorting. **Difficulty:** Hard > **How to read this doc:** Plain words first, then a 📌 Interview term: callout with the exact vocabulary. All "Verified" output was printed by the real code: the layout function run directly in Node 22, and the full component mounted with React 19.3.1 in StrictMode inside jsdom and driven by a script. ## 1. Why This Eve

FRONTEND MACHINE CODINGDECODED.

Easy