Skip to content

Instantly share code, notes, and snippets.

@jeremyckahn
Created November 22, 2023 15:40
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save jeremyckahn/8ac5e435fc13852bb330139011974aa5 to your computer and use it in GitHub Desktop.
Save jeremyckahn/8ac5e435fc13852bb330139011974aa5 to your computer and use it in GitHub Desktop.

Front End System Design Interview Checklist

  • Ask for clarifying questions
    • What is the scale of the solution needed?
      • How many daily active users?
      • How are they geographically distributed?
      • What are we expecting in terms of peak traffic?
    • What are the most business critical use-cases?
      • What's a user persona we should be targeting?
    • Identify constraints
      • Bundle size limitations?
      • Upfront a11y considerations?
      • Browser support?
      • Mobile support requirements?
  • Consider technology options
    • SPA vs. SSR
    • Back end architecture
      • Use load balancers and API gateways with WAF for performance and authorization
      • Use object storage for blobs
      • Use in-memory data store (like Redis) for frequent updates
      • Back all data with persisted data store (PostGres)
      • Microservices vs. monolith
    • Framework options
    • Build/toolchain options
    • Microfrontend vs. monolith
    • Testing strategy
      • How to support E2E testing
    • SDLC
      • CI/CD plan
      • DevOps strategy
      • Managing cost
    • Monitoring
      • Log all transactions and authorization events
      • Client-side and server-side logging
      • Real User Monitoring
      • Trace IDs for distributed systems
    • Hosting options
      • Use a CDN
      • Cache header settings (Cache-Control: max-age)
        • Bust cache with build hash in filename
  • Consider future use cases
    • How to handle larger scale
    • How to extend for additional functionality
    • How to optimize bundle size for poor connections
    • How to handle RTL languages
    • Scaling out development across multiple teams
  • Security
    • Use a WAF to enforce Content Security Policies, validate/sanitize input, and perform behavioral analysis to prevent malicious use
    • Encryption
      • How should encryption keys be generated?
    • Session token generation and TTL
    • Avoid XSS, script injection, and CSRF
    • Avoid using GET for sensitive operations
  • How to get data from point A to point B
    • Consider access patterns
      • REST APIs
      • WebSocket connections
      • WebRTC connections
      • SWR for showing stale data while fetching fresh version
    • How to manage network flakiness
      • Storing data offline and backfilling upon reconnection
    • Collaboration mechanisms
      • Server-based Operational Transform for central server-based systems
      • CRDT (Conflict-free Replicated Data Type) for decentralized systems
  • Accessibility
    • How to support screen readers
    • How to support low-vision
    • How to support keyboard navigation
@jeremyckahn
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment