Design Netflix – Frontend System Design
In this guide, we design Netflix from the frontend side: the browse page with its hero and rows, hover previews, the video player, and resume-anywhere playback.
Problem Statement
Build the frontend for a video streaming website like Netflix.
Requirements:
- After picking a profile, users land on a browse page with a large hero banner and many horizontal rows of titles (e.g., “Trending Now”, “Continue Watching”, “Because You Watched…”)
- Each row scrolls horizontally, and each tile shows the title’s artwork
- Hovering or focusing a tile shows a short preview and quick actions (play, add to My List)
- Clicking play opens a full-screen video player with controls, subtitles, and audio track selection
- Playback should resume where the user left off, on any device
Describe your approach to component structure, how you would fetch and render the rows, how video playback works in the browser, and any optimizations you’d consider for performance and user experience.
Clarifying Questions
| # | Question | Interviewer’s Answer |
|---|---|---|
| 1 | Which platforms are we designing for: web, mobile apps, or TV? | Web (desktop and mobile browsers). TV is out of... premium content. Premium Keep reading with PremiumGet the rest of this guide plus every premium question, solution, and system design deep dive.
     4.9/5 from our users |