Frontend System Design
JS Fundamentals
Core browser/JS concepts you must know before building anything:
- DOM Manipulation — createElement, event delegation, classList
- Event Handling — Bubbling, Capturing, Debounce, Throttle
- Async JS — Promises, async/await, setTimeout, setInterval
- CSS Layout — Flexbox, Grid, Positioning, Responsive Design
Machine Coding
Build real UI components from scratch with clean, modular code.
Easy
- Star Rating Component
- Accordion / FAQ
- Modal / Dialog
- Countdown Timer
- Light/Dark Theme Toggle
- Tabs Component
- Toast/Notification System
- Tooltip Component
- Progress Bar
Medium
- Autocomplete / Typeahead Search
- Infinite Scroll
- Drag & Drop List
- Kanban Board (Trello-like)
- Carousel / Image Slider
- Multi-step Form with Validation
- Debounced Search with API
- Pagination Component
- Nested Comments (Reddit-like)
- Poll Widget
- OTP Input Component
- Custom Select Dropdown
Hard
- Spreadsheet (Google Sheets-like)
- File Explorer (nested folders)
- Calendar / Date Picker
- Rich Text Editor
- Tic-Tac-Toe with AI
- Snake Game
- Virtualized List (10k items)
- Drawing App (Canvas)
System Design Concepts
Core architecture knowledge for building frontend at scale:
- Rendering — CSR vs SSR vs SSG vs ISR
- State Management — Local vs Global, Redux vs Context vs Zustand
- Data Fetching — REST vs GraphQL, Caching, Polling, WebSockets
- Performance — Lazy loading, Code splitting, Virtualization, Memoization
- Networking & Security — HTTP/2, CDN, Service Workers, XSS, CSRF
System Design Practice
Design these systems at an architectural level:
| Level | Systems |
|---|---|
| Medium | News Feed, Autocomplete, Notification System |
| Hard | YouTube, Instagram, Chat App (WhatsApp), E-commerce (Amazon), Google Docs, Google Sheets, Figma, Email Client (Gmail) |