Question 1

Build a Progress Bar

Accepted Answer

**Target Audience:** Beginners preparing for a frontend machine coding round. You need basic React (props, `useState`); timers in effects and the ARIA details are explained here. **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 words an interviewer listens for. Code excerpts are copied from the runnable solution; the Verified blocks are real output from React 19.3.1 in StrictM

Question 2

Build a Traffic Light

Accepted Answer

**Target Audience:** Beginners preparing for a frontend machine coding round. You know a little JavaScript and React; state machines, timeouts, refs and effect cleanup 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. Why

Question 3

Build a Typewriter Effect

Accepted Answer

**Target Audience:** Beginners preparing for a frontend machine coding round. You know a little JavaScript and React; state machines, timeouts, effect cleanup and screen-reader techniques 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 (and one deliberately broken copy) on React 19.3.1 insi

Question 4

Build a Stopwatch

Accepted Answer

**Target Audience:** Beginners preparing for a frontend machine coding round. You know a little JavaScript and React; timestamps, intervals and effect cleanup 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. Why This Eve

Question 5

Build a Digital Clock

Accepted Answer

**Target Audience:** Beginners preparing for a frontend machine coding round. You know a little JavaScript and have seen a React component; timers and effects are explained from zero. **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 words an interviewer listens for. Every output quoted under "Verified" was printed by actually running the solution below on React 19.3.1 in jsdom

Question 6

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 7

Build an Image Carousel

Accepted Answer

**Target Audience:** Frontend candidates preparing for a machine coding round. Assumes basic React (`useState`, props, event handlers); timers, ARIA and CSS transforms are explained from zero. **Difficulty:** Medium > **How to read this doc:** Each idea comes in plain words first, then tagged with 📌 Interview term: so you also learn the vocabulary interviewers use. The output in section 6 was produced by running the solution on React 19.3.1 in jsdom, and in headless Chromium 141 f

Question 8

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 9

Build a debounced Search Bar

Accepted Answer

**Target Audience:** Frontend developers preparing for a machine coding round. Assumes basic React (components, `useState`), nothing about debouncing or request cancellation. **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 output in the Verified section was produced by actually running the solution on React 19.3.1 in jsdom with a

Question 10

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

FRONTEND MACHINE CODINGDECODED.

Easy

Build a Progress Bar

Build a Traffic Light

Build a Typewriter Effect

Build a Stopwatch

Build a Digital Clock

Build a Countdown Timer

Medium

Build an Image Carousel

Build a Password Generator

Build a debounced Search Bar

Build a Toast / Snackbar Queue with Pause on Hover

Build an Analog Clock

Build a Toast Notification system

Build Grid Lights

Hard

Build Whack-a-Mole

Build a Memory (flip-card) Game

Build a Live Stock Ticker with throttled updates