Frontend Interview Guide

Complete frontend engineering interview preparation covering JavaScript/TypeScript fundamentals, React patterns, CSS mastery, web performance optimization, and frontend system design. Tailored for mid-level to senior frontend roles at top tech companies.

Key Features

• 80 JavaScript/TypeScript concept questions with detailed explanations
• 25 React pattern challenges — hooks, state management, rendering optimization
• 20 CSS layout and animation challenges with solutions
• 15 web performance scenarios — Core Web Vitals, bundle optimization, caching
• 10 frontend system design problems with reference architectures
• Browser internals primer — event loop, rendering pipeline, memory management

Content Breakdown

Section	Items	Difficulty Range
JavaScript / TypeScript	80	★ to ★★★★
React Patterns	25	★★ to ★★★★
CSS Challenges	20	★ to ★★★
Web Performance	15	★★★ to ★★★★★
Frontend System Design	10	★★★ to ★★★★★
Browser Internals	10	★★ to ★★★★

Sample Content

JavaScript: Event Loop (Classic Interview Question)

Question: What is the output of the following code and why?

console.log('1');

setTimeout(() => console.log('2'), 0);

Promise.resolve().then(() => console.log('3'));

console.log('4');

Answer: 1, 4, 3, 2

Explanation:

1. console.log('1') — synchronous, executes immediately
2. setTimeout callback → placed in macrotask queue
3. Promise.then callback → placed in microtask queue
4. console.log('4') — synchronous, executes immediately
5. Call stack empty → microtask queue drains first → 3
6. Next event loop tick → macrotask queue → 2

Follow-up: "What if the Promise executor itself had a setTimeout inside it?"

React: Custom Hook Challenge

Question: Implement a useDebounce hook that delays updating a value until a specified delay has passed since the last change.

import { useState, useEffect } from 'react';

function useDebounce<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState<T>(value);

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    // Cleanup: cancel timeout if value changes before delay expires
    return () => clearTimeout(timer);
  }, [value, delay]);

  return debouncedValue;
}

// Usage in a search component:
function SearchBar() {
  const [query, setQuery] = useState('');
  const debouncedQuery = useDebounce(query, 300);

  useEffect(() => {
    if (debouncedQuery) {
      fetchSearchResults(debouncedQuery);
    }
  }, [debouncedQuery]);

  return <input value={query} onChange={e => setQuery(e.target.value)} />;
}

Follow-up questions: How would you add a leading option? How does this differ from throttling?

Frontend System Design: Autocomplete Widget

Problem: Design a production autocomplete/typeahead component for a search bar used by millions of users.

Key Requirements:
  - <100ms perceived latency
  - Handles 50K+ suggestion entries
  - Mobile-friendly, accessible (ARIA)
  - Keyboard navigation support

Architecture:
  ┌──────────────┐     ┌──────────────┐     ┌──────────┐
  │  Input Field │────▶│ Debounce     │────▶│ API Call  │
  │  (controlled)│     │ (150-300ms)  │     │ /suggest  │
  └──────────────┘     └──────────────┘     └────┬─────┘
                                                  │
  ┌──────────────┐     ┌──────────────┐          │
  │  Results UI  │◀────│ Client Cache │◀─────────┘
  │  (virtualized│     │ (LRU, 100    │
  │   list)      │     │  entries)    │
  └──────────────┘     └──────────────┘

Optimizations:
  ✓ Request cancellation (AbortController)
  ✓ Client-side LRU cache for repeated queries
  ✓ Virtualized dropdown for long result lists
  ✓ Optimistic UI — show cached results while fetching
  ✓ Trie-based prefix matching for offline mode

Study Plan

Week	Focus	Daily Time
1	JS fundamentals: closures, prototypes, event loop, this	45 min
2	TypeScript: generics, utility types, type narrowing	45 min
3	React: hooks deep-dive, rendering behavior, reconciliation	60 min
4	CSS: flexbox, grid, animations, responsive patterns	30 min
5	Web performance: CWV, lazy loading, code splitting	45 min
6	Frontend system design: 2 problems per day	60 min
7	Accessibility (a11y) + browser internals	45 min
8	Mock interviews + review weak areas	60 min

Practice Tips

1. Build from scratch, not from templates. Implement a modal, dropdown, and infinite scroll without a library.
2. Read source code. Study how React hooks work internally. Read the React reconciler code.
3. Test in slow 3G. Chrome DevTools throttling reveals performance issues you'd never notice otherwise.
4. Master the Chrome DevTools Performance tab. Record, analyze flame charts, identify long tasks.
5. Practice system design on a whiteboard. Frontend system design is increasingly common at L5+.

Contents

• src/ — JS/TS concept questions, React challenges, CSS exercises
• examples/ — Complete solutions with TypeScript, working component code
• docs/ — Browser internals primer, performance optimization checklist

---

This is 1 of 11 resources in the Interview Prep Pro toolkit. Get the complete [Frontend Interview Guide] with all files, templates, and documentation for $39.

Get the Full Kit →

Or grab the entire Interview Prep Pro bundle (11 products) for $199 — save 30%.

Get the Complete Bundle →

---

Related Articles

• Behavioral Interview Question Bank
• Career Transition Guide: Career Transition Guide for Tech Roles
• Coding Patterns Quick Reference