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
advancedFrontend system design for a social news feed — ranking surface, virtualization, caching, realtime, and tradeoffs.
45 min
Design an Image Gallery
intermediateFrontend system design for an image gallery — grid, lightbox, responsive images, caching, and upload entry.
45 min
Design Autocomplete / Typeahead
intermediateFrontend system design for search typeahead — client UX, API, caching, ranking surface, and a11y at scale.
45 min
Design a Notification System UI
advancedFrontend system design for notifications — inbox, toasts, push permission, realtime, badges, and preferences.
45 min
Design Realtime Collaboration Cursors
advancedFrontend system design for multiplayer cursors — presence, throttling, smoothing, layers, and awareness protocols.
45 min
Design a Dashboard Analytics UI
intermediateFrontend system design for analytics dashboards — layout, query UX, charts, caching, and realtime refresh.
45 min
Design E-commerce Product Page
intermediateFrontend system design for a PDP — gallery, variants, ATC, inventory, SEO/SSR, performance, and trust UI.
45 min
Design Video Player Experience
advancedFrontend system design for video playback UX — player shell, ABR hooks, controls, QoS metrics, and offline.
45 min
Design Offline-first Notes App
advancedFrontend system design for offline-first notes — local DB, sync queue, conflict UX, PWA shell, and search.
45 min
Design Multi-tenant Admin Panel
advancedFrontend system design for multi-tenant admin — tenancy switching, RBAC UI, isolation, theming, and safe data fetching.
45 min
Frontend Caching Strategies
intermediateSystem design for frontend caching — HTTP, CDN, Service Worker, memory stores, and invalidation tradeoffs.
45 min
State Management at Scale
intermediateSystem design for frontend state at scale — server vs client state, boundaries, stores, and consistency patterns.
45 min
Micro Frontends Tradeoffs
advancedSystem design tradeoffs for micro-frontends — composition, ownership, shared deps, perf, and when to avoid them.
45 min
SSR CSR Islands Architecture
intermediateSystem design for SSR, CSR, and islands — pick rendering per surface, hydrate less, and stream wisely.
45 min
Edge Rendering Tradeoffs
advancedSystem design tradeoffs for edge SSR/ISR — latency, cache keys, personalization, cold starts, and when not to.
45 min
Design a Design System
intermediateSystem design for a design system — tokens, components, versioning, adoption, a11y, and multi-platform tradeoffs.
45 min
Feature Flags Client Architecture
intermediateClient architecture for feature flags — bootstrap, evaluation, typing, kill switches, and cache consistency.
45 min
Internationalization Architecture
intermediateFrontend i18n architecture — locale routing, message catalogs, formatting, RTL, and loading strategies.
45 min
Realtime WebSocket UI Design
advancedFrontend system design for WebSocket UIs — connection lifecycle, backoff, fan-in state, ordering, and fallbacks.
45 min
Upload Large Files UX
intermediateFrontend system design for large uploads — multipart, resume, progress, concurrency, failures, and virus-scan states.
45 min
Search Results Page Design
intermediateFrontend system design for search results — query UX, filters, ranking display, perf, SEO, and empty states.
45 min
Infinite Maps Marker UI
advancedFrontend system design for map UIs — viewport queries, marker clustering, tiles, performance, and selection UX.
45 min
Accessibility in Large Apps
intermediateSystem design for accessibility at scale — governance, design system primitives, CI checks, and runtime patterns.
45 min
Performance Budget System Design
intermediateSystem design for performance budgets — metrics, CI gates, RUM feedback loops, ownership, and enforcement.
45 min
Client-side Routing at Scale
intermediateSystem design for SPA routing at scale — code splitting, nested layouts, data loaders, auth gates, and perf.
45 min
Error Monitoring and RUM Design
intermediateFrontend system design for error monitoring and RUM — capture, sampling, privacy, source maps, and alerting.
45 min
A/B Testing Frontend Design
intermediateFrontend system design for A/B experiments — assignment, flicker control, flags, metrics, and rollout tradeoffs.
45 min
Media CDN and Image Pipeline
advancedFrontend-facing image/media pipeline design — upload, derivatives, CDN URLs, formats, and responsive delivery.
45 min
Auth Session Design for SPAs
intermediateFrontend auth/session design for SPAs — tokens, cookies, refresh, route guards, XSS/CSRF tradeoffs, and UX.
45 min
PWA Install and Offline Shell
advancedSystem design for PWA installability and offline shell — manifest, SW lifecycle, caching, update UX, and limits.
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