Question 1

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 2

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 3

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 4

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

Question 5

Build a Password Generator

Accepted Answer

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

Question 6

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

Question 7

Build a Transfer List

Accepted Answer

**Target Audience:** Frontend developers preparing for a machine coding round. Assumes React state, props and lists; derived state, sets and the indeterminate checkbox 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 (StrictMode) in jsdom

Question 8

Build a Data Table with sorting and filtering

Accepted Answer

**Target Audience:** Developers preparing for a frontend machine coding round who know React state and lists and want to build a correct, reusable sortable and filterable table. **Difficulty:** Medium > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. Code excerpts are copied from the runnable solution, and the Verified section quotes what it printed on React 19.3.1 while a script clicked headers, typed and changed filters. ## 1. Why This Even Matt

Question 9

Build a Calculator

Accepted Answer

**Target Audience:** Frontend candidates preparing for a machine coding round. You know React components and useState; parsing 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. Code excerpts come from the runnable solution; the outputs were printed by running it in Node 22, in React 19.3.1 under jsdom, and

Question 10

Build an E-commerce Product Filter grid

Accepted Answer

**Target Audience:** Developers preparing for a senior frontend machine coding round. Assumes React state, effects and list rendering; the derived-state ideas are explained from scratch. **Difficulty:** Hard > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. Code excerpts are copied from the runnable solution, and the Verified section quotes what it printed on React 19.3.1 while a script ticked filters, typed prices and removed chips. The catalogue

FRONTEND MACHINE CODINGDECODED.

Easy

Build a Temperature Converter

Medium

Build a Search Bar with History

Build an Undoable Counter (undo/redo history)

Build Tic-Tac-Toe

Build a Password Generator

Build Resizable Panels with useResizable Hook

Build a Transfer List

Build a Data Table with sorting and filtering

Build a Calculator

Hard

Build an E-commerce Product Filter grid

Build a File Explorer with Nested Drag-and-Drop

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

Build a Mini Spreadsheet (Excel)