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

Design a News Feed explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

45 min

Design an Image Gallery

intermediate

Design an Image Gallery explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

45 min

Design Autocomplete Typeahead

intermediate

Design Autocomplete Typeahead explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

45 min

Design a Notification System UI

advanced

Design a Notification System UI explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

45 min

Design Realtime Collaboration Cursors

advanced

Design Realtime Collaboration Cursors explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

45 min

Design a Dashboard Analytics UI

intermediate

Design a Dashboard Analytics UI explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

45 min

Design E-commerce Product Page

intermediate

Design E-commerce Product Page explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

45 min

Design Video Player Experience

advanced

Design Video Player Experience explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

45 min

Design Offline-first Notes App

advanced

Design Offline-first Notes App explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

45 min

Design Multi-tenant Admin Panel

advanced

Design Multi-tenant Admin Panel explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

45 min

Frontend Caching Strategies

intermediate

Frontend Caching Strategies explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

45 min

State Management at Scale

intermediate

State Management at Scale explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

45 min

Micro Frontends Tradeoffs

advanced

Micro Frontends Tradeoffs explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

45 min

SSR CSR Islands Architecture

intermediate

SSR CSR Islands Architecture explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

45 min

Edge Rendering Tradeoffs

advanced

Edge Rendering Tradeoffs explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

45 min

Design a Design System

intermediate

Design a Design System explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

45 min

Feature Flags Client Architecture

intermediate

Feature Flags Client Architecture explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

45 min

Internationalization Architecture

intermediate

Internationalization Architecture explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

45 min

Realtime WebSocket UI Design

advanced

Realtime WebSocket UI Design explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

45 min

Upload Large Files UX

intermediate

Upload Large Files UX explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

45 min

Search Results Page Design

intermediate

Search Results Page Design explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

45 min

Infinite Maps Marker UI

advanced

Infinite Maps Marker UI explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

45 min

Accessibility in Large Apps

intermediate

Accessibility in Large Apps explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

45 min

Performance Budget System Design

intermediate

Performance Budget System Design explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

45 min

Client-side Routing at Scale

intermediate

Client-side Routing at Scale explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

45 min

Error Monitoring and RUM Design

intermediate

Error Monitoring and RUM Design explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

45 min

A/B Testing Frontend Design

intermediate

A/B Testing Frontend Design explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

45 min

Media CDN and Image Pipeline

advanced

Media CDN and Image Pipeline explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

45 min

Auth Session Design for SPAs

intermediate

Auth Session Design for SPAs explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

45 min

PWA Install and Offline Shell

advanced

PWA 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