Overview of System Design
- Design
- Requirements
- Architecture
- Interface
- System Components
- Scale
- Security
- Maintainable
- System Design
- Product Sense
- UI Architecture
- Machine Coding/Component 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)
- 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
- Draw.io
- Gliffy.com
- Lucidchart.com
- Miro.com
- One Note (Microsoft)
- Jamboard (Google)