ESC

Type to search the knowledge base.

Interview

Frontend system design

Design the client side of large products: critical path, data flow, performance, accessibility, and honest tradeoffs.

Design YouTube (Frontend)

advanced

Frontend system design for a video streaming product — player, feed, performance, caching, and offline concerns.

45 min

Design a News Feed

advanced

Frontend system design for a social news feed — ranking surface, virtualization, caching, realtime, and tradeoffs.

45 min

Design an Image Gallery

intermediate

Frontend system design for an image gallery — grid, lightbox, responsive images, caching, and upload entry.

45 min

Design Autocomplete / Typeahead

intermediate

Frontend system design for search typeahead — client UX, API, caching, ranking surface, and a11y at scale.

45 min

Design a Notification System UI

advanced

Frontend system design for notifications — inbox, toasts, push permission, realtime, badges, and preferences.

45 min

Design Realtime Collaboration Cursors

advanced

Frontend system design for multiplayer cursors — presence, throttling, smoothing, layers, and awareness protocols.

45 min

Design a Dashboard Analytics UI

intermediate

Frontend system design for analytics dashboards — layout, query UX, charts, caching, and realtime refresh.

45 min

Design E-commerce Product Page

intermediate

Frontend system design for a PDP — gallery, variants, ATC, inventory, SEO/SSR, performance, and trust UI.

45 min

Design Video Player Experience

advanced

Frontend system design for video playback UX — player shell, ABR hooks, controls, QoS metrics, and offline.

45 min

Design Offline-first Notes App

advanced

Frontend system design for offline-first notes — local DB, sync queue, conflict UX, PWA shell, and search.

45 min

Design Multi-tenant Admin Panel

advanced

Frontend system design for multi-tenant admin — tenancy switching, RBAC UI, isolation, theming, and safe data fetching.

45 min

Frontend Caching Strategies

intermediate

System design for frontend caching — HTTP, CDN, Service Worker, memory stores, and invalidation tradeoffs.

45 min

State Management at Scale

intermediate

System design for frontend state at scale — server vs client state, boundaries, stores, and consistency patterns.

45 min

Micro Frontends Tradeoffs

advanced

System design tradeoffs for micro-frontends — composition, ownership, shared deps, perf, and when to avoid them.

45 min

SSR CSR Islands Architecture

intermediate

System design for SSR, CSR, and islands — pick rendering per surface, hydrate less, and stream wisely.

45 min

Edge Rendering Tradeoffs

advanced

System design tradeoffs for edge SSR/ISR — latency, cache keys, personalization, cold starts, and when not to.

45 min

Design a Design System

intermediate

System design for a design system — tokens, components, versioning, adoption, a11y, and multi-platform tradeoffs.

45 min

Feature Flags Client Architecture

intermediate

Client architecture for feature flags — bootstrap, evaluation, typing, kill switches, and cache consistency.

45 min

Internationalization Architecture

intermediate

Frontend i18n architecture — locale routing, message catalogs, formatting, RTL, and loading strategies.

45 min

Realtime WebSocket UI Design

advanced

Frontend system design for WebSocket UIs — connection lifecycle, backoff, fan-in state, ordering, and fallbacks.

45 min

Upload Large Files UX

intermediate

Frontend system design for large uploads — multipart, resume, progress, concurrency, failures, and virus-scan states.

45 min

Search Results Page Design

intermediate

Frontend system design for search results — query UX, filters, ranking display, perf, SEO, and empty states.

45 min

Infinite Maps Marker UI

advanced

Frontend system design for map UIs — viewport queries, marker clustering, tiles, performance, and selection UX.

45 min

Accessibility in Large Apps

intermediate

System design for accessibility at scale — governance, design system primitives, CI checks, and runtime patterns.

45 min

Performance Budget System Design

intermediate

System design for performance budgets — metrics, CI gates, RUM feedback loops, ownership, and enforcement.

45 min

Client-side Routing at Scale

intermediate

System design for SPA routing at scale — code splitting, nested layouts, data loaders, auth gates, and perf.

45 min

Error Monitoring and RUM Design

intermediate

Frontend system design for error monitoring and RUM — capture, sampling, privacy, source maps, and alerting.

45 min

A/B Testing Frontend Design

intermediate

Frontend system design for A/B experiments — assignment, flicker control, flags, metrics, and rollout tradeoffs.

45 min

Media CDN and Image Pipeline

advanced

Frontend-facing image/media pipeline design — upload, derivatives, CDN URLs, formats, and responsive delivery.

45 min

Auth Session Design for SPAs

intermediate

Frontend auth/session design for SPAs — tokens, cookies, refresh, route guards, XSS/CSRF tradeoffs, and UX.

45 min

PWA Install and Offline Shell

advanced

System 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