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

Accepted Answer

**Target Audience:** Beginners preparing for a frontend machine coding round. You know basic React props and state; accessibility attributes are new territory. **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 o

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

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 7

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 8

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 9

Build an Accordion component

Accepted Answer

**Target Audience:** Beginners preparing for a frontend machine coding round. You need basic React (components, props, `useState`); no accessibility background is assumed. **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. All code excerpts are copied from the runnable solution, and every "Verified" block is real output from running it (React 19

Question 10

Build a File Explorer Toolbar — Breadcrumbs, Search & Context Menu

Accepted Answer

**Target Audience:** Frontend candidates who can already render a recursive tree in React and want the "power user" layer on top. **Difficulty:** Medium > **How to read this doc:** Plain words first, then a 📌 Interview term: tag. This question assumes the tree itself; if recursion, `expanded` sets or immutable tree updates are new to you, start with [Build a File Explorer (tree view)](/interview-question/build-a-file-explorer-tree-view). Every snippet is from the runnable solution

FRONTEND MACHINE CODINGDECODED.

Easy

Build an Avatar Group

Build a Counter component

Build a Toggle Switch

Build a Show/Hide Password Input

Build a Segmented Control

Build a Tabs component

Build a Dropdown Menu

Build a Todo List

Medium

Build a File Explorer Toolbar — Breadcrumbs, Search & Context Menu

Build an Image Carousel

Build a Search Bar with History

Build Wordle

Build an Undoable Counter (undo/redo history)

Build a Selectable Cell Grid (drag to select)

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

Build a Tag / Chip Input

Hard

Build a File Explorer with Nested Drag-and-Drop

Build a Virtualized List

Build a Dual Range (price) Slider

Build a Calendar / Date Picker

Build a Kanban board with drag and drop

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

Build a Drag-and-drop file uploader with configurable chunk size

Build a Date Picker Calendar with Range Selection