Prep path

Curated shortlist

FrontendAtlas Essential 60

A curated shortlist of high-signal frontend interview prompts selected from the shipped FrontendAtlas question bank.

Updated April 23, 2026FrontendAtlas Editorial60 curated frontend interview prompts across JavaScript utilities, UI coding, system design, and concepts

Essential 60 is a compact, curated practice list, not the full question bank. Prompts are grouped by round format, paired with a selection rationale, and linked directly to focused practice.

60total
41must know
33premium
Guided warm-up Open Question Library

Selection rationale

Why these 60?

The list is intentionally smaller than the full library so each prompt earns its place as a practice priority.

A transparent selection rationale

Each prompt includes a concise editorial rationale explaining the skill, behavior, or trade-off it is meant to exercise.

Balanced by round format

The shortlist mixes JavaScript utilities, UI coding, system design, and core concepts so practice does not overfit to one interview style.

Framework variants where useful

React, Angular, and Vue variants appear when the same UI pattern changes meaningfully across frameworks, instead of duplicating every prompt mechanically.

Connected to practice with progress

Each item opens a focused prompt, so you can solve it and keep progress attached to the curated list.

Practice path

How to use Essential 60

Pick a time horizon, filter the list, and repeat missed prompts until your explanations are predictable.

Use Must know filters first

7-day refresh

Start with must-know JavaScript utilities and one UI coding prompt per day. The goal is to restore speed on common patterns before broad review.

Rotate every section

14-day practice loop

Alternate JavaScript, UI coding, system design, and concepts. Revisit misses after two days so the loop builds repeatable recall, not one-pass familiarity.

Finish all 60 prompts

30-day baseline

Complete the full list, repeat high-leverage misses, and add at least two system design sessions. The outcome is a mock-ready frontend interview baseline.

Source context

Coverage references (5)

These references informed topic coverage; they do not verify company provenance or a numeric score.

Shortlist FAQ

Essential 60 FAQ

What is FrontendAtlas Essential 60?

FrontendAtlas Essential 60 is a curated shortlist of frontend interview prompts. It is designed for focused practice across JavaScript utilities, UI coding, frontend system design, and core concepts rather than browsing a full question bank.

How were the Essential 60 questions selected?

Questions were selected to balance JavaScript utilities, UI coding, system design, and concepts while keeping useful framework variants together. Each row shows the editorial rationale for including that prompt, and the coverage references describe topic coverage only.

How should I use Essential 60 in 7, 14, or 30 days?

For 7 days, filter to must-know prompts and focus on speed. For 14 days, rotate through every section and repeat missed prompts. For 30 days, finish all 60 and use the high-leverage misses as your mock interview checklist.

Is Essential 60 different from the full frontend interview questions hub?

Yes. The full hub gives broader answers, topic clusters, and paths into each technology. Essential 60 is a compact practice shortlist for deciding what to solve first.

Does Essential 60 include UI coding, JavaScript utilities, concepts, and system design?

Yes. The collection is intentionally split across JavaScript utilities, UI coding prompts, frontend concepts, and system design problems so it reflects the main frontend interview round formats.

Sections
Tiers

JavaScript functions

22 prompts
Debounce Function
Debounce appears across search, resize, validation, and async UI interview loops.
Must knowIntermediateJavaScript
Implement Promise.all
Promise aggregation tests async ordering, rejection behavior, and result preservation.
Must knowIntermediateJavaScriptPremium
Throttle Function
Throttle is the companion timing primitive for scroll, pointer, and high-frequency UI events.
Must knowIntermediateJavaScriptPremium
Deep Clone
Deep clone reveals object traversal, reference semantics, and edge-case discipline.
Must knowHardJavaScriptPremium
Concurrency-Limited Map (order-preserving)
Concurrency limits connect promises to realistic frontend API and resource control.
Must knowHardJavaScriptPremium
Deep Equal
Deep equality tests recursion, structural comparison, and JavaScript value edge cases.
Must knowHardJavaScriptPremium
Memoization
Memoization combines closures, cache keys, and performance trade-offs.
Must knowIntermediateJavaScriptPremium
Fetch JSON with Timeout + Abort
Fetch timeout work reflects practical browser API, abort, and error-handling interviews.
Must knowIntermediateJavaScript
Take Latest (Abort Previous Requests)
Take-latest behavior is a core stale-response pattern in typeahead and route transitions.
Must knowIntermediateJavaScript
Implement Array.prototype.map
Array map polyfills test callbacks, holes, thisArg, and iteration contracts.
Must knowIntermediateJavaScriptPremium
Implement Array.prototype.reduce
Reduce is a compact way to test accumulator design and native API semantics.
Must knowIntermediateJavaScriptPremium
Implement lodash.get
Path lookup utilities are common in frontend data shaping and edge-case interviews.
Must knowIntermediateJavaScriptPremium
Implement Function.prototype.bind
Bind checks this semantics, prototypes, partial arguments, and constructor behavior.
Must knowHardJavaScript
Group By
Group-by tasks represent practical array reduction and object construction.
Must knowIntermediateJavaScriptPremium
Implement the `new` Operator
Implementing new directly tests constructor calls and prototype linkage.
Must knowHardJavaScript
Event Emitter (Mini Implementation)
Event emitters reveal API design, callback storage, and cleanup behavior.
Must knowIntermediateJavaScriptPremium
Data Helper 1: Get Value by Path
Get-by-path is a smaller data-helper version of object traversal and fallback handling.
Must knowIntermediateJavaScript
Data Helper 2: Set Value by Path
Set-by-path adds mutation and immutability decisions to nested object traversal.
Must knowIntermediateJavaScriptPremium
Implement Array.prototype.filter
Filter completes the core array-polyfill trio and exercises callback truthiness.
Must knowIntermediateJavaScriptPremium
Sanitize href URL (Block javascript: XSS)
URL sanitization brings security judgment into a small coding prompt.
Must knowIntermediateJavaScript
Promise.any (First Fulfilled)
Promise.any extends combinator reasoning beyond the most common all implementation.
High leverageIntermediateJavaScript
Curry Function
Currying is less universal than async tasks but still a frequent closure and arity signal.
High leverageIntermediateJavaScriptPremium

UI coding

16 prompts
Debounced Search with Fake API
Debounced search combines controlled input, async state, cancellation, and loading feedback.
Must knowIntermediateReact +2Premium
Contact Form (Component + HTTP)
Forms are a core interview surface for validation, submit state, and API feedback.
Must knowIntermediateReact +2Premium
Autocomplete Interview Question
Autocomplete adds debounce, stale-response handling, keyboard, focus, no-results, and accessibility constraints to search.
Must knowIntermediateReact +2
Multi-step Signup Form
Multi-step forms test state ownership, validation flow, and recovery from partial progress.
Must knowIntermediateReact +2Premium
Nested Checkbox Tree (Parent–Child Sync)
Nested checkboxes force tree state, parent-child sync, and edge-case handling.
Must knowIntermediateReact +2Premium
Paginated Data Table
Paginated tables test derived data, empty states, list rendering, and controls.
Must knowIntermediateReact +2Premium
Shopping Cart Mini
Shopping carts combine collection updates, derived totals, and immutable state changes.
High leverageIntermediateReact +2Premium
Nested Comments (Infinite Replies, Single Active Reply Input)
Nested comments add recursion, local editing state, and tree rendering.
High leverageIntermediateReact +2Premium
Invite Chips Input (Tags + Autocomplete)
Chips input is a dense event, keyboard, form, and accessibility exercise.
High leverageIntermediateReact +2Premium
Todo List (Component with Local State)
Todo lists remain useful for checking basic local state and list updates quickly.
High leverageEasyReact +2
Filterable / Searchable User List
Filterable lists test search state, derived collections, and empty results.
High leverageIntermediateReact +2Premium
Transfer List (Select + Move Between Two Lists)
Transfer lists combine selection state, bulk actions, and list movement.
High leverageIntermediateReact +2Premium
Accordion / FAQ Component
Accordions are compact state and accessibility prompts for UI interviews.
High leverageIntermediateReact +2Premium
Tabs / Multi-View Switcher
Tabs check state transitions, keyboard expectations, and component boundaries.
High leverageIntermediateReact +2Premium
Theme Toggle with Persisted Light/Dark Mode
Theme toggles connect UI state to persistence and OS preference defaults.
High leverageIntermediateReact +2Premium
Progress Bar (0–100 with Threshold Colors)
Progress bars are a small but useful prompt for constrained props and visual states.
High leverageEasyReact +2Premium

System design

8 prompts
Design a Toast Notification System
A global toast system tests API design, stacking, timers, portals, and accessibility.
Must knowIntermediateFrontend
Infinite Scroll System Design: Frontend Interview Answer
Infinite scroll is a classic frontend design prompt for pagination, virtualization, and recovery.
Must knowIntermediateFrontend
Real-time Search with Debounce & Caching
Real-time search connects input handling, request policy, caching, and stale-result control.
Must knowIntermediateFrontendPremium
News Feed / Timeline Front-End System Design
Feed design is a high-signal prompt for ranking, caching, virtualization, and updates.
Must knowHardFrontendPremium
Multi-step Form with Autosave
Autosave forms test data modeling, validation, persistence, and conflict handling.
Must knowIntermediateFrontendPremium
Component-driven Design System Architecture
Design systems expose component APIs, tokens, theming, accessibility, and governance.
High leverageHardFrontendPremium
Design an AI Chat Composer and Streaming Turn
Chat input design covers streaming, drafts, attachments, submission state, and resilience.
High leverageIntermediateFrontend
UI Component and State Design From a Mock
State-from-mock prompts are common senior frontend screens for scope and data ownership.
High leverageIntermediateFrontendPremium

Concepts

14 prompts
JavaScript Event Loop Visualizer: Learn by Predicting
Event loop reasoning underpins async output, rendering, timers, and promise order.
Must knowHardJavaScript
Explain Closures in JavaScript
Closures explain stateful functions, module privacy, hooks, and many utility prompts.
Must knowIntermediateJavaScript
Promises and async/await
Promises and async-await are the foundation for async coding and UI race-condition prompts.
Must knowIntermediateJavaScript
Explain Event Delegation in JavaScript
Event delegation connects DOM events, bubbling, dynamic lists, and performance.
Must knowIntermediateJavaScript
prototype vs __proto__ in JavaScript (Prototype Chain, new, and Object.getPrototypeOf)
Prototype-chain knowledge supports bind, new, instanceof, and inheritance discussions.
Must knowIntermediateJavaScript
Mutability vs Immutability in JavaScript (State, References, and Side Effects)
Mutability reasoning is central to frontend state updates and bug explanation.
Must knowIntermediateJavaScript
How do you optimize a web page’s response or load time?
Load-time optimization is a cross-cutting frontend interview topic for every stack.
Must knowIntermediateJavaScript
DOM XSS Prevention in JavaScript: Dangerous Sinks, Safe APIs, and Trusted Types
DOM XSS prevention is a high-signal security topic for production frontend work.
Must knowIntermediateJavaScript
useEffect() in React: syncing with the outside world (timing, dependencies, cleanup)
useEffect reveals side-effect boundaries, dependency reasoning, and cleanup discipline.
Must knowIntermediateReact
What is the significance of keys in lists in React?
Keys are a common list-rendering failure mode and reconciliation discussion point.
Must knowIntermediateReact
What are change detection strategies in Angular, and how do they work?
Change detection is the highest-leverage Angular runtime and performance concept.
High leverageIntermediateAngular
ref vs reactive in Vue: what’s the real difference, when should you use each, and what are the common reactivity traps?
Vue ref versus reactive reasoning exposes core reactivity and state-shape traps.
High leverageIntermediateVue
How would you make a page accessible?
Accessibility is expected in modern UI interviews and validates inclusive implementation judgment.
High leverageIntermediateHTML
What is the difference between Grid and Flexbox, and when should each be used?
Grid versus Flexbox is a durable layout trade-off question for frontend interviews.
High leverageIntermediateCSS