System Design

Frontend System Design

A complete 13-module frontend system design course - from how the browser really works, client-server communication and client-side data, through performance, security, accessibility, testing and offline, to low-level machine-coding and high-level design case studies.

Intermediate1337116 lessons24 free lessonsfrontendsystem-designfrontend-system-designinterview-prepreact

Frontend System Design: From Fundamentals to FAANG Interviews

The frontend system design round is its own discipline - not backend system design with a UI bolted on. This course teaches it the way it is actually evaluated, authored by Olena Marchenko (Microsoft).

It opens with the frame: what a frontend SD round really tests, the RADIO framework, time management in the 45-minute round, and one full worked example end to end. From there it builds the foundations every design rests on - how the browser turns a URL into pixels, client-server communication (REST, GraphQL, gRPC, and the five realtime options), and data on the client (the storage spectrum, state management, and how caching layers compose).

Then the cross-cutting qualities a senior engineer must defend in any design, each as its own module: performance (Core Web Vitals, rendering patterns), security (taught as a threat model, not a checklist), accessibility, testing, observability, and offline / PWAs.

It closes with the two rounds that decide offers: low-level design (machine coding - autocomplete, infinite scroll, nested comments, carousels, pagination and more) and high-level design (Instagram, the news feed, Netflix, Google Docs, Sheets, Excalidraw, e-commerce and microfrontends - clustered by the transferable pattern each teaches), plus a closing module on what interviewers actually score.

What you will learn

• What a frontend system design round actually tests — and the RADIO framework for running the 45 minutes
• How the browser works end to end: the rendering pipeline, reflow/repaint, and DOM vs Virtual vs Shadow DOM
• Client-server communication: REST vs GraphQL vs gRPC, and choosing among polling, WebSockets, SSE and WebHooks
• Data on the client: the storage spectrum, state management, and how HTTP / service-worker / API caching layers compose
• Performance from metrics to delivery — Core Web Vitals, monitoring, and CSR / SSR / SSG / ISR / streaming / islands
• Frontend security as a threat model: XSS, CSRF, CORS, CSP, SRI, and dependency / supply-chain risk
• Accessibility, testing, observability, and offline / PWA architecture as first-class design concerns
• Low-level design (machine coding): autocomplete, infinite scroll, nested comments, carousels, pagination and more
• High-level design case studies — Instagram, news feed, Netflix, Google Docs, Sheets, Excalidraw, e-commerce and microfrontends

Prerequisites

• Comfortable with JavaScript and a component framework (React or similar) — we start from how the browser works, not from language basics.

Course outline

Module 1: The Frame

The Frame — 4 topics.

• You think you know what this round is. You probably don't. 10 min read
• The five most expensive minutes of your interview are the first five 10 min read
• Forty-five minutes is less time than you think 10 min read
• Let's actually do one 11 min read

Module 2: How the Browser & Web Really Work

How the Browser & Web Really Work — 10 topics.

• What happens when you type a URL and hit enter? 11 min read
• The bytes arrived. Now what? 10 min read
• Why does the order of your tags change your load time? 11 min read
• Why does one animation stutter and another stays silk-smooth? 10 min read
• Three things called "DOM," and only one of them is what you think 10 min read
• You've used the BOM a thousand times. You probably can't name it. 10 min read
• "We'll build it as an SPA." Why? "Because that's how you build things now." 10 min read
• Two different ways to make a file smaller, and they're not competitors 10 min read Pro lesson
• "Tree shaking" and "dead code elimination" - same thing? Not quite. 10 min read Pro lesson
• Positioning isn't five definitions - it's five different relationships with the layout engine 11 min read Pro lesson

Module 3: Client–Server Communication

Client–Server Communication — 13 topics.

• "Networking is a backend thing." Said every candidate who underperforms this section. 10 min read
• Why your bundling strategy depends on a protocol decision you didn't make 10 min read
• The default that everyone uses and few examine 10 min read Pro lesson
• The cure for over-fetching that brings its own diseases 10 min read Pro lesson
• The fast, strict one that the browser can't quite speak 10 min read Pro lesson
• Stop asking which is best. Start asking which fits. 10 min read Pro lesson
• "Make it real-time." Everyone reaches for WebSockets. Most are wrong. 11 min read Pro lesson
• The technique everyone learns first and dismisses too fast 10 min read Pro lesson
• What if the server just... didn't answer right away? 10 min read Pro lesson
• The real thing: one connection, both directions, always open 11 min read Pro lesson
• The one-way push channel that gives you reconnection for free 10 min read Pro lesson
• The reverse API call: when They call You 10 min read Pro lesson
• The capstone: five mechanisms, one decision 10 min read Pro lesson

Module 4: Data on the Client

Data on the Client — 12 topics.

• "I'll just put it in localStorage." The four most expensive words in client storage. 11 min read
• The storage everyone reaches for, right for less than you think 11 min read Pro lesson
• Same API, one decision that changes everything 11 min read Pro lesson
• The storage that talks to your server 11 min read Pro lesson
• The database in the browser that everyone avoids 10 min read Pro lesson
• The bug that hides in your nicely-nested data 10 min read Pro lesson
• "We need state management." For *which* state? 10 min read Pro lesson
• "Let's use Redux." For what, exactly? 11 min read Pro lesson
• The caching layer you get for free and forget to use 10 min read Pro lesson
• A proxy you program, sitting between your app and the network 10 min read Pro lesson
• Caching that understands your data, not just your URLs 10 min read Pro lesson
• One request, many caches: the full stack 10 min read Pro lesson

Module 5: Performance

Performance — 7 topics.

• Performance is a feature, and a business decision 10 min read
• Turning "fast" into numbers users actually feel 10 min read Pro lesson
• Two ways to measure, two different truths 10 min read Pro lesson
• From "it's slow" to "here's exactly what to fix" 10 min read Pro lesson
• Optimizing the trip across the hostile network 10 min read Pro lesson
• Shipping less code, and smarter code 10 min read Pro lesson
• The most architectural performance decision: where does the page render? 11 min read Pro lesson

Module 6: Security

Security — 14 topics.

• Security is a way of thinking, not a list of fixes 10 min read
• The attack that runs the attacker's code as if it were yours 11 min read Pro lesson
• Weaponizing the browser's helpfulness against the user 10 min read Pro lesson
• The most misunderstood topic in frontend security 10 min read Pro lesson
• Telling the browser exactly what's allowed to run 10 min read Pro lesson
• Trusting a CDN, but verifying what it actually sends 10 min read Pro lesson
• Two directions of iframe danger 10 min read Pro lesson
• The foundation every other defense stands on 10 min read Pro lesson
• The discipline beneath every injection defense 10 min read Pro lesson
• When the frontend hands the server a poisoned URL 10 min read Pro lesson
• XSS's far more dangerous cousin, on the server 10 min read Pro lesson
• Least privilege for browser features 10 min read Pro lesson
• You ship far more code than you write 11 min read Pro lesson
• When the constraint is the law, not the attacker 10 min read Pro lesson

Module 7: Accessibility

Accessibility — 7 topics.

• The dimension that separates senior engineers from the rest 10 min read
• The foundation: if it doesn't work with a keyboard, it's broken 10 min read Pro lesson
• Making the page mean something when it's read aloud 10 min read Pro lesson
• Where "you are" on the page 9 min read Pro lesson
• The most measurable accessibility issue - and the most commonly failed 9 min read Pro lesson
• Finding what's wrong - and the trap of thinking a tool can tell you 10 min read Pro lesson
• From overwhelmed to systematic 9 min read Pro lesson

Module 8: Testing

Testing — 8 topics.

• How much of each kind of test? 9 min read
• The two layers where frontend invests most 9 min read Pro lesson
• The ultimate realism - at the ultimate cost 9 min read Pro lesson
• A different kind of "testing" - measuring what works 10 min read Pro lesson
• Testing for "fast," not just "correct" 9 min read Pro lesson
• Verifying the defenses actually hold 9 min read Pro lesson
• Writing the test first 9 min read Pro lesson
• Testing a real content platform - ours 10 min read Pro lesson

Module 9: Observability

Observability — 4 topics.

• Your frontend runs where you can't see it 9 min read
• Making the app report on itself 9 min read Pro lesson
• Learning about problems before users tell you 9 min read Pro lesson
• From "an alert fired" to "it's fixed and won't recur" 10 min read Pro lesson

Module 10: Offline & Progressive Web Apps

Offline & Progressive Web Apps — 2 topics.

• A programmable proxy that runs without your page 9 min read Pro lesson
• Assembling the pieces into an app-like web experience 10 min read Pro lesson

Module 11: Low Level Design (Machine Coding)

Low Level Design (Machine Coding) — 17 topics.

• The round nobody prepares for correctly 18 min read
• The method is the differentiator 17 min read Pro lesson
• The skill the round is really testing 16 min read Pro lesson
• When the UI is data, not code 15 min read Pro lesson
• The state every real app spends time in 15 min read Pro lesson
• From one component to a whole application 15 min read Pro lesson
• The decision that quietly shapes every build 15 min read Pro lesson
• Much more than swapping strings 15 min read Pro lesson
• Autocomplete & Search Bar - Full LLD Case Study 16 min read Pro lesson
• Infinite Scroll - Full LLD Case Study 18 min read
• Reddit-Style Nested Comments - Full LLD Case Study 16 min read
• Image Slider / Carousel - Full LLD Case Study 15 min read Pro lesson
• Accordion - Full LLD Case Study 16 min read Pro lesson
• Pagination - Part 1: Offset / Page-Based - Full LLD Case Study 16 min read Pro lesson
• Pagination - Part 2: Cursor-Based, Infinite & Virtualized - Full LLD Case Study 14 min read Pro lesson
• Real-Time Updates - Full LLD Case Study 15 min read Pro lesson
• YouTube Live-Stream Chat UI - Full LLD Case Study (Module Capstone) 16 min read Pro lesson

Module 12: High Level Design

High Level Design — 14 topics.

• How a Frontend HLD Round Runs - The Framework 14 min read Pro lesson
• Designing Instagram (Photo Sharing) - HLD Case Study 18 min read
• Designing a News Feed (Facebook / Twitter) - HLD Case Study 16 min read Pro lesson
• Designing Netflix (Video Streaming + Adaptive Delivery) - HLD Case Study 16 min read Pro lesson
• Designing Spotify (Music Streaming + Offline + Prefetch) - HLD Case Study 16 min read Pro lesson
• Designing Google Docs (Collaborative Editing) - HLD Case Study 18 min read Pro lesson
• Designing Google Sheets (Virtualized Grid + Formula Recalc) - HLD Case Study 15 min read Pro lesson
• Designing Excalidraw (Canvas + Real-Time Collaboration) - HLD Case Study 16 min read Pro lesson
• Designing E-Commerce (Amazon / Flipkart) - HLD Case Study 16 min read Pro lesson
• Designing an Email Client (Gmail / Outlook) - HLD Case Study 16 min read Pro lesson
• Designing Live Commentary (CricInfo / Cricbuzz) - HLD Case Study 15 min read Pro lesson
• Designing an Analytics Dashboard (Google Analytics) - HLD Case Study 15 min read Pro lesson
• Designing a Kanban Board (Drag-and-Drop, Ordering & Real-Time) - HLD Case Study 15 min read Pro lesson
• Microfrontends - Composing Large Frontends (Module 11 Capstone) 13 min read Pro lesson

Module 13: Closing the Loop

Closing the Loop — 4 topics.

• What Interviewers Expect From Early-Career Developers 10 min read
• What Interviewers Expect From Senior Developers 9 min read Pro lesson
• Understanding Quality Checks in Interviews (UT / CT / E2E) 10 min read Pro lesson
• System Design Skills to Showcase on Your Resume 10 min read Pro lesson

Browse all courses