Question 1

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 2

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 3

Build a Virtualized List

Accepted Answer

**Target Audience:** Frontend developers preparing for machine coding rounds who know basic React (components, `useState`, props) but have never built a virtualized list. **Difficulty:** Hard > **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. The output in the Verified section was produced by actually running the solution on React 19.3.1 in jsdom, and the browser nu

Question 4

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

Accepted Answer

**Target Audience:** React developers who already understand the basic windowing maths (if not, start with [Build a Virtualized List](/interview-question/build-a-virtualized-list)) and want to understand, and rebuild, the API of a production library. **Difficulty:** Hard > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. The Verified section quotes output from running the solution on React 19.3.1 in jsdom, plus the real react-window 1.8.11 and 2.3.4

Question 5

Build a Data Table with Virtualized Rows, Sorting & Filtering

Accepted Answer

**Target Audience:** React developers who can build a basic sortable table (the medium version is [Build a Data Table with sorting and filtering](/interview-question/build-a-data-table-with-sorting-and-filtering)) and a windowed list ([Build a Virtualized List](/interview-question/build-a-virtualized-list)), and now need both at 20,000 rows. **Difficulty:** Hard > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. The Verified output was produced by r

Question 6

Build a Variable-Size Virtualized Feed (Dynamic Heights)

Accepted Answer

**Target Audience:** React developers who can already build a fixed-height virtualized list (if not, start with [Build a Virtualized List](/interview-question/build-a-virtualized-list)) and now face rows whose height is only known after rendering. **Difficulty:** Hard > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. The jsdom output in the Verified section comes from running the solution on React 19.3.1 with a fake layout engine and a hand-flushed

FRONTEND MACHINE CODINGDECODED.

Medium