Things to consider in Frontend System Design interviews

Tutorial: https://www.youtube.com/watch?v=44mOnnt5pic&list=WL&index=1&t=2s

RADIO - Requirements, Architecture, Data Models, Implementation, Optimisation

1. Requirements - gather all requirements

1. Functional requirements

1. Module Wise

1. Authentication & User Management
2. Product Listing
3. Pricing & Subscription
4. Payment Gateway
5. Cart
6. Account Management

2. Feature Wise

1. Search
2. Filter
3. Details
4. Product Review
5. Add/remove items to cart
6. Video Streaming - Dash.js, Shaka Player

2. Non-Functional Requirements

1. Availability

1. Devices - Mobile/Desktop/Tablets
2. Responsive/Adaptive
3. Offline Support

2. Accessibility - support for disabled people, international people in local language
3. Performance - Web Vitals, CSR/SSR
4. Security
5. Caching
6. Logging & monitoring
7. Testing

2. Scope - Prioritisation - what least to build, Minimum Viable Product (MVP)
3. Tech Choices

1. Library/Framework
2. State Management
3. Caching & Storage
4. Offline Support / PWA
5. Design System / theming / Design Tokens
6. Components: Material UI, Prime React, Headless UI
7. Folder Structure
8. Packages
9. Build Tools - webpack, rollup, turbopack

4. Component Architecture

1. Routes / Component Diagram
2. Component Hierarchy / Component API
3. Dependency Tree / Data Sharing

5. Data Models, API, Component API/State/Props

1. Data Models / State Management
2. Backend API
3. Component API

1. state/props
2. event handling
3. customisation - theming
4. Reusability
5. Data source

6. Optimisation & Performance
7. Accessibility
8. Availability
9. Security