← All courses
17 lessonsبالعربي

Frontend System Design

The full Frontend System Design series — rebuilt as an interactive course. Watch each episode, then go deeper with live demos, worked examples, and quizzes you can actually play with. Built around the RADIO framework and the real patterns you'll reach for on the job and in interviews.

Videos in Arabic · Lessons & demos in English

Your progress0 / 17 lessons · 0%
MODULE 1

Foundations

What frontend system design is, who it's for, and how to think about it.

01IntroductionWhy frontend system design matters, who needs it, and the state of modern frontend.13 minInteractive02Frontend vs. Backend System DesignHow frontend system design differs from the backend interviews you've heard about.11 minInteractive03System Design vs. ArchitectureUntangling two terms people use interchangeably — and shouldn't.16 minInteractive
MODULE 2

The RADIO Framework

A repeatable process for any frontend design problem or interview.

04RADIO — Requirement ExplorationThe R in RADIO: asking the right questions before writing any code.16 minInteractive05RADIO — High-Level DesignSketching the architecture: components, data flow, and boundaries.16 minInteractive06RADIO — Core EntitiesIdentifying the core entities your UI is built around.18 minInteractive07RADIO — Interface DefinitionDefining clean interfaces between client and server, and between components.21 minInteractive08RADIO — Optimizations & Deep DiveWhere to spend optimization effort once the design holds together.15 minInteractive
MODULE 3

Component API Design

Designing reusable components with APIs people actually enjoy using.

09Component API GuidesDesigning component APIs that are flexible without being chaotic.32 minInteractive10Customizing Component AppearanceStyling strategies: variants, slots, tokens, and escape hatches.36 minInteractive
MODULE 4

Pagination & Data Loading

Serving large datasets to the client without melting the page.

11PaginationLoading large datasets in chunks — offset vs. cursor pagination, the trade-offs, and what breaks under dynamic data.30 minInteractive
MODULE 5

Icon Rendering

A deep, three-part case study in a deceptively simple problem.

12Icon Rendering — Part 1Approaches to shipping icons: the design space and the constraints.29 minInteractive13Icon Rendering — Part 2SVG sprites, icon fonts, and inline SVG compared in depth.37 minInteractive14Icon Rendering — Part 3Tying icon rendering back to performance and component APIs.42 minInteractive
MODULE 6

State Normalization

Modeling client state so it stays consistent as it grows.

15State NormalizationFlattening nested data into normalized state to kill duplication bugs.46 minInteractive
MODULE 7

Real-time Updates

Keeping the UI fresh as the server changes underneath it.

16Real-time Updates — IntroductionThe landscape of keeping the UI in sync with a changing server.20 minInteractive17Real-time Updates — Client PullingShort polling, long polling, and when pulling beats pushing.39 minInteractive