Frontend System Design

System design interviews for frontend engineers focus on designing scalable, maintainable client-side systems — not distributed backend infrastructure. You are expected to discuss component architecture, API design, state management, performance, and real-time features for products at scale.

How to Approach a Frontend System Design Question

1. Clarify scope — what platform (web/mobile web)? What scale? What features are core vs stretch?
2. Define the API contract (what data does the frontend consume?)
3. Design the component tree and data flow
4. Address state management
5. Discuss performance and real-time requirements
6. Cover accessibility and internationalisation if relevant

Designing a News Feed (e.g. Twitter / LinkedIn)

API:
  GET /feed?cursor=&limit=20       → paginated posts
  POST /posts/:id/like             → optimistic update
  WebSocket: ws://api/feed/stream  → real-time new posts

Component tree:
  <FeedPage>
    <FeedHeader />              — sticky, shows "N new posts" banner
    <VirtualList>               — windowed rendering (react-virtual)
      <Post>
        <Avatar />
        <PostContent />
        <ActionBar />            — like, repost, share
      </Post>
    </VirtualList>
    <InfiniteScrollSentinel />  — triggers next page load
  </FeedPage>

State:
  Server state:  TanStack Query — handles caching, refetching, pagination
  Optimistic UI: update like count immediately, revert on error
  WebSocket:     prepend new posts to cache without refetch

Performance at Scale

Large list (10,000 items):
  → Virtualise with react-virtual or react-window
  → Only render ~20 items in the DOM at a time

Images:
  → Lazy load with IntersectionObserver
  → Serve AVIF/WebP via <picture>
  → Use CDN with width/quality parameters: /cdn/img.jpg?w=400&q=80

Code splitting:
  → Route-level: dynamic import() each page
  → Component-level: lazy() + Suspense for heavy widgets (rich text editor, map)

Caching:
  → HTTP cache headers (Cache-Control: stale-while-revalidate)
  → Service Worker for offline and background sync

Real-Time Features

// WebSocket — for bidirectional, low-latency (chat, collaboration)
const ws = new WebSocket('wss://api.example.com/chat');
ws.onmessage = (e) => {
  const msg = JSON.parse(e.data);
  queryClient.setQueryData(['messages', channelId], old => [...old, msg]);
};

// Server-Sent Events — for server-push only (feeds, notifications)
const es = new EventSource('/api/notifications');
es.onmessage = (e) => addNotification(JSON.parse(e.data));

// Polling — simpler, for non-real-time updates
useQuery({ queryKey: ['status'], refetchInterval: 30_000 });

Common Frontend System Design Topics

• Design a type-ahead search (debounce, cancellation, caching)
• Design an infinite scroll feed (virtual list, cursor pagination)
• Design a collaborative document editor (CRDTs, OT, WebSockets)
• Design a video player (adaptive bitrate, pre-buffering, captions)
• Design an image gallery (lazy loading, masonry layout, lightbox)