FrontendAtlas Essential 60

Implement debounce(fn, wait) that delays execution until the user stops triggering events. Clear the previous timer on each call, preserve this/args, and make the timing predictable for search/resize use cases.

Debounce appears across search, resize, validation, and async UI interview loops.

Implement a function `promiseAll(promises)` that behaves like `Promise.all`. It should take an array of values or promises and return a single promise that resolves to an array of results, preserving order, or rejects a…

Promise aggregation tests async ordering, rejection behavior, and result preservation.

Implement a function `throttle(fn, interval)` that ensures `fn` is executed at most once during every `interval` milliseconds, no matter how many times it's triggered. In this exercise we use a leading-only throttle: th…

Throttle is the companion timing primitive for scroll, pointer, and high-frequency UI events.

Create a deep clone of an object/array so nested structures are copied by value. Discuss limits (functions, dates, cycles) and choose a strategy that matches constraints, such as recursion with a map to handle circular…

Deep clone reveals object traversal, reference semantics, and edge-case discipline.

Implement a concurrency-limited async map that preserves order. Run at most N promises at a time, resolve results in input order, and reject early on errors to avoid hanging work.

Concurrency limits connect promises to realistic frontend API and resource control.

Implement a function `deepEqual(a, b)` that returns `true` when two values are deeply equal — primitives by value and objects/arrays by recursively comparing their properties. Handle Dates, RegExps, and `NaN`.

Deep equality tests recursion, structural comparison, and JavaScript value edge cases.

Implement memoize(fn) that caches results for repeated calls. Choose a cache key strategy, discuss memory growth/eviction, and clarify that memoization is safe mainly for pure functions with stable outputs.

Memoization combines closures, cache keys, and performance trade-offs.

Implement fetchJson(url, options) that fetches JSON with built-in timeout and abort support. It should abort on timeout, respect an external AbortSignal, and throw on non-2xx HTTP responses. This mirrors real-world clie…

Fetch timeout work reflects practical browser API, abort, and error-handling interviews.

Implement takeLatest(fn) that wraps an async function and guarantees only the most recent call can resolve. Each new call aborts the previous one via AbortController, and stale results must not update state. This preven…

Take-latest behavior is a core stale-response pattern in typeahead and route transitions.

Recreate the native `.map()` method **without using it**. Your `myMap` must call `callbackFn(value, index, array)` for each **existing** index, bind `thisArg`, and return a new array with the **same length** where holes…

Array map polyfills test callbacks, holes, thisArg, and iteration contracts.

Recreate the native `.reduce()` method **without using it**. Your `myReduce` must call the reducer with `(accumulator, currentValue, index, array)` only for existing indices, handle an optional `initialValue`, and retur…

Reduce is a compact way to test accumulator design and native API semantics.

Implement `get(obj, path, defaultValue)` where `path` is a string like `user.profile.name` or `a[0].b`. Return `defaultValue` when the path does not exist.

Path lookup utilities are common in frontend data shaping and edge-case interviews.

Implement `myBind(fn, thisArg, ...boundArgs)` that behaves like `Function.prototype.bind`. It must: 1) Bind `this` to `thisArg` for normal calls. 2) Support partial application (pre-filling arguments). 3) Work with `new…

Bind checks this semantics, prototypes, partial arguments, and constructor behavior.

Group an array of items by a key (function or property). Build an object or Map where each key maps to an array of items, and preserve input order inside each group. Concepts: arrays, grouping, objects.

Group-by tasks represent practical array reduction and object construction.

Implement a myNew helper that mimics the new operator. Create an object linked to the constructor prototype, call the constructor with this, and return the constructor’s object result if provided. This tests prototype l…

Implementing new directly tests constructor calls and prototype linkage.

Build a tiny event emitter with on, off, and emit. Store listeners per event, allow multiple listeners, and ensure off removes only the specified handler without breaking others. This tests data structures and event flo…

Event emitters reveal API design, callback storage, and cleanup behavior.

Implement `getByPath(obj, path, fallback?)` that safely reads a nested value from an object. This is extremely common in frontend screens (reading deep API responses, feature flags, form state) and shows up often in int…

Get-by-path is a smaller data-helper version of object traversal and fallback handling.

Implement setByPath(obj, path, value) that returns a new object/array tree with the value written at the nested path. Normalize dot or segment paths, create missing containers based on numeric segments, and never mutate…

Set-by-path adds mutation and immutability decisions to nested object traversal.

Recreate the native `Array.prototype.filter()` method as `myFilter`. It should call a provided callback once for each existing element in the array, include the element in the new array if the callback returns a truthy…

Filter completes the core array-polyfill trio and exercises callback truthiness.

Implement sanitizeHrefUrl(input) to safely use user-provided URLs in an <a href="...">. Use an allowlist for safe schemes (http/https/mailto/tel) and safe relative URLs, and block dangerous schemes like javascript: or d…

URL sanitization brings security judgment into a small coding prompt.

Implement promiseAny(promises) that behaves like Promise.any. It should resolve with the first fulfilled value, ignoring rejections until all inputs reject. If everything rejects (or the input is empty), it should rejec…

Promise.any extends combinator reasoning beyond the most common all implementation.

Implement curry(fn) to transform a multi-argument function into chained calls. Collect arguments across invocations, allow partial application, and invoke the original function once enough args have been provided. Conce…

Currying is less universal than async tasks but still a frequent closure and arity signal.

Build a React debounced search input with fake API calls. Use useEffect + setTimeout cleanup to cancel stale requests, and manage loading, error, and empty states for realistic UX. Concepts: react, state, effects. React…

Debounced search combines controlled input, async state, cancellation, and loading feedback.

Build a contact form using a React component with controlled inputs and basic validation. You will only work in `src/App.tsx` – the HTML shell and CSS are already set up. On submit, validate the input and send the form…

Forms are a core interview surface for validation, submit state, and API feedback.

Build an **autocomplete search bar** in React. As the user types, show a dropdown of suggestions filtered from a dataset. Add debounced searching, mouse selection, keyboard navigation (↑/↓/Enter/Escape), and close-on-ou…

Autocomplete adds keyboard, async, focus, and accessibility constraints to search.

Build a 3-step signup flow in React that collects basic info, address info, and then shows a read-only summary before submitting. Each step should only advance when its inputs are valid.

Multi-step forms test state ownership, validation flow, and recovery from partial progress.

Build a small React UI that renders a parent checkbox and multiple child checkboxes. The parent controls all children, and the children keep the parent in sync (checked, unchecked, or indeterminate). React focus: comput…

Nested checkboxes force tree state, parent-child sync, and edge-case handling.

Build a simple paginated data table in React that shows a static list of users. Display 5 rows per page, with Previous / Next controls and a "Page X of Y" indicator. Disable the navigation buttons appropriately on the f…

Paginated tables test derived data, empty states, list rendering, and controls.

Build a small shopping cart UI in React. Show a list of products, let the user add them to the cart, adjust quantities, remove items, and display derived totals for item count and price. React focus: use immutable updat…

Shopping carts combine collection updates, derived totals, and immutable state changes.

Build a React nested comments panel with infinite replies. Users can add top-level comments and reply to any comment, creating an infinitely deep tree. Clicking Reply should open an input ONLY under that comment (single…

Nested comments add recursion, local editing state, and tree rendering.

Build a Material-like invite field in React. As users type, show autocomplete suggestions, convert selections into removable chips, and support keyboard shortcuts (Enter/comma/backspace).

Chips input is a dense event, keyboard, form, and accessibility exercise.

Create a local-state todo list: add, toggle, and remove items. Keep input state controlled, generate stable ids, and update the todos array immutably so React can detect changes and re-render correctly. Framework focus:…

Todo lists remain useful for checking basic local state and list updates quickly.

Filter a React user list by search text and role. Derive filtered results without mutating the source array, and show an empty state when no matches exist. Add performance notes (memoization or debouncing), accessibilit…

Filterable lists test search state, derived collections, and empty results.

Build a React transfer list UI with two panels and checkbox selection. Users select items in one list and move them to the other with arrow buttons. Preserve item order, clear selection after transfer, and disable butto…

Transfer lists combine selection state, bulk actions, and list movement.

Build a simple FAQ (accordion) UI in React using component state. Clicking a question should toggle its answer. By default, only one item can be open at a time, but the user can enable a mode where multiple items can st…

Accordions are compact state and accessibility prompts for UI interviews.

Implement React tabs with a single activeTab state. Buttons update the value and conditional rendering shows only the active panel, with clear active styles and accessible button semantics. Include keyboard navigation a…

Tabs check state transitions, keyboard expectations, and component boundaries.

Add a global light/dark theme toggle using React Context. The selected theme should be stored in localStorage and restored when the page reloads. React focus: use Context to persist theme in localStorage and sync the DO…

Theme toggles connect UI state to persistence and OS preference defaults.

Build a React progress bar for values 0–100 with +10%/−10% controls. Clamp progress to the valid range and change the bar color by thresholds (e.g., red &lt;34, orange 34–66, green &gt;66). Show the numeric percentage a…

Progress bars are a small but useful prompt for constrained props and visual states.

Design a global toast/alert system that can be triggered from anywhere in the app (e.g. `toast.success()`, `toast.error()`). Focus on global state, rendering through a portal, stacking multiple toasts, auto-dismiss timers, and accessible behavior. Key considerations include: how to expose a simple global API, how to manage timers and cleanup safely, how to handle z-index and stacking order, and how to support responsive placements (top-right, bottom-left, mobile full-width) with good ARIA roles and focus handling.

A global toast system tests API design, stacking, timers, portals, and accessibility.

Design an infinite-scroll list with paginated loading, error recovery, and virtualization strategy so scrolling stays fast while DOM size remains bounded.

Infinite scroll is a classic frontend design prompt for pagination, virtualization, and recovery.

Design a real-time search module where results update as the user types, focusing only on the frontend side: state management, debouncing, and caching. Assume there is some abstract async search function in the background, but your job is to design how the input, debounced calls, cache, and UI states work. Key considerations include: choosing debounce (and explaining why) vs throttle, maintaining a client-side cache of query → results so repeated queries are instant, simulating cancellation of outdated requests (ignoring late responses), handling slow typing vs fast typing without flicker or stale results, and designing UX states for empty query, loading, no results, and error.

Real-time search connects input handling, request policy, caching, and stale-result control.

Design a social news feed/timeline UI with pagination, virtualization, media lazy-loading, realtime updates, and smooth interactions.

Feed design is a high-signal prompt for ranking, caching, virtualization, and updates.

Design a 4-step form with validation, step transitions, a progress bar, and automatic autosave to localStorage. Users should be able to refresh or leave the page and continue where they left off. Key considerations include form architecture, throttled/debounced autosave, inline vs submit validation, dirty-state tracking, and restoring from saved drafts.

Autosave forms test data modeling, validation, persistence, and conflict handling.

Design a component-based design system for a mid-to-large scale product: buttons, inputs, tabs, banners, dialogs, and more. Focus on how the system is structured, how teams consume it, and how it evolves safely over time. Key considerations include: token-driven theming (semantic tokens, color scales, dark/high-contrast variants), CSS architecture decisions (CSS variables, utility classes, BEM, or Tailwind-style tokens), accessibility-first component APIs (keyboard behavior, ARIA attributes, focus management), and support for dark mode, high contrast, and RTL from day one. You should be prepared to talk about: consistent component APIs (props, events, slots), how to ensure long-term maintainability, versioning and breaking-change strategy, tree-shaking-friendly structure, and bundle-size optimizations like dynamic imports and granular code splitting.

Design systems expose component APIs, tokens, theming, accessibility, and governance.

Design a minimal ChatGPT-like experience in a text area: the user submits a prompt, the assistant streams a response, and the conversation is persisted for resume. Include frontend architecture plus database considerations for storing chat history.

Chat input design covers streaming, drafts, attachments, submission state, and resilience.

Given a UI mock, describe the component tree, state ownership, and data flow while keeping the UI scalable and maintainable.

State-from-mock prompts are common senior frontend screens for scope and data ownership.

JavaScript runs on a single thread, but the real production pitfall is queue ordering: synchronous work runs first, then microtasks drain before the next macrotask, which is why long Promise chains can starve rendering…

Event loop reasoning underpins async output, rendering, timers, and promise order.

Closures keep outer variables alive after the outer function returns. The real frontend debug value is explaining stale async callbacks, loop-capture bugs, and long-lived listeners that keep old objects alive in memory.

Closures explain stateful functions, module privacy, hooks, and many utility prompts.

Promises and async/await use the same async model, but production decisions are really about concurrency, stale-request cancellation, request identity, and error boundaries rather than syntax alone.

Promises and async-await are the foundation for async coding and UI race-condition prompts.

Event delegation uses one ancestor listener instead of many child listeners. The production value is handling dynamic DOM, nested targets, stopPropagation surprises, and list performance without attaching handlers every…

Event delegation connects DOM events, bubbling, dynamic lists, and performance.

prototype is a property on constructor functions that becomes the [[Prototype]] of instances created with new. __proto__ is the (legacy) accessor for an object's [[Prototype]] link used for property lookup. Mastering th…

Prototype-chain knowledge supports bind, new, instanceof, and inheritance discussions.

Mutable data can be changed in place, while immutable data is never modified — instead, new copies are created. Understanding this difference is critical for predictable state management in React, Angular, Redux/NgRx, a…

Mutability reasoning is central to frontend state updates and bug explanation.

Web performance optimization is a prioritization problem across network transfer, render-blocking work, images, JavaScript, and caching. Strong answers tie improvements to critical-path debugging, first-visit vs repeat-…

Load-time optimization is a cross-cutting frontend interview topic for every stack.

Security-focused frontend interview guide to DOM XSS: attacker-controlled sources like location.hash or postMessage, dangerous DOM sinks, safe rendering patterns, URL validation, and defense in depth with CSP and Truste…

DOM XSS prevention is a high-signal security topic for production frontend work.

Explain useEffect as React’s external sync point through cleanup, dependency discipline, stale-closure debugging, and the common mistake of putting pure derived logic into effects.

useEffect reveals side-effect boundaries, dependency reasoning, and cleanup discipline.

Keys are React's identity contract for list items. Use stable keys to prevent reordered rows, lost input state, random remounts, and production bugs where React preserves the wrong component.

Keys are a common list-rendering failure mode and reconciliation discussion point.

Angular change detection strategy is a production performance and debugging choice, not just a framework definition. The useful answer compares Default versus OnPush through stale-UI bugs, trigger rules, immutable updat…

Change detection is the highest-leverage Angular runtime and performance concept.

Explain the real difference between ref() and reactive() in Vue 3’s Composition API, when each is the better choice (primitives vs objects, replacement vs mutation, destructuring, template unwrapping), and the most comm…

Vue ref versus reactive reasoning exposes core reactivity and state-shape traps.

Use a production accessibility review workflow: semantics first, then keyboard and focus, labels and errors, contrast, manual assistive-tech checks, and automated tooling. The real mistake is treating Lighthouse or axe…

Accessibility is expected in modern UI interviews and validates inclusive implementation judgment.

CSS Grid and Flexbox are both powerful layout systems designed to help developers create complex, responsive layouts with ease. While Flexbox excels in one-dimensional layouts (either rows or columns), Grid is built for…

Grid versus Flexbox is a durable layout trade-off question for frontend interviews.