System design

The main event. "Design X" — where you drive the whole conversation: requirements → architecture → data flow → deep dives → trade-offs. Start with the ⭐ flagships (fully solved) to learn the shape of a great answer, then practice the rest.

🧠 How to approach any "Design X" #

1. Clarify requirements (functional + non-functional) — don't skip this, it's graded.
2. Draw the high-level architecture — components, data flow, API.
3. Pick a rendering strategy and justify it.
4. Deep-dive the hard parts — the interviewer steers here.
5. Call out trade-offs proactively (perf, a11y, offline, scale).

📖 General frameworks: GreatFrontEnd: system design guide ⭐ · Frontend Interview Handbook · systemdesign.one

---

⭐ Flagship solutions (fully worked) #

Problem	Difficulty	Time	Tags
Design a News Feed / Infinite Scroll	🔴	1h	#feed #infinite-scroll #virtualization
Design Autocomplete / Typeahead	🟡	45m	#search #debounce #caching
Design a Chat App (WhatsApp Web)	🔴	1h	#realtime #websocket #offline
Design Google Docs (collaborative)	🔴	1.5h	#realtime #crdt #collaboration
Design an Image Carousel at scale	🟡	45m	#media #a11y #performance
Design a Notification System	🔴	1h	#realtime #websocket #a11y
Design a Video Player	🔴	1h	#media #streaming #performance

---

📰 Feeds & Social #

Problem	Difficulty	Time	Resource
Design News Feed (Facebook/Twitter)	🔴	1h	Flagship ⭐
Design Instagram	🔴	1h	GreatFrontEnd
Design Twitter / X	🔴	1h	GreatFrontEnd
Design LinkedIn Feed	🔴	1h	Flagship pattern
Design Reddit	🔴	1h	Nested comments
Design a Stories feature	🟡	45m	GreatFrontEnd
Design Live Comments	🟡	45m	Real-time pattern
Design a Poll / Voting widget	🟢	30m	Machine coding
Design a Notification system	🔴	1h	Flagship ⭐
Design an Activity Feed	🟡	45m	Flagship pattern
Design a Comment system	🟡	45m	Nested comments
Design a Follow/Friend system UI	🟡	45m	Optimistic UI
Design a Reactions (emoji) picker	🟢	30m	Machine coding
Design a Hashtag/mention input	🟡	45m	Autocomplete flagship

💬 Communication & Real-time #

Problem	Difficulty	Time	Resource
Design WhatsApp Web / Chat	🔴	1h	Flagship ⭐
Design Slack	🔴	1.5h	Flagship pattern
Design Discord	🔴	1.5h	Flagship pattern
Design Messenger	🔴	1h	Flagship pattern
Design Zoom (video call UI)	🔴	1.5h	WebRTC
Design Google Meet	🔴	1.5h	WebRTC
Design Gmail	🔴	1.5h	GreatFrontEnd
Design an Email client (Outlook)	🔴	1.5h	Virtualization
Design a Typing indicator / presence	🟡	45m	Real-time pattern
Design a Video conferencing grid	🔴	1h	Performance
Design a Live streaming chat	🔴	1h	Real-time pattern

📝 Productivity & Collaboration #

Problem	Difficulty	Time	Resource
Design Google Docs	🔴	1.5h	Flagship ⭐
Design Google Sheets / Spreadsheet	🔴	1.5h	Machine coding
Design Notion	🔴	1.5h	Flagship pattern
Design Trello / Kanban	🔴	1h	Machine coding flagship
Design Jira	🔴	1.5h	GreatFrontEnd
Design Asana / task manager	🔴	1.5h	Kanban flagship
Design a Calendar (Google Calendar)	🔴	1.5h	Machine coding
Design a Rich Text Editor	🔴	1.5h	ProseMirror
Design Figma / Whiteboard	🔴	2h	Canvas API
Design Miro	🔴	2h	Canvas API
Design a Form Builder	🔴	1.5h	Machine coding
Design a Survey / Quiz platform	🟡	1h	State
Design a Documentation platform (Docusaurus)	🟡	1h	Rendering
Design a Code editor (VS Code Web)	🔴	2h	Monaco

🖼️ Media & Streaming #

Problem	Difficulty	Time	Resource
Design YouTube	🔴	1.5h	GreatFrontEnd
Design Netflix	🔴	1.5h	GreatFrontEnd
Design a Video Player	🔴	1h	Flagship ⭐
Design Spotify	🔴	1.5h	GreatFrontEnd
Design SoundCloud (audio)	🟡	1h	Web Audio API
Design an Image Gallery / Carousel	🟡	45m	Flagship ⭐
Design a Photo editor	🔴	1.5h	Canvas API
Design a File Upload (chunked, resumable)	🔴	1h	Pattern
Design Pinterest (masonry grid)	🔴	1h	Virtualization
Design a Podcast player	🟡	1h	Media

🛒 Commerce & Marketplaces #

Problem	Difficulty	Time	Resource
Design Amazon / E-commerce	🔴	1.5h	GreatFrontEnd
Design a Product Listing + Filters	🟡	1h	Pattern
Design a Cart & Checkout	🟡	1h	State pattern
Design Airbnb	🔴	1.5h	GreatFrontEnd
Design Booking.com	🔴	1.5h	State
Design a Food Delivery (Swiggy/DoorDash)	🔴	1.5h	GreatFrontEnd
Design Uber / Ride-hailing	🔴	1.5h	Maps below
Design a Payment / Checkout form	🟡	1h	Security
Design a Price comparison table	🟢	30m	Machine coding
Design a Wishlist / Save-for-later	🟢	30m	Offline
Design a Flash-sale / countdown page	🟡	45m	Real-time pattern

🗺️ Maps, Dashboards & Data #

Problem	Difficulty	Time	Resource
Design Google Maps	🔴	2h	GreatFrontEnd
Design an Analytics Dashboard	🔴	1.5h	D3
Design an Admin Dashboard / CRM	🟡	1h	Machine coding
Design a Trading / Crypto Dashboard (real-time)	🔴	1.5h	Real-time pattern
Design a Data Grid / Table (sortable, virtual)	🔴	1.5h	Virtualization
Design a Charting library	🔴	1.5h	Canvas/SVG
Design a Log/metrics viewer	🔴	1h	Virtualization
Design a Ride-tracking map (live location)	🔴	1.5h	Real-time pattern
Design a Weather app	🟢	30m	Fundamentals
Design a Stock ticker	🟡	45m	Real-time pattern

🧱 Core UI Systems #

Problem	Difficulty	Time	Resource
Design an Autocomplete / Typeahead	🟡	45m	Flagship ⭐
Design a Search system	🔴	1h	Flagship pattern
Design Infinite Scroll	🔴	1h	Flagship ⭐
Design a Notification/Toast system	🟡	45m	Machine coding
Design a Design System / Component Library	🔴	1.5h	Architecture
Design an i18n / localization system	🟡	1h	FormatJS
Design a Theming / Dark-mode system	🟡	45m	CSS theming
Design a Feature-flag / A-B testing system	🔴	1h	Architecture
Design an Error/crash reporting widget	🟡	45m	Error handling
Design an Analytics/telemetry SDK	🔴	1h	Performance
Design a Cookie-consent / GDPR banner	🟢	30m	Security
Design an Onboarding tour / coach-marks	🟡	45m	Machine coding
Design a Multi-step wizard / form flow	🟡	45m	State machines
Design a Global search (⌘K palette)	🔴	1h	Command palette

🔐 Auth & Account #

Problem	Difficulty	Time	Resource
Design a Login / Signup flow	🟡	45m	Security
Design OAuth login (Google/GitHub)	🔴	1h	Security: OAuth
Design a 2FA / OTP flow	🟡	45m	Security
Design token refresh / session management	🔴	1h	Security: auth
Design a password reset flow	🟢	30m	Security
Design a role-based access (RBAC) UI	🟡	45m	Security: authz

🛠️ Developer & Tooling Products #

Problem	Difficulty	Time	Resource
Design a code sandbox (CodePen/CodeSandbox)	🔴	1.5h	Build your own
Design a CI/CD pipeline dashboard	🟡	1h	15-system-design
Design a documentation site with search	🟡	1h	Autocomplete flagship
Design a status page	🟢	30m	Real-time pattern
Design a feature-flag dashboard	🔴	1h	Architecture
Design an error-monitoring UI (Sentry)	🔴	1h	Architecture
Design a design-system docs (Storybook)	🟡	1h	Architecture

🌍 More Real-World Apps #

Problem	Difficulty	Time	Resource
Design a multi-tenant SaaS dashboard	🔴	1.5h	Architecture
Design a Job board	🟡	1h	Pattern
Design a Booking / reservation system	🔴	1.5h	State
Design a Quiz / exam platform	🟡	1h	State machines
Design a Resume builder	🟡	1h	Machine coding
Design an Image annotation tool	🔴	1.5h	Canvas API
Design a real-time collaborative cursor	🔴	1h	Google Docs flagship
Design a Airbnb-style map + list sync	🔴	1.5h	15-system-design

Related: 17-interview-patterns · 16-machine-coding · 09-performance

This list grows with the community — add a "Design X" or turn one into a full flagship.