System design round
The round most frontend devs walk into cold.
Structured deep-dives on the prompts that actually come up — architecture, trade-offs, and the follow-up questions laid out, so you lead the conversation instead of reacting to it.
- System Designhard12 min read
Design a Live Video Portal (Streaming)
Live streaming on the client: HLS/DASH adaptive bitrate vs WebRTC, the buffering state machine, a high-volume live chat sidebar, syncing chat to stream latency, quality switching, and reconnect after a drop.
- System Designhard11 min read
Design a News Feed
Infinite scroll done right: pagination strategies, optimistic updates, feed virtualization, image loading, and keeping a long-lived feed fast and accessible.
- System Designmedium9 min read
Design an Autocomplete (Typeahead)
The most common frontend system design prompt, end to end: debouncing, caching, race conditions, keyboard accessibility, and the trade-offs interviewers actually probe.
- System Designhard11 min read
Design Facebook (Social Network)
The frontend of a social network: a mixed feed of many post types, the post composer, and a notifications system that stays correct across tabs.
- System Designhard12 min read
Design Google Docs (Collaborative Editor)
How two people type in the same paragraph at the same time without garbling it: OT vs CRDTs, contenteditable, presence cursors, offline edits, and autosave.
- System Designhard12 min read
Design Google Sheets (Spreadsheet)
A grid that renders a million cells at 60fps: windowing vs canvas, the formula dependency graph and recalculation order, cell editing, and frozen rows.
- System Designhard11 min read
Design Instagram (Photo Feed & Stories)
The media-heavy frontend: responsive images that don't shift layout, the Explore grid, and a Stories tray with preloading, progress bars, and gestures.
- System Designhard11 min read
Design Jira (Boards & Issue Tracker)
A kanban board with drag-and-drop, optimistic card moves with rollback, normalized client state, real-time teammate updates that survive your in-progress drag, and fast filtering.
- System Designhard11 min read
Design Slack (Team Messaging)
Multi-channel chat on the client: a normalized store keyed by channel, unread counts and the new-messages divider, fast channel switching, threads, presence, and search across messages.
- System Designhard11 min read
Design WhatsApp (Chat)
Real-time chat on the client: WebSocket transport, message ordering and dedupe, optimistic send with delivery states, an offline outbox, and a message list that scrolls to bottom correctly.