System Design Frontend Development

System Design Overview for Low and High Level

            Requirements

Functional

-Demand/supply
-modules
-user manangemnt
-support nd help
-paymant gateway
-account managment
-cart page
-product listing
-pricing and subscription

Non-functional

-mobile responice
-inernet
-caching
-security
-customer side rendering
-server side rendering
-CI/CD
-Internationlication
-offline support
-authentication
-authorization
-performance web vitals
-image optimization assets webp , png , jpeg , svg etc

            Scoping

Functional

-Demand
-Module
Product Listing , Cart Page
-Features
-Search
-Filter
-Product Details
-Reviews
-add item to cart
-add item to whishlist
-price breakups
-add product
-remove product

---Non Functional

-Desktop
-Responsiveness
-Accescililbity like disable person etc
-Asset Optimization
-Caching
-Server Side Rendering
-Client Side Rendering

        Tech Choices

-Libraary / Framework
-State Managment
-Folder Structure
-Packages
-Dependencies like canvas ,webRTC
-Build Tool
Webpack , Rollup ,Parcel

Componnet 

-Routing
-Data Sharing
-Component Hierachy

    Data API & Protocols & Implementation

---Protocol
-Rest/ GraphQL / SSE /rPF
-JSON/ Protocol Buffers

--Implementation
-Pagination / Infinte Scroll
-Throatling /Debouncing

---APIs
-getProductList()
-getProductDetails()
-addProduct()
-removeProduct()

---Data Modeling
-URL
-Method
-Request (query , body)
-Response (Data , Error)
-Status Code

---Component

-State /Props
-Event Handling
-Customization Support
-Theming
-Resuable
-Data Source

        Overview OF System Design 

System Design

-Requirments
-Scoping
-Component Architecture
-Data API and Implementation

Product Sense

-Requirments
-Scoping
-Data API and Implementation

*UI Architecture *

-Requirments
-Scoping
-Tech Choices
-Componnet Architecture
-Data API and Implementation

*Machine Coding /component Design *

-Component Architecture
-Data API & Implementation