Frontend system design interviews test your ability to architect scalable UIs. Here's a framework for approaching them.
The Framework
- Clarify Requirements: Functional & non-functional
- High-Level Architecture: Components, data flow
- Component Design: Hierarchy, responsibilities
- Data Layer: State management, API design
- Performance: Loading, rendering, caching
- Tradeoffs: Discuss alternatives
Example: Design a News Feed
1. Requirements
Functional:
- Infinite scroll feed
- Posts with text, images, videos
- Like, comment, share
- Real-time updates
Non-functional:
- Fast initial load (< 2s LCP)
- Smooth scrolling (60fps)
- Offline support
- Accessible2. Architecture
┌─────────────────────────────────────┐
│ App Shell │
│ ┌──────────┐ ┌──────────────────┐ │
│ │ Feed List │ │ Detail View │ │
│ │ ┌──────┐ │ │ ┌──────────────┐│ │
│ │ │Post 1│ │ │ │ Comments ││ │
│ │ │Post 2│ │ │ │ Related ││ │
│ │ │Post 3│ │ │ └──────────────┘│ │
│ │ │... │ │ └──────────────────┘ │
│ │ └──────┘ │ │
│ └──────────┘ │
└─────────────────────────────────────┘3. Data Layer
// Feed Store
interface FeedState {
posts: Post[];
cursor: string | null;
hasMore: boolean;
loading: boolean;
}
// API Design
GET /api/feed?cursor=abc&limit=20
// Returns: { posts: Post[], nextCursor: string }
// Caching: TanStack Query with infinite query
const { data, fetchNextPage, hasNextPage } = useInfiniteQuery({
queryKey: ["feed"],
queryFn: ({ pageParam }) => fetchFeed(pageParam),
getNextPageParam: (lastPage) => lastPage.nextCursor,
});4. Performance
- Virtualization: Only render visible posts (react-window)
- Image optimization: Lazy loading, srcset, WebP
- Skeleton loading: Show placeholders while loading
- Optimistic updates: Like immediately, sync later
- Prefetching: Load next page before user scrolls there
5. Real-Time
// WebSocket for live updates
// Server-Sent Events for new post notifications
// Polling as fallback (every 30s)
// Strategy: Optimistic UI
// 1. Update local state immediately
// 2. Send to server
// 3. Reconcile on responseCommon Frontend System Design Questions
- Design Twitter/X feed
- Design Google Docs (collaborative editing)
- Design an autocomplete/typeahead
- Design an image carousel
- Design a notification system
- Design a chat application