hello.frontend

Frontend System Design

High-level architectural patterns for modern frontend applications. From micro-frontends to state machine orchestration at scale.

0/34
Solved
/
Architecture Guide 2026Guide
Interview Cheat SheetChecklist
Design a News Feed UI
Medium
Design a Component Library / Design SystemPRO
Hard
Design Travel Booking Platform (Expedia/Booking.com)PRO
Hard
Design Perplexity (RAG Search with Citations)PROAI
Hard
Design a Self-healing React ComponentPROAIGUIDED ANSWER
Hard
Design Cursor (AI Code Editor with Agent Edits)PROAI
Hard
One App Before MicrofrontendsPRO
Medium
Component APIs That Age WellPRO
Medium
Decide Rendering Per RoutePRO
Medium
Design AI Agent Traces & Artifacts UIPROAI
Hard
Design an Embedded Payment SDK (Stripe Elements)PRO
Hard
Design a File Upload UI
Easy
Design an E-commerce Cart + Product PagePRO
Medium
Design a Calendar / SchedulerPRO
Hard
Design a Rich Text EditorPRO
Hard
Design an Email Client UIPRO
Hard
Design a File Explorer / Google Drive UIPRO
Hard
Optimistic UpdatesPRO
Medium
Design an Autocomplete / Search UI
Medium
Design a Video Player (YouTube / Netflix)PRO
Hard
Design a Data Table (Sort / Filter / Virtualize)PRO
Medium
Design an Image Carousel / Photo Gallery
Easy
Design an Analytics DashboardPRO
Hard
Design a Drawing Tool like FigmaPRO
Hard
Design a Spreadsheet UI like Google SheetsPRO
Hard
VirtualizationPRO
Medium
Design a Real-time Chat UI
Hard
Design a Collaborative Editor (Google Docs)PRO
Hard
Design ChatGPT (Streaming Chat with Branching & Share-link)PROAI
Hard
Design a Notification CenterPRO
Hard
Design a Kanban Project BoardPRO
Hard
Keep Browser Tabs in SyncPRO
Medium
Stream Over HTTP FirstPRO
Medium
Design Live Vehicle Tracking for 1,000 Moving VehiclesPRONEW
Hard
System Design Core Concepts

Architectural blueprints for senior & staff loops.

Mentor-tone lessons — scene, naive move, where it breaks, fix — so you can teach the pattern before the product question.

All System Design Topics