Question 1

Build a Segmented Control

Accepted Answer

**Target Audience:** Beginners preparing for a frontend machine coding round. You need basic React (props, `useState`); controlled components and the radio group pattern 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

Question 2

Build a Tabs component

Accepted Answer

**Target Audience:** Beginners preparing for a frontend machine coding round. You need basic React (props, `useState`); the accessibility pattern is 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. Code excerpts come from the runnable solution; the Verified blocks are real output from React 19.3.1 in StrictMode (jsdom) and

Question 3

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

Question 4

Build dependent (Country–State) dropdowns

Accepted Answer

**Target Audience:** Frontend candidates preparing for a machine coding round. You know a little HTML and JavaScript; no React form experience 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 the output in section 6 was produced by actually running it on React 19.3.1

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 Autocomplete / Typeahead search

Accepted Answer

**Target Audience:** Frontend developers preparing for a machine coding round. Assumes basic React state and effects; keyboard navigation, caching and ARIA roles 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 scripted dri

Question 7

Build a File Explorer (tree view)

Accepted Answer

**Target Audience:** Frontend candidates preparing for a machine coding round. You know a little React (components, `useState`); no tree or accessibility experience needed. **Difficulty:** Medium > **How to read this doc:** Every idea is explained in plain words first, then tagged with 📌 Interview term: so you also learn the vocabulary an interviewer listens for. All code comes from the runnable solution next to this tutorial, and the Verified section quotes what it printed when a

Question 8

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 9

Build a Custom Multi-select Dropdown

Accepted Answer

**Target Audience:** Frontend developers preparing for a machine coding round. Assumes React state and props; sets, chips, focus handling and multi-select ARIA 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 cl

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

Build a Tabs component

Build a Dropdown Menu

Medium

Build dependent (Country–State) dropdowns

Build a Selectable Cell Grid (drag to select)

Build an Autocomplete / Typeahead search

Build a File Explorer (tree view)

Build a Star Rating component

Build a Custom Multi-select Dropdown

Build Resizable Panels with useResizable Hook

Build a Transfer List

Hard

Build a Virtualized List

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

Build a Mini Spreadsheet (Excel)

Build a Date Picker Calendar with Range Selection

Build a Data Table with Virtualized Rows, Sorting & Filtering

Build a basic Rich Text Editor

Build @Mentions in a textarea

Build a Combobox (search + select)