Netflix logo

Netflix Frontend Engineer System Design Questions

36 practice questions for Netflix Frontend Engineer interviews

Netflix frontend engineer interviews emphasise JavaScript, DOM manipulation, CSS, accessibility, browser APIs, and UI component architecture.

All Roles Software Engineer Backend Engineer Frontend Engineer Full Stack Engineer Mobile Engineer Data Engineer Data Scientist ML Engineer DevOps Engineer DevOps Engineer Product Manager SRE Security Engineer Engineering Manager Data Analyst UX/UI Designer QA Engineer

No verified questions yet for Netflix.

system design Senior api design #1

1. [OA] Class Design — Create a WatchList system for users

To enhance user engagement and content discoverability, Netflix aims to implement a user-specific watchlist system allowing users to save their preferred content for future viewing.
Design a class WatchList that allows users to manage their watchlist with the following features:
- add(contentId: string): Adds a content ID to the watchlist.
- remove(contentId: string): Removes a content ID from the watchlist.
- getAll() -> List[string]: Returns a list of all content IDs in the watchlist.
- contains(contentId: string) -> bool: Checks if a content ID is present in the watchlist.
Example 1:
Input: watchlist = new WatchList(); watchlist.add('content123'); watchlist.getAll()
Output: ['content123']
Explanation: The content ID 'content123' is successfully added to the watchlist.
Constraints:
- The contentId strings are unique and valid.
system design Senior api design #2

2. [OA] Object-Oriented Design — Design Netflix's Client-Side Router

As Netflix's platform scales, creating a seamless user experience necessitates designing an efficient client-side routing system to manage navigation and view states across the application.
Implement a class Router to manage routes and navigation within the application, with the following functionality:
- addRoute(path: string, component: Function) -> void: Adds a new route with an associated component.
- navigate(path: string) -> void: Navigates to the specified route, rendering the associated component.
- getCurrentRoute() -> string: Returns the current route.
Example 1:
Input: router = new Router(); router.addRoute('/home', Home); router.addRoute('/about', About); router.navigate('/home'); router.getCurrentRoute()
Output: '/home'
Explanation: Navigating to '/home' renders the Home component and updates the current route to '/home'.
Constraints:
- All path strings are unique.
- Each component is a valid Function reference.
- Concurrent navigation requests may occur, which should be handled gracefully.

Related Netflix Frontend Engineer interview prep

Start practicing Netflix questions

Sign up for free to access walkthroughs, AI-generated questions, and more.

Get Started Free