Frontend System Design Framework
- Requirements — functional + non-functional (scale, latency)
- API Design — endpoints, data shapes
- Component Architecture — hierarchy, state ownership
- Data Flow — fetching, caching, optimistic updates
- Performance — virtualization, debouncing, CDN
- Accessibility & Edge Cases — offline, errors, empty states
Example: Design Autocomplete
Requirements
- Search as user types
- Show top 10 suggestions
- < 200ms perceived latency
Approach
User input → debounce 300ms → API call → cache results → render dropdown
- Debounce to reduce API calls
- Cache recent queries in Map
- Keyboard nav (↑↓ Enter Escape)
- AbortController cancel stale requests
- ARIA combobox pattern for a11y
Interview Questions
Q: Design infinite scroll
Intersection Observer on sentinel element, paginated API, virtual list for 10k+ items, loading/error states at bottom.
Q: How handle real-time updates?
WebSockets or SSE for push, optimistic UI with rollback, conflict resolution strategy.
Q: What non-functional requirements to mention?
Latency, availability, SEO, accessibility, mobile performance, internationalization.