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
2. Architecture
3. Data Layer
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
Common 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