Question 1

Build a Notification Badge

Accepted Answer

**Target Audience:** Beginners preparing for a frontend machine coding round. Assumes basic HTML, CSS and JavaScript; React ideas are explained as they come up. **Difficulty:** Easy > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. The Verified output was produced by mounting the solution with React 19.3.1 inside in jsdom and driving it with clicks and key presses. ## 1. Why This Even Matters — A Story First A post

Question 2

Build a Counter component

Accepted Answer

**Target Audience:** Beginners preparing for their first frontend machine coding round. You know a little HTML and JavaScript; React is new or rusty. **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 actually running it on React 19

Question 3

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 4

Build a Temperature Converter

Accepted Answer

**Target Audience:** Beginners preparing for a frontend machine coding round. You know useState and controlled inputs; designing state for two inputs that depend on each other is the new part. **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 s

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 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 7

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 8

Build a Search Bar with History

Accepted Answer

**Target Audience:** Frontend developers preparing for a machine coding round. Assumes basic React state and events; `localStorage` and focus management 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 typed, p

Question 9

Build an Undoable Counter (undo/redo history)

Accepted Answer

**Target Audience:** Frontend candidates preparing for a machine coding round. Comfortable with React components and useState; the undo/redo model is 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 words an interviewer listens for. Excerpts come from the runnable solution on this page, and the Verified section quotes what it printed on Reac

Question 10

Build Tic-Tac-Toe

Accepted Answer

**Target Audience:** Frontend candidates preparing for a machine coding round. Assumes basic HTML, CSS and JavaScript and a first look at React components; no game-programming background needed. **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. All code excerpts are copied from the runnable solution on this page, and the Verified section quot

FRONTEND MACHINE CODINGDECODED.

Easy

Build a Notification Badge

Build a Counter component

Build a Progress Bar

Build a Temperature Converter

Build a Digital Clock

Build a Todo List

Medium

Build a Color Picker

Build a Search Bar with History

Build an Undoable Counter (undo/redo history)

Build Tic-Tac-Toe

Build a Selectable Cell Grid (drag to select)

Build a Tag / Chip Input

Build a debounced Search Bar

Build a Flight Booker

Hard

Build a Dual Range (price) Slider

Build a Calendar / Date Picker

Build Connect Four

Build a Mini Spreadsheet (Excel)

Build a Date Picker Calendar with Range Selection

Build a Collaborative Kanban Board with Yjs (CRDT)

Build a Data Table with Virtualized Rows, Sorting & Filtering

Build Whack-a-Mole