Skip to main content

System Design Questions

Question 1: Design a Scalable Twitter-like Application​

Requirements​

  • Post tweets (280 chars)
  • Follow/unfollow users
  • Like/retweet
  • Timeline (home, user, trending)
  • Real-time updates
  • Search
  • Notifications

Frontend Architecture​

Client
├── Components
│   ├── Feed (virtualized list)
│   ├── Tweet (React.memo)
│   ├── TweetComposer
│   └── Timeline
├── State Management (Redux)
│   ├── tweets
│   ├── users
│   ├── timeline
│   └── notifications
├── Services
│   ├── API client
│   ├── WebSocket
│   └── Cache
└── Routing
    ├── /home
    ├── /[username]
    ├── /tweet/[id]
    └── /search

Key Considerations​

  • Performance: Virtualize long feeds
  • Real-time: WebSocket for live updates
  • Caching: Cache user data, tweets
  • Pagination: Infinite scroll
  • Optimistic Updates: Like/retweet instantly

Question 2: Design a Google Docs-like Collaborative Editor​

Requirements​

  • Real-time collaboration
  • Multiple cursors
  • Presence indicators
  • Version history
  • Auto-save
  • Offline support

Architecture​

Frontend
├── Editor (Lexical/Slate/TipTap)
├── Collaboration Layer
│   ├── WebSocket connection
│   ├── CRDT for conflict resolution
│   └── Presence tracking
├── State Management
│   ├── Document state
│   ├── User cursors
│   └── Offline queue
└── Features
    ├── Rich text formatting
    ├── Comments
    ├── Suggestions
    └── Version history

Key Considerations​

  • Conflict Resolution: Operational Transform or CRDT
  • Performance: Debounce updates
  • Offline: IndexedDB, sync on reconnect
  • Security: E2E encryption

Question 3: Design an E-Commerce Platform​

Requirements​

  • Product catalog (millions of products)
  • Search and filters
  • Shopping cart
  • Checkout
  • Order tracking
  • Reviews

Architecture​

Frontend
├── Product Catalog
│   ├── Infinite scroll
│   ├── Filters (multi-select)
│   ├── Search (debounced)
│   └── Sort options
├── Shopping Cart
│   ├── Add/remove items
│   ├── Quantity update
│   └── Persist to server
├── Checkout
│   ├── Multi-step form
│   ├── Payment (Stripe)
│   └── Order confirmation
└── State Management
    ├── Products (server state)
    ├── Cart (client + server)
    └── User (auth state)

Key Considerations​

  • Performance:
    • Code splitting per route
    • Image lazy loading
    • Virtual scrolling for long lists
  • SEO: SSR/SSG for product pages
  • State:
    • Server state (React Query/SWR)
    • Client state (Zustand)
  • Payment: PCI compliance, secure tokens

Question 4: Design a Video Streaming Platform​

Requirements​

  • Video player
  • Playlist
  • Recommendations
  • Comments
  • Live streaming
  • Subscriptions

Architecture​

Frontend
├── Video Player
│   ├── HLS/DASH streaming
│   ├── Quality selection
│   ├── Playback controls
│   └── Picture-in-picture
├── Features
│   ├── Recommendations
│   ├── Comments (real-time)
│   ├── Likes/dislikes
│   └── Subscriptions
└── Performance
    ├── Lazy load thumbnails
    ├── Prefetch next video
    └── CDN for static assets

Key Considerations​

  • Video Delivery: CDN, adaptive bitrate
  • Performance: Lazy load, code split
  • Real-time: WebSocket for live comments
  • Analytics: Track watch time, engagement

Question 5: Design a Dashboard with Real-Time Analytics​

Requirements​

  • Real-time metrics
  • Multiple chart types
  • Date range selection
  • Export data
  • Alerts
  • Multi-user

Architecture​

Frontend
├── Dashboard Layout
│   ├── Grid system
│   ├── Widget components
│   └── Drag-and-drop
├── Visualizations
│   ├── Charts (Chart.js/D3)
│   ├── Tables
│   └── Metrics cards
├── Real-time Updates
│   ├── WebSocket
│   ├── Server-Sent Events
│   └── Polling fallback
└── Performance
    ├── Data aggregation
    ├── Virtual scrolling
    └── Memoization

Key Considerations​

  • Real-time: WebSocket, efficient updates
  • Performance: Canvas for large datasets
  • State: Normalize data, memoize selectors
  • UX: Loading skeletons, error states

General System Design Principles​

1. Component Architecture​

  • Atomic design
  • Feature-based structure
  • Shared components

2. State Management​

  • Server state vs client state
  • Global vs local state
  • Caching strategy

3. Performance​

  • Code splitting
  • Lazy loading
  • Memoization
  • Virtual scrolling

4. Real-time Features​

  • WebSockets
  • Server-Sent Events
  • Polling

5. Scalability​

  • CDN for static assets
  • API pagination
  • Database indexing
  • Caching layers

6. Security​

  • Authentication
  • Authorization
  • XSS prevention
  • CSRF protection

7. Testing​

  • Unit tests
  • Integration tests
  • E2E tests
  • Performance tests