Frontend interview essentials
The 24 problems that cover 80% of what a senior frontend round will ask.
A short, dense playlist for the two weeks before a senior frontend interview. UI machine-coding first (the half that's hardest to cram), then the JavaScript idioms that trip real candidates up — closures, promises, event handling, deep-equal.
24 items · ~8h of focused work
Machine coding
- Build an autocompleteA text input that filters a fixed list as you type, and fills itself in when you pick a suggestion — the component behind every search box.medium
- Build a debounced search inputA search box that only fires once you stop typing — the single most-asked "implement this" question, turned into a real UI.medium
- Build infinite scrollA list that loads more of itself as you approach the bottom, with a cap so it does not load forever — the pattern behind every feed.medium
- Build a modal dialogOpen, close by three different routes, and don't close by accident — the small interaction contract every modal in production actually has to get right.medium
- Build accessible tabsSwitching panels is the easy 90% — the arrow-key navigation the ARIA tabs pattern actually requires is the part that gets skipped.easy
- Build collapsible nested commentsA recursive comment thread where collapsing a reply hides everything nested under it — Reddit and Hacker News both live or die on this one component.medium
- Build a star ratingFive clickable stars that commit a rating, with a hover preview before you commit — small, but the accessible-labelling and state-management bugs hide in the details.easy
- Build a toast notification systemNotifications that stack, dismiss themselves, and can be dismissed early — the queue-management problem that looks like a styling task until you actually build it.medium
JavaScript idioms
- Write debounce from scratchStop a function firing on every keystroke. The classic interview question, and the thing that makes search boxes usable.medium
- Implement Throttle Rate LimiterEnsure a function is executed at most once per specified time interval.medium
- Compare two objects properlyWhy does `{a:1} === {a:1}` return false? Write the deep comparison that answers what you actually meant.medium
- Deep clone a nested structureCopy a nested object so that editing the copy never touches the original — including when the object refers to itself.hard
- Curry a function of fixed arityTurn `f(a, b, c)` into `f(a)(b)(c)` so you can bake in the first argument now and supply the rest later.medium
- Re-implement Promise.all from ScratchExecute an array of promises concurrently and resolve with an array of all fulfilled values.hard
- Implement Promise.race from scratchSettle as soon as the first of several promises settles — the primitive behind every timeout and every fastest-mirror wins fetch.medium
- Custom Event Emitter / PubSubBuild a event subscription pattern with `.on()`, `.emit()`, and `.off()` methods.medium
System design
- How to Approach a Frontend System Design InterviewA repeatable framework for an open-ended 'design X' prompt — clarifying requirements, naming trade-offs explicitly, and why saying 'it depends' correctly is a strength.11 min
- Worked Scenario: Design a Social Media FeedA full worked answer to a classic interview prompt — rendering strategy, an infinite-scroll data model, virtualization, and optimistic interactions, with the trade-offs named.14 min
- Worked Scenario: Design an Image-Heavy E-Commerce PLPA full worked answer for a product listing page: rendering strategy for SEO and freshness, image loading strategy against Core Web Vitals, and filter-driven state.13 min
- Worked Scenario: Design a Real-Time Collaborative Editor's FrontendA full worked answer for a Google-Docs-style editor's frontend: the local-first optimistic model, conflict handling conceptually, and why this is a CSR problem.14 min
React craft
- useState and State UpdatesGiving a component its own memory with useState, why state updates trigger a re-render, the functional-update form, and why React batches multiple updates together.10 min
- useEffect BasicsWhat an effect is for — synchronizing a component with something outside React — when it runs relative to rendering and painting, and why it's not just "code that runs after render."9 min
- useMemo and useCallbackMemoizing an expensive calculation and memoizing a function's identity across renders — what each buys you, and why reaching for either without measuring is often premature.10 min
- Testing React ComponentsThe behavior-first testing philosophy behind React Testing Library — render, query like a user would, interact, assert — and why testing internal state makes tests brittle.8 min