Transcript for:
Learning React Through 25 Projects

Master react by Building 25 different projects and if you follow along you'll be ready to interview for a job as a react developer sanum created this course he's an experienced react developer hello everyone and welcome so in this particular video we are going to create 25 react just projects from scratch so all the projects that we will be learning in this one those are created from a interview point of view so in top product based companies there will be always around that we call as a frontend interiew round or browser coding round so in that round interviewer will give you a simple to midlevel assignment and you have to complete that questions within a given time frame so it varies from 30 minutes to 1 hour I can guarantee you that all the projects that we will be learning if you complete all of them because each and every project is associated to a particular concept and I will highly suggest that whenever you will watch this video try to code along it will definitely going to help you so let's quickly see what are the projects that we are going to build so first we'll start with this very famous accordion so here we will be learning two concept so one will be a single selection so every time you will click only one will open at a time then we will be learning this multi selection so in this case you will be able to open multi multiple accordion all right next we'll move to this random color generator where we will be learning how to create both hex random color and also RGB random color so here you can see that currently we are creating hex color if I now click on this Generate random color button so it will automatically create random hex color if I click now on this RGB color so now this will create a random RGB color then we'll move to very famous star rating questions and I think I don't have to explain this one this is a very very very famous interview questions after this we will be basically learning this image slider where we will be fetching the list of images from a API endpoint and then on top of it we are going to implement this slider functionality after this we'll be implementing this load mode data project so here basically we'll be getting some certain amounts of or basically certain data from API endpoint and every time we will be clicking on this load Moree products button it will uh basically face the next set of data then after this we are going to implement this next review so this is also very very very famous interview questions here they will basically give you some Ned Json structure and from that structure you have to recursively implement this nested review all right and also you can basically call this one as Dynamic navigation or dynamic menus also then we will be creating this QR code generator so here you have to give some input and Bas on this input it will automatically generate some QR code after that we'll be implementing this light and dark dark mode so here on click of this button you will be able to basically change the theme and also we going to save this current theme into our local storage for this one we are going to implement a custom hook and here throughout this particular project apart from the QR code one we are not going to use any third party Library packages all right then after this we will be implementing this scroll IND indicator and if you noticed here on the top we are getting this scroll indicator all right so this is basically part of this particular project so every time we will scroll this will basically give you the progress how much the user already scrolled after this we are going to implement the custom tabs so this is also a very famous interview questions and then we'll be implementing this custom model popup so if I click here this will open this custom model then we will be implementing this GitHub profile finder so here you need to give some random name and if this particular user exists so this will basically fetch the details of this particular user from the geub API and based on this it will give you the data after this we are going to implement this search autocomplete so here whatever you will be typing uh for this one also you're going to face the data from API all right then we will be implementing this Tic Tac to so I think this is also a very famous interview questions there will be also restart functionality then we'll be implementing this very interesting uh project this is called the feature flags flags so what basically happens in very large companies so instead of changing the feature directly in the code sometimes what will happen they will basically give you a API endpoint and that in that API response there will be some data and from that particular data you will be able to understand that what are the features you have to enable and what are the features you want to disable without changing anything in the code and for this one we are going to implement this particular project and this uh questions is also asked in very top level product based compan companies all right so this is a very important one and after this we will be implementing these three custom hooks so the first one will be very famous this is called use fet hook and after this we'll be implementing this use outside click hook so if I now click on this so content and click outside of it this will basically toggle this content and then we'll be implementing this use window resize so if I now resize this window this width and height will automatically change and at the end we'll be implementing this scroll to top and bottom feature where on click of this you'll be able to scroll to the bottom and if I click on this scroll to top so it will automatically scroll to the top all right so these all are the very simple projects that we are going to build and after this we'll be moving to some mid-level projects so the reason for this mid-level projects is that sometimes some uh in uh some companies will give you some assignment and you have to complete those assignment like within one or two days so in that case they can give you some mid-level projects instead of giving you some simple one so for this one we are going to implement this weather application so here I can give some uh city name and based on that it will automatically face the data all right then we'll be moving to this food recipe where uh we will be basically able to search reip is based on some input that we'll be giving and you can see that we'll be getting the data if I click on this recipe details so it will face the recipes we'll be able to add the uh recipes to the favorites if I go to favorites will be getting the favorites here all right and if I go here this will be automatically updated so let's say if I now go on this one so you can see that this is now add to favorites if I click this one go to favorites this uh Apple gallet this is already added if I now go to the homepage and click on this one so you can see that we are still getting because this is already added in the favorites after this we'll be adding this or implementing this shopping cut so for this one we are going to use Redux toolkit so we'll be able to add to the C and here we'll be getting the result we'll be able to remove and after this we'll be implementing this expense tracker for this one we are going to chakra UI and some of the projects also we going to implement using tnd CSS so here you will be able to add some expense let's I'll add a expense give the amount and then check this one as expense click on ADD so we'll be basically getting the data here and also we'll be getting the data as a chart View and at the end we are going to implement this monack applications where we are going to use mongodb express so here uh we will be able to add a new blog so let's say I'll add new blog added and this one we're going to store in a database we will be able to add the uh edit this one so let's say I'll edit this will be edited and also I'll be able to delete this one so these all are the projects that we are going to build in this whole video and I can guarantee you that this video is going to help you in so many ways so that's all for the intro now without further wasting any more time let's get started and good luck all right everyone so let's start with our first project and that will be simple accordian component so here we are having two types of accordian feature one will be single selection and you can see that there is a button so on click of this you'll be able to enable multi selection now in interview the questions some will be something like this that they will give you some dummy data and based on that you have to create the accordion so if I do single selection so if I click only one so only one will be opened at a time you can see that once you'll complete this feature if there is a time left so what interviewer will do they will try to make this uh project little bit complex so they will say that now let's say you have to do or enable multi selection so on if I click this one so now the multi selection is enabled so if I click here you can see this is opened if I click here this is also opened so this is something like what we are going to build so let's start working on this first project all right everyone so let's get started so the first thing is that uh you can see I created a simple reactj project now what we are going to do each and every project that we will be creating for this particular video inside this Source folder we are going to create a components folder and inside components each and every project will be a simple component because throughout this particular video we'll try not to use any third party Library package because whenever you'll give any browser coding interview most of the times your interviewer will expect you to create everything from scretch so the first one will be to create accordion now there can be two things now whenever you will start a browser coding interview the first time interviewer will start with a simple approach so first he will ask all right so I'll give you some uh dummy data so now please create a simple accordian component now obviously you can either use a JavaScript or any uh framework that you like so most of the times because react is a very popular so I believe that most of the times we are going to choose react and then once you solve the simple approach then they will give you some of the complex variation so now you can see that what I'll do inside this Source I'll create a folder and let's give this one name as components and inside components uh I'll create another folder and I'll give this on name as accordion now you can see that what I've done I'm having some dummy uh data here so this dummy data I'm going to use and also in the interviewer also most of the times your interviewer will give you a dumy data or else sometimes they will say that okay you create any dumy data that you like now inside this what I'll do I'll create our index. jsx and also we'll create another file that will be styles. CSS now inside this I'm going to create another file and this will be our data.js let me just minimize this one little bit all right now what I'm going to do I'll just copy this one and I'll p paste it here I'll do export default and this data all right now first thing what you should always do while giving an interview is that always explain the approach that you are going to use and that is very very very important believe me or not so it's not like that they have given you one example and then you start uh writing your code immediately first you have to explain the approach that how you are going to do this particular uh uh problem because it will be very very easy for your interviewer that okay you got the problem and based on this approach you are basically solving it now what we are going to do first obviously so what you can say that okay I created a component folder and inside that I'm creating another acarian folder the main re reason being is that I'm creating this one as a usable component so that in multiple places we can use this component throughout the application so here I'll create our export default function let's give this one name is accordion now here uh let's uh do one thing uh what we'll do we'll simply return some jsx for now so we having div and I'll give this on name as accordian all right now let's save it so now this component we are uh we want to use in this app.js so I'm going to remove everything and then I'm going to uh give a comment so this is our accordian component and here I'm going to import this component now let's save it so we getting accordion here now the first thing is that uh there can be two types of accordion one will be let's say your interview give you first you complete a single selection so basically each and every time you select something you have to open only one accordion menu at a time and then uh the complex variation will be you can basically will be able to open multiple selection also all right so let's start one by one so for the first selection you have to explain that all right because we are doing as a single selection so I'll take a straight here and this will be the selected and set selected so this is basically the single one that you will be selecting and because first time we'll not select anything thing so here I'm going to use the UST State and I'll keep this one name as null now if you noticed here here we are having this ID this is the question and this is the answer so based on this ID you will be able to track that which accordian item you're currently clicking and this is very important all right now here what I'm going to do so the first thing is that let's quickly create the uh structure here so now uh let's give this on name as a class name I'll give this on name name is rapper now style we are going to do later first let's complete the functionality now inside this I'm going to take another div and here I'll give a class name of accordion all right now here what I'm going to do so we are having this data here so I'm going to take this data now you should always cover the age cases so let's say you are having the data you know that this is a dummy data So currently we are having the data length but let's say you getting this dat from a API so in that case let's say the a data length is empty so in that case what you should always check all right if the data and and data. length if this is greater than zero then we are going to do something or else you will show something like uh let's say no data present no data found all right so here what we are going to do do data do map so this will be our data item and here what we are going to do we'll return another div so this will be our class name and I'll give this name as item and here uh what we'll do we'll take another div inside of this and here let's give a class name so this will be our title and here inside this we'll take A3 and I'm going to render the data item dot question so this will be basically our header all right and also after this take another span here and we'll basically show a expand or uh like cups icon but in in interview we will not get that much time so far now we'll do simply like a plus all right so now let's save it let's see how it is looking all right so we are getting the question and this is the icon this is fine so now what we need to do basically so after this we need to check that which uh item you are clicking and that you want to so that answer you want to show at a time so this is a single selection so what we can do simply whenever we'll click on this title so here this is our title so we'll take on click here now so so here for now I'll do the single selection so we'll do handle single selection all right so this will be a method so this will function handle single selection and this will basically receive the current ID of that particular question so you'll be get current ID as a argument so here I'll just invoke this and here I'll just pass this current ID so here we are having this ID so this will be data item do ID so this one will be receiving here so now let's see if I log this get current ID so now let's save it so we'll go to console let's see if I click here we getting 1 2 3 and we're getting four so now you basically know that uh on click of each and everyone we are getting the current ID so we just have to set this one to the uh this method set selected method but here one thing we need to do so here I'll take this set selected and here first I'll just uh save this one as get current ID and let's see what is happening so that means we are setting this current ID that we are clicking and now after this what we can do we can simply check if this selected is equal to equal to data item Ro ID that means the current data item ID is equal to equal to current selected that mean which we are clicking let's say if I click on two so this selected will be two and this two is equal toal data item. ID that means we want to s that accordian item only all right or else this will be null so here what I'll do I'll just simply return a div and here I'll render this data item dot this will be answer and here I'll give a class name of let's say content so now let's see what is happening if I know save it and let's log this selected also so that you'll be able to understand if I now go back let's say click here so now we clicked on this first item so we getting the first answer if I click here we are getting the second one so you can see that this is automatically getting closed and this is the fourth one now what will happen if I click here again so this is not closing right so how we are going to do that so to do this one what you can do basically here you have to check that if the current ID is already selected so we are having four and this is the one that we are clicking here so in that case we can again make this one as null so if I click here so it is three so here what we can do simply we can basically check if this gate current ID which is three is equal to equal to this selected that means already selected so we'll make this one as null or else this will be get current ID so now save this let's say if I click here so now it is null if I click here again so this is three so let's say if I click three again so it will be null again if I click here this is four three this is two this is one all right so now this is fine now let's quickly complete the style and then we will be moving to the multiple approach so now let's go to our style. CSS now the first thing is that we are having this wer now obviously we'll not uh um basically cover much of The Styling throughout this particular video because our objective is to complete the function because in interview obviously you'll get a very limited amount of time and in that time you have to not only complete the simple approach but also they will ask some multiple or complex variation and obviously in interview will'll face most of the times I can guarantee that they will not expect any kind of CSS from you only basic styling is more than enough so this is exactly what we are going to do so we'll do display Flex height will do 100 VH uh with we'll do 100 VW we'll do justify content Center and align items will do Center then I think we are having a accordian so let's copy this so here we'll do a width of 500 PX then we are having item so for this one we'll do a background so for this one we'll do this background six 4101 and we'll do a margin bottom of 10 PX and we'll do padding of 10 PX 20 PX then I I think we having the title so we'll do title so here we'll do color as white we'll do display as Flex we'll do justify content as space between and we'll do align item as Center and we'll do cursor as pointer and at the end we are having the content so here we'll do color as white and we'll do height as Auto and now what we need to do we have to basically import this one in this so we do import styles do CSS let's save this let's see awesome so now if I click here so you can see that this is working fine now all right so now you have completed the simple approach so now they'll ask you how you can achieve that if I click here this will open again if I click here this will also open this will not close only it will close if I click here again so this will be a multiple approach and let's say they will ask you that how you can do that you are having a button so let's say enable multi- selection on click of that only you want to show multiple selection if I click here again it will show the single selection so this is a complex variation let's say so how we are we can do so first your uh job will be to create a simple button and this will be enable multi selection let's save it all right so we are having this button here and let's go to our so here we can do Flex direction as column and we'll do a gap of 20px okay then we'll do dot wrapper of button we'll just simply give padding of 10 PX 20 PX and let's see how this is looking okay background will give uh this one as black and color will give white we'll do font style as bold sorry font weight will give as bold and font size will give 20px awesome and now we'll give a cursor as pointer and now let's use the same background so we copy this and we'll use the same here also sorry okay all right so now what you need to do again you have to take another state not only one but two so here I'll do const enable so we'll do enable multi selection set enable multi selection and this will be U state of false all right and again you have to take another state and that will be multi select so whenever you select multiple items you have to store multiple IDs so here I'll do const multi multiple selected or you can also keep this one as multiple set multiple and this will be US state of empt array all right because you have to store multiple uh here so now what we can do basically the first thing is that you have to enable this m multi selection so here I'll do on click and on click of this will do set enable multi selection will be not equal to enable multi selection so that means we are basically toggling this one so if this is false on click of this button this will be true and vice versa now again what you can do here on this on click so if this enable multi selection is true so that means you will uh create another function that will be handle multi selection or this will be handle single selection so I'll do function handle multi obviously you can do the same in this function only but I'm creating a separate so that it is easier to understand so this will be handle multi selection this is also receive the current ID and here what we can do we'll do it if this is true so uh this will basically get the handle multi selection and here also we pass the data item. ID all right so that means if this enable multi selection is true so that means here we are doing this handle multi selection if this is false we only handle with single selection okay so now what we need to do the first thing is that whenever we clicking uh any particular item we have to store this one in this uh in this areay until unless we'll click the same item again then only you have to basically remove it so how we do that so we'll do let here first we'll copy the state from this state variable so that we don't mutate this state variable directly so copy multiple so this will be this multiple so first basically we are copying from this state and now we'll basically check the index of this current ID if this ID is already present in this array or not if this ID play and that means we already clicked on that so you have to if I click that that again you have to remove it from this are or else we'll push it so con find index of current ID so how we'll do that simply do it multiple sorry we'll do copy multiple do index of this gate current ID and now let's log here let's see what is happening if I now save it let's go back so now if I go to cons what will happen if I click here you can see this is happening because currently this multi selection is not enabled but if I now click here now let's click you can see we are getting minus one so that means this is coming here so that means this ID is not present in this array so what we going to do we can check if this find index is equal toal to minus1 so we'll simply do copy multiple dopus and we'll push this uh current ID all right else we'll do copy multiple do splice we'll remove it so we'll get the index so we'll remove this from this particular index and how many items we need to remove we need to remove only one item that's it now if I click here set sorry I have to set it to this state so set multiple will be this copy multiple okay now let's log here multiple also and let's see what is happening if I now save it let's go back we'll enable this one now click here sorry Let me refresh this again so we'll enable this one if I click here so you're getting one if I click here again we are getting 1 2 3 and we getting four if I click here again you can see one will be removed so now 2 3 4 but you can see nothing is opening the reason is what we can do simply we can give condition here so basically here either we can simply do if this enable multi selection is true so you have to basically check it from this multiple or else you have to check it from this selected so simply we can do something like this so here we'll do or multiple do index of this data item do ID is not equal toal to minus1 all right this we can do or else if this is very difficult to understand if I now break it little bit so let's do it very uh one uh line by line so let's do something like this we'll do enable multiple selection if this is true so that means we are currently doing multi select so if this is true so then we'll check that in this multiple array this current ID is present or not ID is not equal to equal to minus one all right if this is true so we'll s this message or else we have to check if this selected is equal to equal to data item. ID then we'll show this this one that's it now let me just remove this or let's comment it out I'll explain again what we are doing so we are basically checking if this multi selection is true so you're checking in this multiple array if the current ID is current data item. ID is present or not so you're showing this if this is false so that means you have to check from the single one now let's see what is happening if I now refresh this now now enable multi selection is not enabled so if I click here we are getting only one at a time but now if I let's say enable this one so now this is open this is getting opened see if I click here now this is closed and this is working fine all right so this is another very very important uh uh question that you will get in some browser coding interview round now first they will ask you to create a simple accordion and then once you'll solve that then it will ask you to uh implement the multi selection so that's all for this particular project let's move on to the next one all right so the second one now this is also another very important interview question so here the questions will will be something like this that you are having a button and on click of this you have to create a random color so if I click here you can see that the random color is generated so now I actually tried to make it little complex so we'll be having two more button so if I click here it will obviously create a hex color so here you you can see that each and every time if I click hex color will be created if I try to create RGB color so now this is getting changed to R RGB color and if I click here so the RGB color will be selected uh so sorry created and here if I click again so you can see that this is now my hex color so this is another very very important very frequently interview question so let's try to implement this one all right everyone so let's start with our second one and that is to create any random color so how the questions will be asked uh let's say you are having one button uh like generate uh random color so on click of that button you have to let's say change the enter background of this particular page now obviously that will be very the simple approach and after that we'll be moving to the complex variation so let's do one thing inside components I'll create another folder and let's give this on name as random color so inside this I'll create another file and this will be index. jsx I'll just close everything else now here I'll do export default function and let's give this one name as random color and here uh we return some div all right and here let's do one thing let's give a class name of container and inside this I'm having one button and this will be Generate random color so how the color concept basically works now if you already have some idea on the CSS you know that for the hex color we are having this has and Then followed by six digit right and then we are having the RGB which is RGB and then you have to basically give the values here which will be like any random value and this will basically generate a color all right now obviously for now uh how this can be asked is that let's say you are having two more buttons one is like create hex color and one is to create RGB color now on click of each and every button whenever you click on this create RGB button so it will create RGB color if you click on this hex button it will create a hex color so that will be little more complex so let's see how we are going to uh create this so for this one what I'll do I'll create two more button so one will be button here and this will be create hex color and you have to create another mode button and this will be uh create RGB color all right now for this one uh what you need to do first again I told you that you have to explain the approach so you are going to uh going to take two State one will be to set the type so type can be either hix or RGB and the second one will be to store the current color so here I'll take const and this will be type of color let's give type of color set type of color and by default we'll take us St and here I'll keep this one name as hex so hex is our default color next we are having our color color set color and here I'm going to take this one as US state and the by default I'll take the black as our color all right let's remove this one for now this class name we don't need we'll keep this one very simple so now what I'm going to do I take our style uh here now the first thing we'll do we'll take a WID as 100 VW we'll take a height as 100 VH we'll take the back ground so we're having this background now background will be this color that we are having all right so for now this is fine let's save it so now let's go to our app.js and here we take another one and this will be our random color component and here I'm going to just import the random color component let's save it and let's see what we are getting so so we getting this random color component let me just uh comment out this one all right so that it will be easier so I'll just comment out this accordion let's save it all right so now we are getting this three button so on click of this you have to generate the random color on click of here you have to create RGB color and on click of this you have to create a hex color so now what you will do the first thing is that we have to go here now the first thing let's keep this one very simple so we'll take on click method and here I'll do set type of color which will be a hex because on click of this I want to create a hex color and here I want to create a RGB color that's it now what we need to do we have to basically take another on click so here I'll do handle create random color so now this method I'm going to create here so this will be function handle create random color and here uh basically you have to check that whether you want to create a RGB color or you want to create a x color let's do something like this instead of creating like that we'll do here that if the type of color is equal to equal to hex so I will create a hex color a random hix color or I'll do hand create random RGB color so this will be our hex color and then this will be our RGB color so now how we are going to create a hex color now as I already told you that the approach will be like this you'll be having a has followed by six digit something like that all right so to do this one first you have to take the hex uh array now how we are going to create that so this will be consist of the following things so we can have numbers from 1 to 9 and then we can a alphabet or basically letter of a b CDE e f so here I'm going to take one 2 3 4 5 6 7 8 9 then we'll be having a b c d e and then f that's it so this will be our array of this hex now what we'll do we'll do let hex color so this will obviously start with our has and then what I'll do I'll do for let I equal to 0 now because the length will be of six so I'll do I less than 6 because it is starting from zero and then we'll do i++ and here I'll do Hex color plus equal to and now what we need to do basically we have to create a random color now how we are going to create this random color this random color will be based on this length of this particular uh hex that you have created so for this one what we're going to do we create another function and this will be handle create uh let's give this one name as function utility random color utility now this will basically receive the length and here it is very very simple what we need to do to basically floor this so we'll do math. floor and then you have to take the math. random and then we are going to multiply this one with this length that we'll be receiving all right so this will basically give you the random color so now what we are going to do will do Hex of this random color utility and here we are going to pass this XX do length so this is the length so this will basically add the rest of the color here after this all right so if I now log this and let's log this hex color let's see what is happening so if I now go here let's go to our console I'll create on this click on this hex color and let's click on here so you can see that we are getting a random color here every time this will be basically generated so now this is very very simple you just have to take set color so you're basically setting this and then it will be our hex color all right so only this part is very very important that which uh values that you have to take uh into consideration inside this areay if I now click here you can see the background is getting changed and same will be for RGB color so RGB color is actually pretty simple so what you can do simply here we will basically create our R GB these three value so here I'll do const R and this will be our random color utility and here you have to basically multiply by 256 because this is the maximum length that you can pass same will be for R same will be for G same will be for B so this will be r g and then this will be B and now here we'll do set color and here will take template literals now here I as I already told you it will start with RGB and then you to pass this value so it will be r value then it will be our G value you have to also give comma and this will be our uh B value that's it now to check this one let's do one thing uh after this button we'll take another div here now here I'll do class name we'll do display sorry not class last name we'll do direct style so we'll do display as display as Flex We Do justify content Center we'll do align items as Center we'll do color as white we'll do font size as 60px and also do a margin top of 40 50 PX and inside this we are going to uh let's do one thing uh let's take something like this we'll take H1 so here this will be our color and we'll take a A3 here and this will be our type of color so here we can do something like if the type of color is equal to RGB so show here RGB color or else this will be hex color that's it let's save it let's see what is happening so we are getting XX color and now if I click here so you're getting XX color let's click on this RGB now you can see this is getting changed but this is not getting changed so what we can do simply this is another interesting thing so you can take use effect and every time this type is basically getting changed so here we are having this type of color so again we can check if the type of color is equal to equal to RGB so we'll call this handle create RGB color else we'll call this handle create uh hex color all right all right now let's click here so you can see RGB and this is looking very odd let's do one thing uh let's make this on Flex dxn as column and we'll do gap of 20px okay let's click X color you can see this is working fine if I click here so you're getting RGB color here and also I think another thing what we need to do and that is we have to go here and we have to give bracket here all right now click here so you can see this is getting changed if I click X here so you're getting X color now let's generate if I click here this is getting changed and this is working fine so that's all for this particular project now this is also another very interesting project now F first of all another thing is that if you want to create the same in JavaScript the function will be exactly same so you just have to create your HTML structure and then you have to basically take all of this using document. get element by ID or query selector and then on click of this button or basically have to add event listener and then on click of this even listener you have to basically write the same functions that you have written here nothing will change all right so that's all for this particular video let's move on to the next one all right so the third one I think we don't have to discuss much we all know that this is one of the most frequently asked questions in interview mostly in product Bas companies like Adobe Amazon Atlas in so here you are having this star and if you H basically you have to show that how many Star you are currently selecting and if I click and then remove so those many starts you have to basically select it and again if I just do hover and then click so this will be updated so this is a very very famous interview question so let's try to implement this one in react CH all right everyone so let's move on to the next one so as I already told you this start rating is another very very important questions that you might be ask in your interview now there can be two things either your interviewer can say that you have to basically implement this one in a framework let's say like reactjs or angular whatever you like or they actually the requirement can be that they will say that you have to implement this one in pure vanilla JS so for this one what I'll do in the next video that I'll be creating whatever projects that I'm creating for this particular video I will be implementing these projects in simple vanilla J in the next video all right so let's see how we are going to do that so for this one again I'm going to create another folder inside these components and let's give this one name as star rating and inside this what you can do you can simply create the same structure index. jsx plus Styles uh styles. CSS now as I already told you that we are not going to concentrate much on CSS so for this one what I can do whatever star you will be creating in the interview either you can simply create uh using CSS or simply you can create some kind of circle that will also work because at the end your interview requirement will be to complete the functionality first but because now we are actually learning so what you can do you can simply install a um project sorry install a uh dependency here and that is npm install react uh icons all right now in the interviewer in in the interview also if you are installing this uh dependencies I think it is also fine all right so now let's quickly create our uh component here so you will be creating export default function let's give this one name as uh star rating all right now let's return here so we'll be returning a class name so here we'll return something like star rating now what uh you can do uh in the interview in the interview basically you can ask your interviewer that how many stars you basically want uh so whenever you'll give any kind of interview your Prime objective will be to ask so many uh questions to the interviewer obviously you'll get good points based on that because let's say uh you uh immediately start coding uh your component without asking any questions so that will basically give a negative impression on the interviewer so for example there can be requirement is like let's say you are creating a common component uh reusable component and you will be basically receive some of the proper is from props from the parent component let's say the number of starts that you want to create all right so for this one what we'll assume that okay we'll be receiving some kind of props so I will basically receive a props like number of starts and based on this uh we will be creating so this will be number of STS now here uh what you need to do basically inside this we will be creating a array of these many starts so here we'll do aray of this number of STS all right by by default this will be five let's say so if you're not passing anything it will be five by default now what you can do we can simply map this one and here we basically need this index all right now here what we are going to do basically I'll basically explain the approach first let me return that that star so for this one we will be basically importing a icon from the react icons package so let's import something from uh react icons CL fa and this is fa a uh star all right so here we'll be returning this fa start now here the first thing we need to pass the key so we'll be passing key as this index all right and also here we need to pass some kind of class name that we are going to do later we need to pass a onclick uh property here sorry so on click uh whenever we will will be clicking on some particular star we need to basically take the current current index and then we have to basically show some kind of styling and also we need a on Mouse enter so whenever we'll be basically hovering on that particular and also we need on Mouse leave now these all the things whatever we are creating here you have to basically explain that this methods we want to create in this component only all this all the methods we will be receiving from the parent component all right and at the end what we are going to pass we will also pass the size so size will be let's say 40 now here what I'm going to do I'll create a state here so this will be let's say give this one as rating and this will be Set uh rating for this one we are going to keep a UST start of zero all right first time we will not select any start and also you have to take another state and that is whenever we will be hovering on some particular St you have to to basically show some kind of styles also that uh which is the current state or basically current index you are hovering so for this one we'll take a hover uh State and this will be set hover and this is also will be U state of zero all right now here what I'm going to do I will be basically receiving uh sorry I'll be creating a method so this will be handle click now this handle click what it will receive it will receive the current index that you are clicking so this will be G current index and I'm actually repeating this again and again whenever you'll be giving any interview you need to explain all of this that why you are doing this one so that it will obviously give you good points same next we'll be creating another uh function this will be handle Mouse enter now obviously I can directly do this one here but I'm just uh writing or breaking everything so that it is easier to understand now whenever you'll be entering or Mouse entering it will also receive the current index same will goes for handle uh let's say mouse leave this is also will receive great current index so these all are the uh method that we are creating here so this I'm going to call this one so this will be handle click and here I'm going to pass the index now what we are going to do so this will start from zero so what we can do simply we can increase this index by one so simply we can do index + one so that means here whenever we'll pass IND index instead of zero it will be passing let's say you are passing number of Star as five so it will start with uh index one then it will be two it will be three four and five all right that's it now same you have to pass the index here also sorry we have to basically call this method so we are going to call handle Mouse enter and here I'm going to pass index and here I'm going to do handle Mouse leave and I'm going to to pass the index that's it now let's log here let's see what we getting so I'm going to copy and paste it and let's paste it here now let's save it now let's see also you have to basically import this component here so I'm going to again comment it out and I'm going to giving another one so this is our star rating component so here I'll giveing star rating and here I'm going to passing the number of Star as let's say 10 let's save this let's see what we are getting all right now you see if I now go to console and if I now you can see we are getting this three four if I click here we are getting four if I removing we are getting four that means we are first we are getting Mouse enter Then if I click we are getting on click and then if I now remove this cursor we'll be getting on leave so that means let's see if I just overover or click this one so I have to basically show some kind of that these many are selected so this is the end point and this all will be basically selected if I click on the last that means last will all last will be or basically all the starts will be selected so how we are going to basically do that so what we can do simply here we have to basically take a class name so that we can show some kind of active state so we take a class name all right so here what we can do basically we can take this index so this index is basically current index if this is less than or equal to the current hover state that we are having so this one or this rating state so let's say if I click on this current uh star which is let's say three so we are basically showing some kind of State in this uh all these three starts basically so the current one will be three and the current overover which is basically the we are basically setting on this mouse enter or basically Mouse uh leave all right so if this is true so what we going to do we basically show some kind of um here uh class which will be let's say active or inactive now here we need to do basically set this set rating as this get current index and here we need to do set hover as get current index all right but for this mouse leave what we need to set we have to set this set over this will be basically equal to the current rating because if I already clicked on this fourth start that means these four are already selected so if I now leave this mouse this should be selected here so that means we are basically one Mouse leave we are setting this uh handle Mouse leave or basically on this method setting the set over as the current rating which is we already selected so in this case we basically don't need this get current index so we can basically remove this one and I think that's it so now we can go to our style before that let me just import this one and let's go to our style so what we can do we can simply we'll take a uh class of active so for this one we going to make the color so we'll do this color FF f70 all right if this is inactive so we are going to make the color as let's say black and I think that's it if I now save this now let's see so you can see if I now hover this is working if I now let's click here and now remove this see these four are already selected all right if I now come here and selected Sol three are selected and if you see if I now enter here so till this part is now selected if I now remove this one you can see the previous one whatever is there that is actually selected so that is the reason we are taking the current rating state but if I now go to this let's say fifth one and now click and then remove now you can see this is now updated so this is the whole process that you need to do or basically this is how you can explain in your interview now this is a very very important questions that you might encounter in your browser coding interview so that's all for this particular project let's move on to the next one all right so the next project project is another very important interview questions and that is to implement a image slider so here most of the times your interviewer will give you some dummy data or dummy array where let's say you are having the image URLs and you have to you have to just render and create this slider now for this one we obviously not using any third party Library packages so I'm I actually make this one little bit Advanced so here the data you are basically seeing so this data we uh we are getting from API and then we are rendering and based on that we'll be creating this image uh slider so let's start working on this particular project all right everyone so let's start with our next one so next one as I already uh discussed so you need to create a image slider now there can be two things in the interview one is that the interviewer will give you subd data with some image URL and then they will uh tell you that based on this image URL you have to basically render these images and then you have to create your slider or the second thing will be they will give you a API URL so first they will tell that okay first you have to fetch this list of images you have to render this and then you have to create your slider on top of it now obviously this URL can be dynamic anything so you'll be receiving this URL from props and also you can see the page number and this limit so this limit can be anything So currently we are having 10 if I now pass here five so it will give you only five images something like that so let's see how we are going to do that now the reason why I'm doing with API because API version is is obviously the little bit complex if they will give you some dummy data obviously it will be very very easy so you just have to take the dummy data as a props and then you have to pass that data to your component so for this one what we'll do again let's create another component here and I'll give this on name as image slider now one thing is that if they're giving giving you some dummy data so let's you will create one file inside of this let's say dumy data.js and then you will basically get the data from this component currently we will be basically calling the API so for now this is fine so here I'll be creating index. GSX let's close this one and we'll be creating our uh so here we'll be creating styles. CSS now here let's create so this will be export default function image slider now this will receive the URL and also it will receive the limit for example let's say now here what what we are going to do we will be returning a div and let's give this one name as a class name as a container all right so now the first thing what we are going to do will be basically calling the API so here for this one we need to take some state so here let's take something like const uh so here the data we uh let's do one thing let's take our images straight here only set images and this will be US state of empty array also we need to take another one and that is our current slide so this will be our current slide and Set current slide and the current slide will be set to zero for the first time so this is our initial state so now what you need to do you have to again I already mentioned that you have to explain everything so you'll be receiving this URL you have to basically check that if this URL is empty or something goes wrong so you have to show the or basically render the message so for this one what we going to do we'll take a use effect and here we'll take this URL as a dependency because based on this URL you need to check and here we'll check if this URL is not equal to equal to empty then only we want to call some API so I think we can remove this part so we'll call fet images something like that and we are going to create this one so this will be asnc method so as sync function Fage images all right and I think here we can pass this URL so we receive get URL and now uh now see whenever you'll give some interview always try to cover the error handling process because they or else they will ask you that why haven't you uh handle the error properly so take a try catch here and and here let's say I'll take another state so this will be our error message set error message and let's give this one as a use St of null something goes wrong so that means we'll set here set error message as e do message something like that now here what we'll do we do const response this this will be AIT Fage and here we need to pass the URL sorry we have to get the URL so get URL all right and then we'll do const data this will be AIT response. Json all right now here we are going to check if this data is true so we are going to set uh set images as this data or basically whatever you'll be receiving for I'm keeping this one as data now here always take another state and that is the loading State because whenever you will be handling any kind of API call so always take the loading State and this will be U state of false all right now before calling the API we're going to make the set loading as true and if we are getting the data so make the set loading as false if there are any error we are going to make the set loading as false all right so this is fine now we are going to check if there if it is loading so we'll simply return some uh message like loading data please wait all right and also you can basically check if there is any kind of error message if this is not equal to equal to null so so we are going to return the div we show error occurred and I'm not sure if this spelling is wrong or correct but that is fine and then we are going to render this error message here all right now let save this now what we going to do uh we basically need to pass the URL from this parent component because obviously this is a reusable component so need to call this one from the parent so I'm going to just comment it out again then give another comment so this is our image slider component so here I'm going to call our image slider and we're going to pass our URL so now let's see so let's copy this one from here so this is our URL and also you're going to pass the limit as let's say 10 all right uh so this is fine so now let's go here so what we going to do here we can take a template literals so we get our gate URL and here we are going to pass the extra PMS now obviously if you want you can pass this extra params also from your pattern component but for now let's keep this one simple so pass it here page equal to one I'm keeping and this limit will be this uh limit that you will be receiving from your component if you want you can also pass this page let's pass the page also so here we will give uh pass here page let's make this one default as five and the page as one and here I'm going to pass the pag as one all right now let's save this now let's see uh what we are getting in these images so I log here images so now let's go there all right so you can see that we are getting 10 images here so this is working fine if I now go to parent component let's pass this one as a four limit as four now let's see if I now refresh this we are getting four now so this is working fine so now what you need to do we have to basically render these images here based on your parent whatever you're passing you're able to basically face the data so this is working fine let's keep this one as St only now I'll go back and then we'll basically create our uh GSX so the first thing is that what we going to do here we are having this container now I'm going to take some uh icon from this react icon so here let's import something from react icons slbs and the arrow name is I think BS Arrow left Circle fi yes and then we are having BS Arrow right Circle fill now here I'm going to basically render this left one so we are having two arrows so this is the left one and here we need some on click but that we are going to do later and here I'm going to take some class name so we'll take a class name we make this one as Arrow Arrow left all right so after this what you need to do you to basically render your images so you'll check if the images and then images. length if this is true or else this will be null so here what I'm going to do I return this one so we'll do images. map so this is our image item and here what we going to return written a simple image we'll pass a key here which will be image item do ID we are having then we pass alt here which I'll keep this one as let's see what we getting here so we are getting author I think let's uh pass this download URL only so we'll pass the same so we do image item. download URL next we need to pass a source so Source will be image item. download URL and also you have to pass a class name but for now this there is a trick part so that we are going to do for now we'll keep this one as current slide or current image something like that all right so this is fine now next after this what we going to do we'll uh render our right Circle and here what we can we can simply take a class name so for this one also we'll take Arrow Arrow right also have to take a on click and then we also need to basically render the circles so here what we are going to do we'll do a span here and we'll render a class name and we'll give this one as uh Circle indicators all right here I'm going to render again the images and then images do length if this is true so here or else this will be null so again I'll do images do map so we need the current index and here I'm going to re render a button and we are going to give some key so key I'm going to give this one as index and also we going to give a class name so we'll give this one as current indicator later we are going to do when we'll do the we'll uh complete the functionality so this is our current indicator if I now save all of this now obviously this will break nothing will work for now so you can see that we are not able to see anything all right so this is fine but now what we are going to do we need to basically start working on the functionality first but before that let's uh quickly complete the CSS so let's start with our first one so we are having container uh let me import this one first so we do import style. CSS so we'll start with our container all right so we'll do po as relative we'll do display as Flex we'll do justify content as Center we'll do align items also as Center uh we'll do width as 600 PX and we'll do height as let's make this one as 450 PX this is fine okay now next uh we are having the current image so here we are having the current image so let's copy this so we'll do current image and for this one we'll do a border radius as 0.5 RM we'll do a box sadow we'll do 0 PX 0 PX 7 PX 666 this is the color and we'll do width as 100% and height as 100% all right all right we are getting some error a is not defined all right here we are getting okay okay now this is coming you can see but obviously this will not work that is okay now what we are going to do next we are having the uh I think we are having what else we're having the arrow so we going to take dot Arrow so so for Arrow we'll do this one as Po and as absolute because we already have taken the parent as relative all right and here uh we are going to do width as 2 RM height as 2 r m and color we are going to take as white let's take a filter also here so we're going to do filter we'll do a drop shadow and here we're going to do 0 PX 0 PX 5 PX we'll do 555 okay now next uh we are having the arrow left so we are having do Arrow left so for Arrow left we are going to do left as 1 RM then we are having the right so for the right what we're going to do sorry for right we'll do the right so we'll do right and this will be right as 1 RM this is fine now next we having the circle indicators so let's go there let's copy this and here we having the circle indicators so we'll do as display as Flex we'll do poison as absolute and we'll do bottom as 1 RM now next we're having the current indicator so this is the one so we copy this and we'll paste it here so we'll do background color as white we'll do a height of 15 PX we'll do width of 15 PX we'll do a border radius of uh border radius of how much 50% uh we'll do border as none we'll do outline as none all right uh what else we'll do a margin we'll do 0 comma 0.2 RM and we'll do cursor as pointer all right so you can see that this is coming here now what we need to do see the main logic of a slider is that you have to show the current one and you have to hide all of the others correct so how you are going to do that so for that is the reason uh we have taken this state which is the c current slide so now we have to basically work on this one so what we need to do we are having two arrows and based on these two arrows we have to take a on click so the first one so we'll take on click here sorry we'll take on click here so here what we can do we'll take handle uh previous something like that and then here we are having the on click and we'll do handle next now another thing what we need to do we have to take a on click on this button also but that we do in some time but let's quickly create these two function first so we are having function handle previous and then we having function handle next now what we going to do to set the current slide so do Set current slide now for the previous how the logic will be let's say you are at the end of the sorry you are at the first so let's say you in the first image and you're clicking here but on left we don't have any other image right so what you have to do I have to basically show the last one on click of the previous Arrow but if you're at the end of this slide let's say here and you're clicking on the next one so again you have to show the first one correct and if you are at the first and if you're clicking here so you to show the last one so here what we can do we do set previous so we can simply check if the Set current slide when you're clicking on the first one if the current slide is equal to equal to zero that means you are at the first so what we can do we can simply set this one as this images. length minus one so we'll be showing the last image or else this will be current slide minus one okay so that means again I'm explaining let's see if you're here on the fourth one so if you're clicking on the left one so you'll be going to the third one you clicked again you go to to the second one you clicked here again go to the first one now you're at the first we don't have anything else if I click here we are again seeing the last one okay now same will be for the next one so this will be Set current slide so here we'll check if the current slide is equal to equal to data sorry we having images. length minus one so that means you are at the end here so if you click here you against so the first one so in this case what you need to do to set this one to zero or else this will be CCT and slide plus one that's it now let's save it now what we need to do to basically set a uh class name here we have to update this class name so what we can do we can basically cut it and we can check that if the current slide is equal to equal to current index so we'll take index here let's take an index here so if this is equal to equal to this index so that means we are going to show this current image or also we going to hide this one so we'll do current image and then we'll do hide current image all right I hope you're getting the same basically you have to do it for the uh this one also so we are having this circles right so here also we're going to hide so we'll cut it here so we'll going to do if the current slide is equal to equal to this index so you're going to show the current uh sorry we are going to do the current indicator so we'll copy this one if this is true so you're going to set this onto current indicator or else this will be current indicator and hide current indicator all right this is fine and here on click of this button this is pretty simple what we can do so whenever we'll click on this this one here so you have to show the fourth one if I click here it to show the current fifth one so this is pretty simple we can simply set the current slide as this index now let's format this now what we need to do we have to go to the style and then you have to basically hide that one so we are having this height current image so copy this go to Styles and then we'll do here display as none so you don't show the others and same will be for this one also what we can do so we can go here and we can do let's make this one as not hide we'll do update so we'll update the current one so the all let's make this one as what we can do so we having already current we'll do inactive we'll do inactive inactive indicator so here we'll copy this so those are are not inactive we going to change the color so let's make this one color as uh gray let's save it now let's see all right so this is changing but this is not uh the color is not changing here all right let me just check so we having indic uh inactive indicator oh sorry we have to make this one as background color now I think this will work yeah so now if I change this one so this is changing now let's go at the end click here it's going to the first if I now click here again so it's going to the last and this is working fine awesome all right so I think that's all for this particular project now this is another important project that you might get ask in your browser coding interview and this is pretty simple what I have done if they're giving you d data obviously you can directly take the d data instead of calling the API but if they're telling that you have to call the API so you call Api set a current slide set a loading State and then you just have to basically make this functionality that's it so that's all for this particular project let's move on to the next one awesome now this project is very important so this is called load more products or load more button or also the same concept you can use in infinite scroll also obviously I'm not I'm saying that that is not exactly same but the concept will be almost similar the uh properties and the features and the methods that you're going to use for infinite scroll that will be different so here what we are doing we uh in the interview interviewer will give you a URL and there will be a limit uh property in the API URL so let's say we are calling some 20 data first time if I click on this button again so we have to render the next set of data obviously but the data we are currently having we don't have to reender under this data again so this data is already present here right so if I click this one we'll be showing some loader and next set of data is uh selected now the uh here the point is once it will reach to the 100 products you have to disable this uh button so if I click here so now we are getting next set of data and if I click here again so you can see that now this button will be disabled and you have reached to the 100 products now if you are giving interview companies like Amazon on Adobe and Atlas and also you might get ask these particular questions so I'm requesting everyone to please uh practice this one all right so let's uh try implementing this one obviously for this one also we not use any any other third party Library packages we'll be using only react the same logic you can also Implement in your JavaScript if you're implementing the same in vanilla GS all right everyone so let's move on to the next one so next one is another very important questions that you might get in in your interview and that is uh let's say you are having some scenario like you are getting a data from API but instead of calling all the data at once you are having a load mode button so every time you'll click on this button you will be basically loading the next set of data now this is actually similar to infinite scroll but this is also another very very important question that you might get asked so let's do one thing let's create another folder inside these components and let's give this one as load more button or let's keep this one as load more data so here I'm going to create index. jsx and styles do CSS all right so for this one uh we are going to use this dummy Json uh products this URL so how this will basically work you can see that we are having this limit and this skip so we going to basically use this parameters now it doesn't matter that what you you are getting at the end the functionality will be same for most of them so now what we going to do will be basically fishing the products we will be rendering the products and there will be a button at the bottom of the page and every time you click on this button you'll be rendering the next set of data now if I know show you the output you can see that we are having the total is 100 so once the data length is 100 we need to basically disable the button and you will not be able to load more uh data again so this is basically the function so let's quickly create this component and now I'm again telling now this is one of the very important asked questions in like companies like Amazon ad Atlas on these companies so let's create this one as load more data now it's up to you if you want to change the component name you can basically change it for now I'm going to R return here a div and let's give a class name I'll give this one as container now if you want you obviously you will be able to take the URL from your parent component as we have already done in the image slider well let's create all the state in this component only so here I'm will be taking some State one will be our loading State as I already done in the previous project so this will be set loading and which will be used state of false then we need a uh data state or let's make this one as products set products and this will be US state of empty array and also we need basically the count or page number whatever you can take count is basically how many times you're clicking on this button so we'll take a count here and this will be set count now first time this will be zero right so this is all the state we need so now what you need to do you have to basically ask all the clarifying questions to to your interviewer that uh will this URL will be always same or basically this will basically change based on different requirement this limit 10 will be always fixed or basically you have to change this one this skip something like that but for now what we going to do we will be keeping the limit as 20 and then uh we will be basically skipping every time 20 all right so the reason is because whenever we will be loading the data for the first time we'll be loading 20 data next time whenever we'll be clicking on this but but and we no need to load the previous data because that data will be always stored in our state so let's see how we are going to do that so again we are going to take use effect and here I'm going to create a method so this will be fet products so this will be asking function fet products we'll take a try and catch block and we're going to log this error for now if you want you can take another state and you can set the eror here now this will be const response this will be equal to AIT fet and here now the trick part and that is we are going to take till this por and here we are going to copy this and then we'll paste it here now see what we need to basically do the limit will be 20 limit is always fixed means every time we want to get 20 data so this will be 20 but skip here the catch so first time you're loading the 20 data right so first time you don't need to skip anything so first time you have to keep this one as zero but next onwards let's say if I click the button first time so the count will be one so when we'll be clicking the data for the the button for the first time we already have 20 data in our state so we are going to skip those 20 data or basically previous data so how we are going to do that so the logic is something like this so here we are going to do let me take this on as template literals so here logic will be if the count is equal equal to zero that means for the first time we don't need to skip any data because we don't have any data currently but next onwards what we can do we can simply take this page sorry the count number so next time when we'll be clicking on this button the count will be one and then we already have the 20 data so we going to skip 20 I hope you're getting now when the count will be two so we'll be skipping 40 data something like that then we are having const result and this will be equal to AIT response. Json and let's log this result here and what else we need to do I think this is fine let's save this and I'll go to our app .js and I'm going to comment out this component here I'm going to take another one and this will be load more products component so this will be load more data let's save it let's see what we are getting so you can see that we are getting products 20 you are getting only 20 products the total is 100 the limit is 20 here and we are skipping zero all right awesome so this is fine so now what we can do we can simply check here if this result and and result dot length sorry result do products and then result do products do length if this is true sorry this will be length so we are going to do set products as result dot products also we going to make the set loading as true here and here we are going to make the set loading as false and if there are any error we are going to make this one as false awesome so now let's save it and here we'll check if the loading is true so we'll return return something like div that loading data please wait all right now here uh we'll take another div and inside this we're going to check if this products and then products. length if this is true so you're going to map these products do map this will be item let's take a div here and now so let's see what we are getting in the products so you're having the ID so you can take the key as this item. ID and we'll keep this one very very simple we'll see what we are getting we are having this thumbnail so let's implement this one let's take this one so we'll take a image it will be source which will be item do thumbnail all right also let's take a alt so alt we're going to take the item dot I think we are having [Music] name uh we'll take this one as title so we're having item. title and inside this we going to sorry after this we'll take the item do title and I think this will be more than enough for now for this one we're going to take a class class name and this will be our product and here I'm going to take another class name and this will be product container let's save this now after this we'll take another div and here will be having this button which will be load more products so here I'm going to take a class name and we will give button container awesome so now let's go to our Styles and and let's quickly create our style so we having the container so for this one we'll take a display as Flex Flex Direction we'll take column and we'll take a gap of 20px next we are having the product container so we'll copy this so here we are going to take this one as display grid we'll take grid template columns as repeat we are going to repeat let's say four and one eer and then we are having we'll be taking gap of 10 PX next we are having the product so here we're going to take dot product so we'll take a padding of 20 PX we'll take border of one PX solid all right and what else uh we are going to also take a display as Flex we'll take Flex direction as column and we'll take a gap of 10 PX now let's import our style. CSS all right we are getting something let's see what is happening here oh I think we I think it's taking from somewhere else this 600 let me give some different uh name here so we'll give this one as load more container so let's save this yeah so this is fine uh let's make this one as three let's see what is happening all right I got it so we'll do one thing we'll take this do product and then image uh we'll make this one as width small 200 PX and height 200 PX awesome so I think this is fine for now see at the end we need to see whether our functionality is working or not so we getting 20 data so now what we need to do whenever we clicking on this button we have to render the next set of data but we not be R we'll not be rendering this data we are already having in the UI so for this one what we can do uh we can we are already having this button and then we'll take a on click here and we'll basically do set count as count + one all right so this is the first step and then here we are having this set products we storing right so we can take our previous data here so we do pre data which is already stored so we'll basically first take the pre data and then we'll take our result. products all right so now let's see what is happening here so if I now go back now let me refresh it again all right now if I now go to inspect go to network tab now let's click here all right nothing is happening so the what is the reason so the reason is pretty simple every time this count value will change you have to call the uh this F H products uh function so we'll take this count as a dependency now let's see so now let's refresh this so we getting 20 data now let's click on next so you're getting 20 data again let's click here so you're getting next data if you go here you can see we are now skipping 40 and the limit is 20 first time we skip 20 and at the first time we skip zero if I click here again to it will skip 60 data because we already have all right and now next we'll go here if I click here so you're already having total you can see we are now having total 100 data and this total is also 100 so let's say your interviewer will tell you that if some of the your current data which is basically this products if this data is length is 100 so you need to disable your button so how you're going to do that so that is pretty simple so we'll take another State here so we'll do uh disable button and set disable button which will be use state of false and now you'll take another use effect here and then we'll keep these products as a dependency and we can simply check if these products and and products do length if this is equal toal 100 so you're going to make set disable button as true all right so now what you can do we can simply make this take a disable property and this will be equal to if this disable button is true that's it and now we can also render if this disable button is true so render message that you have reached to 100 products or else this will be null now let's see if this is working or not let's save it so now let's refresh this so 20 now this is 40 60 we are having 80 now if I click here again so now we having total 100 products you can see this is not disable and you reach to the 100 products so you'll not be able to call any uh API now so this is how the main logic of load mode button load mode button functionality works all right so I think that's all for this particular project let's move on to the next one now this one I can guarantee you that I'm not telling that you will not face the similar questions in your interview but the questions pattern will be somwhat same so they might say that you have to create a Tre view so you the logic will be almost same they can say you to create a dynamic navigation menu the answer will be almost same they can also tell you that please create a Implement a recursive menu UI then answer will be also same sometimes they will give you some uh nested uh data structure and you have to basically uh they will tell the interviewer will tell that you have to simplify it so then also the structure will uh the answer will be almost same so here you can see that we having main parent menus if I click here the child will be basically uh opened you have to toggle this one so if I now click on this parent all the Childs will be hidden all right so this is what exactly we need to implement here now also sometimes they'll say that on click of this level you have to render some page but again this is pretty simple the at the end our objective will be to learn this feature because if they tell that on click of this you have to render The Details page so you'll give the URL of this page and then based on that you'll be rendering so I'll be discussing that one in the later while implementing this one but in this project we have to basically see how we will be rendering this child parent relationship and then based on that we'll create this tree structure so let's start working on this very very important uh interview questions in the next part all right everyone so let's get started so as I already told you that in the interview most of the times they will share some kind of data which will be like nested now this data format can be anything at the end you should know basically the logic how this is working now I'm repeating this one again because this is one of the very very important question most of the times they will ask you this now the question can be vary like they can tell you that you have to build a nested navigation menu or you have to implement recard menu UI or like uh what they will say that will give you some Json structure you have to simplify it and then based on that you have to render that one in the UI so here you can see the structure that we are having we are having a label and then we having a two two is basically path so don't uh worry about this one because currently we have to basically focus on this particular structure how this data is actually coming here and inside each and every object we are having this children now this is very very important which will be arrrow of objects now again inside this the structure is exactly same so again you are having a label then again the two two is basically the path that you want to navigate to on click of this particular link and again you are having the children which is again the same structure so now in the interview first you have to explain all of this that what you want to do what part you want to and how the function will work once you have done all the discussion then just you just take the data and then we again do the same process we'll create another folder now again I am here giving the name as treeview you can give based on the requirement that you are getting in your interview all right so if they're telling that you have to create a menu UI so obviously you'll be giving the folder name based on the requirement so here the first thing I'm going to create a data.js and I'm going to paste this data data so this is our uh let's give this one name as uh menus all right and then we are going to do export default menu that's it let me just close everything now let's create our index. jsx and then styles. CSS so here let's quickly create the component so this will be export default function now here I'm giving this one as uh Tre now again here you will be basically getting the data or basically the menus from the pattern component so always you'll be receiving from the pattern component so I'm giving this one as menus which will be empty array and here we have to basically do the functionality now here how this will work now the first thing is that if you see the structure so let me just show you so here you have to first render this label and then you have to check that whether this particular object is having any children or not so so yes there is a children so you have to again recursively call the same component and it will basically go on so again this will take this children it will render this level and again it will check whether there is a children or not yes there is a children so again it will do the same process again and again so for that is the reason we need two more component here so I'll be giving the name as one is menu list and then we are having a menu item which will basically render the each and every item so here this is item this is item here this is the item and this is item so on so this will be our menu item do jsx so now in the main component so this is your tree view component here you will be first checking that whether there is a length is greater than zero or not in this menu's length so here we are going to return return and here let's return a div which is our main div so here I'll give a class name name let's give this one a three view container and here first we need to what we can do we can simply render or let me just quickly create the menu list component so list will take the list of data now I'm creating each one each and every component separately so that it will be easy to understand also in the interview time also you should different um create small small chunk of component so that you will be able to explain your interview properly and also this is also much more structured so here I'm going to create this on export default uh sorry export default function this will be menu list now again this will receive the uh list of data which will be again default I'm taking this one as empt now it will return a div now here what we can do uh we'll take a class name here we'll give this on as uh menu list container something like that now here you you need to basically check if this least and and list do length if this is greater than zero or basically if this is true or else we show null here or you can show some message that is also fine that no menu is present so here what you need to do basically this menu list will map the list of data and it will return the single menu menu item so here let me just quickly create this component also so that it will be easier to understand so here I'll be creating the component so this will be function and this will be menu item now what this menu item will receive menu item will receive a single item as I already told you so this is our single item here all right now here let me just quickly return some menu item and later we'll be changing this one so that we'll be able to understand what is happening so now this will basically map here so this will do list do map this will be list item and here it will going to return menu item item and here you'll be passing the item which will be your Leist item all right so that means it is actually three-step process in your pattern component you are calling the menu list item and then sorry from the pattern component first you're calling your main treeview component which is calling the menu list component and this is calling the menu item component so here I'll simply return so here in this component what we going to do we simply call the menu list component and here we'll be passing the list which will be our menus all right these menus awesome so now let's save this now we'll go to our app.js and let me just quickly comment out this part here I'll give another comment and this will be our tree view component or this will be menu UI component or this will be also recursive navigation menu anything you can basically use the same logic here so here I'm going to call the tree view component and here I'll be passing the menus which will be basically our menus that we are having here all right so this menu is basically this static data so now let's format and save this and let's see what is happening here so you can see that we are getting menu item three times now here I want to explain each and everything the reason is why you are getting three times because it is only rendering the parent com parent uh menus here so you're having one then you're having two then you're having three so that is the reason you are getting this one three times because currently we are not checking if the children is present or not if the children is present again we have to basically recursively call the same component but how we are going to do this one now to do that each and everything the logic mainly will be in your menu item component so here now let me show you how we can basically do that so the first thing let let me just go to menu list component and here uh what we can do uh instead of rendering a div I think we can render a ul and here in the menu item we render a AI instead of a div now let me just remove this one now the first thing what we will basically do uh later we are going to change the structure but first let's understand so here I'm going to render the item. level now this item do level is basically this level that we are having here so let me just save this so we are getting home profile and settings main three parent so now what we can do here the first thing is that we need to basically check whether this item has a children or not so here we can simply check if this item and and item do children and and item do children. length if this is true let's give greater than zero so we render null or else what we need to do here now you can pause the video and try to find out by your own because this is a very important concept that you will basically learn how you can recursively call a particular component so here what we need to do we have to call now this is very important you have to call this menu list component only because this will receive the list now if you go to this structure you'll see that okay for the first one we don't have any children so it will basically give you null but for the second one we are having this children so children is again the array of object so this Arrow of object we are going to pass in this menu list component which will again call the menu item component so that means in this component we are recursively calling this menu list component if the item has a children if the item don't have any children so it will be null so here what we can do simply we'll call the menu list component here and then you have to pass the list now list will be basically this item. children I hope you're getting so that means what we have done we are recursively calling this menu list component from this menu item component which will again call the menu item component inside of this if I now go here see now we are getting all of this so we getting home profile inside profile we are having details then we are having location then we are having settings account security and inside security you can see that we are having login and register so till this part you have done now your interviewer will ask you that okay so you are able to basically see what will happen if I not try to add a new one in this location inside location so let's see what is happening so I'll go to data now let's go to location so here I'll again a children and here I'll add a label so I'll just add a Rand random value so this will be random value or let's add a CT so this will be a CT and and I'll add two which will be to uh City so now if I save this sorry if I now save this see now inside location you are getting City so that means it is recursively calling the same component again and again so this is working fine so now your interviewer will ask you okay till this part this is fine now what you need to do for the parent one so let's say this parent this parent and this parent and again each and everyone is the parent of its children you have to show a plus iccon if that that particular item has a children so you have to basically show a plus icon and whenever we will click on this plus icon or basically expand icon then only you need to basically show the children and vice versa so if you click again so it will be toggling basically so that toggle functionality you need to implement so how we are going to do that now later we'll do the uh styling but for now let's complete the functionality so to do this one what you need to do we have to go to this menu item component and here here we are going to take a uh state so here we'll uh take something like uh display uh display current children set display current children and here we are going to take this one as U state of empty object now here uh what you need to do basically so the first thing is that you have to basically show a plus or minus icon so now what I'll do I'll take a d here now I'll paste it now here I'm going to check if this item and and item do uh children sorry dot children and an item do children. length this is true so we'll take a span and we'll show a plus icon for now or else this will be null now let's format this let's save it now let's see so you can see that we are getting plus here here here here and here because these all are having the children for now let me just give Here style as later we'll change this we'll do display as flex and we'll do a gap of 20px okay now what we need to do we to basically take a on click so we take a on click and do handle toggle children all right now here what we going to pass we'll pass the current label now obviously most of the times you will have a ID also for each and every but currently we don't have any ID that is fine but most of the times you'll have ID if you are having a ID or something like that any unique key you can also pass it but at the end the concept is actually same so for now we are going to pass the uh item do label now let's quickly create this so this function handle toggle children it will get current level now here what we need to do we'll simply take set display current children so here we will basically take the existing one and then we'll basically set this get current level which will be not equal to display current children so this is the one that we are already having so that means we are basically checking if the current level is already existing here so you're toggling if this is true it will be false if this is false this will be true of this gate current level that's it so now let me just show you what is happening here and I'll go to log and then you'll do display current children so now let's go to console so first time you can see we are having nothing if I now try to click here we are getting profile true if I click here again we are getting profile false so that means this is working fine so now based on this you will be able to see if we are clicking on this one then only I want to expand the children of this particular menu all right so now what we can do we can simply go here and we can give the condition that if the it uh sorry the if the current item children length is greater than zero and if the current display current children of the current item. label if this is true so that means we are checking if this profile is true then only we want to expand so then only it will show the children if I now save this now you can see we are not getting anything if I now click here we are getting details if I now click here we are getting here but this icon is not changing so this also we can simply do we can go here and then we can check that if this display current children of this item do label this is true so that means what we need to do we will basically show a minus or else will show a plus now let's see so let me just close this so now I'll click here this is minus I'll click here I'll click here and you can see that this is working fine if I know X sorry minimize this one this is working fine if I here that this is also changing and the uh children is also now not s so this is now working fine so this is all about the functionality that you need to do now after this only we will be moving towards to uh styling we'll do very little bit of styling here all right so the first thing what we can do I think uh let me just check whether we are having this react icons okay so the first thing is that we'll import some two icons so we do import something from we'll do react icons slfa so one will be fa minus and one will be fa plus okay so here we'll basically change this one to fa minus sorry this will be fa plus all right sorry this will be F A Plus and uh let's give a color of white and also give a size of 25 and let me just copy this and we'll paste it here so this will be AFA minus let's see okay I think we are having colored white so we need to basically change this uh main styling actually for this container so let me just copy this I think we are already having the Styles so we'll paste it so let give a mean height of 100 VH we'll give a width of 350px and we'll give a background of RGB we'll give 0 comma 71 comma 1110 let me just uh import this one so you import want to do styles do CSS let's save this all right okay this is expanding so this part we need to check what is happening here so for this one let's go to our main menu list component and let's go to menu item so we having Ali here so we'll give a class name we'll give this one as menu item and let's go to our style. CSS so here what we can do we'll give this on SD display Flex we'll give align items as Center we'll give gap of 20 PX and we'll do cursor as pointer now next uh we'll go to our menu list uh so for this one what we can do sorry I think we have given in the wrong place that is the reason so let me just copy this instead of manualist I to we have to give this one in the main sorry we have to give it here not there so here what we can do we can give this one as uh this is fine we'll give this one as I think this was correct review container so let me just copy this and we'll change this one here instead of menu list this will be preview container and then we'll be having menu list container which is for the UI sorry UL so for this one we'll do Leist style as none and we'll do a margin top as 0 PX and we'll do margin bottom as also 0 PX now let's see what is happening okay so here something is [Music] wrong let me just check so I think we are having this is fine okay we don't need display Flex here I got it so the reason is I think we have given in the wrong place you can copy this and we have to give it here and we can remove it from here all right so now let's save it now let's see what is happening okay now this is working fine awesome also let's make the color as uh White we having menu so we'll do color as white okay so now let's see okay so this is working fine awesome if I now so here you can see that everything is working fine uh let's add another one inside this register so we go to our data and then inside this register if I now add another children and we do label so here what we can do we add some random data and we'll do a two of something else empty let's see what is happening so you got the plus icon and we getting random data here if I uh toggle this one this is working and everything is working fine so this is one of the very very important questions that you might encounter in your browser coding interview now as I already mentioned that they will give you the question in many different ways but that the end the concept will be exactly similar so that's all for this this particular project let's move on to the next one all right so this is the first project you can say we'll be using a third party Library package the reason is that sometimes uh you might get asked that whether they will check that whether you will be able to integrate a third party Library package or not so that is the reason I've chosen this project also so here it will be pretty simple you to give any value let's say I'm giving my name and then based on that it will generate the QR code and the same you will be basically able to scan it so this is a very simple project that we are going to Implement so let's see how we are going to do that using a third party Library package all right everyone so let's get started with our QR code generator now as I already told you in the introductory uh section that this will be a very very small project now sometimes interviewer will basically test that whether you will be able to work with any third party Library package or not so that is the reason I'm actually including this very small project so let's see so for this one what we going to do will be using this particular package that called react QR code let me just quickly uh install this one so we'll do npm install and this will be react QR code all right so you will be having one very simple input and there will be a button so whenever you'll be typing some input you have to store the value and on click of this particular button you have to basically generate some random QR code all right so this is done so let me just quickly create a component so here I'll do QR code generator so I'll do index. jsx and styles. CSS so let me just quickly create the component so this will be export default function and this will be QR code generator all right now here we we are going to Simply return some div now here we'll take a H1 and this will be our qword code generator awesome so now after this we will take another div and here we will take a input simple and there will be a button so this will be generate something like that so here we'll be giving a type which will be text name will be now another thing is that uh you should always ask the interviewer that whether this all this input that you are giving here this name type whether this you will be receiving from the parent component or not if the interviewer says yes then in that case you have to take all of this in your props now I'm not doing this one for this particular project because I'm pretty sure that you already have that idea so that is the reason I'm repeting uh this one again and again that you have to basically Drive the interview you have to ask interview a lot of questions so that they will understand that okay whatever you are doing you actually not blindly doing anything okay so that is very important for now we'll give this one as let's say QR code all right and let's give a placeholder and enter your value here that's it and inside this what we are going to do take a div and here we are going to render our QR code which we need to import from our react QR code now this will basically take a ID so here we'll give our uh QR code uh value anything and also it will take a value property so for this value property we are going to basically take a state which will be our QR code set QR code and this will be of use state of empty now what we can do uh now because we need to create this on on click of this particular button so we will take another state which will be our input and this will be our set input now again I'm repeating if he's telling that or your interval that you need to basically get these values from your parent component so you have to again take this one from Pro but there is another way that I'm going to explain so here I'm going to take this one as UST state of empty so that is fine now what we are going to do uh we will basically take a on change so this will give you event and here I'm going to set this on event. target. value that's it and we are going to take a on click for this button which will be handle generate QR code so here let's quickly create this method so this will be handle generate QR code and here simply this is very very simple what you can do you can simply do set QR code which will be your input value now here another thing very very important that always handle some kind of error let's say if the input is empty somehow so you will be basically disabling this button or you'll show some kind of message that your input is empty so here we can basically take a dig and we'll check that if the input and and input do trim if this is not equal to equal to empty so if this is not equal to equal to empty so this will be false or else this will be true that's it now here you have to pass the value and so value will be your QR code and it will also take a size I'm going to take this one as 400 and also let's give a background color of white that's it and I think that's it uh that's all you need so now let's go to our app.js now I'm going to comment out this one and I'll create so this will be our keyword code generator so I'm going to import our QR code generator and then let's save it and let's see what is happening awesome so you can see that we are some getting some value and I'll type something here suum and let's click generate you can see this is basically getting uh generated so this is also getting disabl now once you will generate something let's reset this value also so that we can very easily do so here we can make this set input as empty again let's save this so now we'll give some random value random value generate this is getting changed but this is not getting reseted so the reason is pretty simple simp because we haven't given the value here so here we have to give the value which will be our input all right so I'll give again I'll generate now this is getting reseted and you getting a new all right I think that's it so as I already told you this will be a very small project but this will actually give you some idea how you can create some kind of QR code so that's all for this particular project let's move on to the next one all right so the next one I'm pretty sure that you already know this one uh so this is a light to Dark theme switch and the vice versa so this is the first uh project where we will be creating a custom hook and that is called use local storage so we'll be storing the current uh data in our current choosen theme in the local storage and on click of this button we'll be able to change the text color the button color background color if I now refresh this you can see that now only light will be light mode will be selected the reason is if I go to this application you can see that we will be basically saving the current theme using a custom hook if I change this one this will be basically getting changed all right so this is another very very important project uh interview question that you might get asked and for this one also we'll be not using any third party Li package we'll be creating each and everything from simple scratch using simple CSS and react jsx so let's see how we are going to implement this one all right everyone so let's start working on another very very important uh project that we just now discuss and that is how you can switch from light to dark mode and vice vers so so for this one what we'll do let's create another component so we'll do like uh light dark mode or switch whatever you can do so here first let's quickly create the our structure now here we'll create our component so this will be export default function light dark mode here I'm going to return some div and here uh let's do one thing for now we'll simply return the jsx then we'll explain the uh functionality how we are going to implement that and at the end we'll be doing the CSS and here I'm going to do a div and let's give a class name of container here I'll give a class name of Light Dark mode we'll take a simple paragraph and we'll render here hello world all right now here we will be having a button which will basically switch from uh or basically change the theme so for this one we'll keep this one change theme this is fine so this is all about the GSX structure that we need but first let's imple uh let's discuss that how we are going to do that so the first thing is that what we'll be doing we will be creating a custom hook that will be basically a kind of storage which will store our current uh theme in local storage so that whenever we refresh the page we will be getting our latest uh uh stored uh theme from our local storage and based on that we'll be doing the functionality but because you'll see that whenever you'll go for an interview most of the times in this case your interviewer will say that you can't use any kind of third party package because if you are using any like let's say style components or material UI or something else it will be very very easy for you to implement so because they will give you inbu hook that you will be able to uh easily use and then you have to just pass the property and based on that you have to change the style because here what you will explain your in your interviews that we will be creating a custom hook of our own and there we want to store our Uh current theme and based on that we want to change that first we will be basically explaining how we will be able to create a custom hook so for this one inside this you will be creating a uh file and I'll give this name as use local storage. jsx now custom Hook is basically again I'm pretty sure that you already have some idea so it's like a reusable hook that you can use throughout your application all right in the later section of this particular project we will be creating some more like use fet use responsive use preview yes but for now let's start with this one so now here we'll do export default function so first you have to give the name so we'll give this one as same use local storage now what this will receive this hook you will be calling from anywhere in your component right so hooks are always actually called on the top level on the component so it will receive something so it will receive the key that what what is the name of the key that you want to store in your theme so it will receive a key and and also it will receive the default value that you want to save for this particular key so let's say you having this key that is light theme and the value will be true something like that or the value will be false so this is the key value pair now here what we'll do we'll take our state which will be our value and then we'll set our value now here we'll do US state and this will take a method now this is pretty simple what you can do you can take a current value and here you can do a try catch block now obviously if there are any catch any error so you can log the error first all right you can also set the error so that I will also show you and then what you can do you can set the current value that you are having so this value is with the default value because this default value you will be always passing from from your component correct so this you can set which will be your default value or else if there are no error so your current value will be your json. pars now what will be the current value pause the video and try to find so what you need to do if any value is already stored so you are going to get it from your local storage so this will be your key that you'll be getting or else you have to basically take this one from string of this default value sorry this will be this will be default value so this your setting and at the end because this is a function so here you are going to return the current value what I'm doing you have to return the current value that's it all right so this will do all the functionality saving and everything and at the end I'm sorry not saving you have to basically extracting and now how you are going to save this one so this is also pretty simple so first you have to take a use effect and here it is very very important to keep this key and this value as a dependency because based on this key and value only you want to do this one sorry this value I'm talking about this value here and this is the key that you are passing from your parent component now here you can simply do local storage. set item which will be your key and the value will be see because you're already setting the value here right here so this will be your YouTu do stringify so it will be JSM do stringify of value so this will set your uh value in your local storage or basically your theme and at the end you are going to return return the value and the set value which is your set State method here so this is all about your hook that is need now this hook you need to basically store sorry you have to call from your component or any component that you want so here what you are going to do you will be getting the theme now this is very important so I'll show you why so here you can take any name you want because here you are going to call this use local storage and if you noticed here this is receiving a key and the default value so here I'm keeping the key as theme so now this theme this key can be anything also and here I'm keeping this one as a dark so that means by default my theme will be dark and the this method you are basically getting from here so this is the value and set value are getting right so this is same as this one all right now let's say what you need to do you have to basically change the theme so you'll take on click so we'll take a on click here and this will be handle toggle theme so here we'll do function handle toggle theme and here we are going to Simply do set theme so here you have having this theme right so here you'll check if the theme so this theme that you are having if this is light theme if this is light so you're going to make this on vice versa or else this will be light so if this is light we going to make this on dark and or else this will be light now how I am actually explaining each and everything in interview interview also please please explain each and everything that you are doing you will get extra points for sure and you'll thank me later in this comment section I'm telling you so these thing please always explain in your interview that how you are doing and why you are doing this now let's see what is happening here let me just log this theme here let's save it and let's go to our app.js I'm going to comment out this one and what you're having dark light and dark mode so I'll give another command so this will be light and dark theme switch so here we are having light and dark mode let's save it now let's go to our console so you're having dark I think we are getting some error here all right no nothing is happening this is fine change this one light click here dark light let's go to our application theme is light now click here this is getting changed to dark light dark so this is working fine now this is also a custom hook that you have created so obviously get extra bonus marks for sure in your interview all right so this is now working fine so now this is pretty simple so now you have to work on the CSS but so how we will be basically implementing the CSS see for this one what we going to do we'll take a data property here and here I'll do a data theme which will be this theme that we are having here so that means based on this theme we want to change the style for this particular component so how we are going going to do that so now it's everything in the CSS so now let's quickly create our uh theme do CSS so here we'll take our root oh sorry we'll take root and here I'm going to take some variables so first I'll take background which will be white then I'll take a text primary so for this one this will be be black then we'll take a button color so this will be button BG so which will be button button background now you can take any name you want that doesn't matter at the end we should basically understand that if we are able to understand the concept or not all right and then we are having the button text so we'll take this one as white so this is about our root colors that we need now how you are going to uh set for Dark theme now noticed here we are taking this data theme here so based on this you'll be able to do so here you can do basically simply take a data sorry data theme this will be data theme and this if this is equal to equal to dark so that means you want to do something so based on that I want to change the color if the theme is dark or else this will take from the root so here I'll copy all of this and for this one I'm going to make this one as opposite means if this is white for black it will be dark this will be white this is also will be white and this is will be black that's it now let's save it so this is now will basically change now if you notice we not using any third party Library package so now we're going to import our theme do CSS this is fine and now let's copy out this class name so here uh we'll start with this one sorry so we're going to take a background color and for this one we going to use a uh background this one we'll take a height of 100 VH we'll take display as Flex uh we'll do a flex direction as column we'll do justify content as Center we'll do font size as 20px and we'll do a transition we'll do all uh. 5 Seconds let's save it let's see what is happening now go back now change theme see is working I now refresh this see this is now black because currently it is STO show in the black so it's working fine even though we refresh the page right now if I now change this one now you see this will be light only and it's working fine awesome now next what we'll do we are having this paragraph I think so we'll have paragraph uh let's make this on chaining or else this will apply in other components also so inside this paragraph what we going to do we'll do a color so for this one we'll do text primary and we'll do a font size of 40 PX awesome then we are having buttons we'll do dot Light Dark theme of button so we'll do a background color so for this one we'll do we button BG and we'll do a border uh for this one we'll do one PX solid where I'll do button background color we'll do a color of where button text that's it we'll do a margin of 6 15 PX let's do 0 PX we'll do a padding of 12 PX we'll do a border radius of 8 PX we'll do font weight of 600 and we'll do cursor as pointer this is fine and I think we are having another one which is our container so let's copy this and let's give here container also so we'll do do light dark mode of container so for this one also we'll make display Flex we'll do justify content as Center we'll do align item as Center and we'll do a flex direction of column that's fine and let's take a gap of 30px and I think in that case we don't need this margin here now let's save all of this let's see what is happening awesome so now uh for this paragraph also we do margin of0 PX okay now let's see if I now click here it's changing don't worry about it's not middle that is fine at the end we should see whether the function it is working or not so this is changing from black to white this button background is also changing and the color if you noticed if I click here background is now black this is now white this is now White and the color is black and this is also changing so this is how you will be able to implement your light and dark mode without using any third party libr package so what we have done we created a simple uh reusable custom hook which will take the key and the default value now here basically we are extracting the value current value and in the use effect we are setting in our local storage and then from the component we are basically calling this we are setting our Uh current theme as dark and on button click we are changing or basically toggling from light to dark and dark to light the catch is a Pally we basically we are doing this one based on this data attribute here the same we are utilizing in this CSS file yeah I think that's all for this particular project and let's move on to the next one all right so this will be our next project this is called custom scroll indicator so here what we are trying to do we will be fetching the list of data and there will be scroll indicator if you visit some of the website you might notice that whenever you scroll it will basically show you the progress so if you see that if I scroll here and just change the scroll view this will be basically the progress bar will be changed and then if I go to the at the end of the page so it will basically show 100% so this is what exactly we are going to build in this project you'll learn that how the scroll functionality and what are the properties that window properties that you need to use to to create this progress work so let's start working on this particular project all right so let's get started with our scroll indicator so for this one as we already discussed that we will be basically fishing the list of products and based on that we'll be showing how much we have scrolled into our page so we are going to use this URL here so let's go here and let's create another component and this will be our scroll indicator so we'll create our index. jsx and we'll create create our scroll. CSS so let's quickly create the component so this will be export default scroll indicator sorry this will be function all right now here uh let's simply return our div and so basically now your work will be first you have to uh ask your interviewer that the URL that we are calling the API will that be always same or that you will be receiving from a parent component or that URL can be basically anything if that is the case you will be receiving the receive the URL from your parent component as a prop so let's say we will be receiving from the parent component so the first thing is that uh we are going to take our state so this will be our data State and set data which will be use state of empty aray all right now later we going to do the scroll thing but for now let's first Implement our uh data fishing also we'll do a loading State see always implement the loading State because this is always a good practice to implement and this will be US state of false and now uh we will be taking our use effect and then we'll keep this URL as a dependency because that is the we are depending on the parent component and here we'll create a phage data function which will take this URL as a parameter that's it now here let's create the function so we do as sync function Fage data which will take our gate URL and here we are going to implement our try and catch block all right so here for now we'll simply log the error also so you can take another state which will be our error message set error message which will be used state of empty so here you'll basically render this as this error Dot message now here the first thing what you need to do the first thing is that you to make the set loading as true because you are calling the API and then you have to do const response this will be AIT F and here you have to do URL so this URL you are getting sorry this will be get URL and here we'll do const data which will be AIT response. Json and now we are going to first log the data so let's format this let's save it so now go to our app.js let me just comment out this part again and here we'll create another component and this is our scroll indicator component so here we are going to implement uh sorry import scroll indicator which will take URL so this URL will be this one here so let me just copy this and here uh we are going to pass a limit so we'll pass a limit of of 100 so we want to fetch 100 data at once let's save it so now we already logged in this data let's see what we are getting here we are getting object and you can see we're getting the products we're having 100 products this is fine so now we will simply check if data and and data do products and and data do products. length this is greater than zero so we'll do set data which will be data do products and we are going to make the set loading as false again all right so now let me just cut it from here and we'll log this uh data and this loading let's see okay let me just refresh this so you're getting false true and then again we are getting the data done so now what we can do simply uh let me take here H1 tag and we'll Implement custom scroll we'll do custom scroll indicator all right and then uh inside this uh what we can do we'll take a simple div and we'll take a class name which will be our data container and inside this simply you will just render the data for now we keep this one very simple this will be data. length if this is greater than zero or else this will be null and here we are going to render uh the data so this will be data. map data item and let's take a paragraph and we are going to render the data item. title that we are having let's save it now let's see what we getting awesome so we are getting 100 data here okay so now here we have to basically show that uh the scroll that how much we have scrolled and if I go to the bottom of the page so that means we have we have completed the 100% so for this one the first thing is that what you need to do you to manage a state so we'll take another state and what we can do we can check that uh SC percentage something like that set scroll percentage which will be US state of zero for the first time and now here what we need to do we'll take another use effect all right and then we will have to take event listener so we'll do window do add event listener ER and this will be on scroll and we'll do handle handle uh what we can do we can handle scroll percentage all right and we'll just simply do R so on on unmount we are going to remove this one so we'll do window. remove even listener scroll and we'll make this one as like this that's it now let's quickly create this one so we'll do function handle scroll percentage so this is our method now here what we need to check we have to check the following things now I'll show you that there are three things we have to calculate the first one is that how much we have scrolled and what is the full height all right and then how we'll be able to basically uh get that so you have to take the SC height and the client height we have to substract and then based on that you have to calculate the percentage that how much you have uh scrolled so for this one I'll just log some of the things so first we'll do document. body do scrolltop this one or we'll also do document. document element do scrolltop we will also log here document dot document element do scroll height and also we do document do document element. client height so these all the things that we need let me just save it now let's go to our console and I'll just do scroll so you can see that we are getting all of this so one we are getting the full height you can see this is our scroll height and this is our client height all right and this 130 is basically how much we have do we have done till top so so this is a scroll top okay if I know if you see if I now scroll down so this will obviously increase right and see this increase this is increasing so now we will be able to basically create the uh get the percentage very easily so we'll create our percentage like that so we'll do const uh how much uh I'm keeping this one very funny not funny like I'm uh writing this variable name little bit long so that it will be easier to understand so this will be how much sced so this will be document.body do scroll toop or else if this is not so this will be document do document element do scroll toop all right and then we'll be calculating our height so this one is pretty simple we need to get the document dot document element dot we are having this scroll height and we'll basically substract with our client height so this will be document dot sorry document element dot client height that's it and now we can simply create our percentage so this will be set scroll percentage so here this will be how much you scrolled divided by your height right into 100 so we just do like this into 100 let's save it so now let log here uh scroll percent let's save this one so I'll just refresh here and let's scroll down so you can see this is getting changed if I go below and now this is almost 100 so you can see that this is almost 100 so this is now working fine if I know scroll top little bit so you can see this is now decreasing right so this is working fine now based on that we have to create our CSS so now let's give some name of the classes so what we can do uh let me just create another one so we'll create another div here and and I'll give this one as class name so we'll give this one as call progress tracking container something like that and inside this we'll take another div and here I'll take class name this will be our current progress bar all right and here we'll take a style and we'll mark the width of of this one as this uh scroll percent sorry we take template literals and here we'll do our scroll percentage of percent so this is the current width each and every time we will be scrolling so this width will be either increasing or decreasing I hope you're getting all right and here we'll take another one so we'll do here class name this will be our top [Music] container and let's move all of this inside this let's format this let's save it now let's start working on the CSS so first one we be our top container so we'll copy this and here we are going to make this one position as fixed we'll do top as zero we'll do J index as one we'll do width as 100% we are going to do text align as Center we'll do background color as black sorry let's use hex code only all right and and I think for now this is fine sorry okay now next we are having our progress bar so this one scroll progress tracking container so for this one we'll do a width of 100% we'll do a height of 10 PX and we'll do a background of Let me just take some random color then we'll change this one or let's use this color anything we can use for now we keep it like this let's see how this is looking based on that I will change and after that I think we are having our current progress bar so copy this and for this one we'll do a height of 10 PX we'll do a background of this one has 8 b0 2 B5 then we are having width of 0% yeah I think that's it now let's save it let's see how this is looking so let me just go here and let me import our scroll. CSS if here loading we'll show some kind of message here that at if loading true so we going to return some div uh loading data please wait and if there are any error so we're going to return that error occurred error and we'll just render the error message let's save it let's see what is happening okay this is I think we have kept this one as black only okay let's use some different color what we can use uh we'll keep like this this one let's copy this we'll go to top container and then we'll make the color as white now let's see awesome okay now let's refresh this awesome so you can see that now this is working fine so we are scrolling and this is also giving you the progress right and this is working fine now another thing if you want what you can do basically let's go to this here so here we are having this data container we can copy this and then we can give a margin top uh margin top of 100 PX because we are having that uh because the position is fixed you have to give the margin top to get the full data all right let's save it so now you can see it's working fine right yeah I think that's all for this particular project now this is another important concept that you have learned how you can s see another thing we are not using any third partyy Library package so obviously these all are the very very important uh uh questions that you can practice for your front end interview so that's all for this particular project let's move on to the next one all right so here we are again another very important very frequently Asked interview questions and that is to create custom tabs with Dynamic content without using any third party Library package so this is exactly what we are going to build so here we are having so this data is dynamic so what about how much data we want to pass or how many tabs we want to create based on that it will automatically create the tabs and that this content can be dynamic so you can see that this content whatever we will pass and based on that we'll be creating this uh simple tabs component without using any third party Library package so let's start working on this particular project all right everyone so let's get started working on the custom tabs component so now uh now here also another very important thing is that most of the times in interviews whatever your interviewer will tell that let's say you will get some components from a parent component basically so list of child components and those components you have to pass to your custom tab components and on click of each and every tab you have to render that content based on that particular tab so for this one for this particular component we will be basically having three files so I'll create here like custom tabs so one will be my tabs so we'll give this one as tabs. GSX then we'll be having the Styles we'll give tabs. CSS and then we are having tab test so that means uh this will be our custom component or basically the sorry this will be a parent component so this is just for example in this component we are going to uh use this tabs component all right so now uh let me just do one thing let me close everything else all right so here we'll create the component so this will be export default function and I'll give this on name as tabs for now now here what uh it will receive it will basically receive the tabs content that we are going to pass from the pattern component so we give this name as tabs content you can give whatever you want also it it will going to receive another on change property and I'll discuss why all right now let's return our j6 so here uh let's give a class name and uh styling we are going to do later for now I'll give a class name of wrapper for this one inside this uh we will take another div and here we are going to give a class name and let's give this one name as heading all right now here what we are going to do basically we will map this tabs content and based on that we are going to render the label that we are going to receive now obviously this depends on that in which uh way or basically the how you are getting the data and based on that this key or the value pair will automatically change so this will be our heading section and then after that we will be basically having our tab content section so I'll take another div now and here we are going to take this one as content all right now here I'm going to check if this tab content uh or directly we can do do map so here we'll give tab item and here what we are going to return let's return a div here the first thing is that we are going to give a key which will be our tab item do label now inside this we will take a span and let's give a class name of label and I'm going to render this tab item do label here that's it now next inside this content again here what we need to basically check if we are clicking on that current tab based on that we have to get the current tab index so for this one we need a state that we need to manage so we'll take a state here and let's give this one name as current tab uh index Set current tab index and here I'm going to take this one as a u state of zero all right now here what we are going to do see we are having this tabs content that we are going to receive from the pent components we'll do tabs content of this current tab index if this is true then only we will basically take tabs content of current tab index do content that we are going to pass now for now this is fine let's quickly create the pent component so that it will be easy to understand now let's say this is your pent component and from here you want to call these tabs all right so now here what we are going to do will be creating out uh this component so here we are going to import this tabs component so let's quickly create so this will be export default function let's give this on name as tab test and here I'm going to return and we'll keep this one very simple so what we can do return here tabs so this is our component and here we need to pass the tabs content so now let's say we are having the components like this so we'll create a array here so this will be our tabs and here if you now go to a tabs component so here you can see we are getting Level and the content so these two things you need to pass so here I'll pass level and let's give you some name as tab one and I'll pass a Content which will be I'll take div and this will be this is content for tab one now let's copy this and we'll paste it two more times so this will be tab two and this will be tab two now let's say you are having a separate component so this is just to show you so you're having function some random component and this is returning a div or let's say H1 and some random content okay now here what we are going to do we take a label here also and this will be tab three and here I'm going to pass a content which will be instead of this now I'm going to pass this random component here so we can simply pass this random component also this will work so now this is our tabs or basically the arrrow of tabs and this we need to pass it here that's it and now if you go here we are also passing this on change so that means the current tab that we are currently clicking we need to get the tab index and based on that let's say you want to do certain operation for example you want to save the data in the database or whatever you want to call Api so now for this one here I'll pass on change which will be my handle change so now let's quickly create this component so this will be function handle change now here this will basically receive our current tab index current tab index so basically what we are doing we are doing a parent to child and child to parent relationship and let's say I want to log this current tab index that's it now let's save it now we need to go here and now here what we are going to do we need to basically create this functionality that whenever we will be clicking on this particular header I need to set that onto the current index because you can see we are checking that if the current index is true then only want to show the content here so here we can take on click and here I'll create a handle on click and I want to pass the index let's say we are having this index so this index we want to pass it here so now I'm going to create a function handle on click so this will get the get current index now simply set this current tab index to get current index now we can call this parent function here and we can simply pass this get current index also this will be done now let's format this let's save it now this component I want to use in my app .js so now I'll just commit it out and let's give another comment so this is our custom tabs component and here I'm going to import tab test that's it let's save it now let's see what is happening all right let's see what is happening here I think this is some styling issue okay so you can see that we are having here let me just give some styling for now so we go here let's go to our tabs content for now we'll give a style and we'll give a color of red now let's see all right now if I change this one tab two and if I click here we are getting some random content click here so this is working fine all right now let's start working on the styling so this is all about the functionality that we need so now let's go to our tab. CSS so the first thing is that we are having our wrapper components we'll take dot wrapper and let's give a padding of how much 8px next I think we are having heading so we'll take heading we'll give display Flex we'll give justify content Center and we'll give a margin bottom of 2 lpx uh next I think we are having label or let's do one thing let's also give some uh class name to this also so this div so let's give a class name here and for this one we are going to give a dynamic class name so here what we can do we can give a class name of tab item and then we can basically check that if this current tab index if this is equal to equal to index that means this is currently selected so we give a active class name here that means this tab is active or this will be empty all right so now let's copy this tab item so for this one we'll give this one as display as inline Flex we'll give font size of uh let's give how much 30px uh we'll give font weight as bold sorry this will be bold we'll give a text align as Center uh we'll also give a adding of 10 PX 15 PX what else we give a cursor as pointer and we'll do border as none Also let's give a color color will give white and let's give a background so background will give this one 4 e 01 6 a that's it now if this is active so we'll give tab item do active so we will basically change the styling so we'll do a border color color of black and we'll give a background color or background so we make this one A1 D60 and we'll do a color of white that's it now next we are having label so we'll take this for label I think uh what we can do I think for level it is fin not required let's give some styling in the content so we'll take content and here we give a padding of 20 PX 10 PX we'll give a height of 300 PX we'll give overflow as Auto and also let's give a background color of white and I think for now this is fine let's save it now in this tab test component only I think we can import tab. CSS now let's save it let's see what is happening all right we are getting something but this is fine let's see what is happening here so you're getting tab one this is content for tab one this is tab two and this is tab three where we are getting some random content so this is working fine see at the end our Prime objective is to complete this small small uh project so that whenever it gives any kind of interview because whenever you're learning at the end your objective will be to get good com good job in a good company especially product based company now whenever you give some interview they will always ask you very simple questions but the questions will be in such a way that they will basically judge that how you are approaching that problem what is is the approach and how you are explaining that uh whether you know that what basically you are doing so that is the reason you should always explain these all of the things that you are doing in your interview and that will definitely going to help you a lot so I think that's all for this particular project now let's move on to the next one all right welcome to the next one so next one will be another very important uh interview question now I'm tell telling all of this B C you might say that okay he's telling each and everything important see this is the reason why I've have taken so much time while selecting these questions because most of the times you will get the questions from this particular video Whatever projects that we are doing so here again we are using not using any third party liy package we'll be creating this um custom model component where we will be basically able to create this model where will this data whatever data we're having here each and data can be customized and based on that we'll be creating this model for this one also will not use any third party liability package because whenever you'll face this interviews uh these questions in your interview especially the model they will ask you not to use any third party Library so let's see how we are going to do this all right so let's uh create our custom model component so first I'm going to create another folder here and let's give this one name as custom model popup and let's create our here also we'll create our model. jsx we create model do CSS and also we create another one which will be model test. GSX let's close everything else now here also how this will work so let's say this is your parent component and you are having a reusable model component so you will be managing the state from this component only so you'll be let's say you are having a button here and on click of this button only want to open the model so that means we are going to import the model in this component only and that model we are going to use throughout the application so this is the main idea so now here now obviously see the approach you can do this on many many different ways is at the end our objective is to understand the concept uh very carefully and how you can Implement those in real life projects or basically in your interview whatever so here I'll create a uh component first so this will be our function and this will be model test all right so now here let's quickly create our model component also so this will be export default function this will be our model and here I'm going to just return here model for now so now here in this component I'm going to return a div and inside this let's say we having a button and we having open model popup or anything now to manage the state from this component you have to take the state here and you have to pass this one in your model component so let's quickly take a state so this will be so model popup set so model popup which will be obviously used of false all right now uh because you are managing from here so you have to take on click in this button so I'll take an on click like handle toggle model popup so so this will be function handle toggle model popup now what you need to do here you just need to Simply toggle this so this will be set so model popup it will be not equal to so model popup that means if it is false it will be true if it is true it will be false vice versa so now what you can do you can simply check now this is pretty simple the only thing they will check I'll tell you whenever they will give you to create any kind of model they want to test how you are good at CSS because in this particular project function it is very little at the end they will tell you that how you are going to implement the CSS and also let's see if you want to pass some custom content to the model how you're going to do that so here you will basically do if this so model popup is true then only you want to render the model component that's it now here uh what we'll do for now this is fine now let's save it so let's go to app.js I'm going to comment out this one and here we are having custom model component so this will be our model test let's save it so I click here we are getting model so this is working fine so now let's go to our model component first so this is our model so here what we are going to do so the first thing is that it will receive some of the props now why it will receive some of the props the first thing it will receive the ID of the model it will also receive the class name it will receive a header content body content and the model footer content if you don't have any of this then it will basically uh what it will do it will basically render the by default content so what you can do here the first thing let's quickly give a ID here so ID here will be ID or if it is ID not present so this will be our model and this ID it will going to receive from this parent component so this is first thing then it will be class name will be let's give this one as model inside this we'll take another div we'll give a class name we'll give model uh we'll give this one as content all right inside this will take another div this will give class name as header and after this we going to take another class name sorry another div this will be class name this will be our body and after this we'll take another div we'll take a class name this will be our footer all right now here it will receive a header content it will also receive the body it will also receive the footer so now how you're going to basically do that and before that let's take a span here so this will be class name will give close model icon and here we are going to pass this so we'll do times that's it it will basically create a cross icon and here I'm going to take a A3 let's uh H2 also is fine and here I'm going to check if the header uh is present so it will render header or else this will be uh header that's it same here also so you're going to check if body is true so it will get body or else we are going to render some default content here and inside this uh let's take a p so this is our model body and same will be for footer so if footer is present it will do footer render footer component or else this will be will take this one as uh H2 so this is our footer all right now let's save it now let's see what is happening so if I now click here all right nothing is happening here I think we are getting some error okay I think the content is coming and the point is I think there are some issues happening with this tabs content all right I got it so we'll give this one as model content let's see now see now this is coming okay so this is working fine now let's see what will happen if I try to pass some uh random sorry some Custom Body so here we'll pass body and we'll make this one as a div component and this is will be our customize body now let's format it save this if I click here we are getting customized body so that means it's up to you you will be able to manage whatever you want to do from here right so this is the advantage of creating a reusable component so I think that's all for this particular project in terms of functionality now let's start working on the CSS so now the first thing we are having this model class name so we'll go to our model CSS and this will be our model so we make the PO as fixed we'll do J index as one uh we'll do a padding top of uh 150 PX we'll do left of zero we'll do top of zero width will do 100% height we'll do 100% we'll do overflow as Auto and also we'll do a background color which will be our uh we'll do black color only so this is fine next I think we are having the model content so copy this and here I'm going to pass the PO as relative we'll do background color as Fe F Fe then we having margin as Auto we'll do padding of zero we'll do border of 1 PX solid red we'll do width as 80% and I think this is fine now first let's see what is happening if I save this let's go here because in this component you have to import so I'm going to import model. CSS let's save it all right so it's coming black this is looking very bad let's do one thing let's change this color to something else uh let's see I'll go here we'll do something different let's see okay I think this is fine at theend now another thing what we need to do we have to basically close this here all right so this what we are going to do so for this one let's take a on close method here so we'll do function on close and here I'm going to do set so model popup and this will be equal to false all right and this I'm going to pass it here so this will be our on close all right so this it will receive in this model jsx so it will receive on close and now the advantage is is that you can easily manage this using on click so you on click and you'll pass this on close that's it so now if I go back if I now click this is closing and it is working fine all right now let's give some more uh styling also so the first thing is that what we can do we can give some styling to the uh this close icon so let's go to model. jsx we having close model icons we copy this and we'll do here cursor pointer first we'll do all right color I think let me see color this is fine uh we'll do this one as we'll do font size as 24 PX we'll do a float right and we'll do font weight as bold okay this is coming here let me do this one 40 all right now next we are having I think header so let me copy this so we'll do dot header we'll do padding of for PX 16 PX we'll do a background color here we'll do this color 5 C B 85 C and we'll do color of white awesome now next uh we are having body so we'll do dot body we'll do a padding of 2 PX 6 15 PX uh let me see what is the name body is fine and after that we are having footer so we do do footer we'll do padding as 2 PX 16 PX let's make this on 16 PX only and after this we are going to do a background color should use the same color here sorry what I'm doing okay this is fine and we'll do color as white only okay and for body let me just check what is happening in here uh let me just give a height of 200 PX okay yeah I think this is fine if I now close this open this so this is working fine if you want you can also give some uh animation Also let's give some animation here so we'll go to our model content and here we'll do some animations we'll give Animation name animate model and also we give Animation duration of uh 0 uh how much 5 Second and this uh key frame you need to create so we'll create a key frame so we do at theate Key frames we have to give the name so here we'll do from so it will start from let's say we want to give a bottom or whatever bottom let's say we want to give minus 200 PX and that time we will give a opacity of zero and then what you need to do to give a two so this will be bottom we give bottom zero or let's do one thing let's make this one as STP instead of bottom and I'll do this one a stop and then for two this oppacity will be one all right so now let's see what is happening if I now save this I click here see it is working fine and this is looking nice so now if you want you can pass customized header so let's pass some customize header also so here let me just format this so here you can pass a header component which will be let's say your H1 so this our customize header and also if I now copy this and pass it so this will be our footer so this will be our customize footer I now save it so you're getting customized header customized body and customized footer and this is working fine also if you want you can pass some id id custom ID that's it so this is how you need to create a model component now this is also very frequently Asked interview questions and you should always practice this one so that's all for this particular project let's move on to the next one all right so this is another project simple project that we are going to build where we will be using the GitHub uh public API to F and username details so if I search something here let's say Tom and search here so you can see that we'll be showing the loading State and based on that we'll be getting the data here and I will be basically able to visit this particular user GitHub page and if I type my name here so you can see that this data is coming and then will be basically going to my homepage so this is another very simple one that we are going to create so let's see how we are going to do this one all right everyone so let's start working on our GitHub profile finder so for this one let's quickly create another component inside this and I'll give this one name as GitHub profile finder so inside this I'll create our index. jsx and we'll create styles. CSS and let me close everything else so the first thing is that we are going to create the component so this will be export default function and we'll give this one as G profile finder so how the approach will be so we'll be calling a simple API based on that we'll be getting the uh that profile data based on a input that we will be basically typing and then whatever data we'll be receiving based on that we want to render the user based on that particular API response so here I'm going to return a div and inside this I'll give this on a class name and let's give this one name as GitHub uh profile container all right inside this we'll take another div let's give a class name so here I'll give this one as input wrapper and here let's take a input so I'll give this a name as uh like what we can do we can give name as a GitHub or let's give this on name as search by username we also give a type which will be text we'll give a placeholder which will be search GitHub username all right and after this we'll be having a button and here we are going to uh do something like search that's it so later we are uh we will be implementing the CSS but for now this is fine so here in this button we'll be having on click method which will be handle submit so here we're going to create the function this this will be handle submit and now we need to basically take some state so one will be our user name state so which will hold the username that we are typing in the input and let's say by default I want to keep this one as my name so I'll give this one as s mukarji so on page load it will be always this value here all right and here I want to pass this value as this username that's it now here the next thing what we are going to do we'll take a onchange method which will give you the event and this will be set username which will be event. target. value that's it all right till this part this is fine so now what we going to do we will take use effect all right so now here what we can do we can simply take a use effect so on page load we are going to call uh API and let's do this on something like fet uh D have user data and now let's quickly create this method so this will be assing function Fage gav user data and here we'll do const response which will be AIT Fage now here what we need to do we have to give this URL which is https api. github.com slash users slash and here you have to basically pass the username that's it so having const data which will be have it race. Json and we're going to log the data here so now let's see what is happening now first so we'll save it and let's go to our app.js and now here we're going to give GitHub profile finder and this will be GitHub profile finder let's save it and now let's see what is happening all right so you can see that we are getting s mukarji here and if I go to console we're getting object and inside this we are getting all the data here now whatever data we need based on that you will be able to render the data as simple as that so for this one what we can do uh let's do one thing let's take another state here so this will look const user data and set user data and this will do US state of null and then we are going to check if the data is true so we are going to do set user data will be our data and also let's take a loading state so I'll take another one so const loading set loading which will be use state of of false and before calling the we're going to do this one as true and here we are going to make this one as false all right now here we'll do if loading is true so we'll simply return H1 and we show like loading data please wait now let's save it let's see what is happening phras this so you're getting immediately that is fine we can also make this one as true also that is also fine now let's see now let's refresh this okay now this is fine now let's create another component here and uh what we can do we'll give this one as uh what we can do we'll give this one as card do jsx and basically we are going to pass the user data let's make this one as user so this will be export default function user so this will receive the user item and we are going to basically return the jsx here all right so first let's go here let's see what we are getting and what are the things that we need so the first thing is that you can see that we are having having this URL or uh this one basically here this is the image that we can use uh what else we need we can also check like when this is created we can also get the followers data here how many are following all right uh what else we need we can also check like how many repos are there uh repo URL like whatever you need basically you'll be able to Al able to check that if this is a type of user or not all right and this is the URL or basically the website that you want to visit so let's start with this one so let's say I want to take this one here so first let me return something here so we going to destructure a our URL then we need the followers then we need how many are following then we need the what else you can check the public repos and also you'll take the URL here so this will be from our user let me just format this all right all right now let's quickly create the uh jsx here now we'll give a class name and let's give this one as user and inside this we'll take a div and we'll take a image here we'll give the source which will be our this this URL here also give a class name aor and we'll give alt which will be your user uh user that will be fine we don't need to specifically say like it's a image that is fine all right now after this we'll take another div and I think we are also having the name that we can take I think so you can see that we are having this name which is null for now that is fine we can also take this login name that is the name that we can check so if the name is null so we render the login one so we'll check the name or the login so here what we will do uh we will basically take a paragraph and we'll render the or or let's do one thing uh we will take a anchor here and we are going to render this if the name is present or else this will render the login and here we are going to give a h rdf so this will basically go to this URL here on click of this so this is the URL you can can see this one let me see what is happening here it is giving this data this we don't need what we going to do we don't need this URL then so we'll give a let's give a template literals here and we'll give https SL github.com and then here we will be able to pass this login data that we are having the reason is because if I show show you here this login is basically my username that we are having here so this we can basically use and I think this will be fine all right let's see what is happening till now so I'll go here and here we'll basically check if the user uh user data if this is not equal to equal to null or else will show null or else we are going to render the user and we'll pass the user which will be my user data all right let's save it and let's see what is happening awesome so you're getting the data here and also once we call the data let's make this one as uh false sorry let's make this username as empty so we set username as empty let's refresh this awesome I'll search something like let's give Tom also okay on click of this also you need to give this so let me just quickly call the same one so on handle submit we can call the same F get user data this will work okay now I'll give S mukarji search we getting we'll give Tom search we getting something let's give some random value let's see what is coming we're getting some random data let's give some name awesome so it's working fine so now we have to start working on the uh styling so what else we can render here we can render there uh when basically this user uh created the data or basically he created this data so this is the created data that we'll be able to get so let me just copy this so go here I think we are already have taken let me check we don't have taken okay so now here what we can do we can create our date so this will our created date which will be our new sorry this will be equal to new date of this created date and after this what we'll do uh let's take after this only we'll take a paragraph and we'll show something user joined on and then here we'll take a template literals and we'll do create a date dog datee so this is the date it will give and after this we'll give a space and here we will do this created date sorry created date do to local string and here we can pass en us all right and after this we'll give the property will'll Pass a month we'll make this one as sort awesome and after this what we can do we can simply take another template literals here and here we are going to pass this created date Dog full year so let's format this let's save it so user join on this is fine let me refresh this so you can see that user joined on 17 March 2019 so this is working fine all right now next what we going to do we'll keep this one very simple we'll take another div all right and you'll render here three more Dives so we'll take one we'll take two and three and here we'll take a paragraph so this will be the public repos all right and we'll take another P so this will be our the number of repos so this will be public repos let's copy this render here for followers and following so this will be followers and this will be following awesome let's save this let's see so we getting the data here let me refresh this let me search like what you going do here I'll give something like this let's search it so we getting some data here okay so this is now done so now let's quickly create uh little bit of a styling we don't need that much styling the only uh objective is to learn the functionality again I'm repeating the same thing but let's give some basic styling actually I think that will be more than enough so what we can do having the Styles let me first import this one in this component also let me remove this console so here we can import our Styles uh sorry this will be styles. CSS all right so the first thing we are having this uh what we are having the gab profile container so we'll copy this so here we'll do margin zero Auto we'll give a width of 90% we'll give Max width of 1,00 PX we'll give padding of 20 PX and we'll do border radius of 8px that's it next I think we are having this input wrapper so let me just copy this so here we'll give display uh let me just check what we are [Music] having okay so we getting some wrong value here let me see what is happening okay this is fine so this is coming in the middle so now let's go back here so you're having this input rapper so what we can do first uh let me just take this input rapper do input and also we'll do input rapper we'll make display as flex and we'll just do a gap of 20px that will be enough okay and here also do justify content Center all right and let's give a margin bottom of 20px so input what we'll do we'll do a padding of 12 PX we'll do font size of 16 PX we do uh border none okay so this is fine next we are having the buttons we do Dot input wrapper of button so what we can do we'll give here padding as 5 PX 12px we'll do border as none uh border radius we'll do 8 PX only we'll give some background color what we can give we can give like let me just give some random color for now and then we'll take it from here let's give something like anything yeah I think this is fine let's give a color of black and also going to give a color of sorry cursor as pointer okay I think this is fine this is more than enough for this now next uh we are having this card so let's go to our card let me just close this so did not cut the user component so you're having the user so copy this so you're having do user will give a padding of 15 PX we'll give a border radius of 10 PX and yeah I think this is fine okay now next uh what we can do uh we are having this image so let me just copy this and here what we'll do we'll give a height of 70 PX we'll give aspect ratio of 1 by 1 and we'll do border radius as 50% awesome let's make it 150 let's see how this is looking okay and for this one we give a border actually we'll give one PX solid awesome so now uh next we are having if I now go here we are having this part which is our name container so we'll give a class we'll give name container and here let's copy this so here we'll do name container we'll do display as flex and we'll do gap of 20px all right and here I think we are having something let me just check here what is happening okay so what we can do we can give a flex of one this is also fine and I think this is cheing the margin I think that is the reason because we're having the P right so what we going do we can give it do name container of P we'll make the margin as 0 PX we'll do font size as 20 PX font weight will do bold this is fine and name container will do justify content Center let's see what is happening okay and also we'll give a margin top of 20px okay if I now click here it should go to this page only and see this is working for fine now let's do one thing we'll use the same structure for this one uh so we'll make the uh this two three also make this one as display Flex so what we can do uh we'll give a class name so we'll give this one as uh profile info something like that so here we'll copy this and then here we'll do div and we'll do display as Flex this one also and we'll do justify content as Center okay and also give a gap of 20px and let's use the same style that we are using here so copy all of this paste it let's save it let's see awesome yeah I think that will be more than enough so let me just sear something else we give something value like okay we are getting the name here let's search for something Richard you can see this is working fine right so that's all for another particular project now this is a kind of a general project where uh what they will do like they will give you some kind of uh API URL they'll tell you that simply pH the data create a usable component just like we have created this user component you can also give this on name as a card doesn't matter and also you have to do a little bit of styling so that's all for this particular project let's move on to the next one all right so this is another very very important questions and that this is called search autocomplete now in interview most of the times they will give you some dummy data and from that data only you have to filter and show the auto complete but for now in this project what we're going to do will be fetching the list of users from API and then based on that you can see that you'll be getting the data here so if I update this will be updated all right so if I click here this is selected if I again remove this will be updated so this is another very simple project that we are going to build so let's see how we are going to implement this one all right everyone so let's start working on our search autocomplete component so for this one I'm going to use this dumy Json uh API so the first thing is that what we are going to do now again uh the question will be something like this either uh they will give you some dummy set of array of data and then based on that you have to basically search and show the options or they will say that face the data store the data in a state and then whenever you will type something you have to basically filter from that data so you're going to do the complex part so we'll go to a docs let me close this now let's go to which one we can do we do this get all users anything is fine like this is just for example all right so now uh let me first quickly create another components we'll give this one as search autocomplete we'll give search autocomplete with API all right now inside this we'll do index. jsx and let me close everything else so the first thing we quickly create this component so this will be function and this will be search auto complete all right now inside this we are going to return return so we will return return uh first we'll take a class name so this will be Search autoc complete container and here uh we will take one input simple input then we'll give a name which will be search uh because we are calling the users API will give search users uh then we'll be having a value onchange that we are going to do but for now we give a placeholder uh it will be search users search users here and also give a class name but that is also fine this will work now now first thing there are so many states we need to take so we'll do one by one first we'll need a loading State again I always told you that we should always show the loading uh State while calling any kind of API so this will be US state of false then we are having the users or basically our data so we'll do this on a set users and use state of Mt all right now first time the page load we are going to face the data and then we'll be storing in this users so we take a use effect for now we have done so many times now we'll be like this will be like a piece of cake for you very very easy just take a method so this will be Fage list uh list of users and this will be async function Fage list of of users uh let's take a tri block here if you want you can like it's always better to do these things uh we can simply uh let's do one thing let's take another state here so this will be const error set error which will be used of uh null so here we are going to log this error first and we'll do set eror as this error all right so this is fine now here we are going to call the API so this will be const response uh which will be equal to AIT fet so let me just take this all right and this will be our data which will be AIT response do [Music] Json and let's see what we are getting in this data let's save it uh let's go to our app.js let's let me just comment it out and we'll create another one and this will be our search auto complete so this will be search auto complete let's save it now let's go all right so we are getting object and here we are getting users so we can check if the user length is true so we can go here and we can check that if data and and data. users and and data. users. length if this is true so set users will be data. users we'll do set loading as false and also do set error as uh null and here we are going to make the set loading as two and if there are any error then also you can make the set loading as false that's it all right so this is about the getting the data so now what we need to do whenever we will be typing something we have to fet the data from this list of users correct now we can do another thing and that is if you go here let's say we want to uh filter based on only first name so instead of setting the full object we can make this one much simpler so we'll do data. user. map so this will be user item and we'll just take uh store this user item. first name instead of storing all of this so now let me just log this and let's see what we getting in this users all right so we are getting all of this you can see that we are getting all the first name right right so now we need to basically implement the uh on change so for this one the first thing is that what we are going to do we will take another state and this will be our search param and set search param and this will be used state of empty so here we are going to uh give the value as search Pam and now we need to basically check that when we want to S the uh drop down to the user drop down means whenever we'll be typing something if there are any match so you have to show some kind of drop down here so for this one we will take another state and this will be const so uh drop down set so uh drop down and this will be equal to UST state of false all right so now what we are going to do first we'll be doing the on change so we'll take on change let me format this so we'll take on change and this will be handle uh change something like that and now let's quickly create this method so this will be handle change all right now here first we'll be getting the event so what we can do we can take the query all right so which will be the first thing is that query will be our this search Pam that we are having here that is fine but we can do something like this so we'll take a query first let's make this event sorry we'll do event. Target do value that we'll be receiving and we'll make this on to two lower case all right and then we'll do set search Pam which will be this this query that we are setting now here what we are going to do we'll check if user is typing at least two characters at least two they need to type so we do if the quiry sorry if the quiry is greater than one so then we want to do something so what we are going to do again we will set take another state which will be our filtered users and say filtered users should be US state of empty obviously you can directly also uh like manipulate this uh method here but I think it is always better to take another separate State here now here we'll do const filtered data now this will be this users that we are having so this will be users and then if this users. length if this is true then only we want to do this will be empty now here what we going to do we do users do filter so it will filter will take item now here it will do this item dot to lowercase then we are going to check the index of this quy that we are typing that means in this item whether this quy is present or not as simple as that index of this query that we are typing here if this is greater than minus1 that means that is basically present so this is this will basically give us our filtered data now we'll do set filtered user will be our filtered data and we'll do so drop down as true correct else the so dropdown will be false and I think that is fine now you'll see what will happen happen uh let me just do one thing I think we are logging here let me just log users and then we'll uh do filtered users and now let me just go there so you're getting ter you can see that we are getting two data now I'll search for T okay I think we are getting some ER so drop down is not a function I think we have done wrong so this will be set so drop down okay so you can see now you type here e r okay so you're not getting anything okay let's see what exactly we are doing here in the code so getting the query you're setting this part is fine oh sorry we need to do query. length now this would work and now let me refres this so do t e we got two result you can see here if I give like let's give R still two R now I'll give y so we are getting only one if I remove we are getting two so this is working fine so now what we can do simply if this is true that means so drop down is true so we want to S another component so I'll create another component here I'll give this name as suggests. jsx and here I'll look export default function and this will be suggestions now here what we are going to do will be receiving the data from the parent component and then we are going to return simple ul and here we'll do this data Dot length sorry first we'll check if the data and and data do length if this is true or else this will be null and here we are going to do data do map so this will be our item and we are going to Simply return Ai and in the key we'll render this we'll take the index here so we take the index and we're going to render the item here that's it all right now let's save it now let's go back and here we're going to do if this s drop down is true and then I want to render the suggestions and here you have to pass the data which will be our filtered users I hope you're getting now this is a reusable component now you will be obviously will be able to pass all of this as a prop also from another parent component and you'll be able to easily manage that now another thing we can do and and that is here we can show something like if loading is true so uh we'll do another thing here instead of here because we're calling the API so we need to manage this loading so we'll do loading data please wait or else we want to render this item so let's format this now let's see what is happening so we go here see we are already getting the result here so I'll type something te we are getting r r y we are getting only one now let me give something else we'll give M sorry m i we getting one what else we are having to let's see M A we are having so we'll give M A we getting four I'll give C we getting only one remove R and you can see that this is working fine all right I I think till this part this is fine so now what exactly we want to do so whenever we are typing something here let's say if I click something so I want to set that value here let's see how we are going to do that so to do this one we'll take another handle click method so that I'm going to create this will be handle click so this method I'm going to receive in this component all right and here what we can do simply uh we will basically take a on click here and you'll pass this handle click here all right so this is what we can do now here if I now format this let's save it let's go here let's quickly create this method so we'll do function handle click we get event all right and now what we can do let me just log this e do Target do inner text uh sorry let's make this an event okay so now let's see what is happening now if I now go back and let me first refresh this so I'll type something let's click here okay I think we are getting error in a text of undefined sorry this will be Target so now let's click here so you're getting this St and you can see that we are getting the value here now this is pretty simp simple what we can do you can make this Set uh set so drop down this will be false we don't want to so and then we want to set the search param which will be this event. target. inner text so copy this and also we'll make the set filtered users as empty that's it now let's save it now let's see Let me refresh this so do te now click here we getting the value all right I now see this is working fine if I click here you're getting this one if I remove one again remove remove we are getting two remove all of this we'll do m a click marel and this is coming fine and you can see that the functionality is working fine I'll see one thing that I haven't done any CSS in this particular project because I think there is no point because here for this particular project from this point of view they will not ask you to do much CSS like this is kind of a functionality wise project so even if you done till this part that will be more than enough so what we have done we have basically called the API and based on that we stored the data in somewhere and then from that data we are filtering and we are s now if they told you to do CSS I think for now till these many project that you have done I think you do have much idea you'll be able to do it by yourself so I think for now for this particular project this is fine let's move on to the next one all right so I think I don't have to explain this one that why we are doing this I know that you all know that Tik Tac to is one of the most asked interview questions in product based companies and most of the times they will say that you can't use any framework but that also we going to do in next videos when we will be implementing all of this in simple vanes but sometime companies like Amazon or atasan they will tell you that okay you can use any framework that you like so obviously we will be able to implement this this one so here we'll show that the user that will be winning and if no one is winning this is a draw we'll be able to restart and let's say how it will work so let's say if I do here you can see winner is O and if I let's say if I do here for X so you can see that winner is X please restart the game and this also will be implementing each and everything from scratch so let's see how we are going to do this one all right everyone so let's get start working on this uh tic TCT to uh so what we'll do let's create a component first sorry the folder first so TI Tac to so inside this we'll create our index. jsx and we'll do styles. CSS all right so here we'll do export default function ttac to so the first thing is that what we are going to do we need to basically create the board now as I already mentioned in the introductory video of this particular like this is a very very important questions that you actually will get in your interview most of the times like companies like Amazon Adobe Microsoft even Atlas and also ask uh this question so you should prepare it very carefully and here actually you have to explain each and everything what you are doing now here the first thing is let's return our div so here I'll give a class name of uh TI tcto container all right and here we need to C create our rows so because we are having three rows so if you see here how this logic will works we're having 0 1 2 right let's say 3 4 uh 3 4 5 and then let's say 6 7 and 8 So based on that you have to create these three rows so we having one row then we'll create two and three and I'll give this one as name as row let's copy this and we'll paste it here same here let's format this let me just comment it out all right so you're having three rows now for each and every row will be having three squares so one will be for this one this one this one same for row second three and then last row three so here uh what we can do we can simply create another component we can create in this file only and we'll give this one name as Square all right and for now uh we'll simply return a button Buton here and we are going to render some value all right so this value it will basically receive from this parent component which is this component so it will receive a value for now we'll just we don't have any value but we are uh going to implement that so here inside of this uh we will be basically creating our each and every Square so what we can do simply we can call this Square this component here so this component that we are having and then we can paste it three times same we can do it for here and then we can do it for here so total we are having total 9 squares all right now first let's uh create the CSS first so first what we are going to do uh first we'll take our uh let me just copy the class name so we are having this one so we'll do tick TCT to container and then we'll do after so we'll do clear both uh we'll do content as empty and we'll do a display of table all right then inside this we are having each and every squats so let me just go here let's give a class name here so we give a class name of square uh sorry this will be U so this is our each and every individual squares so let's go here and then we'll do dot Square so here for we'll do a border of 1 PX solid red then we'll do a float of left we'll do a font size of 40 PX we'll do a height of 100 PX uh what else we'll do padding of 0 PX we'll do text align as Center and we'll do width as 100 PX that's it also Let's uh use some margins we'll do a margin in left sorry margin right of Min -1 PX and we'll do a margin top of Min -1 PX all right that's it and also let's use a cursor pointer so now let me just import it so we do import styles. CSS and then we are going to use this one here so let me just comment it out so we'll use another component so this will be our Tic Tac tool and here I'll import Tic Tac to let's save it and let's see what is happening here so if I now go back all right so you can see that it's breaking that is fine we have to give some styling here so what we can do if I go here so you're having this one each and every door so here we can give a display of flex and we'll do Flex direction as column and that's it this will work all right so you can see the each and every row you are having and let's give a justify content Cent sorry not justify content we have to give the Align item as Center and we can give a margin top of for example 100 PX so let me copy this so this is our container so we'll go to our container and we'll just paste it here let's see awesome so we having here so I think for now this will be more than enough for the styling part but now here the main thing is that you have to basically uh explain the functionality in the interview that what you are doing and how why you are doing that so let's start uh one by one so the first thing is that you can see how it will work so this game is basically whenever you'll click on any of the squares so first if I am uh giving the cross first so next time you have to give a zero so this is how it will work zero or O whatever you work you can say so it will be like toggling again if I click it will be cross again it will be zero so that means we have to first decide that uh from which we want to start either we can start with a cross or we can start with a zero and also for each and every squares there will be some space or some State we need to take so that we can fill that letter whenever we'll be clicking we have to let's say if I click here the first one with cross so I have to set a square value for this particular Square uh for this particular element in the state so that means we for now we need two state so one will be our squares and this will be set squares I think I'm doing some spelling wrong q a r s so this will be UA and here what we can do we can do a u state of so we'll take array of nine because we are having nine uh uh Square basically and we are going to fill this one with empty string that means currently we have empty so if I now show you what is happening in this so it show you square so you'll understand I think something is wrong here let me just check what is happening I think we can remove this one let me just check sorry it is not taking what is happening oh see this is the reason so I think we don't need to give this one we can remove this part from here now let's see yes so this is fine that is the reason okay so now you see if I go to console we are having 1 2 3 4 5 6 7 89 9 with empty now let's say if I click here that means I clicked on the Zero index for example so I have to fill this one with that if I click cross it will be cross here and then next let's say I clicked on this one so this is 0 1 2 3 4 with zero so four element will be uh a zero like that so like that you have to fill all the nine elements if there is is a winner so simply return the winner and there will be a restart button if all the elements are filled and no one wins that means it's a draw so for this one what we can do we can take another state and this will be const we do is X turn that means if it is X turn or it's a o turn Set uh do set is X turn and this will be used state of true so that means first time we'll do start with X all right now next what we are going to do uh here you can see that we have to basically take a on click each and every time we'll be clicking so here first I'll receive a on click so it will receive on click which will be here on click so this will be on click which will be this on click that will be receiving and then you have to pass the on click everywhere and here I'll take a handle click method and for first one I have to pass zero so this will be zero second one I have to pass one so this will be one sorry this will be one this will be two then we are having these three and at the end we having this three so this will be three this will be four this will be five this will be six 7 and this will be eight so for each and every Square we are having kind of identifier or basically the index so now we going to create our function handle click all right so here it will receive the gate current Square so here what we will simply do we'll take this square that we are having or let's do one thing let's copy this copy squares so that will not directly mutate the uh state which will be uh these squares and here we'll do simply copy squares of this gate current Square so we'll check that if it is X turn so we'll render X or else it will be o I hope you're getting so we check if it is X turn so we cross a X or else this will be a o and then what you need to do first you have to basically uh reverse this so if it is X means now it is false because this will be not o turn if it is O turn then again it will be true so do set is xter will be not equal to is ex turn I hope you're getting this and then you have to set the squares which will be this copy squares that's it now what you need to do you have to pass the value here you can see we are getting this value so this we can simply pass so here we'll take a value and this value will be what we can do we can simply pass so it will be squares of zero so copy this paste it here if you want you can also make this on Dynamic you can create a simple function and then you can pass these values dynamically so this is 0 1 2 then it will be three 4 5 6 7 and 8 now let's save it and let's see what is happening so see if I click here coming X again if I click here now this is o x o x o now you see one thing will happen see I clicked all of this now let's see if I click here again see it is getting changed to O So that means we need to check if this square is already full or means already there is a value so we no need to change the value we have to return and also another thing we need to check and that is uh that we are going to do that if there is a winner or basically if there is a draw then also we don't want to render anything so first we'll simply check here that that if this copy squares of this gate current index uh sorry G current square if there is a value so we'll simply return from here all right so now let's see what is happening let's save it so now I refresh this so we render some value zero and now see if I click here again nothing is happening because we don't want to change the value here and this is as expected correct so this is working fine now now what we need to do so this handle click part we actually got now we have to calculate the winner that how we are going to calculate so now you see one thing that how winner is calculated so if all of this actually pattern is true so I'll show you so first I'll create another function so this will be function get winner something like that and here I'll pass this squares uh it will get the squares as argument so how we have to do we have to basically first take the winning patterns so winning patterns will be this 012 I'll show you why if all three are X or O So this this and this one so this is one pattern then we are having 3 4 5 6 7 8 then we having 03 6 means this one horizontally 147 258 then we are also having this one diagonally 048 and 642 so these all will be winning patternss and these also you have to explain in your interview or whatever you are doing 3 4 5 then we are having 6 7 8 uh then we are having 25 uh 8 I think 258 258 then we are having 048 then we are having two sorry 2 4 6 and also we are having 03 6 and we are having 1 4 7 so we having Total 1 2 3 4 5 6 7 8 that's it so these all will be your winning patterns so now what we'll do we'll simply take a fall Loop let I = to 0 I less than winning patterns. length and i++ so now we can simply check first we'll dist structure this three values so for each and every one will be a value so this is let's say a value B value and C value or let's take this one as like X Y and Z so this will be winning patterns of I now we'll simply check if the squares of X and and squares of X is equal to equal to squares of Y and then squares of X is equal to equal to squares of Zed so what we are doing here so that means we are checking if this the value that we are having here let's say we are having X here so this is x value and here also we are having X so that mean this is equal to this and also here also we having X that mean this also equal to this so all three are of either X or either y sorry either o or either X so that means this is a winning pattern so this is exactly what we are doing here if x is equal y or xal to Z so that means we are having a winner so we going to return this squares of X that's it else we we will simply return here uh let's do something like this after this we are going to return return null sorry what I'm doing so this will be return return null so this will basically calculate uh the winner that's it so now what we going to do we'll simply take a use effect okay and here I'll keep this squares and the e extern as a dependency now another thing we need to check here if there is a winner that means if this is true so we don't want to change anything so that means we don't want to change any value if there is a winner so here also we need to give this condition that if there is a winner so what we can do simply you can pass this uh gate winner of this copy squares if this is is true orse or else if there is a value that means we want to return return all right now we have taken the use effect so here what we are going to do I'll take another state here to maintain the state uh status so we'll take a status and this will be set status and this will be US state of we'll keep this one as empty so here uh we'll check that if there is a winner or that means first we'll do the not one so if there is not a winner so look get winner of these squares that means if there is a no winner and and if squares do every sorry squares. every if every square is full that means it's a draw because see in this position you can see X is a winner or this part because these three are same these three are same but let's say there is a different scenario for example we give x 0 x we're having zero then x 0 x 0 and x so you can see here we don't have any winner correct and but all the squares are full so that means this is a draw in this scenario so this is what we are doing that if every item is not empty if item is not equal toal to empty so we'll do something like set status and we'll render here this is a draw this is a draw please uh please restart so do please restart the game all right else if there is a winner so if this get winner of this square if this is true so we'll do set status sorry we'll do set status so set status will be so here we'll do winner is sorry this will be winner is so we'll just render this gate winner of squares because here we are returning that value all right else if there is no winner that means the game is not a draw and also there is a no winner so either it will be a x turn or Y turn so here we'll do set status so this will be so we'll show like next player uh next player is uh so here we'll render if it is X turn so it will be X or it will be o and I think we are done so now let's see if I want to render here we'll take H1 and we'll render the status let's see what is happening now so you can see next PL is X click here o click here o x o now notice what will happen if I click here winner is X you're not able to click or do anything here correct so it's that means that if there is a winner you don't want to do so we can restart the game so here also you can do something like winner is this please uh restart the game all right now we will have a button simple and we'll keep this one as restart so we'll do on click we'll do handle restart so here we'll create method this will be handle restart so what we need to do on the restart first we have to make this set is xter is true and then we'll do set squares so again we'll uh make this array dot array of nine do fill with empty that's it now let's save it let's click on next player is X click here click here winner is O please restart the game not be able to restart now I'll do x o x x sorry I'm doing let me restart again 0 x 0 x 0 x zero now if I click here let's see what is the issue here so you're doing Square dot not equal mty see we are doing set Square this will be set status now let's see okay so we'll do x o x o x o x o and now if I click again so this is a draw please restart the game I'll not be able to click anything restart if I do X x o y winner ISO if I do for X let's see winner is X let me check another time if it's a draw so this is a draw yeah I think that's all for this particular project I hope that this will definitely help you and also I break down each and every step why I'm doing that so this is the same that you can implement in your project or wherever you want to implement the same so that's all for this particular project let's move on to the next one all right now this is a another new uh like I'm not sure whether you know this particular uh project and that is called the feature flag so how this basically works so let's say you are creating a production level application where you're having so many application and for a particular year of time let's say in Christmas you will show some special component in your website so instead of changing the code directly how it will work so you will be basically calling a API from from a real AP obviously and then you'll be basically getting the list of key value pairs that which features you want to enable and which features you want to disable for that particular time and whatever Flags you are getting as enable from the API those only you want to render so you see that obviously we don't have any real API but the implementation will be exactly same so for this one we are going to use text so here you can see that we'll be having some features let's say I want to enable the light and dark theme I want to enable the Tic Tac tool I want to enable the random color generator accordion and Tree View and the tabs So based on that it will automatically render all of these and the functionality will definitely work for each and every separate component so you can see that all right so this is exactly what we are going to build now most of the times like this is obviously not a very simple one uh like if you're giving an interview and they will give you like 30 minutes of time you'll not be able to implement that F but let's say there are more than 1 hour or two hours of time so they might ask you these particular questions and most of the times they will again ask you this one to implement in vanilla JS simply but you will be able to sometimes they will allow you to implement in reactjs also so let's see how we are going to implement this uh so this is not a simple one this is kind you can say like this is a middle level uh project that we'll be implementing all right everyone so let's start working on the feature flag implementation now this is a very very important questions that you might get faced in your interview so as I already discussed that what exactly we are going to do so let's quickly start implementing so what I'm going to do uh inside this uh components folder let's create another folder and sorry I think we have to give here so inside components we'll give this one name as feature flag now for this one what we are going to do we will be basically using a context now in a real life project when you will be basically creating this feature most of the times you need some kind of Global Management something like Redux or context whatever you are using like just and some other uh State Management library that doesn't matter but at the end the concept will be exactly same so inside this what I'm going to do I'll create a folder and I'll give this on name as context sorry this will be a folder and this will be context and inside this I'm create index. jsx all right now this is inside our context now for this particular feature flag we need also our index. jsx and also we need a data because for this one we will be using a dummy data for now because most of the times in interview also you will get this dummy data and I'll discuss why so now the first thing is that we'll start with this data now how it will work let's say you are having some feature in your application for example if I give some very common example like let's say dark and uh light and dark toggle functionality in your uh application you are having various kind of charts or some kind of like let's say you are having a banner and that Banner you want to display in some particular time of your year let's say Christmas uh Christmas Banner so what will happen we using this feature flag you will be basically calling a feature flag API and then that API will give you the response and in that response you will be having that what are the features that you want to enable and what are the features that you want want to disable so if you do this kind of thing what will happen you don't have to manually change anything in the code based on your API response you will be able to understand that okay I need to enable the Christmas Banner so we'll be basically getting the data from the API all right so let's see how we are going to implement this all right so for now you can see that we are already having so many components let's say we want to enable our light and dark mode and also we want to enable this QR code whatever we want to enable so for this let's see we're getting a dummy response so this will be our dummy API response now obviously this response you'll be getting from your API for now we'll be using a dummy API response doesn't matter you just have to call the API and you have to save the data now here what I'm going to do I'll show something like so light and dark mode so this is each and every actually is the key and this is the value that you want to show this feature in your website or not let's we having dark and light and dark mode then we are having so Tick Tac to board this is also true we'll take five uh what else we can take we'll take this uh random color so random color generator this will be true and let's take another two we'll take so as accordian we'll make this one as let's say false and also let's make this one also false and let's take another last one which one we can take we'll take this tree view so Tre View and this will be let's say true so this is the key value pairs that you will be receiving from your API now I will be basically creating a function so let's make this on a function fetch uh or let's do feature Flags data service call so this will return return up new promise sorry this will be a promise so we'll take resolve reject and what I'm going to do for now because we are already having a dumy AP response I'll check if the dumy AP response is present so I'll just do a set timeout sorry we'll do set timeout and we'll resolve this dummy API response that we are having will give a time of 500 milliseconds else we'll just uh reject and we'll show something like some error occurred please try again that's it and let's do export default of this feature flag data service called all right so this is the let's say AP response you are having now we will go to our context and let's create our context so here I'm going to first we have to create the context so here I'll create a context so this will be export const and I'll give this one as feature Flags context which will be create context of null now let's create our state so we'll do export default function this will be feature flag Global state so this will receive the children of components and here you are going to return this feature flag context do provider and we're going to get the children here for now we also have to pass a value so we'll pass a empty object all right so this is all about the context that we need so now what we basically need to do so in this context we will be calling the API and then we will be passing that uh how many flags that are enabled so let's say this true all all the trues are enabled and all the false are disabled so if this is enabled so I I want to show this one in my UI all right so let's quickly do one thing let's quickly create our component so this is our main component which will be export default function this is our feature Flags something like that and here I want to just return div and let's return return H1 and this will be your feature flags all right now generally whenever we will use any kind of context we should always use this one in our index but for now this is fine because we want to individually use this one in this particular component only but later if you're doing in the global level always wrap this index .js or basically this app inside your uh this uh this app you have to wrap inside this feature flag all right so now let's go to app.js and I'm going to comment out this part let's take another comment and this will be our feature flag implementation so here I'm going to import our first thing what we need to do we have to import our feature flag Global State because we have to wrap this component in inside our uh context so this will be our main uh context wrapper and this feature flag will be our component I hope you're getting so now let's format and save this all right so we are getting feature Flags so now what we need to do first we will call the API so we'll go to our context we'll take two state so one will uh one will be loading and set loading which will be US state of false and if you see for each and every project I'm always taking this loading State and it is always a good practice to Showcase your user that whenever you doing some asynchronous activity you should always show some kind of loading St so that it will be very very easy to understand for them and also I'm going to take the enabled flags that will be received from the API and this will be set enabled flag TS and we'll give this one as use state of null now let's take a empty object all right now what we'll do we'll simply take a use effect and here on page load we're going to do here Fage uh feature Flags so this this will be as sync method so here I'm going to do async function fet feature Flags so here I'm going to do a try catch block so here I'm just uh do a log for now and also let's throw some error all this error sorry so here what do we'll do const response which will be AIT this will be feature flag data service call now here you need to do the main your original service call all right now here you will be getting the response so if I know log this response let's see what we are getting let's format this let's save it so we getting object and inside this we getting all the keys now based on these Keys you have to basically render the components here so now what you can do you can do here set enabled Flags this will be equal to response and here we are going to pass this enabled Flags so this will be our value that's it now this is a very very simple so so if I now go here so we'll basically render a components so we'll take const components to render which will be array and inside this we'll take our key now you'll see this key is basically this key that we are having so having five keys so I'll paste it here so this will be our first one now for this one I have to use the component so this this will be our light and dark mode I hope you're getting then you'll copy this and paste it five times we'll do so Tic Tac board so this will be our Tic Tac to then we are having so random color this will be our random color then we are having so accordion this will be our accordion and at then we are having the tree View so this will be our uh sorry this will be our tree view that's it now let me remove this now what we need to do so we will basically get the enable flags from the API so the first thing is that we'll destructure this one from use context of we are having this feature flag context so this will give you this enable flags that you are passing here so this state also you don't manage the loading state so let me just do a loading state of true and here we'll make the set loading as false if there are any error we'll also set loading as false so you have to do it here before this and here we'll pass the loading so these two we are going to receive from our context so we'll paste it here so now uh we'll basically so if there are any loading so we simply return here div or let's make this one as H1 so this will be loading uh data please wait let's save it let's see what is happening it will be very fast I think you'll not be able to see see this all right so this is fine so now what we need to do we have to basically check that how many flags are enabled based on that we have to check based on this key we will render that particular component so what we can do we can simply do here component to render do map and this will be our component item and here we'll simply check we'll create a function here so let's quickly create this function so this will function check enabled flags and here it will receive the G current uh sorry this will be G current key so here we'll simply return this enabled flags of this get current key so now what this is object so if we are getting a current key of let's say sort sort review so it will check that if this sort review is true or false if it is true so render it or else not so now we'll do check enable flags of component item. key if this is true so we'll do component item dot component we want to render or else this will be null now see what will happen if I now save this now go back see now we getting all the components here so first we are getting Tic Tac to I think this is the first one sorry I think we having so and light and because this is false this is correct then we are having this one and this all definitely will work you can see everything is working and I think this Tre view is not not working the reason is I think we have to pass the data so here we have to pass the data data what is the name let me just check so this is menus so we have to pass the menus which will be our menus from treeview that is the reason let me just save it now let's see okay now this is coming now see what will happen now let's say uh in your API response now this so accordion is also coming true and this so dark mode is also coming true now if I now save this now see we getting all of these so we getting this one we also getting tic Taco random color generator and here you are also getting the accordion all right I think there are some styling issue but that is fine because it is mismatching I think multiple component style because of the naming but at the end functionality is working so you can see that everything is working fine yep now let's say if you want to add a new component so obviously this key needs to be updated and based on that you have to also have to reender this component ORS this will not work for example let's say we want to render the which one we'll do I'm not sure we'll do tab tabs one so we add another key here so we'll do so tabs and here we'll do component and this will be our tab test and here I'll add these so tabs as true if I now save it now let's see so it's scroll down you can see we are getting the tabs component also all right so this is basically the concept behind this feature flag implementation obviously sometimes they will tell you not to use any kind of framework you have to do it in vanilla JS but as I already mentioned that in later videos I will be creating all of these projects in vanila JS also so that's all for this particular project let's move on to the next one all right so next three projects will be three custom Hooks and one will be the use fet so you can see that so for this one we'll be creating a custom hook where you will be like able to pass a URL customizable and all the options and based on that you'll be getting the data next will be uh like this one so which is basically outside click so here you can see that we are having some data and if I click outside that data is basically hidden so this concept you can also Implement any kind of model so let's say uh in interview they'll ask you that okay you create a model and on outside click you have to close the model so this is basically the same hook that we are going to create and at the end we'll be creating this use window resize hook so if I let's say try to resize this one so you see that this width will be basically and the height will be changed so this is another one that we are going to build so we'll be creating most uh mainly three hook one is use f use on click outside and then use window resize or you can also say this one as use responsive all right everyone so let's start implementing the first custom hook and that is use fet although this is not the first custom hook I think we have already implemented another one and that is use local storage while implementing the that light and dark component but this is also very very important I think I already disc discuss multiple times whenever you'll give any interview most of the times they will ask you like create any any custom hook that you know now one of the most popular one is use fetch that basically is used to fetch any kind of data from API URL and that has to be customizable so that we are going to create and also you'll be creating two more one will be use on click outside so let's see you are having a model and on click of outside you want to close the model or anything and the third will be the use responsive or use window size whatever you want to tell so let's start with our first one so I'll just close everything else and also let me just comment out this one all right so we having first custom hook and that is use fetch custom hook so let me just close everything else so here I'll create another folder and this will be my use fetch so here I want to create two file one will be my use fetch hook that will be my index. jsx and second one will be the testing so I'll give this one as test. jsx all right so now whenever we'll Implement any custom the first question will be a to quy like what are the requirements what are the parameters that you need to pass what are the state that you need to manage and lot of other things so here let's say in this use fet hook you will be receiving for now we'll keep this one very very simple Le we'll just receive some URL and also let's say you want to receive some options and you want to me you want to manage a loading state that is absolutely mandatory and also you have to maintain a error state so let's see how we are going to do that so the first thing is that we have we do export default function we have to give this on name as use so this is how a hooks name works I think you already aware sorry so we'll give this one as a use fet this will receive a URL and also this will receive some optional uh options all right so now here as I already told you to manage three states so one will be our data so this will be data set data and this will be use state of null then we are having a loading state so you give loading or let's say pending whatever you give this on pending we have given so much loading loading everywhere so we'll give this one as false and also we'll take another state and that will be our error State uh we'll do error set error and this is also will be used state of null all right so now what we need to do basically we are getting this URL so this URL will be our dependency So based on this URL we need to page the data so here what you can do simply create a use effect and then you give this URL as a dependency and here we are going to create a method so this will be our Fage data all right so now here we will create our function so this will be as Inc function Fage data so here the first thing is that we'll take a try and we'll take a catch so this will be error so we'll just uh render the set error that this will take template literals and we'll pass this error and then we'll show some we'll show some error ORD all right and obviously we have to make the Set uh pending as false that's it now let's copy this and here we are going to make also this one as true now here we'll do const response this will be AIT fet so fet will take the URL and then we can pass this option that we are having here that's it so here now we we can check if this response do okay is false so we'll uh basically throw a new error and we'll take this response for now and we have to do uh the dot response. status text all right and then here we'll do const result which will be AIT response. Json so this will give you the result and after that we are going to just call the set data this is actually simple as how we have usually do a API call result and we are going to make the set error uh sorry set error as null and also we'll do set pending as false that's it so this will now just do the automatic fetching call and now as simple as that we just have to return the data the error and the pending State that's it so that means this all the data you are returning from this uh your custom hook this custom hook now you will be able to use throughout the application it doesn't matter all right obviously there are lot of things that you can do like you can manage this one on some button click like anything like on some on change event on some call back like so many things that you can do but for now let's keep this one very simple so now let's say we want to use this one in this uh test component so I'll just quickly create this component so this will be export default function and this will be use f hook test all right so here let's keep this one very very simple so we just R A div and we'll give this on H1 and this will be our use fet hook now here first thing is that we have to take the uh output from the hook but how we are going to get that before that we have to pass this input right until unless we pass the URL it doesn't work so that is the reason we'll do const then we are having data error so basically we destructuring and the pending state so this we are going to get it from use Fage now you see it will take URL now as for uh I remember I think we are using some URL in this scroll indicator I think we can use the same uh let me just check uh I think we're using somewh dummy Json yes so here we can copy this and then we can pass this one and this will pass this one as empty object that is fine all right so that means we are passing this input to this hook and based on that we are returning the data error and the pending let's see what is happening here now so we un log our error data and pending let's save it let's go to our app.js and here I'm going to render use f hook test now let's save it all right now let's go to our inspect so we getting null so that means there is no error first time this is false pending then it is true now we getting the data so you can see that we getting the products here so this is the things that we need to render so now this is very simple so we can just simply go to our test component and here we can simply check if the pending is true so we'll basically render some h2 tag H3 that pending so we'll do pending please wait or else this will be null and then here we can basically check if the data and and data. products and and data. products. length if this is true so we'll do data. products. map this will be product item and here I'll simply return some P for now and I'll return return product item. title and we also give some key which will be product item. key if there is nothing so we'll just render null find now format this let me just remove this one let's save it let's see what is happening awesome so now we getting the data here if I now refresh this pending please wait and then we are having the data so this is you have to basically how you need to do now there is another thing that you can do you can see that we are explicit uh now here another thing we can do you can see that we are explicitly using this data do products if you want you can basically mention that what key you want from this data and based on that also you will be able to uh change this functionality here but for interview purpose this is more than enough that you can do but one thing I'll suggest to do and that is this method that you are having try to implement the same method on button click so let's say you having a button in this component and whenever you will click on this button you want to call the same uh hook and based on that you want to get the data another thing I forgot so if there are any error so we'll render this A3 and we'll render this error here or else this will be null that's it all right so I think that's all for this particular project let's move on to the next one so in the next one we'll be creating a another two more hooks uh one will be used on click outside and one will be use window size so let's start working on those all right everyone so let's Implement our second hook and this will be used on click outside something like that so let's say you are having some content and whenever you will be clicking outside of that content you have to hide or basically you have to remove that particular content from the from the screen or basically the Dom so here uh what we are going to do so most of the times you'll face these uh questions in the interview that you are having a model and then let's say on click of outside of that particular model content you want to hide that model how you're going to do that okay so here I'll create another one and this will be use outside click and let's create our index. jsx and then we are having test. jsx so the first thing is that we'll create this test component so this will be export default function so this will be function this will be use onclick outside teste and here let's say uh what we're going to do is simply return some div sorry we'll return a div and here I'm going to first uh take a state and this will be like so content now here I'm doing a simple content it doesn't matter if in the interview they're telling you that you have to create a model simply create a model and apply the exactly same logic it doesn't matter and here we'll do set so content so here we are having used state of false so now we are going to check if this so content is true so I want to do something or else I'll rer a button and here I'll do so content all right and here we'll take on click and we'll simply make this set sorry this will be set so content we'll do set so content as uh we'll make this one as true now here in this content uh let's say we are having a H1 uh this is a random content all right and then we'll take a paragraph please click outside of this to close this it won't close if you click inside of this content something like that so this is the content now in place of this one if you want to render a model you can do that let's save it let's go to our app.js and here I'm going to create another content uh component so this will be use onclick outside hook test all right so here we are having use out on click outside test let's save this let's go so click here we are getting this one now what will happen this is the content so each and every content will have a reference so that ref that we are going to use all right so what will happen whenever I'll click on the outside so here anywhere I want to hide this and again I want to show the button and this will be a general concept so you are going to create a model which will take a reference and Handler function and based on that it will basically detect that if we are clicking inside of the ref of that particular content so it will on close if we are clicking outside then obviously it will close so let's see how we are going to implement that so go to our hook and here I'll give this one name as export default function and this will be use outside click so as I already told you this will receive a reference and also it will receive a Handler function all right now here what you're going to do you'll simply take a use effect and we're going to pass this Handler and the ref as a dependency because based on this ra only we are going to do certain functionality all right now here this is very very important we need to create a function which will be something like uh listener we can give so this will be a listener that we are going to create which will give you a event now what we are going to check if so each and every reference so for example each and every Dom element will have a reference and that reference will give you a current property so that I'm going to show you so we are going to check if it is not equal to this ref do current or else if this ref sorry if this ref. current. contents this event. target so we going to return all right so here we'll simply return or else what we are going to do we'll call this Handler that we are passing and we'll pass this event here so this event and now what we going to do we have to add a listener to this so what we can do simply we can take our document sorry we can take document. add event listeners so here we'll do mouse down and we're going to pass this listener that we have created same we have to do it for document do add event listener and we'll do a touch start and we'll pass the same listener all right that's it now what will happen this will do the functionality it will basically check based on this current ref property which will give you this current property from this ref but here one very very important thing whenever this component will unmount so in the call back we are going to remove this uh event listeners we'll do document do remove listener and we'll do the mouse down and we'll remove this listener from here and same we'll do for document. remove event listener we'll do touch start and we are going to remove this listener that's it let's save it so now this you need to check it here so how we are going to do that so the first thing very very important let me close this so first thing is that we have to create a ref so we do a ref which we are going to do using use re I'm sure that you already have some idea and this ra you need to pass it to a Dom element now because we are checking this one based on this particular content so you're going to pass this ra here I hope you're getting so now this ra will give you ra do current property now because this is a custom hook hooks are always should be called on the top of the top of this particular function so we need to basically and also hooks you can't call directly inside a function so you have to call on the top level always so you can directly call here use outside click all right now what will receive it will receive a ref correct and then it will receive a Handler now what Handler you want to do so here let me just move it here this is fine so here we can simply do this whenever I'll click outside so I'll make the set so content as false I hope you're getting so what will happen it will basically check based on this ref and if this ra is not in the current Target or basically here that logic we are doing then it will basically remove or basically make this Handler as false which is at the end that dispatch function that we are using here if I now save this let's go back let's click here nothing is happening if I click outside this is closing you can see that and if I click any of here it's working fine if I click here it's closing so this is basically the whole logic how you need to do that now this is everything is basically based on this R wherever you are passing this R this part you have to be very very careful if you want you can pass any component inside of this and it will beave uh in the same way so I think that's all for this particular project now in the next video we are going to do another important custom hook and that is called the uh use window size or use responsive and that is also very very useful hook that you can use in your uh project whenever you'll be doing any kind of large scale project so let's Implement that particular hook in the next part all right everyone so let's Implement our third and the last hook that we are going to create and that will be use window resize or you can also name this one or use this one as a use responsive so let's say the scenario will be like this so you are creating a global application where uh you want to check the responsiveness of this particular page d dally using a particular reusable hook so what you can do basically you can create this hook and you can use this in various components directly which will give you the width and height and based on that you can do based on that you can do certain operations so let's do one thing let's quickly create another component inside this and I'll give this one name as use window resize you can name whatever you like again we are going to create two file inside of this one will be index. jsx and one will be test. jsx now let me just close everything else so here this will be the hook so let's quickly create the component so this will be function and we'll give this one as we use window resize now this will not receive any parameters because at the end we need to use a add even listener and that will be resized and based on that we just need a simple state which will hold the width and height of that particular uh page so here we are going to take this uh State we'll give this name as window size and this will be use window size as I already mentioned this is another very very important hook you might get ask in your interview and here you you will basically mention that I will have a width which will be zero and then I'll be having a height which will be a zero initially all right now again here what you need to do here you need to take use layout effect now what is the difference between use layout effect and use effect use effect will only load when all the Dom elements will be rendered in your browser but use layout effect will be called before that so that is the reason we'll take a use layout effect and here we are going to you can see that this fire synchronously after all the Dom mutations but here it is almost identical to use effect so here you can see that uh what is telling that it will FL ringly before the browser has a chance to paint so paint is one of the process whenever browser will render all the elements and after that it will do the paint so before that only this use effect use layout effect will be called actually it is preferred to standard use effect you can also use use effect but there is nothing wrong using this use layout effect in this particular scenario so here what we are going to do we will simply create a method so which will be our handle resize all right so now here we need to add a event listener so we do window. add event listener and we need to take this resize and we'll pass this handle uh resize this function that we will be creating so this is now when the component will unmount so now we'll just return and then we'll just need need to remove this even listener we'll do resize and then call this method here all right so now let's create this method so this will be function handle resize and here what we are going to do is simply do set window resize and here we'll do width which will be window dot inner width and then we'll do height which will be window do inner height that's it so this will automatically set the current width and height of this window or basically the screen that you are accessing and then simply return this window size that's it all right so now what we are going to do we need to use this in our component so you create a component so do export default function and do use window resize test and here let's simply return a div we'll give a H1 and this is a use window resize hook and now here we'll take a p and we'll show here something like width is so here we'll render the width and then we'll take another p and we'll do height is height now from where you will be basically getting so we'll get this window size from use window resize now here you will be able to extract width comma height from this window size and that's it now what you can do simply based on this width and height you can do certain of and you can write some CSS anything you can do let's save it let's go to our app.js I'll just comment it out and let's give another comment here and this will be use window resize hook test and here we are going to do use window resize test now let's save it and let's see what is happening so let's go here so you can see that we are getting width is this height is this now let's try to resize so you can see width is changing and if I just do something like this so we'll notice WID is changing here and if I decrease height is also getting changed all right so this is working fine so this is another very important react hook that you might get faced in your uh interview also like this is a very helpful hook that you can also use for usability purposes whenever you'll be creating a very big application so I think that's all for this particular project let's move on to the next one all right so in this project you can see that we'll be creating the scroll to top and bottom feature so we will be basically fetching the list of data from API and there will be two button one is scroll to bottom and then scroll to top if I click here it will scroll to the top and if I click here it will scroll to the bottom so this is another very small uh kind of for snippet that we are going to implement so let's see how we are going to do this one all right so let's start working on the scroll to top and bottom uh component so let's create another component inside this I'll do scroll to top and bottom so here I'll create index. jsx now let's say uh you are fetching some data from API and there is a button on top of the page which says that scroll to bottom and at the same time you'll be having some kind of button or any any kind of Icon at the bottom of the page on on click of that you you want to basically go to the top of the page so let's see how we are going to implement that so first let me just quickly create this component so this will be a very simple project but although I think it's a very good idea or basically very good thing to know this this kind of concept if like they will ask you that how you will maintain scroll feature in your website so that it will be very easy for you to answer in your interview so let's see how you're going to do that so we'll do this on a scroll to top and bottom all right now here let's say we're fetching some data so I'll have some data here or let's do one thing another very interesting thing that we can do and that is we have already created a custom hook that is used Fetch and we can use the same logic here to get the data instead of calling the same API again and again because we have already we have already called this API multiple times so you can copy this thing and then we can paste it here now I'll just import it that's it so this will basically give me data now what I'm going to do I'll return a div I'll First Take H1 and I'll do scroll to top and bottom feature and here what we can do we'll give another A3 tag and I'll do this is the top section and then we'll be having a button and this will be scroll to bottom so that means on click of that we want to go to the bottom of the page and here I want to render the data so I'll take a UL here simple and we can do here data and end data. length this is true or else this will be null so what we can do we can simply do data. map we are having item and we can render lii and because we calling the product so I'm pretty sure I think this will have data do products sorry so this will be data dot products and this will be also same so here it will basically Ranger item. title all right here we'll show so if loading is sorry if bending is true so we just return some H1 and we'll so loading please wait all right and if there are any error so we'll also render something like return H1 and we show error Ur please try again all right so after this what we going to do so let's say we will be having another button here and this will be scroll to top that's it so now let's format this and here also another thing what we can do we'll take another A3 and we'll render this is the bottom of the page let's go to our app.js and let's render this component so this will be scroll to top and bottom all right let's save it let's see what we are getting all so we getting data do map is not a function sorry this will be data. products now let's see all right so here also you can give some style for now this is fine we'll give a style and we'll do Le style as none all right so we are getting the top section then we are getting uh this sorry this is our top section then a button and then we getting the data we can also do one thing uh let's give a limit of 100 here so let's see if we are getting 100 dat or not yeah this is fine okay so now on click of this we we want to basically go to the top of the page and on click of this we want to go to the bottom of the page so how we are going to do that so first let's take a on click so we'll do handle scroll to top so we'll create a method so this will function let me just copy this that's it so now this will be pretty easy what you going to do simply do window. scroll to all right and here you can basically mention the options which will be the scroll options so here you can mention the top so if you want to go to the at most top you can give the top top as zero correct if you want to give 100 so that will definitely work that is fine and left will be also zero now another option that you can give that is called behavior and that is a behavior that we will be giving this one as smooth I think there are some other options also you can use Auto instant and smooth so this is I think fine let's save it and let's see what is happening all right now we'll go here let's click here see it's going to the top all right okay now I want to go to the bottom so how we are going to do that now to go to the bottom we need a reference so because we need to tell that what is the bottom of the page so for this one what we can do so let's take a d here this is just to uh give you the example so I'll take a reference and this will be our bottom reference and here I'll be creating this so let's create this const bottom ref this will be used R of null now we are having this button here so this is the button so you need to create another on click so Lo on click this will be handle scroll to bottom so let's copy this and let's create this method so now to do do this one what you can do we need to basically I already mentioned in the previous uh lectures that this reference will give you a current property and that basically you can use so here we can simply do this bottom ref do current and here it will give you this scroll into view all right so this is the property and here you can use this Behavior which will be smooth all right now let's form this and let's save it now let's see what is happening if I click here it's going to the bottom you can see that if I click here it's going to the top and this is working fine all right now this is one thing now let's say you want to go to a certain section of this particular uh thing not here I'll give you a different um example for that all right so in this project what we are going to do we will be basically able to scroll to a particular section so so let's say we having first second third fourth and fifth and let's say we want to scroll to a particular section so if I click here you can see that it's going to the third card so based on reference we will be basically getting the uh top content of this particular card if we want to change this one to Fourth it will scroll to this particular section and if I scroll to this fifth card it will scroll to this particular fifth card so we are going to see how we are going to implement this one so the reason I'm doing this one because once you'll complete this scroll to top and bottom functionality they might ask you that okay let's say now you are doing top and bottom and let's say there are multiple section in your application in your web page and you want to go to a particular uh page uh for if I give you a real time uh like more realistic uh example uh you are having a website and then there is a home about Services testimonial footer section and let's say they they will tell you that whenever you will click the about it it should go to the about section when you click to the services it will go to the services when you click on footer it should go to the the footer so in this case this concept we will be able to use so let's see how we are going to do this one so let's create another file here and this will be scroll to section do jsx so how this will work so let me just quickly create this component so that it will be easy to understand so this will be export fun default function this will be scroll to section and here I'll return something let me just give a div and H1 so this is basically scroll to a particular section so here I'll create some data all right so create some dummy data for now so what we going to do so here uh let's give a label for this one so this is our first card or anything all right and we'll give a color of red let's copy this and also uh what we can do we can also give a height or let's do one thing let's create a style here so we'll give a width of 100% height of uh 600 PX and so for this one I'm going to give a background of uh red now let's copy this and I'm going to paste it 1 2 3 4 and five so this will be my fifth card and for this one we'll do this one as black so this will be my fourth this one will do green this one will do blue this is my third and for this one what we can do we do this one as gray and this one will be second all right so let's see what having this data so first let me just render this so we are having this H1 and after this I'll be having a button and this will be click something like uh what we going do we do click to scroll all right and then here I'm going to render this data do map so this is a data item and here I'm going to return a div and then I'm just take a p or let's take A3 and render this data item dot level and here I'll take the style which will be data item dot style all right so now first let's save it and let's go to our app.js let me just comment it out or let's make another comment here so this will be scroll to a particular uh particular section all right so this is let me just import it so this will be scroll to section let me just comment it out let's save it and let's see what we getting all right so we getting first card second third fourth and fifth so fifth one I think we not able to see let me just change this color what we can do uh we'll give some different color for this one uh so let's give this one as orange okay so now let's say you want to scroll to this fourth card for this one so how we going to do that so for this one you are to create again the the ref so here I'll create a ref so let's say I'll create a ref for now I'm giving this one name as ref you can use any name you want so this will be use ref all right and then let's say here in this div I'll give a ref which will be if this data item or let's take index so index so check if the index is equal to equal to three that means this is the fourth item and want to give this ra as this ra or else this will be null all right so now let's save it and here I'll give on click so this will be handle scroll to section and then you have to again create the function and then here what you need to do first you have to basically get the current position so we'll do uh let we'll do let po position which will be our ref do current and now this will basically give you one property which is get bounding client get bling bounding client and this is wed and this will give you a top property now here what you can to do you simply do window. scroll to and here you will basically pass I think we already discussed that you have to pass the stop so which will be this PO that you are having and then you'll do a behavior which will be smooth sorry H that's it so that means you are targeting this particular uh ref which is basically the card number four and then you are basically getting this gate bounding cent. top which is the current of and then if I now save it and let's go here let's click here so it's going to the fourth card you can see that if I change change this index to let's say four that means now it will go to the fifth card all right so this is the advantage so how you will be able to basically go to a particular section all right so this is now going to the third all right now you can see it's going to the fifth card if I click here again this is going to the fifth if I let's make this one two so now it should go to the third Let me refresh this if I click here it's going to the third card so this is another very important thing that you should know how you can basically scroll to top bottom and also to a particular section so that's all for this particular project let's move on to the next one all right everyone so this will be a very very simple project so this will be a weather application now this is a very very popular interview questions and the main reason behind is that here actually you don't have any routing or some any other functionality so we will be having this search functionality obviously and if you type something based on that we'll be calling the AP and the data will be updated so this is the main uh main thing that what we are doing here nothing else obviously we'll be creating some reusable component and based on that we'll be try we'll try to implement this particular project so let's start working on this particular uh project that will be weather application so the first thing is that what we are going to do here so let me uh what I've done I just created a simple react project here and then uh I'm in this app.js now if you're watching this for the first time or you don't have any knowledge on react then I will suggest that please watch some of the very basic videos on reactj so that you'll get some idea and then you can start uh this video if you already have some idea then I think you are good to go so the first thing what we are going to do we'll just remove everything from this app and then now here let's create our first uh folder so I'll create one component folder here so let's give this on name as components so in the weather application as I already showed you that we'll be having one simple search bar and then whenever we'll search or input any city name and based on that we'll be getting the weather info of that particular City so you're going to having basically two components one will be a search component and second one will be basically our weather component now inside this we are going to create our index. jsx same I'll create here index. jsx all right so here let's quickly create this component so this will be export default function and let's give this our name as weather now let's return some simple div and this is our main weather component what we are going to do will be importing this component in our app.js so here we'll simply import our weather component so this is our first step so you're getting weather here now similarly we are going to create our search component here so this will be export default function search and here I'm going to return return search now this search component we are going to use in this weather component all right so let's say here I'm having this weather so I'm going to now use this one this search component here later we are going to change uh the structure so now we are having search and weather so first let's start with this search components will be having a search bar and for this one this project is our very basic project so for this one we are going to we will be basically use Simple CSS we'll not use any other third party utilities like Tailwind or material UI all right so now let's go to our search component now here what I'm going to do for now I'll give a class name here now later we will be writing all the uh all the Styles in this app. CSS so this will be our main app. CSS and you can see that this is basically imported in our main app.js file so here what I'm going to do I give this on name as let's give this one as search engine and here we will simply return one input so here I'll give a type as text uh let's give a class name CT search then we are having placeholder so this will be enter city name then we will be having a name so name what we can give we can give this one as search we'll also we be having a value so value will be basically be receiving from our parent component as a prop so this is our first prop and let's give this our name as search all right and then we'll be having a on change now for on change what we are going to do we'll be having a event and again we are going to receive a prop from our pent component which will be basically a wether or app.js doesn't matter so here what I'll do I'll do set search as this even do Target dot value so now these two are the props that we are going to receive so the first thing will be search and then this will be set search all right so this is all about our input if I now save this we will be having one very simple input this is fine and after this what we going to do we will basically take a button so this will be our button and let's give this on name as search weather something like that and here I'll give a class name and or I think this is fine let's give a class name of for example search button all right now here in this button we will also receive another props and this will be submit search something like that or let's give this on name as handle search all right now this is another prop that we are going to receive from our parent component so this is very simple uh structure that we need now let's do one thing let's quickly create our uh Styles so the first thing what I'm going to do let's remove everything let's take our body and here I'll give margin as zero and padding as zero then uh we'll be having our search engine so this is our class name so copy this so this will be a search engine here I'll give you width as 100% we'll give display as Flex we'll give justifying content as space around we'll give align items as Center we'll give margin bottom as 30px and we'll give margin top as 10px all right now next thing we are having the input so we'll having search engine then we having input I think we also have a class name here so you can and directly use this class name Also let's remove this one we basically don't need so here what I'm going to do so the first thing is that let's take a width here we give this one 70% we'll take a height of 45 PX we'll take a border of one PX solid then we'll take a border radius uh let's take this one as 8 PX all right we'll take a padding of 2 PX x 15 PX we'll take a font size of 16 PX uh we'll do outline as none background color will'll do white and we're going to use a color of this one all right this is fine now similarly I think we don't need this class name also so you can remove this one so what we can do we can simply take dot search engine of button so you're targeting the button so here the first thing we'll do border is none we'll do border radius as 8px uh what else we'll do background color as black we'll do color as white we'll do font size as 20 PX we'll do outline none we'll do cursor as pointer and also do padding as uh 12 PX 15 PX let's see how this will look so now let's save this save this one also and now let's see all right so now this is fine I think there are some let me just check we can basically increase some of the uh some of the padding here basically so 47 This Is 50 so what we can do we can make this one as 13 okay and also let's do this one as search so we'll make this one as 13 all right so this is done so now next uh we will be basically start working on the functionality first so what we need to do here because we need to pass this Prof from the parent component which is basically our weather so because we are using this search component in this weather component so we need to take all the uh State here so the first state we need to take that is to handle the search and this will be our set search and this will be U state of empty so this is our initial value and here we need to pass this so we'll pass this search as search also we pass this set search as set search and another one we need to pass and that is handle search because this way we are going to handle on click on of this button so here what I'm going to do so let's do one thing we'll make this one as a as sync method because we need to call the API on click of this button and this will be handle search all right and here we are going to pass this one like this so this is done all right now next thing what we need to do basically we need to take two more State one is to so loading state so whenever we will be typing something here and click on this search we want to show some kind of loader until unless we'll get the data from the API so that is the reason we are going to take another state here and let's give this our name as loading and set loading and this will be use state of false and at the end we also need to take our weather data so this will be our weather data set weather data and this will be US state of null all right so now everything is almost done so what we need to do basically on click of this button we need to call the API so for this one we are going to use this open weather map API let me just show you that which endpoint we are going to use all right so you can see that we are going to use this open weather map uh this API this is a very nice API that you can use it will give you lot of uh API end points that you basically will be able to integrate in your application for now we are going to keep it very simple so what you need to do first you need to create a uh account and then once you'll do that you basically have to get your own API keys please don't use my own obviously I'll push my code in GitHub but don't uh use like my own API key please create your own so you have to go here and then you will be able to basically see the API key all right so this is our API key that I will be using and for AP end point what we are going to do basically you'll basically get lot of options uh so let's see if I now go here so we can basically use the same end point but here instead of this lat and Lawn what we are going to do we'll be passing this queries this query will be basically our city name and then you have to pass the app ID which will be your API key all right now how we are going to do that so the first thing is that uh what we need to do we will be creating one uh sorry one method here and this will be as sync function f weather data all right now here let's take a triy block so in catch we'll just log this error and here what I'm going to do I do const response and this will be AIT Fage and here we we are going to use the same one so let me just copy this one we need to basically change some of the things so here the first thing is that what we need to do we basically don't need this one so what we will basically use we'll use this query parameter and this quy parameter is uh our search value here so this is our search or basically the CT name and this API key uh I'm going to use my own so I'll go here and then let's go to our let me just go to my API keys so I'll just copy this and I'll paste it here that's it so this is done all right so now what we can do simply we'll do const data equal to AIT response do Json and then I'm going to log the data here and we'll see what what we are getting now this search is basically the city name that we will be typing so now let's say if I now type here something let's say uh Mumbai click on this search nothing is happening the reason is we need to basically call this method here so what we going do we can simply do Fetch with the data now this will receive a query or the param let's make this one as param so this param we are going to pass it here and this param is basically nothing but our search data all right now let's save it and now let's click on this search see how first we getting the result so we getting all the result based on this so this is our city name if I now change this one to Bangalore and now let's click on search so now we are getting based on bangaluru so now you will be basically getting the obviously this is happening very very fast first still what we are going to do we will be swing some kind of loader until unless we're getting the data back and that is pretty simple what we can do simply uh here before calling the API we'll make this set loading as true all right and then once we'll get the data so we'll do if data is true then we'll do set loading as false and we'll do set weather data as this data that's it and if something goes wrong then we we will basically make this one as false in the catch block that's it so now let's see what is happening with this loading so now if I now go back now refresh this page will be getting false now let's click on something let's say daily then I click on search true and then false so for sometime it is coming true so it is in the loading phase then we are getting the data so that is the reason it is uh false again so this is done now another thing what we need to do and that is on page load also we need to get some kind of data so now what I'm going to do for now we'll give some static city name that will obviously whenever you load the page it will give you the data based on that City so to achieve that what we can do you can simply take use effect now this is a dependency that will run on the page load if we pass empty dependency here and then what we can do we can simply call this Fetch with the data and here I'm going to pass this on as Bangalore so that means every time we load this page it will basically face the data based on this Bangalore City now here we can if I now log this wether data now let's go back you can see that we are getting now based on bangaluru so each and every time load this page it will give you the data based on that so this is done so now next thing what we need to do now we need to basically create our weather component so the first thing uh here uh we'll do something like this if loading is true so we'll show some kind of message that the data is in loading Fage so so something like loading or else we going to write our jsx so here we'll take a div all right now inside this we'll take another div and we'll give a class name let's make this our name as uh city name and here I'm going to take a h2 tag now here what we'll do we'll basically check if this wether data is present so we are going to render the name so I think we are having this name here so this is the name and also you're going to render the continum so continum will be weather. SS do country all right so here I'll do this is name then comma we'll take a span here and here I'm going to check if this weather data true do sis dot uh country that's it now let's save it let's see what is happening so you're getting bang Lulu and this is the uh okay this is this message that we need to remove now let's type here London and let's search so now we are getting London GB and then also if you notice we also getting the loading uh for very small amount of time so this is fine now next thing what we will do so after this we'll take another D here and here we'll give a class name of date and here uh we'll take a span and we are going to create a utility function and this will be G current date all right so let's quickly create this one so for this one what we can do uh let's create one function this will be function gate current date sorry this will be date so here we'll do simply return new date and then we'll do two local date string we are going to pass en us and we have to basically pass some of the properties so we can pass weekday as long then we have to pass month we'll pass this one as long and day we are going to do as numeric all right and here also same I think we are using some different name so this will be get current date all right so now let's save it so now we'll be getting our current date so this is fine now next thing what we are going to do we are going to render this temperature so we'll be getting this one from weather. m. temperature all right so here what we can do so after this we'll take another div sorry this will be div and here so we are going to render this will be weather data dot Main do temp all right now after this we'll take another paragraph and this will be our description so let's give this one as description so description will be getting from uh I think we are having so here weather and then this is our description so what we can do we can simply check something like if weather data and then with the data of zero then with the data of 0 dot description or else this will be empty all right now let's see what we getting let me just save it I think let me just change this one to London search all right we are not getting anything here all right so the pro problem is basically here we have to basically check dot weather of zero so this will be weather data and and weather data dot weather and and weather data do weather of zero and this will be wether data of with the zero do description now this should come all right so now this is coming so now next thing what we'll do we'll take another div here so after this P we'll take another div all right so here we'll give a class name so we'll give this one as weather info and here uh what we can do we can simply take one div and inside this we'll take another div and we'll take a p here and let's uh display the speed here so speed we will be able to see so you have to go to wind weather. wind. speeed all right and also we have to basically render the humidity so I think humidity will get from here from the mean so what you can do you can simply give a class name so you'll give a class name of wind and we'll do here weather info do wind do speed and here we'll take another p and we'll make this one as wind speed all right and now let's copy this and we'll paste it here again and here we'll make this one as humidity and this will be weather do Main dot uh this will be humidity all right and this will be humidity and I think this is fine now let's save this so you're getting all the data here all right this is wind speed and this is humidity now you have to style this so now let's go to our uh CSS file so the first thing what we'll do is start with our main app uh class which is basically this one so here we'll do dot app and here we'll do text align as Center we'll do margin as 50px auto0 we'll do width as 90% we'll do Max width as 700 PX we'll do border radius as 20 PX uh we'll do height as 470 PX we'll do padding as 20 PX 15 PX and we'll do background as this one so this will be RGB 0a 255 comma 166 let's save it let's see awesome so now this is looking nice so now let's uh start with our weather uh comp component so the first thing we'll start with this city name so we'll do this one as dot CT name so we'll do margin bottom as 10px next we'll do uh we also have a loading class here so let me just take another loading here so this will be our DOT loading and here we are going to do this on a font size as 60px all right and we'll do font weight as Bolder and then also we do color as black this is done now next we'll do our date so for date we'll do font size as 18 PX we do font weight as 500 and we'll do font style as EIC so now let's save this let's see how this is looking all right so this is fine now next what else I think we also have C date this is done we also have to take this temperature so we'll do class temperature we'll do temp only all right so here we'll go here and we'll do do imp so we'll do font size as 64 PX we'll do color as black we'll do font weight as bold and we'll do text align as Center let's see all right now next uh we are having weather description let me just check I think we having only description so this will be do description so here we'll do color as black all right font size will do how much 22 PX font weight 500 margin top 0 PX and margin bottom 20px let's see all right and after that uh what else we are having weather info which is our main rapper class okay so we'll do do weather info so here we'll do display as Flex we'll do justify content space evenly we'll do align items as Center we'll do margin top as 20 PX padding as 0 PX 20px we'll do font size uh as 20px we do font weight bold and also we do text align Center all right now we'll do uh let's do one thing uh let's go here let's take some class name for this also this will be column something like that and also for this one so we'll do dot column and we'll do uh display Flex align items Center we do uh what else we'll do line height of 1 PX let's save it let's see all right I think this is looking nice so this is fine now let's refresh this so now the first thing is that we'll give some name here uh let's say Mumbai let's search so getting based on Mumbai for sometime we are also getting the loading state if I give Bangalore so we getting based on bangaluru if I give something else let's say what else New York we are getting New York so everything is working fine so I think that's all for this particular project and this is a very very small project obviously but obviously you will learn a lot of things the first thing you learn that how you can create components very basic level how you can use the components the child components in the parent component and then import the same and also how to use the use State and also obviously the API call so that's all all for this particular project now in the next project we will be basically creating a RP application now that will also will be not very advanc level project but obviously that will be harder than this one so see you in the next project good luck all right everyone so this will be our second mid-level project so this will be food recipe application in this project Al we'll also learn how you can integrate react router Dom so you'll be able to search some recipes and based on that you'll be basically getting the data from API and then you'll be having the details page also and here you'll be able to add this one and in this page this will be updated here so you can see that this is updated if I try to add something else so it will go to the homepage I'll add here and let's add this one so you can see that this is updated let's go to homepage and let's see if I try to add here this will be updated so this is another uh thing that we are going to another very simple project that we are going to build so so mainly uh the reason is because what we are trying to do here here we are not only obviously we will be getting the data from API but here we are having multiple pages so this will also give you some idea how you can work with Dynamic routes how you can Implement react router Dom so this is the main idea or basically the main objective to implement this particular application so let's start working on on this full recipe application all right everyone so let's start with our uh second project and this will be basically recipe application so I already created one uh project and for this one we are going to use delin CSS and also uh for this particular application as you already discussed that will be having basically multiple pages so we need to implement routing so for this one we are going to install react router Dom so I'll do npm install react router Dom also uh we have to basically install tawin CSS now tawin CSS is basically utility CSS framework and here basically what you have to do you just have to basically write some predefined classes that tnd team already created and based on that it will basically automatically apply those Styles in that particular HTML element if you have already used this one uh previously then it is nice if not then also it is fine it is very very easy to use so let's see how we are going to basically use this TCS so the first thing is that you have to create a react project that I already have done now next thing uh you have to install this T Inc as a DA dependency so that is the reason it is showing here minus D so I'll just copy this one and then here let's uh paste it so now this will basically install this one as a de dependency and after that what you need to do you have to basically init uh this uh Tailwind CSS so it will basically create a configuration file so this is the configuration so now I'll copy this second now I'll run this one and you can see that it will create a uh file here so this is our tawin configuration file now whatever configuration that you will be writing based on uh this Tailwind you will be writing here so you will be basically able to extend some of the theme you'll be able to add uh plugins and also you have to pass the content that which content you want to to basically access for this particular application now because we are using the react so react generally accepts you can see that it is JS jsx TS if it is a typescript project or TSX so this one you have to basically pass so I'll copy this one and then I'll pass it here all right so that means now twin config will understand okay we are using uh this extension which can be either JS or jsx TS or TSX let me minimize this and at the end of this what you need to do you to use this base utility in our main index. CSS file which is basically our root CSS file so I'll just copy this and then I'll go to our index. CSS and then just paste it here all right so now what it will do it will basically apply all the base uh classes components and the utilities that whatever we are having related to this tement and you are good to go all right so that's all now next thing what we are going to do first we will be basically implement the routing now basically you'll be having three uh pages so the first or landing page will be where we'll be searching the recipe name and we'll be basically getting the list of recipes and on click of that it will go to the recipe Details page and also on click of uh that particular recipe we will be able to add that recipe into our favorite section all right so now let's do one thing to implement the routing the first thing what we need to do as we already uh install the react router Dom so react router Dom will give you a main wrapper that you need to basically wrap your app component inside the reper so that you will be able to consume all the react router Dom react router functionalities so for this one what you need to do first you have to import something from react router n and this component is nam as browser router now this is basically a router for uh used for use uh browsers and basically this will be work as a wrapper for this particular application and you have to do it or else it will basically give you error so now what I'll do I'll just wrap uh this browser router and then place this app inside this browser router that's it all right now next thing what we are going to do we will basically uh let's do one thing let's create our pages so I'll create another folder here and let's give this on name as pages so here I'll create three more folder one will be our home and then one will be our details all right and one will be our favorites all right now here let's create our index. jsx so this will be our export default function this will be home and here I'm going to return here div and this will be our home let's copy this or let's copy this one only and then I'll place it here and also here so now this will be our favorites and this will be our favorites and this will be our details and this will be our details all right so we are having basically three pages now so now what we'll do we'll go to our main app.js and and here we need to basically implement the routing all right so the first thing is that what we can do we have to basically import uh the main routes wrapper now because we are using the route uh react router Dom version six I believe so you can see that this is 6.19 previously we are using this one as a switch the component that I'm going to use but now they have basically change some of the functionalities so the first thing is that we have to import that wrapper from uh react router Dom and this name as routes all right you can see that this is basically a container which will Nest all the route elements this is the first step also you need the to represent the each and every individual route or basically each and every Pages we need route component also all right now let's remove all of this from here now what I'm going to do here let's uh we already having this D let's remove this class we don't need and inside this now I'm going to use one div now here we are going to use the tailin classes so here we'll give this one as mean height of screen we'll give a padding of six we'll give a BG of white we'll give text Gray 600 and also give text as large now inside this we will be having our nap component now this will be a common component so what I'm going to do inside this Source I'll create one folder and this will be our components and here let's create our nabar all right so this will be index. jsx so this will be our naar component or basically header component so here I'll do export default function and this is our naber all right now let's return here this div and this will be our Napp so napar component will be common for all the pages so that is the reason we are going to Simply import this napar component here now after this uh whatever content we'll be having that will basically differ Bas on different pages right so home will be having different content favorite will be having different and same for details so to switch from one page to another page the first thing what you need to do you have to basically use this routes wrapper and inside this you have to use each and every individual uh route so here I'll use three route because we are having three pages one is home favorites and details so I'll copy this one and paste it three times now here you have to pass some of the props so the first thing you have to pass the path so this will be our SL path and here you have to pass the element so here I'm going to import our home component so you're having home component let me check the name so this is home only all right now same goes for this one so let me just copy this one so this will be our favorites component so this is basically the path name and here this will be our favorites okay we are not getting any let me just check so we have to import this one so this will be our favorites from favorites and also we'll be having our details from our Details page that's it so this is our favorites and next we'll be having a details now details is basically a dynamic page that means for each and every recipe item the item id will be different so for this one how we are going to do that so we'll do something like this we'll do here let's say recipe item SL and to denote a dynamic value in uh in this path name what you need to do you to use this colon and then you have to pass the ID so that means this is basically denoting that this value can be a dynamic it can be anything 1 2 3 4 5 6 whatever all right and here again we are going to use the element so here I'm going to use this details component and that's it so this is all about the uh um routing structure that we need so if I now go back and you can see that now we are getting home because we are currently in the slash route all right because we have given the slash here for home if I now go to SL favorites so let's go to slash favorites so you're getting favorites here if I now go to slash let's say recip item slash one so that means this is a dynamic value so now now this would go to The Details page all right now if I not check this one to let's say four you'll be getting the same result because this value can be anything so this is a dynamic Details page so that's all about the routing functionality that we need now next thing what we going to do first we'll implement this NAB because nabard will be a common component and after that we'll be start working on the API integration all right so let's start working on the uh nabar component so the first thing let me just close everything so what we'll do we'll remove this one from here and we'll return a nav element and here I'll use this class name now I'm not going to explain each and every class Name by the name of it you will be able to basically know if you have some basic idea on CSS so we are going to use flex this will be justify between item Center py that means padding top and bottom of eight we'll use a container class MX Auto Flex call for large we'll do Flex row all right we'll do gap of five and for large you'll do gap of zero all right now inside this I'm going to take H2 and let's give a name like food recipe now anything you can give here whatever you like now here I'll use a class name so we do text 2 XL and font semi bold let's format and save this let's see okay now after this uh I'm going to take one form here and here I'm going to take a input now here type uh this will be text then we'll give a name so let's give this name of search then we are having placeholder so we'll give it enter items something like that and then I'll give a class name here so we'll do here BG of white divide by 75 we'll do p of 3 PX of 8 we'll do rounded full outline none for large we'll do W of 96 we'll do Shadow large we'll do Shadow red 100 we'll do Focus Shadow red 200 all right this is fine now next what I'm going to do so you also need here value and um onchange property but for now this is fine but let's save it now let's see how this is looking all right so now this is fine now next thing what we are going to do so after this form we take another uh here e and here I'm going to use sorry this will be e here I'll use a class name of flex gap of five now inside this I'll take Ai and here I'm going to use the nav link from react router Dom now the first I need home and here we need to pass the two property so here I'll pass a two property I want to go to the slash route and here I'll use a class name so Lo text as black for hover sorry we need to do text as black for hover we are going to do text uh gray 700 and we'll do duration of 300 all right this is fine now next thing uh let's copy this a from here and I'll use the same one because we also need another section and that will be our favorite so I'll use her favorites and this will go to/ favorites section also what we can do we can uh use nav link here also so let me just use the same here so this will also go to the food recipe okay now let's format this let's save it let's see what we getting all right so you're getting middle we are having input home and favorites if I click here it is going to home if I click here it is going to favorites if I click here it is going to the homepage and this is very simple uh nabar now as I already told you multiple times when I created this uh video this full video is basically created in such way that now as I already told you multiple times before that the main objective of creating this particular video is for the reactj beginner developers so that you you guys who don't have much experience on reactj so that you'll be able to Gras all this concept very easily that is the reason whatever project that I have chosen in this full course or basically full video this projects will be very very simple all right now don't expect too much complicated CSS or very large amount of Cs is because the prime objective of this particular video is to learn how you can apply react Concepts and create multiple different kind of projects with a minimal uh styling or basically minimum minimal use of CSS all right so that is the reason we are not going to use much CSS so this is all about the nap section that we need in the next video what we need to do we have to handle this input and then whenever I'll enter something we have to basically call the API and based on that we'll be getting the list of recipes here so let's work on this uh particular functionality in the next part all right everyone so now let's start uh handling this input form so for this one what we're going to do so there are two ways we can manage the state either we can create a context or we can basically manage uh in this app.js and then we have to basically pass uh all of these as a prop to each and every individual component all right so let's do one thing let's create our first context so in this um project only or basically most of the projects we are going to create a context and that that is basically more cleaner way to manage your state so what I'll do I inside this Source I'll create another folder and let's give this on name as context and here I'll create index. jsx now the first thing is that what you need to do first you have to create the context and then you have to basically provide the context and then you have to consume the context or basically state from the context first I'll do I'll create the context so this will be export const let's give this one name as Global context and this will be create context and here you have to basically give the default value or basically the initial value which will be null all right now what I'll do I'll just do here export default uh this will be export default function this will be our Global State now this Global state will receive the children now children is basically all the nested components that you are having in this particular application so this will be our children and here what we need to return We to basically return Global context now this context will give you this provider now this provider will basically provide the state and then you have to basically consume the state from this context and here you have to basically pass the children now this is very very easy to do all right now how you will be able to access this so in a root component you have to basically Wrap This Global State inside your app component as simple as that so let's go to our index.js and here what we can do we can simply import uh Global state here and you have to paste it here so that means what you are doing basically here you are um uh sorry you are basically accessing this app inside This Global state so whatever state you are managing from this context you will be able to access in this app component Now app component is basically at the is the combination of all the Ned components that you are having all right now here what I'm going to do first I'll create our first it and this will be our search panm and this will be set search Parn and this will be use state of empty all right but how you are going to pass this state to your context so what you need to do you have to copy this both so this is aate variable in the uh set State method this provider will take a value property and this will be object and here you will be able to basically pass this uh value or basically the state in in this context so now what we need to do we have to basically go to a na because here we are having this input all right now here let's say you are to basically give the value and the on change so what you need to do to basically consume this from your context in this component so what we need to do first we have to basically take use context hook now this basically will accept a context object and this will basically return the current context value and from there you will be able to basically get the state values or basically the methods so I'll take use context and here you have to basically pass the context so in our case the context is basically This Global context that we have created so here we'll do Global context now here now what we need to access you will be able to access all of these so now let's say I want to access both search for and the set search for so I'll copy this and I'll pass it here so that means what we are doing from this Global context using this hook we are accessing this uh parameters now what we can do we can simply pass the value property which will be our search PM and on change here I'll take event and here what we can do we'll simply do set search Pam equal to event. target. value and this is done now let's see if I now log this search param here sorry so if I log this search P I'm here let's see what we getting so I'll go back now let's go to our console let's I'll type something here my name so you can see that we are getting the updated name here all right so now what we need to do we are getting the uh whatever user is typing here so if I now click enter I need to basically call the API and based on the app to basically list the list of recipes based on what user has entered here so let's do that in the next part all right so now what we need to do on submit of this form we have to basically get this search param value and then based on that you have to call the API all right so now what we can do uh let's do one thing let's take one on submit here and this will be handle submit now this one we are going to basically receive from this context only now let's save it now what we'll do we'll basically create this method here so this will be asnc function handle submit and here we are going to basically pass this handle submit method now here what we'll do we'll basically take a try block here we'll do catch and we'll just log this error here so here what we're going to do this will be const response AIT F and here we have to basically call this uh URL so here what we'll do we basically copy this path and then you'll paste it here now here uh along with this you have to basically pass the search value now this search value will be basically I hope for now we'll be getting this is basically this search F whatever we are entering that's it now this will be const data this will be AIT race. Json now let's log this uh data here let's see what we are getting all right now let's save it now here what we'll do we'll basically type something like banana and let's hit enter all right another thing we need to do we have to basically take our event here and and we'll do here event. prevent uh default all right so now let's see so now here we'll type for uh Apple hit enter and we getting the data here so you can see that we are getting success status data and inside this we're getting recipes awesome so now what we need to do to basically take a state and then you have to save this recipes and we have to basically render the list of recipes in this component so let let's do that in the next part all right so now let's do one thing uh here we will take another state so the first thing we'll uh take our loading State also I think this also we have done in the previous uh projects so we'll basically check until unless the API is getting loaded so we'll show some kind of loader so this will be use state of false and we'll take another state here and this will be our recipe list set recipe list and this will be uh used Straight of Mt now what we are going to do we will basically check here uh that if data dot so what we are getting so we are getting here let me just check we having data do data do recipes so if data dot data dot recipes so we are going to basically uh do here this data do data do is also you're going to make the set loading as false and also we'll do set search param as empty so you're going to basically empty this search uh or reset this values whatever we are typing here that's it if there are any kind of error so what we'll do we'll do the same thing we'll reset this one and also make the set loading as false all right now this is done now next thing what we'll do uh so first let's see what exactly we are getting in this so if I now log this loading and recip list let's see so we'll be getting empty for now but let's type something here let's hit enter and we getting here you can see the 22 results all right so now what we need to do to basically render this list of recipes what we'll do first thing we will will pass this uh loading and also this recipe list here all right now let's save it so now this recip list will will be receiving in our home component so we'll go to this home component here now we'll understand the advantage of using context so from any component you will be able to basically manage the state globally now here what we'll do we'll basically take our recip list so we'll do uh use context and this this will be of global context all right uh so let me just import it I think we can go to this component and let's copy this and paste it here okay so here we'll receive our recipe list and also receive our loading all right that's it now here what we are going to do uh we'll take a class name so we'll do a class name we'll do py of 8 we'll do container we do MX of Auto we'll do Flex Flex WP justify Center and we'll do gap of 10 all right now inside this uh what we do we'll basically check if this recip list and and recip list do length greater than Z zero so we going to render or else this will be null and here uh what we will do basically we will just map it and we'll create another recipe component so inside this uh component I'll create another folder and this will be our recipe uh recipe list something like that all right so here will be index. jsx and this will be export default function this will be recipe list and here I'll return here div or let's make this one as recipe item not recip list so this will be recip item and here I'll return recipe item now here what we will do recipe list. map so here I'm going to just render this recipe item component and I'll pass this item as a prop to this component so we'll copy this and this we are going to receive it here another thing what we can do we can basically check if loading is true so you're going to return something like div and this will be loading please wait that's it all right now here uh instead of showing null we can do another thing uh if that is no recipe that means if the length is zero so show something like nothing uh nothing to show please search something or something like that so we'll take another paragraph here we'll do nothing to so please search something and here I'll use a class name so we'll do large text for Xcel do text Excel will do text Center we'll do text black and we'll do font Bolder extra Bolder all right now let's save it let's see what is happening now awesome so now we're getting nothing to so please search something if I now search something so you're getting 1 2 3 4 how many items are there that we are getting if I saw Apple so getting more items if I saw something else let's say m go we are getting the data here so now we have to basically start working on this creating the structure so that means this is working fine all right so now let's do one thing uh let's go to this uh recipe item component now here what we'll do we'll keep it very simple so you're receiving single recipe here so let's take a class name so we'll do this one as Flex Flex call W8 we'll do overflow hidden we'll do p of five we do BG white ided by 75 we'll do sadow Xcel we'll do gap of five we'll do border uh we'll do border two uh we'll do rounded uh we'll do rounded to XEL we'll do border white all right let me just remove this now inside this we'll take another div we'll take a class name we'll do height of 40 we'll do Flex justify Center L overflow hidden item Center and we'll do rounded Excel all right now here I'm going to take a image so we are going to render The Source here so this will be our item this item that we are receiving dot we this will give give us item uh sorry image URL also we going to use all this will be our recip item and class name will do block and W uh full that's it let's save it let's see what we getting awesome so you're getting the result here you can see that now next thing uh what we can do sof this uh we'll take another div here uh inside this will take a span sorry this will be span and here I'm going to render this item dot publisher and here we are going to use a class name so Lo text as Lo text uh how much 700 is fine and we'll do font medium let's save it let's see see I think we have done something [Music] wrong okay this is wrong okay now next uh what we'll do uh we'll take another A3 and here I'm going to render item dot title all right and here we'll use a class name we'll do font bold uh we'll do text 2 XEL we'll do tranet text black that's it and after this we are going to import link from RE router Dom and here we'll be showing something like recipe details and here we'll basically have to give two now here it is very important now where it should go it should go to the dynamic uh page that we have created so how we are going to do this we'll do/ recipe item slash and here we have to basically pass the ID of this item so this will be item. ID all right and here we are going to use this class name so we'll use uh text SM P of three and padding PX of 8 we'll do rounded large uh we'll do uppercase we'll do font medium we'll do tracking wider we'll do inline block we'll do sadow medium we'll do BG black and we'll do text as white that's it let's save it let's see all right this is fine let's take a margin top of five awesome so this is looking very nice and if you notice if I now click here it will go to the dynamic P so let's say click here see now it is going to this page and this is the ID if I now go back click here this is now different ID if you noticed if I click here this is now different and now type something here so you're getting related to Apple all right and uh uh let's say search for mango so now we're getting related to mango so this is working fine now what we need to do basically on click of this whenever we'll go to this Details page we have to get this ID and once we'll receive this ID based on this ID you have to again call the API and then you have to basically render the details here so let's do that in the next part all right so let's start uh working on this Details page so how we are going to do so on click of this first it is going to The Details page so let's go to this Details page now what we need to do we basically need to extract this ID from this URL how we are going to do that so for this one we will be importing one Hook from De router Dom all right so let's go here so now let's do one thing here I'll take const params equal to use params now this params will basically give you sorry will give you all the details if I now log this params here let's see what is happening if I now go back let's refresh this page now I'll open console let's search something all right now if I click here see we are getting ID now this ID is basically the Val the par name and the this is the value now from where this is coming this is coming from this ID name that you have given here this is the dynamic value so now this is pretty simple so what you can do you can take use effect here and then we can basically call the API but before that let's do another thing so we go to our context and I'll take another state here so this will be const recipe details dat data set recipe details uh data and this will be equal to UST state of null now I'll copy this and then we'll pass it here let's format this now go to our Details page and here first we are going to import this one from our context so this will use context of global context all right so now we'll do use effect and here uh what we'll do we will basically uh create a method here so let's create aing method Asing function get recipe details and here here we will create this one so this will be const response equal to AIT F and we are going to use the same URL that we are using there will be some difference so let me first copy this sorry copy this paste it here so only difference will be after recipes we have to basically pass the ID so here we'll do recipes slash and here we to pass the ID this ID will be basically this params do ID so you remember we are getting this params do ID so what we'll do we can simply destructure this ID from this params and then we'll basically pass this ID here and this is done now we'll do const data equal to AIT response. Json and now let's log this data here and let's see what you're getting now let's save it so you're getting some error params is not defined fine so let me remove this so now if I now go back uh let's search for something and now let's say if I click here all right we are not getting anything I think the reason is because what we can do we can basically give this ID as a dependency here now this would work oh sorry my bad we have to uh basically invoke this method sorry now I think this should work awesome so now this is working although if you give this ID as a dependency then also it should work but on if you give empt dependency also this would work fine I now let's say go back uh let's say try for this one so you're getting the data here all right so now this is pretty simple so what we can do we can basically check here if this data do data is true so we do set recip details data is equal to data Dot data that's it all right so now we have to basically uh render the uh jsx structure so now the first thing what we can do here let me just cut it so we return one div let's take a class name so here I'll do container this will be MX Auto py of 10 look grid grid calls of one for large you'll do grid Columns of two and we do gap of 10 now inside this we'll take a div we'll take a class name we'll do this one as row start two for large we'll do row start Auto and here we are going to basically render the image so we'll do another div we'll give a class class name so we'll do height of 96 we'll do overflow as hidden we'll do rounded Excel and we'll do as group now inside this we'll take image so we do source which will be our recipe details data do image URL and here we are going to take a class last name so we'll do W full height full we'll do object cover block we'll do here uh we'll do a take a group hover and we'll do a scale of 105 and we'll do a duration of 300 let's save it let's see what is happen happening let me just refresh this all right we are not getting anything let me just log it here let's see what is happening here so what we are getting in this recip details data all right so we have dot recip here okay now I got it so what we need to do we have to do dot here dot recipe now this would work awesome now you can see that this scaling is also happening and if I now go back search for something and let's say if I click here so now getting the different data if I click this one we getting the updated data here all right this is fine now next uh what we are going to do so after this we'll take another div here we'll take a class name we'll do Flex uh we'll do Flex column and gap of three here we'll do a span and here we'll do recipe details data do recipe dot publisher all right and let's use the same styles that we are using here so for this one also we'll use the same let's copy this and we'll paste it here and also we'll do the same thing for this this one also the title so we'll copy this one and after that we'll paste the same here let's save it let's see what we getting all right so we have to change this on item is not defined so we'll just replace this one okay so you're getting the name uh this is fine now next uh what we are going to do here uh let's take another div here so this is our main div okay after this or let's take it here so we'll take another div here and here we'll take a button and this will be our save as favorites okay and here we'll take a class name so we'll do a p of three ex off I think for this one also you'll use the same class name let me uh let me write it down we'll do rounded large I'm very lazy of writing this much CSS to be honest text SM then we are having upper case font medium then we are having tracking wider we'll do a margin top of three we'll do inline block we'll do sadow as medium we'll do BG black and we'll do text as uh White that's it all right now let's save it for let's see first how this is looking okay so you're having save as favorites this is fine now what else we can do so we can also render the ingredients so after this div let's take another div here so here I'll take a span and we'll do ingredients all right so here let's take a class name we do text 2 XL font semi bold all right text black now after this span we'll take e we take take a class name and here we'll do Flex Flex column gap of three and here we are going to basically render the ingredients so this will be recipe uh details dot recipe dot uh here to do ingredients ingredients do map this will be ingredient and here I'm going to render AI all right now inside this we'll take a span here and let's render the ingredient dot quantity sorry this will be Dot and then we'll give a space and this will be ingredient uh dot unit all right and after this span we'll take another span here and we'll render ingredient dot description all right let's format this uh what else for this one also we use the same class name so we copy this one and we'll use here and also here sorry what I have done sorry not here to do it here let's see okay so now we are getting all of this that these all are the ingredients this uh you will be able to save as favorites if I now go back uh let's say I'll click on this one so now we're getting the updated data if I click this one we are getting the data here let's see if I search for mango and let's click here so now we're getting related to Mango and this is working fine so now next thing what we need to do on click of this basically we have to store this in our favorite section so that one we going to do in the next part all right so let's start working on this favorite functionality so the first thing is that what we are going to do we'll go to our context and then we'll take another state here and this will be our favorites favorite list favorites list and set favorite list and this will be us state of Mt ARR now let's copy this uh or let's do one thing we can do another thing here we can create a method here and this will be handle add to favorite and this will basically receive the current item okay so if I now log this here let's see what is happening so I'll just copy this sorry I'll just copy this method handle add to favorite and I'll pass in our context now we'll go to our Details page and here you can see that we are having this save as faites this is the button so here on click of this we will basically call this method so now we'll do on click and here we'll basically invoke this method and we'll pass this recipe item details. recip as a parameter which is basically our current item I hope you're getting if I now save this now let's go back now let's go to console if I now click here see now we getting the current data here right now here we'll be able to get the ID and based on that we'll be able to see whether this item is already added in the favorites or not as simple as that so now we can go to our context and now what I'll do the first thing is that uh we'll do copy uh favorite uh favorites list and this will be our favorites now we'll do we'll check the index so we'll do here copy favorite list do find index and we'll do item if this item. ID is equal toal to get current item. ID that means whether the item is already present in this array or not if index is minus1 that means the item is not present so we'll do copy favorite list. post and we'll PST this current item else what we need to do we'll do copy favorites and then we'll just splice this index that means we'll remove if the item is already present and at the end we'll just do set favorite list equal to copy favorite list now let's log this favorite list and let's see what we are getting so now if I now go back here so we are getting empty click here so one item is there if I now again click you can see now this is empty again so that means this is now removed okay so now what we can do we can pass this favorite list in our context so this is the first step and we are already having this favorite component so what we going do in this home component the structure that whatever we are having this will be similar exact similar to here so what we can do we can simply copy this whole part from here and then you can simply paste it here now there are some changes we need to do so the first thing is that this will be favorites list instead of recipe list loading is not required and here this will be favorite list and here we will show nothing to added uh nothing is added nothing is added in favorites that's it and this is done if I now save this so you're getting some error recipe item is not defined let me just import this one so now this is fine again we are getting some error Global context is not defined and use context is not defined okay so now let's say if I now click here let's go to our favorites we are getting one favorite here let's go to our home all right wait because we not storing this one in any store or basically in database that is the reason but this is fine now let's click on here click on save to favorites go to favorites we are getting two let's go to home go here click here go to favorites we are getting three all right let's click on this one click here and you can see that we are getting this one for items now one thing we need to do basically if I now click here we have to because this is already added so so if you see banana cookies is already added so it show here remove from favorites so how we are going to do that so let's copy this favorite list and then uh what we can do go to our details so first thing we'll basically take from here and then we'll go to our button and here basically what we'll do we'll simply check that uh what we can do so we do here favorites all right um dot so we'll do find index and here we'll do item so we do item do ID is equal to equal to this uh recipe Item recipe. ID so that means if that this is already present or not if this is not equal to equal to minus1 so that means this is already present so this will be remove from favorites or this will be add two favorites that's it so now let's format this and here we can do something like if this length now do length is greater than zero let's save it let's see what is happening so now getting removed from favorites because banana cookies is already present now let's go to our home so let's click on this Banana Foster so now this is coming add to favorites if I now click here now remove to favorites go to here Banana Foster if I now go back let's click here add to favorite if I now go back this is now removed all right so now obviously this is not like a very big project but this will give you a idea that how you can work with routing how you can create multiple Pages how you can create context and manage Global State and also lot of other functionality also obviously what we can do we can see use very easily basically store this one in in a database so that on page refresh this uh doesn't like if I now refresh this page obviously this data will not be there but this is fine because this is a static website this will definitely help you to understand lot of things now let's do one thing let's go to our home another thing whenever we type something here let's navigate to the homepage so this is one very important thing that uh come to my mind so what we can do simply uh something like let's go to our uh where we can go context so here uh we'll do const navigate equal to use navigate and whenever we'll enter here we'll navigate to the homepage so this is another important thing so now let's say if I type something here Apple let's go to our Reb details add to favorites go to favorites now let's say type something here banana so it's going back to this page all right now click here add to favorite let's go here click here uh search for mango click here this is coming now let's click this one all right let's go back one more so now this is added if I now go back remove this one this is now removed all right so that's all for this particular video now see you in my next video now in the next video we are going to create many more uh very interesting project see you in my next video till then good luck and peace hey everyone so let's start working on our shopping cart application so in this application the only difference will be here we are going to use Redux toolkit so this is the speciality of this particular project so this is very very simple as you can see we will be fetching the data from the API where we'll be getting the list of products from fake store API then on click of this this will be added to cart now if I go to cart obviously this will be added and this amount will be updated now you may think that this is a very simple project but actually for a beginners or if you think about from interview perspective this is not a simple project if they give you two hours to code this one you have to do it in that time so let's if I go here and then add this one also so you can see that this is updated if I try to remove this will be updated so for this one I have chosen Tailwind CSS and Redux toolkit for this particular project so that in case you face or basically interfere will ask you that whether you have worked with Redux or not so this project will definitely going to help you so let's start working on this particular project all right everyone so let's start working on our shopping cut project so first thing you can see that I already created one project here so here first we will be basically installing all the dependencies that we need and also we need to install Tailwind CSS because that one we are going to use for our styling so first we'll start with tellin CSS so to install what you need to do you have to basically install as a dep dependency so you're going to copy this and then we'll paste it here so once this will be installed then we have to basically in it and then we have to give some the some of the configuration that you need for this particular project all right so this is done now let's init this one so if I do npx in it so it will basically create a uh file here for the configuration and then what we need to do basically we have to give this content that we are using because we using react so this will be either JS jsx TS or TSX so you'll copy this and let's go here and then we'll paste inside this content and the last step will be we have to import this base Utilities in the index. CSS so go to the index. CSS and we are going to paste it here that's it so this is all the configuration that we need for the Tailwind SES and now coming to the uh packages so we are going to use Redux toolkit so the first thing we need to install Redux j/ toolkit all right next we need react Redux we need react icons we also need react router Dom and also you're going to use another one that will be react loader spinner so this is basically to S any kind of uh loading State and I think that's it all right so now let it uh be installing so now we'll do one thing let's quickly create all the components and the pages that we need so first I'll be creating a Pages folder and then I'll be creating a components folder and then I'll be creating another folder and this will be our store so store is basically our Redux store so here we will be creating all the slice and our main configuration for the store all right now what else we need so inside this page we basically need two pages so one will be homepage and one will be a cart page so in the homepage we'll be getting the list of I think I already showed you in the demo we'll be getting the list of products and in the cart page we'll be showing how many products we have added in the cart so I'll be creating two pages here so I'll create home. jsx and then I'll be creating card. jsx so let's quickly create the components uh sorry the pages first and then we'll be uh first uh uh implementing the react router Dom or basically the routing so let me just close everything so here let's create this cart component so function this will be our cart and we are going to return some div for now and this will be our card let's save it let's create our homepage so this will be export default function this will be home and we are going to return here div and this will be our homepage all right right now we need to import this one in our app.js now because we need to switch from one page to another page so we definitely need react router D basically routing functionality so the first thing first thing what we need to do you have to import the browser router here and let's do one thing let's remove this react. strict mode this we don't need and here I'm going to import browser router from react router Dom and then I'm going to paste it this this app here that's it now let's go to our app.js now let me just remove everything from here let's remove this class name also now here what we need we basically need the routes so we'll import routes from react rout them so this will work as a switch all right now here what we are going to do the first thing is that we will be having a common napar component so let's say I'll be having a nap bar here so this will be my napar and then inside this we need to create all the routes so for now we are having only two pages so we'll create two route so we'll import route and here I'll give exact and here I'm going to use a path which will be slash and I'll be passing element which will be basically our component this is our home component so let's copy this and here we need card and this will go to to the card page let's save it now let's remove this logo so now let's go to this page so you can see that we're getting naar home if I try to go to/ card so going to the cart page and abar is basically common for both the uh pages so this is working fine so now what will be our next step so next step will be let's implement this napar component first or basically the header component so we go here so you're having this reusable components so inside this component I'll be creating a folder so let's create the folder and let's give this on name as we'll give this one name as a header only and inside this I'll create index. jsx all right so now let's quickly create this so this will be export default function header now let's return a div so this will be D leave all right inside this so let's take a uh we'll do another thing we'll take a nav here and we'll give a class name here so we'll give Flex items Center justify between height of 20 we give Max W 6xl and MX of Auto inside this we are importing link from react router Dom and here in this link component we have to give a two property so it will go to the slash or basically the homepage on click of this inside this I'll take another div let's take a class name we'll take a margin left of five and inside this I'll take H1 and let's give this one name as react Redux shopping card and here I'm going to use a class name so we'll give text uh red 900 font bold we'll give text transparent L to text Excel we do for SM we'll do text uh 2 XEL for MD we'll do text 3 XEL we'll do cursor pointer and we'll do tracking wide uh tracking wider or let's make this one wide let's format this let's save it now we are going to import this header component in our app.js so here we'll import this header let's save it let's see what is happening all right so we are getting this one so here what we can do we can also I think this is fine for now uh now after this link so let's go to our header component so we'll take another div and here we'll take a class name we'll make this on Flex uh we'll do list I think this is not required we'll do item Center we do space X of uh let's make this one six we do text Gray 800 all right and we'll do font semi Boldt inside this we'll take another link so this will again will be two slash and here what we'll do we'll take a paragraph and we'll make this one as home or let's do one thing let's make this one as a ul and we'll do this one as Ali and here we are going to do a class name uh we will do so for this one I think we need list none for this lii uh we will do a cursor pointer and I think that's fine so we having one home next we will take we'll copy this and we paste it here this will be SL card and here what we can do we'll simply render this card here let's save this and let's see what is happening so we giving uh getting here this is fine but for this one also I think we can have to give list none all right so there was some error actually the Tailwind was actually not applying so I just restart the project so it's now coming fine but I think we are not able to see this text so I think the reason is we have given text transparent uh we don't have to give uh let me just remove this one from here we already using this text here H okay so now this is fine so now next thing what we going to do so now if I click here you can see that it's going to the cart page if I click here going to the homepage and if I click here also it's going to the homepage so now we have to start working on the home component so to First list uh the list of products or whatever that we want to fetch and then after that we'll be start working on the Redux tool kit part so let's get started so the first thing is that let's go to our homepage and or or else we can do another thing or I think for now this is fine uh let's keep this one simple so we'll take uh two State here so one will be our products and another one will be set products and this will be used state of empty array and then we'll be having our pending state or let's make this on loading set loading which will be used state of false and we'll take use effect and here we are going to fet the list of products we'll do fet list of products so this will be syc function Fage list of products this will be const response AIT Fage and here we are going to use this URL which will be fake store API so this is f store api. com/ products here we'll be having data again the same thing which will be have it race. Json all right now before this one let's make this set loading as true and here we will do if this data is true so we'll do set loading as false and we'll do set product as this data that's it all right so now the first thing is that let's remove this part from here so we'll check if this loading is true so you want to basically render some kind of uh loader so I think for this one we have already installed this react uh loading spinner so that component only we are going to use so let's do one thing let's take a div here or else let's make this one null for now leter change this and here we'll do class name which will be mean height screen we do W full Flex justify Center and item Center here I going to import these circles from react loader spinner you can go to the official website and you can also check but this is pretty simple you just have to import the spinner that you want to use you to give a height property I'll give this one 120 uh sorry let's make this one like this then we having width I'll take one 20 we'll take a color we'll do RGB 127 comma 29 comma 29 then what else we need we'll do visible as true all right so now let's save it let's see what is happening awesome so you can see that we are getting this one loader and it's working fine so now next thing what we are going to do we have to basically render the list of products so for this one let's create another component inside this and I'll give this one name as product tile and we'll do index. jsx so here let's create export default function this will be our product tile which will receive the product single product basically from the pattern component and here for now I'm going to return a simple div and let's uh return product item uh we'll do this one single product item awesome so now here if loading is false that means we got the data so we'll do a div and here we'll first do a class name we'll do mean height of uh let's make this one as a 80 VH we'll do grid we'll do SM grid calls of two for MD we'll do grid Columns of three we'll do space X of five space y of 10 for large we are going to do grid Columns of 4 we'll do Max W 6 XL we'll do MX Auto and we'll do padding of three all right inside this we are going to check if these products that means these products that we are having from the API and and products. length if this is true we are going to render the products or else we'll render null so here I'll do products. map so this is our product item and now what we need to return we need to Simply return this product tile component and here we need to pass this product which will be this product item as simple as that so now format this let's save it let's see what is happening so you can see that we are getting single product item I don't know why this is going on top this part we need to check okay fine first let's see what is happening first let's quickly start working on this component then we'll see if there are any issue in the CSS all right so let's go here here so we go to a product tile all right so now the first thing is that let's remove this we'll take another div and here we'll take a class name what we'll do here we'll do this on Groove Flex Flex column we'll do item Center we'll do border of two we'll do border red 900 we'll do Gap of three padding of four height of uh how much let's make this 360 PX margin top of 10 margin left of five and we'll do rounded Excel inside this we'll take another div and here we'll do a class name we'll do height of 180px now here we are going to render image which we will get from this product all right so in this Source we are going to pass this product do image we'll do alt uh which will be product. title we'll do a class name we'll do this one as object cover height of full and width of full let's format this let's save it let's see what is happening okay this is fine this part we need to check why this is coming on top this is weird all right so let's fix this one I think this is coming because of this uh let me go here I think this is because of this space issue here let me just remove this I think this is not required okay so now this is fine so now let's uh add some title and also a button for add to card and then remove item so we'll go to this page so after this image let's do this div and after this we'll take another div here let's take a H1 and we'll just render this product dot title and here we'll give a class name so we'll do sorry we'll do class name for this H1 so we'll do width of 40 we do trunet uh what else we'll do margin top of three do text Gray 8 uh 700 we'll do font bold and we'll do text large let's save this let's see awesome now next uh so after this uh we'll take another div and we'll make this on class name as Flex we'll do item as Center we'll do justify between W full and we'll do Mt of five that means margin top all right now here basically we need to show if the product is already added in the card so we show remove item or else we'll show add to card but because we now haven't created any functionality something like that so for now we'll just add one button and we'll do add to cut and also let's take a class name for this button so we'll do BG red 950 uh we'll do text of white we'll do border of two we'll do border uh no sorry this is fine we'll do a rounded large we'll do font semi bold for this one or let's make this one bold only and then we'll do padding of food let's save it let's see okay this is fine all right so now uh let's do another thing we'll do justify Center instead of between okay so now this is fine all right so now we have render we'll go to card we'll come back here so data is coming so now let's start working on the Redux part so the main idea of this particular project is to that so that you guys have some idea on how to integrate Redux to because I think for now these many projects that we have done so we know how to phase data and also how you can integrate Redux uh sorry reactor out Dom and Implement routing functionality so it this project basically will give you very basic idea of Redux tool kit and now the reason why you should always start with the very basic because even if the project is complicated you will be able to easily do that so that's the reason your basic has to be very very clear now to start working on the Redux part the first thing is that Redux is basically a global store management uh sorry Global State Management Library something like context so you'll keep your state in one place so that you will be able to use this uh State anywhere you want basically so that is the main idea of this so the first thing is that what we need to do now in the Redux the concept is basically you will be creating slices for each and every each and every component or Pages you can say let's say we are having a cart here so we are going to create a cart slices which will consist of the accents and the reducer and your state basically and now we have integrated this sorry we have installed this react Redux uh package so that will basically connect your react application with Redux store and then using different hooks you will be able to basically extract those States from your Redux store so here I'm going to create our index.js sorry this will be index.js and here I'm going to create the store but before that you have to create the slices so I'll create here slice this and inside this uh I'll create another uh let's do one thing let's give a name of card slice. JS all right now how we are going to create the slice so the first thing is that so the process is like first you have to import the create slice method then you have to basically your initialize the initial state so which you will be basically manipulating and then you will be getting the updated State back then you'll be creating your slice using this create slice you have to give a name you will be creating uh you have to basically mention the initial State and you'll be creating all the accents here and at the end you have to import those accents and those accent you will be using in your component so first let's import something from uh Redux toolkit and this is called create slice all right so you can see that this you have to basically use which will generate the accents Creator and accents types that correspond correspond to reducer and your state now I'll be creating my cart slice so here you have to take this create slice and then you to basically give a name so I'll give a name of card you to mention the initial State you can see that it will take anyal state so we'll be creating this one in a minute and now after this you have to create your reducers so for now this is fine and now let's create our initial state so we'll do const initial state which will be empty so this initial State you using here all right now what we going to do we will be simply also here you have to give the reducers which will be object and here you'll be creating all the accents so for now this is fine so now what we going to do we just do export default then you're having this cart sl. reducer that's it all right let's format this let's save it so now we have to basically create our Global store just like we usually create Global uh global Global context so we go to our index.js and here we have to create this store now you obviously will be able to combine multiple slices for now we are having only one slice that is fine let's say we having 100 slice so you will be able to import all the slices in your Global State and that will combine and create a one single uh state so the first thing is that to create this one you have to import something from Redux j/ toolkit which is called configure store all right you can see that now here we are going to create so we do const store which will be configured store and this will basically take a reducer property and here you will be able to combine multiple reducers and this is very very important so now let's say you are giving a name so I'll give a cart as a name so I want to import the cart reducer now you'll see here in this card slice I uh default exported this reducer so I will be able to import this cart reducer from the slices SLC slice so this will be my cart reducer let's see you are having a 100 reducer here so you will be importing your next reducer let's say some dummy reducer from some dummy slice and then you have to give the name here dummy which will be your dummy reducer something like that so like that it will basically combine all of these for now we don't have so we'll remove this one and at the end we are going to do export default this store all right so this is fine so now how you will be able to combine this one or basically use these features of Redux in your react project so the answer is in your index.js if you remember just like we import Global context here you have to import this store in this component and you have to basically pass it in the root level so that you will be able to access all the properties from here but how you are going to do that so to do this one you have to import some component from your react Redux so here basically this react Redux will comes into picture which will combine your react and Redux both together and now I'll do basically cut it from here and this will take a store property which will be your store just now we have created basically this store here and that's it so now let's save it so now this will basically generate your store now what we want to do we want to basically create a functionality that I on click of this I want to add this product uh and then I want to store this product data in my cart slice so let's see how we are going to do that so now to do this one we will be creating method inside this reducer so here so here let's say I want to create add property or let's say do add to cart all right and this will be a method now this will take a state and also it will take accent and now what we want to do we will simply do state which is your current state dopus and I want to add this accent. payload that I'll be passing from this component so this is your one add to cut functionality now how you are going to access this to access this one you just have to export it so we do export con and here this will be cart slice dot accents so this is your one of the accents that you are exporting add to cut so now what you need to do I hope you're getting so this method now you have to call and then you have to basically on click of this button you have to push this data in this array which is your initial State and this will basically give you the updated State back now let's go to our this product. GS component that you have created product tile now here I'll be creating a method so this will be my function and this will be handle add to cart all right now this is the single product that we are having but how you are going to call this method so now this is the point how you're going to call this method from this component so here this uh Hook from this react Redux will comes into picture so this react Redux will give you this particular hook that is a dispatch hook so you have to first import this one from react Redux and this is called use dispatch so this will dispatch a certain acction which will go go to this slice it will check that okay I called this action and it will do the certain functionality here I hope you're getting so now what you need to do first you have to initialize this one so use dispatch now you have to basically so you can see that this will basically dispatch a acction all right dispatch function so here you call this dispatch and you call this add to card from the card slice and then you have to basically pass this payload so you can see that it will take a payload and this can be of any type for now you have to pass this product because this is the current product I want to add that's it now this handle add to cart I will give on click of this button as simple as that now so let's save it let's go to cart slice and let's log this section here and let's see what is happening sorry what is happening let's go to console I'll add this one you're getting a type so this is the type cart SL add to cart because this is the accent name and in the payload you're getting this information if I click here you are getting this one and then you are getting the current product all right so now this will basically update your state so we have added this one to our state but how we you are going to access it so to access this one you have to basically use a use selector hook so that is also from react Redux so you selector will basically give you the updated state from your Redux store all right so let's see how we are going to do that so to do this one first thing is that we'll go to our cart. JS file here and now uh so this is the component let me just so here first thing what if you need to do so the first is basically we have to import the state updated state to get the state what we need to do first I'll show you what we getting in the updated state so you'll use this use selector from react Redux which will basically give you the updated state so here we'll get the state and let me just log this state here if I now save this now let's say I'll add this one let's go to our card so you can see that we are getting three Arrow of three now because this okay one is getting added two time that is fine but you can see that we are getting add of three and the data is updated and if you notice here we are getting a card here because this is the name of the um slides that we have given here so what we can do we can simply destructure this cart from our state so we can simply do here cart so that means we are getting this one from our state so if I now log this cart we'll see that we'll be getting a arrow of three if I now go to home and let's say if I I do add to cart here and let's go to our cart now you're getting four so this is getting updated all right so now here what we going to do we'll take another state and that will be to combine all the total so we'll do total card set total C this will be US state of zero and here we'll take use effect and here we'll keep this cart as a dependency and we'll do set total cart which will be simply cart do reduce and this will be our current and we'll simply add this account plus if you go here you'll see that we getting this price so we'll do uh uh accumulator plus current dot price all right and we can give this zero as initial value that's it so now let's see what we getting the total cut so we getting fors 110 if I go back here let's add this one go to cart so you can see that this is updated now awesome so now we need to basically uh start working on this cart page but before that another very important thing we need to do and that is if this cut is already added this item so we don't have to show add to cut we'll be showing remove to cut and then we we will not be able to basically add it again we have to remove this so first let's complete this functionality then at the end we'll be uh working on the card page so we will go to the product. JS so let's go here which is our product tile and here you can see that we doing handle add to cut so the first thing is that we will be first getting the list of cart items so again we'll do const we'll get cart and we'll get it from use selector all right and now what we are going to do we will basically check so let's come here so we'll check if this cart do sum that means if some of the item are actually present and here we will do this item do ID is equal toal to current item which is our product. ID that means this item is already added so you don't have to add it so here will basically show this one as remove from cart or else this will be add to cart so this is one thing same if this is true so if this is true so we don't have to do handle add to cut we will basically do here handle remove from card or else this will be handle add to cut and now let's create this function so we do function and remove from cart and then we'll uh do log and this will be removed now let's see what is happening if I go back now let me first refresh this okay so now here if I do here so you can see that we're getting removed from card but if I try to add again so it is getting removed so not adding anymore I'll go to cart only one item is added if I do add to cut and go back only two item and this is working fine so now let's start working on this remove from cart functionality so this will be pretty simple so first we'll go to our cart slice and again you have to create another method just like you'll do it in the context so we'll do remove from cart which will take a state and again also the accent and here we are going to return state. filter which is your basically current state and then we are going to do item. ID is not equal to equal to accent do payload that means we are basically filtering the current item on remove so now what we need to do simply we can go to our product tile so here we again do dispatch and then we'll do remove from card sorry we also have to basically import it here export it so now let's go here so we do remove from card now what you need to pass you need to pass a current ID so this will be product. ID that's it so now let's save it so now let's add this one so go here only one item go back now click here again add to cut if I now go back so this is empty and this is working fine so now we have done till this part so now let's start working on our card page so first we'll go to our card. jsx let's close everything else and here we'll first check if this card and and card. length if this is true so we are going to render so we'll take a div or else here we'll show like your card is empty some something like that so we'll show a div and we'll uh let's give a class name here first now let's make this one div we do a class name and here we are going to use we'll do a mean height of uh how much you do 8 VH we'll make this one as Flex we'll do Flex column we'll do item as Center and we'll do justify Center all right inside this we will take a H1 and render your card is empty and here we'll add a class name which will be text Gray 800 we'll do font bold we'll do text Excel margin bottom of two that's it and then after this we'll take a link here so we'll do import link from react router Dom so you import link so this will be two it will go to homepage and here I'm going to import uh sorry use a button so we'll do sop now and let's use the same style that we are using here so this one copy this sorry copy this and we'll paste it here let's save it let's see what is happening awesome so if I click here it's going back if I add this one and let's go back so now we have to render the list of cart items all right so first we'll go back here all right so here now we are going to render the list of cart items so we'll take a class name here also and uh this one will do mean height of 80 VH we'll do grid we'll do for MD we'll do grid column of two we'll do Max W 6 XL and we'll do MX of Auto all right now inside this we'll take another div we'll take a class name so we'll do Flex Flex column we'll do justify Center we do items uh we'll do items what we can do we'll do items Center and we'll do padding of three now inside this we're going to render the cart items we do card. map this is our card item now we are going to return the cart tile so here I'll create another component and this will be our cart tile let's create our index. JX so this will be export default unction this is our cart tile which will receive the cart item and here I'm going to return a div and this will be our card item so here I'm going to import this cart tile which will take the cart item which will be this cart item here this one that's it all right so after this div so let's do one thing uh here let me cut it so after this div we'll take another div here all right so here what we'll do we'll take another div we'll take a class name and we'll do Flex Flex column we'll do justify Center we do items end do p of five do space y of five and margin top of 14 inside this we'll take a H1 and this will be your card summary all right so let's take a class name here so this will be font bold uh we'll do text large and we'll do text red 800 all right after this we'll take a paragraph inside this we'll take a span and this will be our total items and here we'll take a class name so what we can do we do a text Gray of 800 and font bold all right and here we'll do take another span and this will be our cart cart. length all right so after this B uh we'll take another paragraph and then we'll take another spand let me just copy this from here only so this will be our total amount which will be this total amount that we have created sorry total card and I think that's it so now let's format and save this let's see how what is happening here all right so this is coming below but that is fine that we are going to check first let me just quickly create this so let's go to our home let's add this one let's go to cart we're getting two let's add this one let's go here we're getting three so now let's quickly start working on this cart item or basically cart tile so here I remove this so here we'll take a div we'll take a class name we'll do Flex item Center padding of five we'll do justify between background red we'll make this one as let's make 500 margin top of two margin bottom of two and we'll do rounded Excel inside this we'll take another P sorry div we'll take a class name we'll make this one Flex padding of three and we'll take a image here let's take a source which will be cart item dot this will be our image we'll take a class name we'll do height of 28 rounded large and ALT of uh let's make this one card item do title all right inside this we'll take another div let's make a class name we'll do mL of 10 we'll do self start we'll do space y of five inside this we'll take a H1 and we'll render our cart item dot Title Here Also we'll take a class name so we do text Excel we'll do text white and we'll do font bold uh let's format this all right so this is fine now after this we'll render the price we'll take a paragraph and we'll do here sorry cart item do price so we'll take a class name here also we'll do text white and font extra bold awesome then after this we'll take another div or let's do one thing inside this div we'll go to our product tile and I'm going to copy copy this button from here paste it here now on click I do handle remove from cart and this will be remove from cart because here we will not be able to add because this is in the cart page so this will be removed from cart and let me copy this and create this function here that's it so now let's format this and let's save it let's see what is happening okay this is fine let me just check what is happening here okay I think here we can take a display of flex yes sorry this is in which one let me check okay so we'll go to our card page let me do class name of flex here let me reduce this little bit sorry not this one so we go here I think here can make this one as 60 let's see how this is looking you'll make with as 200 PX let's make this one 300 sorry yeah so here what we can do we'll take a class name and and we'll do sorry we have we have done mean height here not width so we'll do a width of 300 PX so let's see also this one we have to make Center to do justify content Center so this this is I think so here I think we can make justify Center okay let's go to soop now let's try to add this one let's go to cut okay so now this is added here now we have to also work on this remove from cut so now this will be pretty simple we can go to C tile now the first thing is that we have to do dispatch which will be our use dispatch now I think you'll be able to do it so just call this dispatch and then you have to do remove from cart from our cart slice and then you'll call this cart item. ID so this ID you need to pass that's it now let's save it now let's see what is happening if I now see now this is empty if I go here add 1 2 3 4 and five go to cart so you can see that this is updated total item is f don't worry about the CSS this is fine we just have to check the functionality whether this is working or not so now I'll remove this one from here so amount is updated remove this one updated remove this one this one if I remove here cart is empty so now I think that's all for this particular video I hope that you understand how we need to basically use Redux toolkit how to create the accents how you can create a global store and how to create the redu how you can use use dispatch and use selector hook to connect your react and Redux project so I think that's all for this particular project now let's move on to the next one now next one will be our last project and that is a monack Blog application so we'll be creating very simple blog application there will be very very less CSS I'm again explaining uh sorry mentioning this one so the main functionality will be how you can interact with a uh mongodb database and how you can create a full stack project from scratch so let's start working on that particular project all right everyone so let's start with our expense tracker so here you can see that for this particular project we are going to use chakra UI as our CSS utility framework you can say so we'll be having simple onepage application and on the left side you'll be able to see the balance and then you'll be having the expense and the income so and click of this model will uh open and here you will be able to add a income or expense so let's I'll add a income and I need to give the amount I'll choose income I'll add this one so you can see that the balance is now updated so this is a chart that we are going to use for this one we are going to use react Apex charts and then if I add a expense so let's say I add a 500 this will be expense if I add this one so this is updated here this is now updated so here you'll be able to see that how much is the balance so this will be very simple project the main idea is behind that so that you'll be able to use chakra UI if you want to use particularly in your uh like any project that you are currently working or let's say you are giving an interviewer and there is a requirement that they want to know that whether you will be able to use any CSS third party packages or not so this is the main idea so let's start working on this particular project all right everyone so let's start working on our expense tracker project so for this one we are going to use chakra UI uh so the reason is because we are using different different CSS uh packages uh in this whole video so that you'll get idea of each and everything if in case you are facing these things in your interview so the first thing is that you have to install this one I already installed a simple react project so I'm not not wasting any time but by doing all of this from scratch I I hope you're getting this thing so first thing is that we'll do uh let me just paste it apart from this you also need react icons and for this one we also need a chart so we will be using this react Apex charts so this is another another package that we need to install and I think this would be more than enough all right so the first thing is that if you go to this official Doc so here first you have to create this provider so again this provider is kind of like whenever you'll create a context and you'll wrap your application in your context so that you'll be getting all the uh Global state in your child component so this is exactly similar uh like that all right so I think it's still installing before that let's quickly create all the components that we need so we'll create a folder now the first component we need and that is a main component uh we also need a chart component then we also basically need the view component where we'll be showing all the expense and the income so this will be our view uh or let's give this one as a expense view uh something like that expense view uh what else we need we also need a overview component or let's make this on summary summary component and also you need a add transactions component all right I think this is done now let's go to our source and if you see that we basically need to create our base theme for our chakra UI so in the theme what we need to do this will be very very simple so we going to import something [Music] from chrai react and this is called extend theme now here we will be basically creating so we do const theme which will be this extend theme and here I will be passing one that will be our initial color mode which will be light and also you need to pass another one which will be use system color mode and this will be true and at the end we'll do export default theme so this will basically create a simple theme now to use as I already told you we have to basically go to our main index.js component I'll remove this uh strict mode here and then first I'm going to import the provider and that is called the chakra provider and you have to wrap your app inside of this and then here you have to basically pass the theme which will be our theme that's it so this is the very basic structure we need now because we are having so many components and we have to interact with so many different components again for this project also we are going to use a context for our Global State Management if you want you can also use Redux toolkit because we also have done Redux toolkit in one of the projects so you have some idea so I'll create our index. jsx and here first let me quickly create the component so we do export const as I already told you like uh context is one of my favorite uh features in react so I really really like using this and here we'll do export default function Global so we'll do Global state then I'm going to return this will be Global context. provider and I'm going to pass the children that's it now let's save it now we'll go to index.js again and again I'm going to WRA this context so we can wrap it here only so we'll do Global State sorry and then we'll just wrap it here let's save this so this is fine now let's go to our app.js and we will be first creating all the basic structure that we need and after that we'll be start working on the functionality and thank God in this project will not be doing any kind of API call anything this will be very simple one so here I'm going to remove all of these and I remove this one also now because we are using chakra UI so we'll try to use most of the components uh inbu components from Chakra react package only so the first uh we will start with container and inside this I'm going to use a BG so here I'm use this color so this thing I already have actually don't think that I actually know all of this I already have this one I already created this project separately so I'm just taking reference from there only all right and then we are having we'll give a Max W so here we can basically pass container dot 3XL then we'll take a height so height is basically the minimum height which is 100 VH we'll take and we'll pass a padding of zero all right that's it now inside this we'll take a flex we'll make the height as full and inside this we'll take a box and here we are going to import the main component so let's go here let's quickly create something so do index. jsx and here I'll be having export default function Main and let's return something for now we return a de I'm going to remove this one later and this is main so here I'm going to import main component and in this box we'll give a height of full we'll give a flex of five and we'll do a see I'm not uh like explaining each and everything it will definitely take a lot of time so here I'll just divide this one with 20% 30% 20% uh I will do 50% % and we'll do 60% if you over here also you'll get all the uh properties basically so this is the WID property and it is the responsive value that you'll be able to give for each and every resolution so let's save it so now let's see what we getting here so you're getting main here this is fine so now let's close everything else and we'll go to our main component and I'll create the structure here so I'll remove this one let's import a flex and here I'm going to give a text align I'll give this one as Center we'll do a flex Direction now this is actually almost similar to tnd SES also we'll give a PR of five and we'll do a PL of five inside this we'll take another Flex we'll do align items uh we'll do this one as Center we'll do justify content uh we'll do space between and we'll do Mt of 12 here we are going to import another Inu component that is heading from Chakra UI and here we'll pass simply expense tracker and here we'll do a color of uh let's make this one uh blue blue. 400 and we'll do display now again these all are actually the responsive value you have to go to the official Doc to know about more so here we'll make this one the first we'll do none then we'll do block then we'll do block block and we'll do block so now let's format this let's save it let's see what we getting now if you see if I just inspect let's go to very see for a small device it's display none so if I go to here so you can see that we're getting display none for this one display none if I go for larger device it is uh the display block so this is what we are doing here for different different resolution all right now after this heading we'll take another Flex here we'll do uh align items we'll do this one as Center and here we're going to use a button so for this one we'll do this one as add new transaction and here we'll need to pass some of the properties so the first is the BG so here also we do blue uh let's make this one as 500 we'll do a color of black uh we'll do mL of four uh what else I think first let's see what is happening here let's save it okay you can see on H this is changing but although this is looking nice let's make this one uh we'll make this one as 700 and we'll make this one as white but if I keep this one white then it will look odd actually we don't want to add any hover property so let's make this one as keep this one as all to Red only let's see no I think black was good and we'll keep this on a little bit yep yeah I think this is fine okay so we having add new transaction and then after this Flex sorry here we are going to import our overview component so here we'll do overview and after this we'll take another flex and we'll be importing The View component or expense view so let's first create this overview component here so we go to our overview where is that that is our summary so we'll do index. jsx so we do export default function and this will be our summary and I'm going to return here let's say H1 and this will be our summary component all right let's save it now let's go to our expense View and this will be our expense view component so we will be basically using this one for both expense and income but we'll discuss that one later for now this is fine okay so now here we are going to import the summary component and inside this we'll be using the expense view component two times that's it let's see what is happening okay so here summary and then we are having expense View okay so now for this uh Flex we'll give some style we make the wi as full we'll do align items as Flex start uh we'll do justify content as space evenly and we'll do a flex Direction so for this one we'll make this one as column column column for larger we'll do row and row okay so you can see that we'll be having here and here and this is our summary component all right so now what we need to do in the summary component in the summary component we will be basically having the balance and in the right side we have to show the chart so let's let's start working on that component structure first all right so let's create the uh this component the summary component structure first so we'll start with first we'll import box and here we'll give a padding of six uh here we will give a border so we'll do this on one PX solid I'll also give border color so we'll do this one as gray 100 we'll do overflow as hidden we'll do border radius as 10 and here we are going to use a background so we'll do background as white all right now inside this uh we'll also let's make the display as Flex okay so now inside this we'll take a flex and for this one we'll do width as full we'll do justify content as Center we'll do align items as Center and here we'll do Flex Direction and for this one we'll do a base of column oh sorry then for SM we'll do also column for MD also we'll do column for large and Xcel we'll do Row for large we'll do row and for Excel also we'll do row all right now inside this we'll take another Flex and here uh first we'll give some properties we'll do Flex one we'll do width as full we'll do Flex direction as column we'll do align items as Center we'll do justify content as space evenly we'll do margin sorry we'll do margin left of uh we'll do minus 20 and we'll do margin right of two let me format this now inside this we'll again import our heading component and here we'll show the balance so we'll show balance is let's say 100 and here we'll give a size so we'll do MD uh we'll do margin bottom of four and we'll do color as gray dot uh 600 let's save all of this let's see what is happening so you can see that we are getting balance here all right so now after this uh what we are going to do let's take another Flex here and here we are going to do justify content as space Lo space evenly we'll do align items as Center we'll do BG of uh let's make gray do 50 then we'll do width as for now let's make this one as full we'll do height of 100 PX we'll do border as 1 PX solid and we'll do border color we'll make this one as gray do 100 awesome all right so now inside this uh we'll take another flex and here we are going to do Flex direction as column okay so now here we are going to basically render our uh what is the income and also what is the expense so first we'll start with our income so for this one we'll do heading and we will basically render the income but for now we'll some render some uh 100 static value then we will take another component which is text and here this will be our total income all right and here we're going to use the color we'll do color as Gray dot uh fire 600 and for this one also we'll do but let's change this one we'll do 700 all right now next we'll copy the same thing and we'll paste it here the only difference is this will be our expense okay so I think rest everything will be same all right so now I think after this okay after this we'll take another box and here we are going to use a flex of one we'll do margin top of 10 we'll do margin left of minus 90 PX we'll do a margin right of uh five we'll do a width of uh let's make this on 300 PX we'll do height of also 300 PX we'll do display as Flex we'll do align items Center and we'll do justify content also center now inside this we want to basically render our chart so we'll take heading and we'll do this is our chart later later we are going to change this one okay so we having balance this is our total income total expense and this is our chart and this is our expense view awesome so now uh what we can do we can start working on our functionality first and then so on click of this will be opening a model and then whatever data we'll be entering based on that you have to render the chart this data also will be dynamic and based on this here also you have to render the data so let's start working on this model first all right everyone so let's start working on this uh transaction form component first so I'll create index. jsx here so this will be export default function this will be our sorry this will be function this will be transaction form now definitely it will receive some props but for now let's quickly create the structure first so here uh this will return model from Chakra UI and this will take a e open prop so you can see that this one but this one we're going to uh fix it later here we'll take a form and here we just uh import the model overlay all right now after this we'll import model content and inside this we'll do model header and this will be our add new transaction something like that all right now after this we'll import model close button and here this will be model body see how easy it is to implement in this uh chaki or Tailwind whatever you'll say all the components are inbuilt same you can do for material UI also and here what you need to do I will be importing form control then we'll be having form level and this will be our enter uh description uh description yeah I think that is fine all right now after this we'll be importing input and here we will give a placeholder so this will be enter description we'll do enter transaction uh [Music] transaction description then uh what else we'll be having a name so name we'll do description we'll do type of text and also you need the on change and the value but for now this is fine so after this form control we will take another one so let me just copy this and we'll paste it here and this will be enter amount so this will be type will be number name will give this one as amount all right and this will be our enter transaction amount that's it after this we need a radio group all right and here we'll do a margin top of five inside this will be having radio all right this will be either it can be expense or this can be income correct let's do vice versa okay so income so now here we have to give a name which will be here type and the same we have to give name here also this will be type now this will also take a colored scheme so colored scheme will give this one as red and for this one we'll give color scheme as or let's make the expenses red and this one will do blue all right and also to give the value so for this one value will be income and for this one value will be expense on change and everything we are going to do later but for now this is fine all right so now after model body uh we'll import model footer and here we'll take a two button so one will be cancel and then we'll take another button and this will be add all right and I think this is fine uh let let's give for this on a margin right of four okay and I think this is all the structure we need now this transaction form we have to import in our summary component so here we are importing this chart right so after this Flex we can import the transaction form component now here we have to pass some properties so one will be a one close and then second one will be is open or not so how we are going to manage that so this one we will be receive again from this uh from the parent component so this will be on close and is open now let's go to our main and here chakra UI will give you one hook that you can directly use so this will be const is open comma on open and then we are having on close and this is is called use disclosure all right so this value you have to pass so now you can go to your overview component or summary component here we having ease open which will be our ease open then we having on close which will be our on close all right this is fine and now you can see we are having this add new transaction so on click of this button we have to show the model so now we can simply take on click and this will be on open that's it so now let's go here and then we are going to pass this on close as this on close and E open will be e open so these two again will receive in this add transaction component so receive on close and is open so here you have to pass e open as is open then we having on close which will be on close and then we having this cancel button so here also you can give on click this will be on close let's save all of this let's see what is happening here if I click here awesome so you're getting here so this is our income or expense you see cancel if I click if I click here so this is working fine so now we will start working on the functionality I think main structure is completed but before that let's quickly create the basic structure of this chart uh this chart component that we'll be creating now for this one I will not be creating all the options from scratch I already have some of the uh General configuration I basically copied from the official documentation and the same I'm going to use although I'll explain that what exactly we are doing there all right everyone so let's start working on the chart component so I'll create our index. jsx here so this one will be very very simple so we do export default function transaction chart summary now obviously this will also receive some data but for now we are going to return and here what we'll do we simply return uh sorry import chart from react Apex charts and this will return this chart component which will take the options that we are going to just now create it will also take the series which is basically the data So currently we are having this options you can see that I already copied so now I don't want to save this so we having const options and then I'll just paste it let me remove this so you can see that we having level which is expense and income and then we having two colors let me just change this color to Something Blue yeah I think this is fine and then based on that we having some properties which you'll be easily able to understand the legend we don't want to so data levels are for false then we are having some options these are the fields let me use the same field here also that's it now here I'm going to use the same options series because we are having only two levels that means there will be only two data one will be ex expense and one will be income so let's say I'm having expense of 100 and income of 500 so this is our static data type we have to give this will be a pie chart width I'll give one 100% and height I'll give 100% now let's do one thing let's take this expense and the income from the parent component so by default it will be let say 100 and this is also will be 100 and here I'm going to use this one as income let's say and this will be my expense all right I'll go to summary component and here we are using this chart component so we just inut this transaction chart summary and I'll just pass the expense as let's say uh 100 and I'll pass income as also 1,000 now let's see what is happening if I now save this awesome so now you can see that we are getting the data here so that means this is working fine now what will happen whatever dynamically data we want to pass that data we need to basically uh update here so you can see that income is now 100 and expense is 1,000 why is that okay let me just check okay I think we have done opposite so to make this one as income and this will be expense also same we'll do opposite here also and let me copy this and we'll use the same here okay income and then expenses 100 all right so now we'll go to our context now it's time to implement the functionality so now we need couple of uh State basically in the context let me close everything so the first one we need and that is the form values which is basically our form that we are having here this form all right so here we'll do const and this will be your form data set form data this will be use state so use state of here we'll pass the type as expense and we'll do amount as zero and we'll do description as empty we also need the value and we'll do set value which will be U state of expense by default all right so these two we need also we need to track the expense value total expense value and the total income value so weing here total expense set total uh expense which will be used at of zero and then we are having const total income set total income which will be US state of zero all right so this is we need and at the end we have to track all the transaction so we'll track all transactions we'll do all transactions and set all transactions which will be used state of Mt so many things we need so now this all of these we have to pass in our value so we start from form data set form data total expense set total expense total income set total income value set value all transactions and set all transactions wow so many things so we have passed all of this now first thing we need to manage the form handling so go to our add transaction here and then we are going to import these things so the first thing we need const so we need the form values or the form data then we need the set form data all right we also need the value and we need the say value and then I think for now this is fine then we'll do use context of global context all right so now here let's create a method so we do function handle form change which will take the event and here we'll simply do set form data which will be our form data data and then we'll do event do Target do value will be sorry not value this will be name and this will be equal to even. Target dot value awesome so this is we need so now we need to pass this one in this one so this will be on change so this will be handle form change and so you can pass it here that's it all right now next we are having this radio group so here we have to pass the value so this value will be the value of type of either it can be a expense or it can be a uh income same we have to do on change which will be set value all right now here what we need to pass here we need to pass the checked value correct so checked value will be if the current form data that we are having do type is this is equal to equal to income so that means this is now checked or else uh here we'll do this will be expense let's save this and I think this is fine so now what we need to do we have to uh basically submit this so uh here we are already I think having a form okay so we'll do on submit we'll do handle submit all right and here we'll do button here we'll do button type of uh submit all right and here we can do uh on click we'll do on close for this one also all right so now we have created a method that will be on submit we have to basically uh handle the current form data so for this one what we can do we can create another method here which will do that so we do function handle form submit something like that and this method will pass it here then we are going to take it in our context and we'll create function uh this is handle submit which will take the event so first we'll do event dot prevent default and then we'll call this handle form submit and we'll pass the current form data that we are having as simple as that that's it so now let's see what is happening in this context the method that we have created so that means here we'll be getting the uh form value or basically the current form data and let's log here this form current form data so go here let's go to console add something we'll do this on the first 100 we'll do income click on ADD so you're getting okay so we are getting this one as type as expense okay this is wrong so make this one as income first okay so if I do here add something give some value we'll do income add income if I go here add something change the value we do expense plad we are getting still income so this part we need to check okay so I think I got the issue the reason is because we haven't passed any on change in this uh in this radio so here also you need to pass on change which will be our handle form change same we need to pass it here also so now I think this doesn't matter whether this is expense or income let's see what is happening now if I click here we add something and let's make this on income so we're getting income I'll add something again we'll do expense add here we getting expense okay so now this is fine so now what we need to do uh we have to basically go to our context and here on form submit we have to basically check if the title and the sorry if the description and and the amount is not empty so you can basically check if the current form data dot description or if current form data do amount empty then we are going to Simply return all right else we'll do set all transaction which will basically get all transaction the previous one and here we'll basically pass the current form data that we are having and also you can pass a ID which will be date do now sorry date do now okay now let's see what is happening now find now save it now let's log here all transactions uh so let's add first income we'll do income we'll do 1,000 we'll add here so you're getting income 1,000 first income We'll add we'll do first expense we'll do 500 we'll do expense add here reting two one is income one is expense so this is working fine so now what we can do basically we can go to our main file and we have to update these values dynamically so that is this is now pretty simple so what we can do we have to import import all of this now all right so now we'll go to our main.js file and here we are going to import the following things from our context so we'll use context of global context so we need total expense to set total expense total income and set total income so we going to copy all of this and then uh we will import it here also we go back and then we are going to import this all transactions because this will consist of all the data that we are having so now we'll take this use effect sorry we'll take use effect and then we'll keep this all transactions as a dependency and we'll do let income is Zer late expense is zero so we'll do all transactions. for each so this will be item so here we are going to check if this item. type if this is equal to equal to income so in this case we will do income sorry income will be equal to income plus Loop Parts float of item do income sorry item do amount not income because we having amount or else this will be expense so because this is income so it will be income so then we can copy this and paste it here and this will be expense equal to this will be expense plus the amount and after this we're going to do set total expense will be expense and set total income will be income that's it so now we will pass all of these in our summary components we pass total expense which will be total expense we'll pass total income which will be total income all right so now let's go to our summary component so here we will receive this total total expense and receive total income all right now here we are having this your balance and here what we going do can simply do something like that your total income minus your total expense that is your balance and then you're having this total income so here we can render our total income and here we can render our total expense let's save it let's let's see what is happening okay so I'll just add a new one and I'll do this one as let's say second amount 250 income I'll add here so you can see this is getting changed add here we'll do expense again two we'll do 6 365 expense add this is getting changed all right so the same we have to update here so now we can again go to our main.js file and in this chart basically we have to pass the data so I think in the uh in the chart we are passing sorry in the summary component only we are having chart component where is that where we are having chart component okay transaction chart summary I think that is the one so here we'll pass the total expense and here we'll pass the total income okay now you can see that this is getting changed awesome so now we just have to render this view okay so now let's start working on this list view component so we go to this view so here we will basically receive some data but first let's uh create the component structure first so we'll do box so here we'll do a flex of one we'll do width we'll keep this on full for now we'll do background as white uh we'll do a margin right of four we'll do margin top of 10 we'll do a padding of five we'll do PB of sorry we'll do a PB of four we'll do a border of one PX solid we'll do a border color of we'll do gray do 100 and we'll do border radius of 12 inside this we'll take a flex uh we'll do align items and justify content so we'll do justify content as space between and we'll do align items as Center awesome now here I'm going to render a heading component and we'll basically get the type here so we'll get the type so we'll check if the type is equal to equal to income so we'll render income or else will render expense and here Al Al uh use a size of mid and we'll use a color of let's use red. 700 all right now after this Flex we'll be getting the data from the parent components we'll receive the data here so we'll do data do map this will be our item and here we'll simply return a flex all right so the first thing is that we're having a background color so background color will check if the type that we are receiving if this is equal to equal to xense so we going to do red do 50 or else we'll do blue dot uh 50 all right we'll do a margin top of four we'll do justify content uh do space between do align items as Center we'll do border uh 1 PX solid soorry we have to do inser this again we'll do border color so we'll copy this and we'll make this one 100 that's it we'll do padding of four and we'll do a border radius of 8 inside this we'll take another flex and let's make the Align items as Center and justify content as Center and inside this we'll render a text component and we'll basically render the item do description all right and here we'll do a margin left of sorry here we'll do margin left of three we will do a font weight of bold and we'll do a color of gray do 600 awesome now after this we will take another text component and we'll just render the item do amount that's it so now we'll go to our overview component sorry not overview we have to go to the main.js component and here we are having this expense View and here you have to basically pass the data so the first you to pass the data so data will be all transactions that we are having here do filter then we'll do item and here we'll pass item. type let's say we want to pass if this is expense I think data is not defined we're having okay text is not defined okay let me fix that and here we are going to pass the type and for this one type will be expense let me copy this and here we'll be making this one as income and this one will be doing income okay now we'll go to our expense View and we are going to import this text component from CH UI let's save this awesome now we are getting all of this so add a new one third income of this month 5,000 income add we're getting here now let's add another one another expense enter amount of let's say 652 expense add all three are getting updated and the data is coming fine all right so that's all for this particular project now let's move on to the next one next project will be a last project of this particular video so we will be basically implementing the uh Monte blog application from scratch so let's start working on that particular project all right everyone so I think we are almost at the end of this particular video so this is the last project that we are going to build and this will be a full stack M blog app so the main idea behind this project is that so that you will be able to create a mon stack project from scratch so we are going to use mongodb and express for this one and for client side react obviously so you can see that we'll be having simply two pages one will be home and add a new blog and this data will be stored in a database now the reason you may ask that why we are creating a monack project now sometimes you'll see there are some particular uh companies like uh I'll not say the name but obviously there are some companies who will give you some Hands-On coding so they will give you one uh simple project to build and they they probably will give you like two to 5 days of time and in that time you have to basically build that project and then you have to give it to them so in that scenario sometimes you might face that they will give you to create a full stack M application but it will be very simple so let's see how this functionality will work so here we'll be having add blog so you can see that we are not using any styling because throughout this uh particular video we have used styling in most of the places so let's say I want to add a new blog so I'll add a new blog added and so this will be new blog description I'll add this one so now this is updated if I now refresh this obviously this will be updated if I go here uh another blog added let's copy this add this one now let's say I want to edit this one so I'll go here and I'll do this is edited so I'll edit so this is now edited and if I not try to delete this this is deleted if I refresh this obviously you'll be getting the updated data deleted and if I delete this one no blogs are added so this will be a very simple application and I'm pretty sure that this project will also help you a lot so let's start working on this particular project all right everyone so let's start uh working on our uh full stack or basically mon stack blog application so the first thing I want to show that what I've done you can see that I created a simple mongod project and the same we are going to use and also I created another folder and inside this I have a client folder so inside this client folder nothing but we are having a simple will create react app project so here now we will be basically start with our implementing the server or basically backend first so each and everything we are going to do from scratch so the first thing what we need to do first we'll be creating a folder and I'll give this one name as server so this will be uh this will consist of all the backends project that we will be basically having here all right next thing what we are going to do now I'll just open this one in terminal and we will be doing first npm in it so this will basically create the package dojon that we need so I'll give any name for now this is fine later we'll change this one we'll do yes so now this will in create a package.json now what are the packages that we need now we are we will be using mongod we need mongus we also needs nodon to run the server uh like concurrently and also we need uh Express and also you need course so mainly these four will be more than enough so we going to use npm install this will be course we need Express we also need mongus and also we need node one to run our server now let's install all of this now after this what we need to do we will be changing some of the things here and then we'll be first creating our main index.js from where we will be serving our main uh index file or basically the root file so here uh what we are going to do so you can see that we are having this main which is index.js so we don't have any index.js for now so let's create one so we'll do index.js all right now inside this package. jsn we'll create a script which will be start script and because we already install node one and here you need to basically give the file name so we'll be doing index.js because that is the file name so now this is done now next thing what we need to do first we will be basically Crea creting the very basic server setup so here let me close this one so first we will need Express so we'll do require and we need Express next uh we also need the DB connection but we haven't done this one so later we will be adding those we also need cords so we'll do require this will be cords all right now what we going to do create our app so we are going to just invoke this Express and then this app will use this course all right and also we going to do app.use which will be express. Json that's it now here uh we'll do our main app.use main API route which will be/ API this will give you a call back which will give you request response and now here we'll just do race. send and we'll just do your hello or I'll do hello world something like that and after that we need to do app. listen now here you can basically mention a port name but for now I'll just pass this one as 5,000 this will also give you a call back and here I just going to log console.log and we'll do app is running at 5,000 and I think that is all the very basic structure that we need now to run this one what we can do we can simply do npm start now let's see what is happening so you can see that it is okay so there are some error you're getting that some module is not found so this one we need to check so it's not getting the module CS okay let me just create open a new one or let me just check whether we have installed CS or not sorry see we we haven't installed CS that is the reason let me just uh create open another one so here we'll install npm install CS all right now let me I'll remove this one later this is not record so we installed now CS now let's go here so now let's see if we run this one what is happening so we do npm start all right so app is running at 5,000 so this is working fine so now we are going to uh do the DB connection so inside This Server I'll create another folder and I'll give this one M as DV and inside this I'll create index.js so for this one I think we have already uh created our mongodb project and the same we are going to use so you'll go here and the first thing is that if you you can see that here you'll get this connect and then you'll be getting this connect mongod for vs code sorry and here you have to basically you'll get this connection URL that you need to copy and then here the first thing is that we need mongus so we'll do require mongus now here we'll set mongus do set and here we'll set uh strict query as false and then we'll do mongus do connect and you have to basically pass this URL I just copied and then I have to you have to basically give the password here so I'll just give my password you can create your own and then you can use the same now this will give you a promise so we'll do dot then and here what we can do we can simply log console. log and we'll do connected mongodb all right if there are any error sorry if there are any error so we'll just log this error so let's save it all right so now what we can do we can go to our main index.js and here we'll simply do require and we need to basically go to/ DB and it will automatically take from the uh that connection so it will automatically take this DV connection that we have done here all right I think that's it so now if you go here you can see app is running at 5,000 and we getting connected mongodb so which is basically coming coming from here all right now let's see how we are going to approach this one so mainly we will be having three things one will be a model so model is basically where you will be defining your model then you'll be having a route route all the routes will be defined and those routes you are going to use in your index.js and for each and every route let's say we you will be adding a blog or we'll be fetching list of blogs or we'll be deleting a blog or updating for each and every blog we'll be having a controller so that means we are having the following folders so we'll be having a controller uh we will be having model and also we'll be having route all right now the first thing is that we'll start with this model so inside this model I'll create a folder and let's give this one name as blog .js all right so now the first thing is that what we need we need mongus so we'll do mongus which will be require mongus and now here we'll Define our schema sorry this will be const schema which will be mongus do schema here we'll create our blog schema so this will be new schema and here you have to basically pass all the properties that you want to use so let's we'll be having a title so here we'll be having a type of we can directly pass or let's do like this only so we do type of string and I think that is fine next what we will be having we'll be having a description which will also will be a type of string and then we'll be having a date so date will be type of date and here we'll pass a default property so default will be our date do now all right so this now if you want you can also add some more properties Also let's say you'll be having a image so you can also add a image property uh for example let's say you want to face the image from some database and then you want to sorry some let's say you want to store some in storage the image for example fireb or some a WS cloud and then you want to face the URL and that URL you want to store here so that also you can do now what we can do we can simply do module. exports and here I'll do mongus sorry this will be mongus what you doing mongus do model and here basically you to give the name so I'll give this one name as blog and then you to pass the blog schema just now we have created this one as simple as that so this will create this will basically create your model all right now next thing what we need we basically need this controller and in this controller we will be having all the things that we will be basically doing so let's say inside this I'll create our uh we'll do blog controller.js all right so let me just close everything now so the first thing is that we need our mongus which will be require Mong goes and also we need the blog schema so we'll do blog we'll do require and we'll go to our model SL blog all right now what are the things we need we need basically these many controllers first we need fet list of blogs then we need add a new blog we also need delete a Blog and also we need update a Blog so basically these all the controllers that we need so first uh let's start with this uh this F list of blogs so we do const Lage list of blogs this will be a sync method definitely and here you will be basically getting our request and response now inside this what we are going to do first we'll take a variable and we'll do blog uh we do blog list something like that now we'll be having a tri block and a cat block so in the cat block we'll simply log the error and in the tri block what we are going to do we'll do blog list is equal to AIT now you can see that this is the schema that sorry this is the model so we do just blog. find so this find is a method so this will basically give you all the all the documents that you are having so you can see that it will list all the documents that match the this particular filter that's it now after this here we can basically do something like this if there are not blog list so that means no blog is present so we'll simply do a return and we'll do race dot status and here we'll do 404 and we'll do do Json and we'll pass a message something like no blogs found all right and at the end we are going to return sorry we going to return so we'll do race do status of 200 do Json and here we are going to basically pass this log list that's it so now this all about will give you all the list of blogs that you are having so first what we have done we are finding all the blogs then we checking if there are no blogs that means there is no blog is currently present or else we'll return all the blog list whatever we are having all right so next method we are going to create and that will be to add a new block so let's create another one and this will be add new blog this is also will be a sync method here we'll get request and response all right so the first thing is that we will be basically receiving our uh title and the description and that will be from this so this you can see that we are having title and description in the model that means whenever we'll be typing something in our front end we need to basically extract those inputs whatever user is typing how we are going to do that so we'll simply do title and description and this we are going to basically take it from request. body all right next we'll create our date so this will be our current date and here I'll simply do new date now let's create our blog so this is our new newly created blog this will be new and you can see that we are having this blog which is our model so this is the model that we are having so here uh what we are going to do we will be basically just saving this one so we'll pass this title we'll pass description and also we pass let me just check so we having this date so you're having this date so date will be this current date that we are having here I hope you're getting so now we'll do a try block and we'll do a it and we'll do uh so we are having this newly created blog dot save so save is a method that you can use if there are any error so we'll just catch this error all right and then after this we'll take another pry catch here I'm going to return if there are any kind of Errors we'll do race. send it will be a 500 and we'll just render Json and we'll pass a message which will be this error and in this Tri block what we going to do create our session so this will be our a Mongols do start session and then we'll do session do start transaction and we'll do AIT we having blog. save sorry we are having newly uh sorry newly created blog dot save and here I'm going to pass this session and then we'll do session do commit transaction now at the end if everything goes correct so we are going to return we return race. status of 200. Json and we'll basically pass here this newly created blog that we just created awesome so this is all about our add a new blog that we need next we are having delete a Blog all right so let's create another method so this will be delete a Blog and this will be async request response and here we'll do const ID now the reason we need ID because we will be always uh deleting a particular blog correct so for that one we need that ID of that particular blog and that we will be receiving from the params so I will uh discuss that part later but for now let's create so we'll get it from request. params doid and then we'll do try and we'll do basically const find current blog and this will be a we are having blog dot find by ID and delete and here basically what you need to do to pass the ID that you want to delete that's it now here after this if there is this blog is not found actually so we basically need to send some message like we'll do return race. status we'll pass a 404 and we'll do a Json off we'll pass a message of blog not found all right and here also you'll do a catch sorry we'll do a error so we are going to log this error not sure why this autocomplete is very slow in The View code I'm not sure need to check uh so we'll do a status of 500 do Json and we'll pass your message unable to delete please uh try again something like that and here if we are not getting so means we are returning this one this is fine but if we are deleting that means that is successful so we going to return raise do status of 200. Json and we'll pass a message and that will be something like successfully deleted and I think that's it so this is what exactly you need to delete a particular blog we are first getting the ID that you want to delete and then we are deleting this by this method we have to pass that particular ID this is very very important and if uh we are not getting the blog so we return that blog not found if it is successful we will return successfully deleted and if there are any errors we return the unable to delete now at the end we need another one and that will be to update a Blog so Lon update a Blog this also will be a sync method here we'll get request response now there is a third parameter also you can pass here that is next but for now this is fine this is more than enough now here also you need the that you want to update so here also you get ID which will be request. params do ID so here we'll get our title comma description and here you will be receiving from our request. body now after this uh what we can do uh we can basically take like current blog to update something like that then we'll take a tri block and here we'll do current blog to update and this will be AIT now we have to take blog and here again you have to do find by ID and update and here what you need to pass you to pass this ID that which blog you want to update and you have to pass the content so here I'm going to pass this title and the description that I'm having here that's it all right if there are any error so we log this error and then we are going to return race. send 500. Json something something went wrong while updating please please try again sorry you to give this oh oh sorry sorry we have to give this one in message okay what is happening here I think we haven't given this one see that's it all right now here after this if it is successful so so here it is fine so here simply you can Che if this not equal to current blog to update if we are not getting means this is not present we'll simply return race. status uh we'll do 500 again and we'll do a Json and do message and we'll do unable to update awesome and at the end we are going to return race. send of 200. Jason and we'll pass this current blog to update that's it so now we have created all the method that we need so now we need to basically export all of these so you can simply do here module sorry we'll do here module. exports and here you can simply pass this uh fet list of blogs delete a Blog update a Blog and add new blog so now see the process is so we have created the model we have created all the controllers now we have to create the route so whenever we will basically calling these routes from our front end so you have to basically need those routes and there you have to basically pass all the information that you need so here I'll create we'll do something like blog route. jsx sorry JS and here you need the express now so we do Express and this will be require Express and I'm going to create our blog router which will be Express so this will give you this router you can see and here now I'm going to extract all of these from so we do require and I'll go to controller SL blog controller so what are the things we are having we are having G uh sorry we are having fet list of blogs add a new blog update a Blog and then delete a Blog awesome now at the end what we going to do is simply call this blog router and this will be dog and here you to basically give that which path so you can see that the path you want to call so I want to call this on slash and this will be our fet list of blogs then we'll do blog router doget and this will be SL add and here I need to do add a new Blog then I'll do blog router dog here I'll do slash now here is the catch so whenever we'll do update and delete we basically need the current ID so we'll pass a dynamic value because this value will be dynamic and here I'll pass a update a Blog something like that and to make this a little bit unique we can do something like update and then here we'll do blog router dot get sorry I'm doing too much mistake for adding this one this will be a post for this one this will be a put and this will be a delete so here we can do something like delete SL again we have to pass the ID and here we'll do uh delete a block and that's it this is done now at the end again you have to do module. exports and you to export this blog router so we created the routes we we have created the controller so now we need to basically go to our index.js here and you have to import this blog router just now we have created so here I'll do const blog router and this will be reord so here we'll go to our router route blog route all right and now what you can do simp after this we'll do app. use and here we'll call SL API SL blogs and here I'm going to pass this blog router that's it all right so this is our basically our uh path in which we will be accessing this blog router which will consist of all of these routes and these all of these route are basically the controller is basically maintained by this controller file so I think that's all the back end we need and this is a very simple project I already told you now we will be start working on the front end part but before that let's quickly install the packages that we need and another thing I want to mention that is for this particular project also we will be not doing any CSS because again the prime objective of this project is that if even if you get any kind of like monst related project in interview so you also Aid that whenever you interview you get a limited amount of time and they will not tell you to create a full stack Twitter clone or YouTube clone or insta Facebook or something like that like let's food delivery app they'll give you a very simple problem and they will judge you that whether you'll know the basics or not so something very very I'm pretty much sure that they will give you something related to any to-do app any blog list something like that F list of data Crow application crude application you can say sorry so where you'll be able to create update delete and add any new thing so the main objective is that the thing we are doing here to give you the basic understand understanding that how you will be able to achieve that so that is the reason we'll not use M CSS so here the packages we need we'll need uh react icons and also you need react router Dom and I think this will be more than enough so now this packages we need now we will be start working on the uh client side now how we are going to do that so we will be maintaining all of the state using our uh context all right so the first thing let's quickly create our context so we go to our source and inside this first I'm going to create our context and inside this I'll create index. jsx all right so now let's create our context so this will be export const Global context and this will be create context of null now I'm going to do export default function this will be our Global State and here I'll be receiving the children and I'm going to return Global context. provider and I'm going to pass the children here that's it so this is the first step now I'll go to our index.js I'll remove this strict mode and I'm going to import Global State and I'm going to W this app do app component inside of this all right now how we are going to do that so first let's implement the routing functionality so we need two pages so first I'll create Pages folder and inside this we'll be having our home and then will'll be our add blog all right so inside this we'll create our index x. jsx so let's quickly create so this will be export default function and this will be our home and I'm going to return here div and let's return H1 and this will be our list of blog uh blogs blog lists blog list all right next we are having this add blog so here I'll create index. jsx and again I'll create this component so this will export default function add new blog and I'm going to return again a div and inside this I'll again take a H1 and I'll do add uh add a Blog awesome now let's create another folder inside of this and I'll give this one name as components and I'll create another one and that will be our header and let's create our index. GSX so this will be export default function and this will be our header all right and I'm going to return here a div so here we'll keep this one very very simple I'm again explaining these things uh I'll just simply keep one A3 and this will be our blog uh we'll do M blog log app and on the right side I'll take a e and here I'll take two AI so one will be our home and one will be our add a new one that's it now let's do one thing let's create our style so let's create now this time module CSS so we are going to use mod CSS modules so this is also will give you some idea so I'll take this one as a header and I'll do a display of flex then we'll take header of A3 and we'll do Flex of one then we'll take header of e I'll do display as Flex We Do least style as none and we'll do gap of 20px then we'll do do header. e.li we'll do font size as 20 BX font weight as bold and we'll do cursor as pointer now let's go here now how we are going to use this to use this we have to import classes from style. module. CSS and here I'll give a class name now this will be classes dot rapper so this is the class name that that we are having here sorry header not rapper that's it now let's save it now I'll go to app.js now we have to basically implement the routing so the first thing let me just remove all of this and here I'm going to import the header component first and let's see what we getting I think we are already running this application okay this is fine let give uh give some uh what we can do we go here and let's give a padding of uh 30px okay awesome and here I'll give a font size of 40 PX and we'll do margin of zero okay now on click of this you have to change the pages but before that let's implement the routing first so to implement the routing again we have to go to our index.js and here I'm going to import browser router I think let me just UT it directly from react router Dom and we'll do browser router awesome now I'll just cut it and paste it inside now let's go to our app.js and here we are going to import routes from react autodom I think I'm not explaining because this also I've have done in the previous project also now we need two route and here I'll do a exact I'll give a path of Slash and I'll give a element for this one I'm going to use the home then I'm going to copy this paste it here this will be add blog and and here uh what we'll do we'll do add new blog that's it so now let's save this we'll go to our header and now here I'm going to import link we'll paste it two times we'll cut it here one and here one and here we'll give the two as slash and for this one we'll give a two AS Slash add blog let's save this so now if I click here this is changing and this is fine so now let's quickly create this form first because first we have to save the data in our uh database and then we'll be fetching the list of data so we'll go to our add blog component component I'll close everything else the first thing is that uh we'll do a class name here so first let me just create our styles. module. CSS so we'll do a wrapper and here also we'll do a padding of I think how much we have done padding here 30px so we do 30px and we'll import this on here and here I'll do a class name which will be classes do wrapper all right now here I'll take a div and inside this div I'll have a input so let's give a name of title we'll give a placeholder of enter blog title we also have to give the value uh but for now this is fine ID will give a title we'll give a type of text after this we'll take a texture here here also give a name of description we'll give a placeholder of enter blog dis description and what else we'll also give ID of description and we'll give a type of yeah I think that is fine now for this one we'll give a class name we'll do this one as classes do form rapper so copy this we go here and we'll do do this on display as Flex Flex Direction column and gap of 15 PX okay for this one I'll also give a width of 400 PX okay this is fine now what we can do we can also take a button and this will be add new blog something like that let's see so first let's quickly complete the functionality and after that we'll be doing little bit of styling here all right all right so now let's go to our context and then we'll create our state so first will be our form data set form data which will be equal to use state so here we'll be having title which will be empty and then we'll be having description which will be empty now let's copy this and we'll go here we'll do value and we'll pass this one so this is the advantage of using Contex will be easily able to manage straight globally also context is like one of my really favorite features of react so here now what we need to do we'll just um extract this from use context of global context so now what we can do we can simply take the value here which will be form data do name sorry this will form data. title and here value will be form data do description here we'll take a on change which will be event so we do set form data which will be our form data and then here we'll do title which will be even do target. value that's it now same here we'll be do on change we'll get the event and here we'll do set form data I think this is not required set form data will be our form data and then we'll do description which will be event. target. value that's it so now let's see what we are getting in this form data so log this form data let's go to console type something here we're getting title and this is our description awesome all right so now what we need to do on click of this button we'll call the API and we have to save the data in our database so we create a method this will be our on click and this will be handle save blog to database I'm giving the name like this so that it is easy to understand all right everyone so now let's uh start working on this method so this will be obviously as sync method so we do as sync function and here let's do one thing uh let me just open this on another terminal and let's install uh AOS so I think I think it will be done let me just check okay so now we'll import Aus from Aus and here we can simply do const response this will be AIT axos dopost and here now what we need to do we have to basically call the URL now here we'll be calling HTTP SL Local Host now if we go to this index.js here you can see that we are having this/ API blocks so this is our base URL and then here you have to basically go to/ add because we'll be adding so here we'll do uh Local Host 5,000 SL API SL blogs SL add and here we need to pass the uh title which will be our form data uh do title and then you have to also pass the description which will be form data do description all right now here this will basically will give me our result which will be AIT response do data that's it now let's log this result and let's see what we getting okay now let refresh this do inspect we'll do first blog added let's add this one so you're getting newly created blog if I go to network this is successful and now we'll go here we'll do browse collection so getting blogs and and here we are getting only one block so this is working fine so now what we can do simply we can check first let me import one thing and that is called navigation from use I think uh that is called use navigate so let me just import it so import something from react router Dom and this is called use navigate all right so here we'll simply do if result is true so first we'll make this set form data as empty so title empty and description as empty and we'll do navigate to homepage let's save it now let's see what is happening so go here now let me just refresh this again so we'll do second blog second blog bad it's going to blog list page if I refresh this it should have two data now so you're getting two data and this is working fine if I go to add blog and you can see that the form is now reseted so that is all about the add a new blog functionality now let me just go to the homepage and here we will be basically now fetching the list of blogs so for this one I'll just close everything else we go to context and here I'll be taking another one and this will be our blogs blog list set blog list which will be used state of array also we take a pending State set pending which will be US state of false so we are going to pass these values so we pass blog list set blog list pending and set pending now we'll copy this so we go to home first we'll destructure all of this from use context of global context next so what we are going to do basically will be simply fetching the list of products sorry list of blogs so here we need to take a use effect which we will be calling on page load and this will be Fage list of blocks so again this will be aing method so this will be function Fage list of blogs so this will be const response and this will be AIT axio let me import it from axio so here this will be axio dog so here again we'll do HTTP Local Host 5,000 SL API SL blogs so this is the URL that we need and and here we'll do const result equal to AIT response. data now let's see we log this result here let's save it now let's go here do console let's go to our homepage we are getting two data and this is our blog list so you can simply check if result and and result. bloglist and then result. blog list. length this is true so we'll do set blog list is result do blog list and before calling the will do set pending as true and here we do set pending as false all right now here we'll do simply if loading sorry if the pending is true so render H1 and we'll do loading blogs please wait or else we simply take a div here and inside of this we're going to render this blogs list do map this is blog item here we'll take a d so the key will be the blog item. ID and here we'll take a p and we'll render blog item. title and we'll take a p another one and this will be blog item. description let's save it and now let's see what is happening so you're getting two blogs correct let's go to our add blog and another one third blog third blog add we are getting third blog if I now refresh this we're getting all the data here so this is all about the fetching list of blocks now let's give some little bit of styling and then we'll be start working on the delete and the update all right so now let's create our style file here so this will be styles. module. CSS uh so here we'll give a class name and this will be classes do blog list and we're going to import classes from style. module. CSS and here we'll copy this and first thing we'll do this one as display as uh grid do grid template columns repeat uh 41 F and we'll do gap of 10 PX uh inside this we'll do dot blog list of div uh here we'll give a padding of 10 PX we give a border of one uh 1 PX solid red let's see how this is looking okay and also here we'll give a class name of classes do uh rapper so we copy this so we'll do wrapper and we'll do padding of 30px awesome so now if I go here come back we are getting the data so now we will give some uh button here one will be delete and edit so let me just quickly import it so we import some something from react icon slfa and I think it is fa a trash and then we having fa edit and here we'll take a we'll just render this fa edit and then fa tress we'll give a size of 30 also here also give a size of 30 awesome so now uh first we'll start working on this uh Delete functionality so here we'll give on click and this will be handle delete blog so now we'll create create this method so this will be as sync function handle delete blog now this will basically get current ID definitely so here to get current ID what you need to do you have to pass this current ID which is this blog item. ID so blog item. ID so if I now log this get current ID and let's see what is happening so if I click here we're getting the ID and you can see that awesome so now we just have to Simply call the API so we do const response this is AIT Aus do delete so here we'll call the API now here what catch is that so we'll do Local Host 5,000 SL API SL blogs now if I go here so we are having delete and then you have to pass the ID so you slash delete slash and here you have to pass this get current ID all right and here we'll do const result which will be equal to AIT response dot data all right now one very important Point whenever we will be deleting something we have to refresh the page to get the list of uh blogs again what we can do we can simply call this API again or else we can refresh the page I'll show you both the both the things so simply you can check here if this result so uh let me check what we are passing in the controller so if I delete something we passing this message so we'll check if this result. message is true so we'll do F list of blogs all right now let's save it now let's see what is happening refresh this so we'll click this one awesome if I click here deleted if I click here we are getting loading please wait now this is also we need to check this is the reason so here we'll do else set pending as false so if I now refresh this okay we are not getting any data but that is fine uh we will do one thing uh we'll check here if this blog list and and blog list. length is true or else will render A3 so no blogs added okay and I'll go to add blog new one added so this new one added add this one we are getting delete okay here we need to check what what is happening so go here we need to check I'll just add random add new one but here if I delete we are getting empty but if I go here let me refresh this we are not having any data but some of this data is showing here okay so what we can do let's do something like this so we do const navigate and this will be use navigate okay let me import it so we do import from react router Dom and this will be use navigate okay oh I got it what is the reason if the result is not true we have to make this set blog list as empty see this is the re but I'll show you the second way also now it will work for sure let's go here let's try to add add another one let's add here now let's delete see now we getting but I'll show you another one how we are able to do that so let's I'll add some random add add and I'll add another one okay now you'll see so either you can call this method again or else you can also do this navigate so navigate or of zero what this will do this will basically call the same uh page or refresh the same page again let's see what is happening so I'll just refresh this I'll see if I just delete this one see it is refreshing this page again I hope you're getting right so if I again click this one so it is refreshing and if I click again it is refreshing but I think it will be better if you call this sem instead of refreshing the page again and again so I think this is the best approach all right so this is all about the delete functionality that we are having now let's start working on this edit one now for edit what we'll be doing so let's say I'll add a new one add add something now whenever I'll click it will go to the ad page so it will go to this page and it will automatically fill this one and this add will be getting changed and this will be getting changed to edit all right so let's see how we are going to basically do that all right so we'll go to First our context and here I'll add another state and this will be current edited data Set current edited data and this will be equal to use state or let's do one thing we'll do EAS edit and we'll do set e edit and this will be equal to false now I'll copy this and I'll pass it here awesome so now we'll go to our home and here we are having this edit icon so we'll do on click and we'll do handle edit now this will also get the current blog item all right so here we create this method so this will be function handle edit so this will be get current blog item and let's see what we getting okay so now we'll go to our home let's add this one so you're getting the data so now we have to navigate to the add page and then we also have to pass the data in our state so how you will be basically doing that to do that what you need to do we can simply call this navigate method that we are having so we having navigate so navigate will here you have to pass the two so it will go to the uh so let's say we are going to this add blog so it will go to this page correct and then here what you have to pass you have to pass the state so we do state state here I'm going to pass the uh title or let's do one thing let's pass this gate current blog item full let's save it so now if I go to this add blog page I have to get the uh I have to extract the state how we are going to do that so for this one we are having another uh hook and that is called use location so we do location will be use location and now here let's take a use effect and we'll take this location and we'll log this location here save it now let's see what is happening okay currently we can see that we are not getting anything but if I now go to home and click here and I'll see if I expand this we are getting a state and here we getting gate current blog item and inside this we're getting all the data so we can now simply check if this location state. gate current blog item so here we'll check if location. state if this is true so this gate current blog item we will be able to take location. state from location. State and now what we can do we can simply make this set form data will be title which will be get current blog item do title and description will be get current blog item do description see if I now save this see now you're getting this two data automatically filled up here correct so now what we can do simply we can go to our context and here we are having this set is edit so this one we will be able to extract from here and we'll do e edit and here we'll do set is edit will be true and here we'll do if is edit is true we we'll do edit a blog or or else we do add a Blog save this and same we can do it here also so we'll do e edit do edit blog or else we'll do to add blog let's save it now here you are getting edit blog edit a Blog now on submit here we are saving so here basically we need to basically check if it is EAS edit so we have to call a different endpoint if it is a only add so we have to call this endpoint so we can simply check if this Eed it is true so we'll do AIT AOS do putut so we'll do this on access do putut and here you have to pass the URL and then here you'll be passing the title which will be again your form data. title and description will be your form data do description now here what you have to pass so let me just do one thing so we'll go here all right so you can see that we having SL update SL ID of ID so you have to pass it here and let me just copy from here only no need to write again okay so going to 5,000 SL API blog SL update and now ID will be what will be the id id will be this gate current blog item. ID so from here you'll be able to get it I hope you're getting so here you can simply do this location dot state do get current blog item do ID all right so now let's see what is happening and if the result is true what we need to do we'll again make this set is edit as false all right now let's save it now let's see what is happening now I'll go to home first I'll click on edit and I'll do add edited edit okay so you're getting some error Let me refresh this again all right so we are getting some error and that is cannot set headers after they send to client res status send St instead of 3314 okay sry we have to do status here and same we can do here okay now let's see so let me just refresh this first okay now this is edited although but let me just edit it again so edited again and this is also edited now click on edit so edited again if I go to add we are getting add if I go here it's edited let's add another one here so now I'll click on edit so now this one this one is edited edit so edited delete this is deleted and if I delete this one no blocks are added all right so now I think we have almost completed all the functionality I hope that this will definitely give you some idea how you can create a full stack mod project from scratch and also with this project we have have completed all the projects in this particular video and this video will definitely going to help you if you're completing these projects whatever we have done in this particular video all right so all the best and I'll see you in my next video till then good luck and peace