Question 1

Build an Avatar Group

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 comes from mounting the solution with React 19.3.1 inside in jsdom. jsdom never downloads images and has no layout, so the image error was fired by the driver and the o

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

Build a Character Counter (textarea with limit)

Accepted Answer

**Target Audience:** Beginners preparing for a frontend machine coding round. Assumes you know basic HTML and a little JavaScript; no React experience beyond "a component is a function that returns JSX" is needed. **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. Nothing in the Verified section is from memory: the solution was mounted with Reac

Question 6

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 7

Build a Read More / Show Less text component

Accepted Answer

**Target Audience:** Beginners preparing for a frontend machine coding round. Assumes basic HTML 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 comes from mounting the solution with React 19.3.1 in jsdom and clicking through it with a script. jsdom has no layout engine, so the CSS line-clamp facts were measured separately in Chromium 141, and the

Question 8

Build a Skeleton Loader

Accepted Answer

**Target Audience:** Beginners preparing for a frontend machine coding round. You need basic React (props, `useState`, `useEffect`); data-loading patterns and the accessibility 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 fr

Question 9

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 10

Build a Dropdown Menu

Accepted Answer

**Target Audience:** Frontend candidates preparing for a machine coding round. Assumes basic HTML, JavaScript and React components with `useState`; everything else is explained here. **Difficulty:** Easy > **How to read this doc:** Each idea is explained in plain words first, then tagged with 📌 Interview term: so you also learn the vocabulary an interviewer listens for. Every output quoted below was printed by the real solution, run on React 19.3.1 in jsdom and again in real Chrom

FRONTEND MACHINE CODINGDECODED.

Easy

Build an Avatar Group

Build a Traffic Light

Build a Progress Bar

Build a Show/Hide Password Input

Build a Character Counter (textarea with limit)

Build a Typewriter Effect

Build a Read More / Show Less text component

Build a Skeleton Loader

Medium

Build a Lazy-loaded Image

Build an Image Carousel

Build a Nested Comments widget

Build Tic-Tac-Toe

Build a Command Palette (kbar / cmdk) with Fuzzy Search

Build a Tabs Component with URL Sync & Lazy Mounting

Build a Flight Booker

Build an Accessible Modal with Focus Trap & Scroll Lock

Hard

Build an E-commerce Product Filter grid

Build a Kanban board with drag and drop

Build a Date Picker Calendar with Range Selection

Build a Chat UI

Build a Memory (flip-card) Game

Build a Live Stock Ticker with throttled updates

Build @Mentions in a textarea