Skip to main content

Frontend System Design Checklist

  • High Level Architecture

  • SEO

  • CI/CD

  • MVP

  • Optimizations

    • Performance
    • Accessibility
    • Security
    • Testing

  • Auth & Roles Management

  • Platform: desktop, mobile, tablet

  • Internationalization

  • Analytics

  • Monitoring

  • Error Handling

  • Caching

  • Scalability

  • Documentation

  • Deployment

    • Docker, Kubernetes
    • Serverless
    • CDN
    • Load balancer
    • Reverse proxy
    • Microservices
    • Monolith

Requirements​

Functional requirements​

  • List of core features

Non functional Requirements​

  • Low latency
  • High availability
  • Scalable
  • High reliability
  • Responsive design
  • Internationalization
  • Accessibility
  • Platforms: Mobile, Desktop, Tablet

Frontend Design​

  • Component Design
  • State management: Redux, Flux, NgRx
  • SSR, SSG, CSR
  • SPA, PWA, MPA
  • Responsive design

API Design​

  • REST APIs, GraphQL, RPC
  • Third party services
  • Websocket, Long polling, SSE, Batch requests
  • JSON, Protocol buffers
  • Endpoints
  • Data Models and Schemas
  • HTTP1, HTTP2

Performance​

  • Pagination: cursor based, offset based
  • Debouncing: delay before making a request
  • Throttling

Testing​

  • Unit tests: Jest, Mocha, Jasmine
  • E2E tests: Cypress, Selenium
  • A/B testing: Optimizely, VWO
  • Static analyzers: eslint, prettier, stylelint

Auth & Roles Management​

  • OAuth, JWT, session cookies
  • Roles: admin, user, guest

Using Resources​

Always check the usage of resources:

  • CPU
  • GPU
  • Memory
  • Disk
  • Network
  • Storage
  • Bandwidth
  • Battery

Other​

  • SEO: meta tags, sitemap, robots.txt
  • CI/CD: Jenkins, Gitlab CI, CircleCI
  • MVP: Minimum Viable Product
  • Internationalization: i18n, l10n
  • Analytics: Google Analytics, Mixpanel
  • Monitoring: New Relic, Datadog
  • Error Handling: Sentry, Rollbar
  • Caching: CDN, browser cache, service workers
  • Scalability: horizontal, vertical
  • Documentation: Swagger, Postman
  • Deployment: Docker, Kubernetes, Serverless, CDN, Load balancer, Reverse proxy, Microservices, Monolith
  • Platform: desktop, mobile, tablet
  • Optimizations: Performance, Accessibility, Security, Testing