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 Show/Hide Password Input

Accepted Answer

**Target Audience:** Beginners preparing for a frontend machine coding round. Assumes basic HTML forms and a little JavaScript; React is explained as we go. **Difficulty:** Easy > **How to read this doc:** Plain language first, then 📌 Interview term: callouts with the precise vocabulary. The Verified output comes from mounting the solution with React 19.3.1 in jsdom and driving it with a script; facts about real browsers are either measured in Chromium 141 or cited. ## 1. Why Thi

Question 4

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 5

Build a Selectable Cell Grid (drag to select)

Accepted Answer

**Target Audience:** Frontend candidates who know React components and `useState`. Pointer capture, coordinate-to-cell mapping, derived selection and the roving tabindex are explained from zero. **Difficulty:** Medium > **How to read this doc:** Plain words first, then 📌 Interview term: callouts. Excerpts come from the runnable solution. jsdom has no layout, so the verifier gave the grid a known box and sent pointer events with chosen coordinates; a second run in real Chromium 141

Question 6

Build an Image Carousel with Infinite Loop & Swipe

Accepted Answer

**Target Audience:** Frontend candidates who can already build a basic carousel and now face the "make it feel native" follow-up. Assumes React hooks; pointer events, transitions and the tricks are explained from zero. **Difficulty:** Medium > **How to read this doc:** Each idea is explained in plain words, then tagged with 📌 Interview term:. This doc assumes the fundamentals of [the basic image carousel](/interview-question/build-an-image-carousel) (wrap-around, autoplay with cle

Question 7

Build Infinite Scroll with IntersectionObserver & Skeleton

Accepted Answer

**Target Audience:** React developers who have built (or read) [infinite scroll with a scroll listener](/interview-question/build-infinite-scroll) and want the IntersectionObserver version with skeleton loading cards. **Difficulty:** Medium > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. The Verified section has two parts. In jsdom, which has no IntersectionObserver, the driver installed a small stub and decided by hand when the sentinel was visi

Question 8

Build an Accessible Modal with Focus Trap & Scroll Lock

Accepted Answer

**Target Audience:** Frontend candidates who can already build a basic portal modal (see [Build a Modal dialog](/interview-question/build-a-modal-dialog)) and now need to make it pass an accessibility review. **Difficulty:** Medium > **How to read this doc:** Plain words first, then a 📌 Interview term: callout with the precise vocabulary. Every output below was printed by the real solution on React 19.3.1, in jsdom and in real Chromium 141, where real Tab presses, `inert`, scroll

Question 9

Build a Star Rating component

Accepted Answer

**Target Audience:** Frontend candidates preparing for a machine coding round. You know React components and useState; the rest is explained. **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 are copied from the runnable solution, and the Verified output was printed by running it on React 19.3.1. ## 1. Why This Eve

Question 10

Build Resizable Panels with useResizable Hook

Accepted Answer

**Target Audience:** Frontend candidates who know React components and `useState`. Pointer events, pointer capture, custom hook design and the separator role are explained from zero. **Difficulty:** Medium > **How to read this doc:** Plain words first, then 📌 Interview term: callouts. Every excerpt is copied from the runnable solution. jsdom, where the solution was verified, has no layout, so the drag was driven by `clientX` values; a second run in real Chromium 141 checked the re

FRONTEND MACHINE CODINGDECODED.

Easy

Build a Notification Badge

Build a Counter component

Build a Show/Hide Password Input

Medium

Build a Color Picker

Build a Selectable Cell Grid (drag to select)

Build an Image Carousel with Infinite Loop & Swipe

Build Infinite Scroll with IntersectionObserver & Skeleton

Build an Accessible Modal with Focus Trap & Scroll Lock

Build a Star Rating component

Build Resizable Panels with useResizable Hook

Build Infinite Scroll

Hard

Build a File Explorer with Nested Drag-and-Drop

Build a Dual Range (price) Slider

Build a Kanban board with drag and drop

Build a Canvas Drawing Board

Build a Calendar Day View with overlapping events