Overview of System Design

System Design

  • Design
    • Requirements
    • Architecture
    • Interface
  • System Components
    • Scale
    • Security
    • Maintainable

Types of Frontend System Design

  • System Design
  • Product Sense
  • UI Architecture
  • Machine Coding/Component Design

Things to consider in frontend system design

  • Requirements
    • Functional
      • Demand/Supply or B2B/B2C
      • Module level thinking
        • User management
        • Help and Support
        • Payment gateway
        • Pricing and Subscriptions
        • Product listing
        • Cart page
        • Account Management
      • Feature level thinking
    • Non Functional
      • Mobile/Desktop
      • Responsive(works on all devices)/Adaptive(Building application for specific resolutions)
      • Internet/Location/Devices
      • Accessibility
      • Asset optimization (CSS, JS, Images, Videos )
      • Performance (FCP, LCP, TTI, Web vitals)
      • Client Side Rendering(CSR)/Server Side Rendering(SSR)
      • Authentication/Authorization
      • Security
      • Caching
      • Offline Support
      • Logging & Monitoring
      • A/B Testing
      • Testing
      • Internationalization/Localization
      • Versioning
      • CI/CD
      • PWA
  • Scoping(Priortizing)
    • Functional
      • Do you want to build for B2B or B2C
      • Modules (This is just an example)
        • Product listing
        • Cart page
      • Features
        • Search
        • Listing
        • Product details
        • Reviews
        • Add item to cart/whishlist
        • Cart list
        • Price breakups
        • Add/Remove products
    • Non Functional
      • Desktop
      • Responsive
      • Accessibility
      • Asset Optimization
      • Performance
      • CSR/SSR
      • Caching
  • Tech Choices
    • Library/Framework
    • State management
    • Folder struture
    • Packages
    • Dependencies (Canvas/SVG, WebRTC)
    • Design System - Create custom components or use exsting UI Components like Material UI, Shadcn/UI
    • Build Tools (Webpack, Rollup, Parcel)
  • Component Architecture
    • Component Hierarchy
    • Routing
    • Data Sharing
    • Cache/Session/Cookies
  • Data API & Protocols & Implementation
    • Protocols
      • Rest/GraphQL/SSE/Server side event (SSE)/ rPF
      • Respoonse in JSON/Protocol Buffers
    • Implementation Details
      • Pagination/Infinite Scrolls
      • Debouncing/Throttling
    • APIs - explain list of APIs required
      • getProductList()
      • getProductDetails()
      • addProductToCart()
      • removeProductFromCart()
    • Data Modeling
      • URL
      • Method
      • Request (query, body)
      • Response (data, error)
      • Status Code
    • Component - explain how components are created, is it stateless component or statefull, and can it be resued across platform
      • State/Props
      • Event handling
      • Customisation (Theming)
      • Reusability
      • Data Source

Tools

  • Draw.io
  • Gliffy.com
  • Lucidchart.com
  • Miro.com
  • One Note (Microsoft)
  • Jamboard (Google)