Complete Systems
System design for full applications - News Feed, E-commerce, Video Streaming, and more
Complete Systems
This section covers system design for complete applications—complex problems that typically take 45-60 minutes in interviews.
When to Use This Section
Use these guides when the interview question is about:
- Building a full application (News Feed, E-commerce)
- Multi-page systems with complex interactions
- End-to-end architecture decisions
System Types
1. News Feed
Social media feed with posts, interactions, and real-time updates.
2. E-commerce Product Page
Product pages with cart, reviews, recommendations, and checkout.
3. Video Streaming Platform
Video player with adaptive streaming, subtitles, and offline support.
4. Travel Booking System
Search, filters, maps, and multi-step booking flow.
5. Dashboard/Analytics
Real-time dashboard with charts, widgets, and customizable layout.
6. Real-Time Chat
Chat application with typing indicators, read receipts, and presence.
7. Photo Sharing
Photo sharing with browsing, editing, and uploading (Instagram, Google Photos).
8. Pinterest
Pinterest with masonry layout and media feed optimizations.
9. Collaborative Apps
Real-time collaboration with conflict resolution (Google Docs, Notion).
10. Email Client
Email client with mailbox syncing, UI, and composer (Gmail, Outlook).
11. Admin Panel
Admin panel with CRUD operations, advanced tables, and permissions.
12. Social Network Profile
User profiles with timeline, connections, and activity.
13. Music Streaming
Music streaming with player, playlists, search, and offline support.
14. Job Board
Job board with search, filters, applications, and matching.
7. Photo Sharing
Photo sharing with browsing, editing, and uploading (Instagram, Google Photos).
8. Pinterest
Pinterest with masonry layout and media feed optimizations.
9. Collaborative Apps
Real-time collaboration with conflict resolution (Google Docs, Notion).
10. Email Client
Email client with mailbox syncing, UI, and composer (Gmail, Outlook).
How to Approach System Design
- Requirements (R) - 5-10 min: Scale, performance, features, constraints
- Architecture (A) - 10-15 min: High-level structure, microfrontends, real-time
- Data Model (D) - 5-10 min: Data flow, caching, state management
- Interface (I) - 5 min: Design system, accessibility, i18n
- Optimizations (O) - 20-30 min: Performance, security, observability, testing
Common Patterns
Most systems need:
- Rendering Strategy: SSG/SSR/ISR/CSR based on requirements
- Real-Time: WebSocket/SSE for live updates
- Data Fetching: React Query/SWR with caching
- Performance: Code splitting, image optimization, virtualization
- Scalability: Microfrontends for large teams
For individual component design, see UI Components.