Frontend System Design

Architecting scalable frontend applications

Frontend System Design Interview Questions

Master architecture patterns for building scalable frontend applications.

1. Component Architecture

Component Design Principles:

Single Responsibility: Each component does one thing
Composition: Build complex UIs from simple components
Reusability: Generic, configurable components
Separation of Concerns: Presentational vs Container

// Atomic Design Pattern
components/
  atoms/         // Button, Input, Label
  molecules/     // SearchBar (Input + Button)
  organisms/     // Header (Logo + SearchBar + Nav)
  templates/     // PageLayout
  pages/         // HomePage, ProductPage

2. State Management at Scale

// State organization
store/
  auth/
    slice.ts
    selectors.ts
  products/
    slice.ts
    selectors.ts
  ui/
    slice.ts

// State structure
{
  entities: {  // Normalized data
    users: { 1: {...}, 2: {...} },
    posts: { 1: {...}, 2: {...} }
  },
  ui: {  // UI state
    loading: false,
    selectedId: null
  }
}

3. Performance Optimization

Strategies:

Code splitting by route
Lazy load components and images
Memoization (useMemo, React.memo)
Virtual scrolling for long lists
Debounce/throttle expensive operations
Use CDN for static assets
Implement caching strategy
Optimize bundle size

4. Design a Feature-Rich Application

Example: Design a Social Media Feed

1. Requirements:
   - Infinite scroll
   - Real-time updates
   - Like/comment functionality
   - Image optimization
   - Offline support

2. Architecture:
   - Component structure
   - State management (Redux/Context)
   - API integration
   - WebSocket for real-time
   - Service Worker for offline

3. Performance:
   - Virtual scrolling
   - Image lazy loading
   - Optimistic updates
   - Request batching

4. Scalability:
   - Code splitting
   - CDN for images
   - Caching strategy
   - Error boundaries

Key Takeaways:

Learn More

Start with requirements and constraints
Design component hierarchy
Plan state management strategy
Consider performance from the start
Think about scalability and maintainability
Discuss tradeoffs of different approaches