I’m Launching a 10+ Hour Frontend System Design Course on YouTube

[00:00:00]All right. So let's start with this. Now by the title you can clearly see this will be a launch video for front- end system design course. And the first thing I wanted to mention and let's make it very very clear guys. Please give support for this particular video. That means if I get good response from this then only I'm going to upload this video. Okay? Because these videos take a lot of effort. Second thing I wanted to mention I think some of you actually commented that I'm only uploading launch videos on this particular channel not the actual videos. And see that is not correct. Last week only I uploaded the first video. You can see that this is NodeJS full course and it's almost 17 hours long and then there will be some more videos and really good videos that are in pipeline. For example, next one will be NodeJS microservices full course with Kafka. Then we are going to upload backend system design agenti full course with TypeScript developers and NJS full course. And then I thought okay because I'm already uploading backend system design then why not front- end system design course also. And that is the reason in this particular video we're going to cover what are the things you're going to learn and very very important what all things will be prerequisite so that you can at least learn some of the things and it will be much more easier when I'm going to upload the actual video. Okay. So let's start with the prerequisite and this is one of the main reason I'm actually uploading this video. So here there will be most mostly five topic will be prerequisite. So first one will be React fundamentals, TypeScript basics, browser and CSS basics, API and async basics and git basics. So if you know all of these uh you are good to go and it's very very important you need to know all of these before uh you're going to start the actual system design uh video. Now let's understand that what are the things we're going to cover or how actually I have divided this entire video. So this is actually divided into eight main section. Okay. and all the things whatever things you are seeing all these topics how we are going to understand we are going to understand by implementing or by designing a actual project. Okay.

[00:01:54]So that means we are going to design actual project and at the same time we are going to learn the concept. So first we will start with understanding front- end system and product requirements.

[00:02:04]Why? Because when you're giving interview like especially product based interviews you have to know this. Okay this is very very important that system design interview will be there. It's not like you're going to go for a technical round interview and then directly there will be HR interview. Doesn't work like that. So there can be HLD for let's say less than three years three years of experience. HLD 3 years of like more 3 years of experience there will be HLD and LLD also and it's very very important. So first we need to know that how we are going to uh implement this particular project like whatever project we are going to decide whenever I'm going to upload the video and then we'll start with our first topic which will be identifying our main front end actors and roles defining our main users flows what all will be your functional requirements versus your non-functional requirements right classifying protected public and admin pages how we are going to identify high traffic pages okay then will understand very very important that how we are going to create highle front end architecture diagram because when you'll give the interview right interviewer can expect that okay you will be able to create at least basic architecture so that they can understand your understanding all right then we'll move to our section two which will be we are going to actually move to our main core module designing routing layouts and rendering strategy so you're going to understand that okay whenever you are going to implement any particular project what all routes you need this is very important, right? Because based on the routes, you need to understand how many pages you need. How you're going to design your layout structure, right?

[00:03:38]That means how you're going to define your public layouts, authenticated layouts, dashboard layouts, admin layouts, all these things, right? How what all rendering strategy you are going to choose and why. Okay? So that means for a particular page you're going to use a client side rendering. For a particular page, you're going to use a server side rendering and why. Decide what pages you need for SEO. Right?

[00:04:00]Decide which pages can Bh like SPS uh screens all right how you're going to add loading error not found unauthorized pages when you're going to add loading all these things are very very important okay then we'll move to our section three which will be designing actual components and your UI architecture right that means how you're going to break your screens or your pages into reusable section so that you can use those re reusable sections throughout your application without rewriting the same code again and again how you're going to separate very important layout, pages, feature and shared component. This is one of the most important concept you're going to understand, right? [snorts] What is the difference between your or how not difference how you going to design reusable versus page specific UI. This is very important. Let's say you have one particular component and that component can be considered as reusable component so that you can use that particular component in 10 places. But there is a component that only need for a certain page. So in that case that will be a page specific UI. You're getting how you're going to design core UI primitives right core uh UI primitive means your basic reusable components button input card drawer tabs all these things designing design tokens responsiveness or responsive rules design empty loading error success states all these things how you're going to avoid prop drilling with composition or limited context management so these all will come under your components and UI architecture then we'll move to our very very important section which is designing state management in data flow right so for example how you're going to implement filters sorting pages and search how you're going to keep your remote domain data in a serverside case now that can be lot of complicated topic also you believe me or not when you are going to watch the video you'll understand right so for now you can just see all of this what are the things we're going to cover right for example design cast invalidation after mutations right design form state for complex submissions how you're going to draw the state owner ship diagram means how you're going to visualize which layer owns what so that the whole front end stays understandable means you actually know the role of each and every features that you are implementing in your project then we'll move to design API integration and client caching and that is the reason I mentioned that you need to know some basics on fetching APIs right implementing cache all of these how you're going to design front end API client layer this is very very important right so that means how you going to centralize your request handling headers how you're going to pass your tokens to the back end all these things decide how components should call APIs there can be any number of ways you can do that any number of ways right so you can use some third party packages you can create your own helpers so lot of things are there how you're going to design query keys for list details dashboard uh then we have let's say how you're going to design pageness and infinite scrolling so all these things will come under API integration and client caching then we'll move to uh performance strategy means how you're going to identify pages pages that must fill first. For example, let's say we have some client facing pages and then you have some internal pages. So client facing pages will always render first, right? So we need to identify those pages. How you going to reduce initial JavaScript for all those pages, right? How you can implement route level or component level lazy loading? how you're going to optimize your images, media sections, all these things. Prevent layout shift.

[00:07:19]We're also going to see some lighthouse features also or how you can make use of lighthouse to improve all these performance. Right? Reduce unnecessary rerenders when you have to use memorization. For example, use memo callbacks all these things. All right.

[00:07:35]Then we'll move to next which is again another very important security and accessibility. Right? So for example, page level and component level error boundaries. How you're going to design a fallback UI? Right? These things are very important. Uh protect routes based on authentication and role. Extremely important concept. How you are going to avoid exposing your secrets in your front end code also. This is also very important. So all these things will come under your security and accessibility reli reliability. Then we'll move to our last section which will be our end to end front end system design work through. Now what we are going to cover as part of this one right? So we'll actually see and also I'm going to show you that when you're giving an interview let's say whatever questions they they will give how you're going to tackle that particular question means what kind of query that you need to ask to your interviewer also interviewer also because it's very important to clarify the requirements what your interviewer can do right so let's say they will give you okay design Netflix now you just can't simply start designing Netflix you need to ask all these tech questions to your interviewer because they will also expect these kind of things So all these things we are going to cover as part of this. Okay. So I've added all the details but for now you have to consider this one as very very important. So if you're going for a fullstack developer role knowing front- end system design skills, back end system design skills both are very very important. So that's all for this particular video. Again I'm repeating if I get good response. I'm going to upload this video. So please like, comment and also if possible please share with your friends and I will see you in my next video. Till then good luck and peace.