Interview
Frontend system design
Design the client side of large products: critical path, data flow, performance, accessibility, and honest tradeoffs.
Design YouTube (Frontend)
advancedFrontend system design for a video streaming product — player, feed, performance, caching, and offline concerns.
45 min
Design a News Feed
advancedDesign a News Feed explained for frontend engineers — mental model, examples, common mistakes, and interview tips.
45 min
Design an Image Gallery
intermediateDesign an Image Gallery explained for frontend engineers — mental model, examples, common mistakes, and interview tips.
45 min
Design Autocomplete Typeahead
intermediateDesign Autocomplete Typeahead explained for frontend engineers — mental model, examples, common mistakes, and interview tips.
45 min
Design a Notification System UI
advancedDesign a Notification System UI explained for frontend engineers — mental model, examples, common mistakes, and interview tips.
45 min
Design Realtime Collaboration Cursors
advancedDesign Realtime Collaboration Cursors explained for frontend engineers — mental model, examples, common mistakes, and interview tips.
45 min
Design a Dashboard Analytics UI
intermediateDesign a Dashboard Analytics UI explained for frontend engineers — mental model, examples, common mistakes, and interview tips.
45 min
Design E-commerce Product Page
intermediateDesign E-commerce Product Page explained for frontend engineers — mental model, examples, common mistakes, and interview tips.
45 min
Design Video Player Experience
advancedDesign Video Player Experience explained for frontend engineers — mental model, examples, common mistakes, and interview tips.
45 min
Design Offline-first Notes App
advancedDesign Offline-first Notes App explained for frontend engineers — mental model, examples, common mistakes, and interview tips.
45 min
Design Multi-tenant Admin Panel
advancedDesign Multi-tenant Admin Panel explained for frontend engineers — mental model, examples, common mistakes, and interview tips.
45 min
Frontend Caching Strategies
intermediateFrontend Caching Strategies explained for frontend engineers — mental model, examples, common mistakes, and interview tips.
45 min
State Management at Scale
intermediateState Management at Scale explained for frontend engineers — mental model, examples, common mistakes, and interview tips.
45 min
Micro Frontends Tradeoffs
advancedMicro Frontends Tradeoffs explained for frontend engineers — mental model, examples, common mistakes, and interview tips.
45 min
SSR CSR Islands Architecture
intermediateSSR CSR Islands Architecture explained for frontend engineers — mental model, examples, common mistakes, and interview tips.
45 min
Edge Rendering Tradeoffs
advancedEdge Rendering Tradeoffs explained for frontend engineers — mental model, examples, common mistakes, and interview tips.
45 min
Design a Design System
intermediateDesign a Design System explained for frontend engineers — mental model, examples, common mistakes, and interview tips.
45 min
Feature Flags Client Architecture
intermediateFeature Flags Client Architecture explained for frontend engineers — mental model, examples, common mistakes, and interview tips.
45 min
Internationalization Architecture
intermediateInternationalization Architecture explained for frontend engineers — mental model, examples, common mistakes, and interview tips.
45 min
Realtime WebSocket UI Design
advancedRealtime WebSocket UI Design explained for frontend engineers — mental model, examples, common mistakes, and interview tips.
45 min
Upload Large Files UX
intermediateUpload Large Files UX explained for frontend engineers — mental model, examples, common mistakes, and interview tips.
45 min
Search Results Page Design
intermediateSearch Results Page Design explained for frontend engineers — mental model, examples, common mistakes, and interview tips.
45 min
Infinite Maps Marker UI
advancedInfinite Maps Marker UI explained for frontend engineers — mental model, examples, common mistakes, and interview tips.
45 min
Accessibility in Large Apps
intermediateAccessibility in Large Apps explained for frontend engineers — mental model, examples, common mistakes, and interview tips.
45 min
Performance Budget System Design
intermediatePerformance Budget System Design explained for frontend engineers — mental model, examples, common mistakes, and interview tips.
45 min
Client-side Routing at Scale
intermediateClient-side Routing at Scale explained for frontend engineers — mental model, examples, common mistakes, and interview tips.
45 min
Error Monitoring and RUM Design
intermediateError Monitoring and RUM Design explained for frontend engineers — mental model, examples, common mistakes, and interview tips.
45 min
A/B Testing Frontend Design
intermediateA/B Testing Frontend Design explained for frontend engineers — mental model, examples, common mistakes, and interview tips.
45 min
Media CDN and Image Pipeline
advancedMedia CDN and Image Pipeline explained for frontend engineers — mental model, examples, common mistakes, and interview tips.
45 min
Auth Session Design for SPAs
intermediateAuth Session Design for SPAs explained for frontend engineers — mental model, examples, common mistakes, and interview tips.
45 min
PWA Install and Offline Shell
advancedPWA Install and Offline Shell explained for frontend engineers — mental model, examples, common mistakes, and interview tips.
45 min
Topic primers (coming soon)
- Caching
- Virtualization
- SSR / CSR / Streaming
- State Management
- Offline
- Micro Frontends
- Performance budgets
More product designs
- Design Gmail
- Design Trello
- Design Google Docs
- Design Slack
- Design WhatsApp Web
- Design Netflix
- Design Twitter Feed
- Design Dashboard