Netflix Frontend System Design | Front-end System Design | 💪 Chakde System Design Ep. 6

In this episode we will be covering below topics:
Frontend System Design Of Netflix.
00:00 Introduction
2:09 Functional & Non-Functional Requirements
17:55 Scoping
19:35 Tech Stack Of Netflix
43:55 Component Design
50:50 Implementation Details
In case you have missed other episodes of ChakdeSystemDesign series, do check out • Frontend System Design...
⭐️ Courses: learnwithchirag.engineerchira...
Connect to learn & grow together in our career❤️:
✅ Linkedin: / engineerc. .
✅ Twitter: / engineerchirag
✅ Instagram: / engineerchirag
#SystemDesign #FrontendSystemDesign #ChakdeSystemDesign #frontend

[@sujinleeme]

I, as a front-end developer, guarantee you watching Chirag's videos is like having food in a Michelin-Starred restaurant for free. 🧑‍🍳

[@engineerchirag]

Wow, thanks!

[@ArunKumar-ey7ez]

Awesome content. Please do give out the second video. Understanding the complete picture really helps in the interview and am curious to understand the localization(where we store them. In the db or in the app. If in db what schema) how we store the videos. I do understand these are not very front end oriented. But it will be very nice if you can explain the diagram you have at the last. And i do see you use a lot of English but if you can stick with that with less Hindi it will be easier for anyone like me to understand(Just a request). Great effort and thanks

[@engineerchirag]

Thanks Arun for feedback. I will be covering backend side of it soon, it's on my plate. Btw upcoming videos are in English only.

[@makkarpuneet]

great stuff Chirag. waiting for the 2nd part of this video

[@engineerchirag]

Working on it!

[@ankitasrivastava6943]

Great video. I can see lot of effort in making this video from your end. I was looking for the backend for frontend video but didn't found it

[@engineerchirag]

Awesome, thank you! The audience wasn't looking for it, so I dropped the idea for some time. But will be back in a couple of months 🙂

[@utkarshsingh2028]

Binge watching video... Great 🧐 stuff

[@engineerchirag]

Awesome! Thank you!

[@forceboxed]

How is sending encoded HTML string instead of actual HTML helpful to avoid Man in the Middle attacks? If someone does have the ability to get in between the client and server, then they can easily run atob() and decode it themself.

[@avinashtiwari8391]

Wonderful

[@shwetadudi8615]

Great Videos Chirag!

[@engineerchirag]

Glad you like it 🙏

[@kevind1272]

Wonderful Stuff 🔥🔥

[@engineerchirag]

Thanks 🔥

[@CathalMacDonnacha]

Great video. It looks like you have a lot of features in the functional list (user management, review etc.) which are not actually required as the product can function without them. They seem to be more nice to haves (non-functional requirements).

[@engineerchirag]

Yes, exactly. That's why prioritisation is done after that.

[@SachinDolta]

Ye to fire hai 🔥

[@engineerchirag]

Thanks @Sachin. Keep watching #chakdeSystemDesign

[@priyaahuja3479]

Very useful videos, Chirag. Can you please share the code you used to remove all the extra content to just show the basic info?

[@engineerchirag]

Sample code: gist.github.com/engineerchirag/3310451e724b1aca893a6e3ebe8fe466

[@kumaramresh7905]

What's the difference between module level and feature level functionalities?

[@siddharthpatel6009]

Perhaps a better approach for configurable UI could be to render it using SSR, 2 benefits first being there no coupling between UI and backend(configuration source) second being a fast rendering as configuration processing is removed.

[@engineerchirag]

Yes, I have covered the configurable UI in more detail in a new video kzbin.info/www/bejne/bKuai4uYadOnmKc

[@aaryanporwal]

Amazing 🤤🔥

[@engineerchirag]

Thanks 🔥

[@aurangzebhusain8366]

🔥🔥🔥🔥🔥🔥🔥

[@prakritisagar5007]

Can someone tell, how did that skeeleton appear for netflix? What do I need to disable from developer tools to see that?

[@engineerchirag]

Executed custom javascript to remove images and add bg color

[@trialaccount2244]

I am completely noob here so you when you say discussing about system design is it about lld or hld ?

[@engineerchirag]

Check out: kzbin.info/www/bejne/h5bQepmwmKqYg68&ab_channel=ChiragGoel Watch complete episode, you will get better idea about LLD & HLD.

[@VishalGupta-jsdev]

Chirag, I think investing a lot of time in thinking and writing all these FR and NFRs, will left us with enough time to work on just a single functionality of entire system. I also think, better way could be just think and write 5-6 max FRs and NFRs, and discuss that within the interview. And while closing the interview, you straight away say interviewer, all other FRs and NFRs are there, those i would love to discuss but couldn't get it through just because of time lag. What do say?

[@engineerchirag]

ChakdeSystemDesign video isn't just normal mock interviews. It's purpose it to share thought process during interviews and provide quality learning along with interview experience. Normally we should invest around 10min on FR & NFRs in interview. Always try to validate with interviewer if he/she wants you to dive further.

[@shobhitgarg6897]

How did you remove unwanted styles and images from developers tool?

[@engineerchirag]

Yup 😛

[@ImSachinyadav19]

@chirag Goel how you are able to view the skeleton of a webpage tell us the shortcut

[@engineerchirag]

I wrote a simple vanilla js script to remove all images and text to replace it with dummy text and background. Didn't used any inbuilt shortcut ☺️

[@ImSachinyadav19]

@@engineerchirag okok

[@MohitKumar-nh1qb]

@@engineerchirag Can you share your script? Thanks.

[@utkarshsingh2028]

Plz provide that piece of code. If possible explain that as well.

[@engineerchirag]

Sample code to see the skeleton: gist.github.com/engineerchirag/3310451e724b1aca893a6e3ebe8fe466

[@guptaankit2791]

Nice explanation....nice presentation....but volume is very low

[@engineerchirag]

Have improved audio quality in new videos. Thanks for feedback 😃

[@gauravsuman586]

bookmarking this 32:21

[@gauravsuman586]

Thanks for the response Chirag. I was just bookmarking for coming back to this. Great Content btw. Keep rocking!!

[@manojthayil7836]

I have 1 query , In an interview, if asked about Netflix system design , 1) Do we have to say the actual system design Netflix works on OR 2) We can say on our own , how things we will design

[@engineerchirag]

It's not mandatory you already know how the current system works. But it's an advantage, if you already know it. As you can add your own knowledge/experience on top of it.

[@iamshadmirza]

Where is part 2 of this?

[@engineerchirag]

The audience wasn't interested in the backend side of it. So I didn't upload it.

[@iamshadmirza]

@@engineerchirag ah, bummer. Maybe in future you can create a separate playlist and talk about the backend side. I would love to see that. Loving this series bdw. Thank you so much

[@mohammadhoseinabbasi9993]

Isn't functional and non-functional requirements requested by the client? I don't think we frontend devs are required to know what requirements Netflix have to design their system!

[@engineerchirag]

In service based companies these are mostly decided by client, but in product based company developers are involved in planning, feasibility & implementation discussion.

[@nontechnicalbaba]

this is how system design happens, by seeing the built product??

[@engineerchirag]

You learn from others 🙂

[@mryushido]

The Netflix, hehe

[@engineerchirag]

😛

[@rachitlosalka808]

Bro, I like your vides in general, but for this video, I would say this is not System Design- this is just memorising a lot of jargon names for all the services, protocols used by companies and blabbing out. Where was designing? This was supposed to be FRONTEND System Design but became a Computer Networks lecture for the most part. I was expecting we would discuss on how we could build a streaming service like Netflix as a FE Engineer. Motivations are taken from existing systems, but... I hope you get my point. Anyway, I appreciate your content always.

[@engineerchirag]

I recorded to cover some of core topics, although there is still lot more to cover in Netflix. One video of system design won't be enough for systems like Netflix. More to come 😊

[@kose241]

"become a doctor" - chirag

[@engineerchirag]

lol why so?

[@kose241]

@@engineerchirag haha you said it in the video

[@engineerchirag]

Lol 🤣

[@forceboxed]

Bhai Hindi mein bola karo. You were much more clearer in earlier videos when you spoke Hindi/Hinglish.

[@engineerchirag]

Thanks Abhishek for valuable feedback. Will try my best to deliver quality content in English as most of the people understand it.

[@susmitobhattacharyya1668]

You are a true gem sir...thanks for all these valuable content! 🫡

[@engineerchirag]

Thanks a ton Susmit ❤️

[@PraveenKumar-ft2kr]

Amazing .. Thanks for making this Series. One request could you post that comment which you used to see the skeleton of the page at 48th minute 😅

[@engineerchirag]

Sure, will add the code gist in description. Keep watching #chakdeSystemDesign and don't forget to share it in your network ☺️

[@priyeshjammula854]

@@engineerchirag I think you forgot. Can you pls add. Thanks

[@engineerchirag]

@@priyeshjammula854 Sample code to see the skeleton: gist.github.com/engineerchirag/3310451e724b1aca893a6e3ebe8fe466

[@priyeshjammula854]

Thank you!

[@subhamgupta1549]

Sorry to say, but this is not system design. Here you are teaching the system used by netflix but that is not what system design is meant to be. @engineerchirag