Question 1

Build a Mortgage Calculator

Accepted Answer

**Target Audience:** Beginners preparing for a frontend machine coding round. You know useState and forms; the finance maths and money rounding are the new parts. **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 tutorial, and the output in section 6 was produced by actua

Question 2

Build a Countdown Timer

Accepted Answer

**Target Audience:** Beginners preparing for a frontend machine coding round. You know a little JavaScript and React; deadlines, timeouts, effect cleanup and live regions are explained from zero. **Difficulty:** Easy > **How to read this doc:** Plain language first, then 📌 Interview term: callouts with the vocabulary interviewers expect. Every output under "Verified" was printed by running this exact solution on React 19.3.1 inside in jsdom. ## 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 a Toast / Snackbar Queue with Pause on Hover

Accepted Answer

**Target Audience:** Frontend developers who can already build a basic toast system and want the harder follow-up. Assumes React hooks; the timer maths is explained from scratch. **Difficulty:** Medium > **How to read this doc:** Plain words first, then 📌 Interview term: callouts with the precise vocabulary. This doc assumes the fundamentals from [Build a Toast Notification system](/interview-question/build-a-toast-notification-system) (provider, portal, live region) and focuses o

Question 5

Build an Analog Clock

Accepted Answer

**Target Audience:** Developers preparing for a frontend machine coding round who have built a simple React component before. Angles, SVG transforms and requestAnimationFrame are explained from zero. **Difficulty:** Medium > **How to read this doc:** Plain language first, then 📌 Interview term: callouts with the vocabulary interviewers expect. Every output under "Verified" was printed by running this exact solution on React 19.3.1 inside

Question 6

Build a Poll / Voting widget

Accepted Answer

**Target Audience:** Beginners to intermediate React developers. Assumes you know what a component and `useState` are; everything else, including how to make percentages add up, is explained from zero. **Difficulty:** Medium > **How to read this doc:** Plain language first, then 📌 Interview term: callouts with the vocabulary an interviewer expects. The Verified output was printed by the real solution in React 19.3.1 under `StrictMode` in jsdom, driven by a script that clicks the r

Question 7

Build a Virtualized List

Accepted Answer

**Target Audience:** Frontend developers preparing for machine coding rounds who know basic React (components, `useState`, props) but have never built a virtualized list. **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. The output in the Verified section was produced by actually running the solution on React 19.3.1 in jsdom, and the browser nu

Question 8

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 9

Build a Date Picker Calendar with Range Selection

Accepted Answer

**Target Audience:** Candidates who can already build a single-date picker and want the harder range version. Assumes React state and effects. **Difficulty:** Hard > **How to read this doc:** Plain language first, then a 📌 Interview term: callout with the exact vocabulary. Every line under "Verified" was printed by the real solution, mounted with React 19.3.1 in StrictMode inside jsdom and driven by a script, with `TZ=America/New_York` so a daylight saving change sits inside the t

Question 10

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

FRONTEND MACHINE CODINGDECODED.

Easy

Build a Mortgage Calculator

Build a Countdown Timer

Medium

Build a Password Generator

Build a Toast / Snackbar Queue with Pause on Hover

Build an Analog Clock

Build a Poll / Voting widget

Hard

Build a Virtualized List

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

Build a Date Picker Calendar with Range Selection

Build a Data Table with Virtualized Rows, Sorting & Filtering

Build Whack-a-Mole

Build a Memory (flip-card) Game

Build a Variable-Size Virtualized Feed (Dynamic Heights)