Transcript for:
Modern Web Development: M Blogging Website (Part 3)

hello guys welcome or welcome back to Modern web today we will continue our M blogging website and build some more pages on top of what we already have this is the part three of M blogging website so if you haven't watched part one or two I highly recommend you go and watch those part before watching this one you can find the playlist Link in the description or comments in the previous parts we made a login flow for our user to log in or create an account in our website in order to log in we also added Google authentication with Firebase on front end and backend after that in second part we learned to make a modern editor using editor CHS then we made a publish form to preview the blog detail and fill the tags and descriptions related to the blog now we will work on other pages of our website that is fully working homepage in this page we will make a section to show all the latest blogs directly coming from the database and on the right side we will make filter options to filter the blogs and below that we will have five trending blogs which will show the blogs with the most views after done with the home homepage we will work on search page where in search input if you type anything it will give you the search results for that text you can search for blogs or you can search for any user then we will work on profile page and in this page we will show each user account information we will show the username the bio the number of blogs user has written and their social links on the left side we will show all the blogs published by the user in the next part we will learn to make blog interaction such as like interaction and nested comments and then we will work on dashboard in order to manage the blogs or notification we also have to make setting Pages where user can update their profile and change login password so before we start if you are new to my Channel or haven't subscribed it yet do subscribe the channel and hit the Bell icon to not miss the next part of this video when I will upload it so if you like the video make sure you give it a thumbs up and leave a comment if you have any feedback or doubt feel free to leave a comment so with without wasting more time let's start the video if you want full code of the project which include every feature even before I create their parts you can download the full project Souls code from patreon or buo coffee link is in the description so I'm currently in my home route and you can see I am getting this nepar in the Home Route because I am on this root directory but if you see that other than mear I'm not getting any but I want a block section over here and a filter over this right side so for that what we have to do is we have to first set up our root correctly so for that just go to your app.jsx file and let's come to this Roots component well you will see that we have this root component which is nesting these two Roots which is this/ signup and/ signin where I'm rendering this netar as well as this user Au form but right now what I want is I want to render one more component and that is one homepage component that we don't have right now but I will create it later but what I want is I want to render this with this nbar component but I want to render it on the SL path which is the root path so how can I do that so to do that you have to again create a root component and instead of giving here path because if you give your path you have to specify what nested path you want to render that and I want to render on the index root of this so I will just give index prop instead of path and this index just basically mean whatever this part is is the index and the element that I want to render is the home page component we don't have that that's why I'm getting this red line so let me just save it and let's go to the folder view in the pages folder you will see home. page. jsx so just open that and let me create a homepage here so home page component so make a const let's call it homepage and let's create this a functional component and this will basically for now will'll return an H1 with homepage coming from component component jsx and don't forget to export this as a default function so export that as a default function like this and now if I come to my app.jsx make sure you import that as well so add I import at the beginning saying import homepage from pages /home dopage so if I save it now and since I'm on the root directory I'm on the slash path you can see that I am getting the n as well as the homepage component which has this H1 in it so instead of returning the hedge1 now let's make the homepage so let me just remove this and instead of here let me render type animation wrapper and if you don't remember this animation wrapper is a wrapper to add the fade in and Fade Out effects for the pages so I want a fade in effect for this homepage that's why I'm using the animation wrapper and inside that make a section and this section will be a parent element which will contain all of our component that will be the left side uh blogs and the right side filters and the trending blogs so uh we have to give some class names to it to style it so uh let's give it h- cover class and this is a custom class that is inside your index. CSS file and this is basically giving uh or setting the sections height 100 VH and just subtracting the value of this nef bar height which is 80 or 100 pixels and after that give it a flex property because we want the blocks and the filters to come side by side so for that we need this flex and then say justify Center to Center the components and give a gap of 10 unit so if I save you won't see anything because we don't have any children inside the section so make a div over here and this div will be for latest blocks let me add a comment and after that make another div and this div will be for filters and trending blocks so we will make our filters and trending blocks inside this step and we will make our latest blog inside this ST which will come in the left side and this will come on the right side so let's give this also a class and let's just say withd Dash false which means just cover whatever width you got so after giving this width full just save it and let's come to our project if you say that I am if you see I am in my homepage and you can see on the left side this is my Dev which is over here so inside this div I want this home button where I can click to see the blogs and if I just open my developer console in order to uh resize this website screen size you can see in the Mobile screen you will see that I'm getting this trending block Button as well and if I click over here I'm getting these trending blogs and if I click on the home I'm getting the home uh blogs which is the latest blogs so to achieve this we need to First create this these two buttons and uh then we can load the block so how can we do that for that let's come to the code and here what I will do is I will render one component which is in page navigation and uh this is a custom component that we don't have right now we will create it later but what this in page navigation will do is it will create navigation inside the page as you can see that in the smaller screens let me resize it correctly in the smaller screens this is a sort of navigation inside a same route you can see the route is not changing but I'm still navigating through homepage to the trending block section so this is the in page navigation that we will create and we will render that component in order to create these two buttons and we will just hide this trending blog whenever we are in the larger screen because then we will see the trending blog over here with the filters so for that we don't have this of course so just go to your folder View and in the components folder you will find in page navigation. component. jsx so here let's create that functional component so make a function component let's call it in page NV navigation set it equals to like this and this will for now return nh1 saying in page navigation here and make sure you export this as well as a default function like this and now come to the homepage and just import that component like this let me close this so now if I come here you can see that I'm getting this in page navigation here here so now instead of this textt what I want is I want those two uh buttons where I can click to switch in the uh to navigate in the page so how can I do that so for that make an empty component and inside of it make a div and this div will contain the button and then this component I'm using to WRA the children because I want what I want uh I want children over here to tell that whenever I click on this button r render this children and whenever I click on that button render the that children so you will get it when we will create it so don't worry so in this T let's give it some class name let's give it a relative position and a margin bottom of 8 unit so give mb-8 set it background to White and border to bottom to have a border bottom and give it a border gray with a flex property so that we can align the buttons side by side and say flex no wrap because we don't want to uh wrap the buttons uh we can get the uh scroll bar it's okay but we don't want to wrap the buttons and just give the Overflow X to be Auto so that we can see the scroll bar if there is any sort of overflow so inside the St I want to render the buttons now how I can get the value of the buttons well if you see I have this homepage over here and if I come over here now I have two buttons okay but if I go to some other Pages uh let's say I come here and search for GPT and you can see there is the same in page navigation over here and if I go to my mobile screens you can see I'm getting here accounts matash which means I'm using this component a lot of places in uh the project so to make this Universal so that I can give the uh buttons name whatever I want I need some sort of pro over here so add a curly bracket to introduce the prop and the prop that I want over here is the roots and this Roots is sort of an array so let's go to the homepage and let me just press an enter and give that prop value over here so this Roots is an array and this array which just basically tell you that these are the buttons that you have to create so you have to pass all the buttons as an item of an array so how can I do do that so since for the homepage I want one home and the second which is the trending block I will pass home as a first element of this array and I will pass the second element as uh second element which is trending block to get these two buttons in my in page navigation where I can click in order to navigate so this is how we are getting the props value over here so now since the roots is an array I can Loop through it it by saying roots. map and by mapping it you will get individual root which is the item of the array and you will get its index so just run the call back and inside the call back you can return for now you can just return root and let's see what I'm getting so if I save this you will see that I'm getting home and I'm getting friending block even though I didn't type any anything inside in page navigation I am just providing this home and trending blog as an element of array to this in page navigation and it's just mapping through it to return the text over here so instead of getting just simple home and trending block text let's just return a button that we can click in order to navigate inside the page so for that instead of returning add a bracket and then we will uh return a button like this and the value of the button will be this root let me give it a key because it's giving me a red line and that key will be this unique index so it can differentiate the buttons and let me give it a class name to style it so the class name that I will give is padding four to have a padding from all four Direction and from X Direction I will say padding to be five give it a capitalize to make the letter capital and let me just save this this and let's see how this looks so you can see this look like this and I am getting root instead of the home and the trending block so to fix that just add this inside curly bracket because remember I am in the jsx so inside the jsx 2x is the variable you have to use the curly bracket so if I save you can see I'm getting this home and I'm getting this trending block as well as I'm getting this border bottom because I have given this St a border bottom and the Border col gray so that's great now what else I need over here well I need some styling over here to differentiate what is the active root right here and what is not so how can I do that first of all I have to Define what is the active root so by default what I want is I want the first element of the root to be active and how can I do that so if I come over here the first element of the uh Roots array is this home so by default I want the home to be active so for that I will use a state over here so let's create create a state so I will call this in page nav index and this will be this will this state will store the active index or active root over here so whatever this index is the I value I will store is inside this state in order to maintain that yeah this U route is active right now and the set function will be set in page Nev index to create a state just call use State hook and by default I will set it equals to zero because I want the default index to be zero which is the first element of the array so now once I get that zero what I can do is I can come over here in the class name and I can add some conditional classes over here so to write conditions I have to use JavaScript and for that I have to use this curly brackets let me do this like this and now inside of it I want to concatenate these strings so for that just add a plus and let me add curly brackets in order to write the condition over here make sure you add space after this capitalize class otherwise if you don't do that and then the condition evaluation whatever you get from it it will just add after this capitalize and then this class won't make any sense so if you add a space then whatever you will get from this condition this will just add as like this so this will make sense as a class name for the Tailwind so what condition I want to check I want to check that in page nav index is equal equals to the I which is the index of this root button so if the current button index is equal equals to the current nav index which is the page root active uh active index in that case what I want is I want to return text black color and else if this is not is the case like I have a index one over here which is the second element of the root but the in page navigation is zero so in that case I will return text dark gray class and let me enable my word drop so if I save and refresh you will see that if I zoom that this trending blog is dim and this is a totally black color so this is the way we can differentiate the active State and the non-active state now still I'm uh not sure about the activeness because if I come over here you will see that whatever root is active it is getting this HR or this border at the bottom so for this border we will create an HR and we will set its width according to the width of this button so how can I do that well for that of course I need an HR so after these curly brackets where I'm done creating the buttons make an HR and self close it like this and over here let's uh create a reference let's call it active tab line ref and just set it equals to use ref in order to create a reference make sure you import it as well like this now copy this and add a reference to this like this so why I am uh creating this reference is because so that when I click on this button I will call a on click function and in that function I need to access this HR in order to change its CSS style and to select the HR I need its reference in order to select it that's why I'm giving this reference so after this I can give it some class names and I will say to have an absolute position the bottom will be zero and the duration which is the transition I will say 300 milliseconds just save it and if I come to my website well you won't see any changes because the HR you won't see I have not given any width to that so what I will do is I will add a on click to this button so let's add a on click event and whenever this gets clicked I will run a call back inside here and this call back will get the event and what I will do is I will run a function which is change page State and this change page State we don't have so let's create that over here like this and this page CH uh change page State function will take two arguments or the parameters the one is the ptn and the second is the index the BTN is to tell what button got clicked because we need its uh width in order to set the HR width and we need the i in order to update this index page NV index to set the current uh active uh route so for that we need these two items so what I I have to pass over here is the button so how can I get the button from the event from the event I can just pass e. Target to get the target element which is this button because this has got clicked and I want to give the index so just I can pass the I over here to give it as an index so over here let me just come over here and console.log the BTN comma I and let's see that when I click on the button am I getting any login console so if I click on the trending block you can see I got a button and after that I got one which is the index of this trending block button and if I click on the home I got the home button and I got this zero as the index so which means it is working now I want to style this HR in order to see the activeness so how can I do that so remove the console log and I will declare some variables over here so I will D structure it later but set it equals to button so so this button represent this button element and with any HTML element you get a lot of properties to uh get what this button is and what this HTML currently is and where it is on the screen so I need two values of this button one is its width so how can I do that well each HTML element has this offset width property which tells you the elements width and I can just D structure it from the BTM so that I don't have to call it like this okay and basically this offset width will return me this buttons width that I can use to set the width of this HR and the second thing that I want is offset left and this offset left will basically give me the left value of the button and it will tell me how far it is from the left so that I can give the left value to this HR in order to change its left position as you can see over here since this is U accounts match is left from is far left if I click over here the HR getting to this position so for that I need the left value of this button in order to give it uh to this HR right so I hope you got that so after that I need to select this HR and I can use this reference in order to select that so that reference name is active tabl line ref and to access the current reference so you have to say the dot current and then you will get this HR element and since I want to change it CSS I have to say do style to change the CSS and the property that I want to change is width so save width and set it equals to the offset width not left offset width and don't forget to concatenate a pixel after this offset wids otherwise this will be just a number and uh number is not accepted in CSS you have to give like this with the pixels let me just make a duplicate of this line and instead of setting the width this time let me set the left and uh instead of offset width I will just say offset left so if I just save this and come over here and refresh well you won't see anything but if I click on home you will see that I got this hro over here and if I click on trending block I am getting this HR over here and if I click over here it is working and if I click over here it is working so basically the HR is moving wherever I'm clicking and whatever the active route is but still uh this homepage is black but home text is black but not the trending block and that is because I'm not updating this in page Nev index so to update that just call the set function of it and just pass the index that we get from this uh parameter and just save that so if I click on trending blog now you will see now it is blacked because this route is active and if I click on home now this uh is black because this route is active if I click over here this is active so basically this is working but if you refresh the page you will see by default I want the homage to be active but I'm not getting the HR over here shortly this H the home rout is active because I'm getting this black color that mean the Home Route is active but still I'm not getting the HR and that is because the HR is is not by default setting its width uh we are setting the HR width only when we click on the button so we have to call this change PID State uh function when we render it for one time in order to set the uh width of this HR so to do that I will use use effect hook which will uh run itself after the rendering for one time that's why I will just give an empty array and this use effect will just call the change page P State and what I will do I will just pass this button over here now inside this I need to pass a button and the index so basically I want the by default value to be zero but what if I want the default route to be somewhat like the first element of the array or like second or third in that case this can't be a static zero number right so in that case I will introduce another prop and I will say d default active index and by default I will set it equals to zero which means if you don't provide this prop while creating this navigation component it will have a zero value but if you provide this then you can change the default active rout so here I will just copy it and instead of setting the uh uh this state equals to zero I will just paste it equals to this so that by default it will be zero but I can change it if I want so now since I have this what I will do is I will come in the buttons and I will use a reference over here so for that what I will do I will create another reference here and I will say active tab equal use ref and you can call this any variable I'm just calling active tab because I will use it for this button which is a sort of tab so what I will do is I will give a reference prop to this and I will write a condition over here and that is if I is equal equals to default active index which means if the index of this component or this item is equals to the default active index which is the zero which means that this button is active and if this button is active what I want is I want to give this active tab reference so that I can get it from uh I can access it in the change page State because remember this uh use effect will only run when I'm done with this return and uh when I'm done with the return I will have access to to this active tab rep ref so make sure I you give this variable name like this active tab ref or whatever you want so after this in the else condition you can just leave it a an empty string or actually not an empty string just say null so that uh if you if the button index is equals to the default index then I'm providing it an active tab reference otherwise I'm not providing any sort of reference and now since I have a button reference over here what I will do is instead of the button I want to send the button so I will say select the active tab reference and say do current in order to get that button and pass that inside this change base State and the index that I want to give here is I will say default active index which is this by default it is zero so if I save over here and come to the website you can see now I am getting this HR in the home and if I click on the trending block now this is active and if I click on the home now this is active so basically now we are done now there is a thing if I come to my uh project you can see that in the search let's go to the homepage you can see in the larger screen and the medium screen you will only see this Home Route you won't see the trending and if I go to the smaller screen you will see the trending blogs route as well so how can I do that well for that I will again introduce one more prop over here so let me add a comma here and the prop that I want to introduce is default hidden so this Default hidden will be same as the roots but this Default hidden will contain the items that need to be hidden in the larger or medium screen so what do I mean by that so let me just set it equals to A by default an empty array because this will be an sror and let me just give the Default hidden over here while creating the in page navigation and inside of it make an array because this is an array and you have to to provide what Roots You Want To Hide so I want to hide this trending blocks and this trending block is this string so I can just copy it and I can paste it over here so this is an array which will tell you that these roots should be hidden in the larger or the medium screens and I'm giving here trending blog which is same as this item which is creating the buttons so we can use this in order to hide this in uh the page navigation where we can use that to check for the condition and how can I do that is uh in the class name after this make sure you add spaces because I will add one more class over here so make sure you add class to space to this text array and the text black and let's add one more condition over here and the condition is Default hidden which is an array so to check that this thing is inside an array or not we can use do includes method so just say do includes so Default hidden do includes you can pass whatever you want to say so if I just say a what it will do it will check inside the Default hidden that it has a element or not so if it gets a it will say true and if it doesn't get the a it will say false and since I don't want to check for a of course I want to check for the root that I'm getting from this uh Roots array and I will check that inside the Default hidden so basically this what it's doing it's checking that the root is inside the Default hidden or not so if that is true which means this route is uh inside the Default hidden which means I have to hide it in the larger screen in that case I will provide space MD hidden which just basically mean on the medium screen or larger screen uh you will be hidden and in the else block what I will do is I will just leave it as a blank or an empty string because if it is not inside this Default hidden then I don't need to hide it and I don't have to give any sort of class it so if I save and come back to the page you will see now I'm not getting the trending block because this trending block is inside this array and this defaulted an ARR but remember make sure you spell these roots correctly because if I just remove a g or space from over here you can see that it's still a trending blog and still trending block but these both strings are not equal so if I come to my website you will still see the trending blog button over here so make sure the items are spelled correctly now what I want is I want to render the different components on different routs so what I want is in the Home Route I want to render the latest blocks and in the trending route which we will see only in the mobile screens I want to render the trending block so how can I do that for that come inside the page navigation and what I will do is for now I will return in H1 and I will say uh latest blocks here like this and I will create another H1 and I will say here trending blogs here so basically we have these two H1s over here and if I come to my uh website you won't see those two H1s because they are a children of this in page navigation but we haven't told this in page navigation component that that you have to accept the children's and render those that's why it is not accepting these as children's and not rendering it so uh to accept the childrens you have to again come to the in page navigation and in the props I have to introduce one more prop which will be children and once I have given this children prop prop then you can render the children prop over here so after this diff just add a curly bracket to write or access the variable to write the JavaScript or access a variable and just say children over here and that's why I have created this empty component because I want to wrap this buttons St and the children that we get from the uh component that we when when we will create we will get the children right so if I just save it now and come over here now you will see that I got latest blog here and the trending blog so well still I'm on the Home Route which is a latest blog route so why I'm getting this trending block because your in page navigation component does not know that it has to render this first component for the first element and the second component for the second button or the second index of the root so how can we tell that first of all we have to say Do not render all of the childrens you get from the uh props and for that just remove this children so what we will check over here then what I will do is I will say array do is array and and array do is array is a method and whatever pass you pass over here it will just check whether or not it's an array so if I pass over here let's say a and since a is a string not an array it will return you false but if I want uh pass an array then this method will return you true because I have passed an array inside this is array and the reason I'm doing it is because if you only provide over here one children then that children will not be inside an array but if you provide more than a children uh one children then it will be an array inside the prop value so to check that whether or not we have a single children or more than one children we have to check whether or not it's an array so I will just pass children over here and if this children is an array which means it has more than one children in that case I want to render only that children which has the same index as the current active button so this current active button remember is when I'm clicking on it it is just setting this in page n index over here and this is a state so I can access this state value by this variable and this will just tell you that this is the current active route so I can just copy this in name and this is just the index and I can pass this here so if this is zero it will render the first element of the children and if it is one it will render the second element of the children an array and because of that we will be able to get the first element only when the first root is active and the second element only when the second route is active so if I come to the website and yeah I'm getting error because since I'm using theary operator I have to give the else block also so in the else case I will just render the children because if the children is not an array then it is only one element and then I can just render it because I don't have to think about any root so if I come over here now you will see that not now I'm not getting the trending blocks over here I'm just getting this latest blocks here because I am uh on the home route but if I let me just go to the smaller screens to see the trending block so if I resize my window you can see now I'm getting this trending block and if I click over here the current active page index is now one and that therefore it is rendering the one uh index of the children which is this trending block here so now I can navigate within the page like this and we are actually done with our in page navigation now what we have to do is we have to actually get the block data from the back end in order to make the block card so first of all we have to create a route in our server where we can make a request while loading the page uh and receive the blogs data from there which will be the latest blog and then once we get the blog then we can start working on our blog card that we will going to render over here so let's work on our Lo uh latest blog route so before we work on our latest blogs route make sure uh you have somewh of at least 10 blogs in your mongod DB so if you haven't if you don't have any blog data just go to the website and go to the editor page and create 10 blogs and make sure you give them different titles and different panels and different tags for example for one you can make a Blog for traveling and the second blog you can make for uh cooking and the third you can make about tech and the fourth you can make about Finance uh the reason I want you to make different categories blog because then we when we will work on the uh filtration then we can use those tags like the tech tag or the uh cooking tag or the finance tag or travel tag we can use those tag in order to filter out the data and since if we don't have any data then we won't be able to get see anything but uh doesn't matter then you can add and test that uh I just want that for now you have at least 10 blocks in your database so that we can work on our homepage and get that uh blogs and we can then work on our pagination so anyway let's go to the servers folder and make sure you open the server.js file and let's work on our login not login uh latest blog to so at the end or actually not the end uh before the create blog let me make a server. get request because I don't want any sort of validation over here because uh any Anonymous or not logged in user can access the blog so here I will just say slash latest blogs this will be the uh our fruit and this will just run a call back with a request and response and what I want to to do is I want to select the latest blogs from the uh database so how can I do that for that I have to first access the blog and this blog is the blog structure which is the if you just type this blog it's just refering to this blogs collection and inside it in order to find the blogs I will say find and what sort of blog I want I want every blog except whose draft is true because I don't want to uh respond with a draft blogs I only want the published blogs so that's why I'm saying find whatever blogs which have the draft false not true because we are finding so if any of the blog has a draft true which means it's a draft then we won't get it because this will not find that so once we get that we want the author detail as well and if you come to any of the blog data you will see I have this author key and I have this object ID and I can actually while driving the blog I can get the author value using this ID and uh to do that what I have to do is I have to call Dot populate and this do populate method will basically add the values and I just have to tell what field it has to populate and the field it has to populate is the author field and then what it will do it will just get this object ID and search for this object ID wherever it finds that and once it finds the object ID it will just just take the whole object and put it inside this author and give you the object and from that object you can select What fields you want so I have to pass the key that I want to populate and the key that I want to populate is the author and after the comma you have to say what sort of fields you want and you have to give all the fields inside one single c one double code so the fields that I want let's go to the users so that I can tell you what sort of fields I want so you will see that the fold the users structure look like this the user database structure and I need the personal info and I need the users's profile image which is over here and then I need the users profile a username which is over here and I need the full name but I don't need this ID so I just need the three uh things one is the full name username and the profile image and I will just remove this ID so for that just say personal info because personal info is the object which contains this full name uh username and profile image key so say personal info dot profile image in order to get the profile image and then without any uh comma or anything just add a space to go to the different field and just say personal _ info do username to get the username space personal info dot full name this populate will also give you this users ID and I don't need this user ID so I have to say that don't give me that and to just not select any field you have to say negative or the minus sign and then the field name so this will not select that and the field name is underscore ID so you have to give the field names like this and what it will do it will just select only these three keys from the author uh data structure and the user D data structure and paste it in to this author value so that we can access it now after it I want to sort the blogs that we get and I want to sort it in what order well if I come to my blogs and see the blog data structure you can see I have this date uh published at and it is sort of a date telling when this blog is published so I want to get the latest blog uh first and then the least latest so how can I do that for that I have to first access that key on what basis I have to sort uh sort I have to sort on publish that basis so I'll type your published at and just give its value negative 1 and that's just basically mean give me the recent one because since published at is a date negative one just will tell you that whatever is the recent give me that and then it will go to the lower uh uh side of the dates so after that I have to use do select method in order to select the fields that I'm actually uh going to use from this blog because I don't want a whole lot of this information like the ID and the uh activity and the comments well uh of course I need to I do need some of them but I don't need all of them so how I have to tell what sort of fields I only need in the front end so I will say that I need this blog ID I need one title and I need description and that basically means that I'm just saying that select the blog ID select the title select the description and uh make sure you have spaces between the keys but they all are inside one double codes otherwise you won't be able to select it and then I need a banner I need activity to show the like count I need tags to show the first tag in the blog component and I need the time when it got published so I will say published at and I don't want the object ID so I will say ne underscore ID and it will remove the ID instead of selecting it and then I will just limit my result because if I have like this 10 I will only get the Five results and the reason I'm limiting is is uh to not give a lot of data to different end and since I don't have a lot of data right now I'm still limiting it because I need to show you how to make the pagination pagination and for that I have to limit it so that if I have 10 or I'm sending the five then I can load five more at the end using the pagination so in the limit I'm just going to say uh a variable which I will say Max limit and I will set make a variable over here like this and I will just set it equals to 5 for now we will change it later don't worry and after all of that just run dot 10 and after is done running all of these uh queries it will give you the actual block structure in this do 10 block that you can get from this blogs variable or you can name it anything it's just the data so what I will do is I will return from here so that I won't go uh below and what I will do I will return a response with a status of 500 uh not 500 200 because everything is well no errors found and I will return a Json and in the Json I will just pass blocks in the brackets and this basically means that I want the blogs key and in that blogs key I will have the blogs data which is this which is an array of all of the blog structure and since I'm using dot then I have to uh use the dot catch in order to react to any error if we get and in this call back what I will do is I will return a response with a status of 500 because now we got some errors and in the Json I will send an error and the error will be error. message and I will just save it so now since the latest blog is just a get request I can go in my request rest and instead of like this create blog I can say uh latest blog actually it is blog or blogs yeah it is blogs so latest blogs and I can remove everything I can change the post to get and if I make request I should see five blogs because I have already 10 blocks in my database so if I click Send request you will see now in the response I got an object which has this blog key and this blog key is an array which contain these different objects and these are five uh different blogs object you can see count them 1 2 3 4 and five so you got the five blogs and each blog is an uh object which contains the activity key the blog ID title Banner description and the tags and the author and you can see in the author I'm getting the personal info which is just only the full name username and profile image I'm not getting other fields and I am getting the publisher so this is the data that I'm getting while I am requesting to this latest Pro so that means I am done with my route now I have to go to my front end in order to make the request to back end to receive the data and once I get the data I will Loop through it in order to create the blog cards so let's do that so let's come to the homepage page component and let's make request to the server in order to receive the latest block so before this return I will create a one function and I will call it fetch latest blogs and this function will just make request to the latest block route in order to get the latest blocks data so uh and we will call this function from the use effect of course so over here I will say ex your and make sure you import it and I will use the exos in order to make the request to the server so I will say ex. getet in order to make the get request and the rout that I want is import. meta do n. Vore server uncore domain and this is the way to access the dot and variable uh in the v environment so V server domain is just equals to our Local Host 3000 port and the rout that I want to request is uh is latest blocks and once I make a request to this I have to catch the response that we get from the front uh back end and I will just set it equals to whatever the data I got so I will just the structure actually so add a add bracket and inside bracket I will restructure the blogs key or actually yeah I will destructure the blocks key and what I will do is I will console do log the blogs that I will get from the uh back end and since I'm using catch I have to use dot uh dot then since I have since I'm using dot then I have to use do catch in order to uh catch any error and if I get any error I'll just console log the error to see what it is so now this is the basic function which is just making a get request to the latest blog and just logging the data it get from the backet so now I just have to call this function so let me just copy the name of the function and use use effect hook so whenever we are done with the rendering we will call this use effect and I only want to run it only once so I will just provide an empty array and inside of here I will just call this fetch latest blogs and if I come to my homepage and open my console well I got a lot of stuff let me just remove it and refresh it now uh you will see it is saying undefined uh I guess because this is not the way to destructure so let me see what I am getting actually so I will just say data and I will say data and I will uh console log that so you can see in the data I got data and inside the data I have blocks of course because I'm getting the EXO response so I have to destructure the block from this data right so add a bracket over here and uh destructure the data and I will just say uh data do block block uh actually it will be blocks and now if I I save let's see what data I get you can see now in the console uh when the homepage is loaded I'm getting this array with five uh objects inside it and all of them has a some blog ID and activity key and the title you can see over here so which means I'm getting the response from vet now I have to create the block card so how can I do that first of all I have to save this data in a particular variable so that I can access it over here and I can then reender it on the basis of that data so how can I do that for uh again to reender and store the value I will use the states so I will create a one state over here I will uh call that state blogs and the set function will be set blog and I will set it equals to use State hook in order to create the state and by default this state will be null and I will just save it and make sure you import the use State otherwise you won't be able to use it so by default the blogs will be null because before making the request obviously we will not have any sort of block data but when we get the block data what I want is instead of a console loging I will just say that whatever the data is just add that array to this blogs uh block state so what I will do is I will just say data dot blocks and save that so if I refresh well you won't see any changes because I am storing the data to this block state but I'm not doing anything else so what I will do is let's come over here and since instead of the latest blogs here I want to render the uh blocks so I will just remove it and I will add some conditions over here so what are those condition well first of all if we are we don't have any blog I want to show a loader uh in the homepage uh indicating that it is loading something and then once we get the blog data and save it to the blog State then I will just remove that loader component and instead of that I will render blog cards so for that what uh you can do is first make an empty component and add curly brackets because we need to write JavaScript conditions over here so I will say blocks in order to access this block State and by default it is null right so I will just check if the blocks is null which means we don't have any sort of block in that case I will render load component and actually we do have this loader let me type it correctly uh loader and we do have this loader component because if you go to your folder component uh folder View and go to the loader component. jsx you will see that there we have a loader which is an SVG so just save that and make sure you import it as well so let me just import this loader from loader. component and now what it's doing is just saying if the blog is null and by default it is it is uh null by default so uh we will render the blog but if it is n not null in that case I have some sort of a Blog data right so in that case what I will do I will uh for now I will return inst one saying uh blogs are in state to indicate that yeah blocks are in state so if I come to my homepage you can see I'm getting blocks are in state because uh we have set up the blog in the state use um before so if I just refresh you will see uh in for a fraction of seconds I got the loader and then I got the blog are inate if I refresh again you will see for a moment I got the loader over here you can see and then I'm getting this H1 saying blogs are in state which means I have blogs in the state so instead of saying this I need to render the blog so how can I do that for that I will say blog blogs which is the array and I need to map through uh individual items which will be the individual blog and I will get the blog and the index of those blog item inside here and I will just return nh1 saying uh let me first give a key I and what I will do is I will uh for now I will say blog. title so there's blog represents the whole object of the blog and well it has the title of the blog ID it has a lot of things so I am just for now returning an H1 with the blog. title to see that I'm getting title or not and you can see I am getting this five titles which is the how can you and know why is tag becom more popular so you can see I am getting all the titles but now I don't want these titles but I want the card of the blog card so how can I make that so for that let's go to the folder View and here you will find blogpost do component and inside over here we will create the blog postcard so let's do that create the blog postcard for that make a functional component name it blog post card and let's set it equals to an uh function with no props and this will for now we'll return and actually let's just work on it and don't return nh1 here so uh export this blog postcard as a default function like this and what I will do is I will again for now let's return uh this is a blog post card but what I want here is let's go to the homepage and instead of returning the H1 now let's render or return this blog post component so here what I want is I want to First need make this animation wrapper so make sure you import that yeah it is imported as well and make sure you gave it a key and that key will be the index so why I need animation rapper is because I want to add the fade in effect in my block card so that I can have some animations and I will add if I go to the animation rapper you will see that I have this transition prop which is by default a duration one but but I can add some more values to this so what I want to add is I want to add some delay over here so I will say transition and by default I have to give its by default value so I have to say duration one and the second thing that I will give here is the delay and the delay will be uh will tell how uh much time it will wait before animating and let's see the delay will be I into .1 actually not type here type here I is the index multiply do1 and the duration is one let me check it is it yeah the duration is one so after setting up our animation rapper for the fading animation inside this I will return the blog post card like this which is over right here and if I come to my website and refresh you will see there is a fade in effect that I wanted so you can see I'm not getting these text at the same time I'm getting with some delay like this so that's great now I need to pass this blog data in my blog postcard as a prop so that I can access the block data over here while creating this HTML and fill the data so for that what I I will do I will have uh actually let me create the props over here first so I will have a first props which will be content this content will contain all of the information related to the blog and I will have another prop called author and this author props will contain all of the information related to the author so here in the uh blog post while creating it I will say content and in the content I will pass the blog data that I am getting from the uh mapping and in the author I will say blog to get the blog but if I come to my uh response you will see that this blog is an object and inside this object I have this author key which is again an object and inside of it I have this personal info which is an object and I just need these three so I have to send this object instead of sending this whole object so for that I will say blog. author and this will give me the object with the personal info so I will say personal personal info and this will give me the object which contains only these three keys which is full name username and profile image so if I save this well uh you won't see any changes because we are getting the data of the props but I'm not using it so before using it I have to first destructure the data so that while creating it I can just set the values so over here let's make a variable let's say let and let's add a curly bracket and let's set equals to content like this and what sort of Fields I want to destructure from the content well I want to destructure all of the fields like the blog ID the title the banner the description the tags and uh you can see the published ad I want to uh destructure everything so let's do that so I will say here Pub list at and I will say tags title description banner and in the activity I will do like like this because I do I do not need this activity actually I just need this total uh likes and to get this total likes from this I have to restructure it like this so that I can access this total likes just like this instead of saying activity do total likes I hope you got that so after done with this I will say blog uncore ID but I will rename this key as as ID because I'm not going to type the blog ID everywhere to refer the blog ID I will just rename this blog ID key to this ID so that I can access the blog ID value by just accessing this ID variable so this are the these are the fields that I want to destructure from the content and now I want to destructure the full name username and the profile image from the author so I will say let and in the curly brackets I will say full name I will say uh profile _ username actually there is no profile username because it's username and the profile image so I will say profile profile _ image actually what it is image yeah and then I will say username equals author like this so this will get destructure from the author and this will get structure from the content so I am having all of the data now I just need to make the HTML and I have to just pass this data so let's do that so over here I will create a div and I will give it a class width full to cover all of the width it got like this and inside div inside this div I will create another div and give it a class name flex and I will add a gap of two give it item Center so it it will be vertically centered and the margin bottom will be seven so basically what this div is if I go to my project this div represent this where I have the user profile I have the user name uh the username and I have this uh uh detate when the blog is published so I have these three uh information inside this STP so for that first of all I need the image for the profile image so Mega image in the source I can provide the profile image value and this will just give me the URL and set it equals to this SRC and let's give it some class name let's save it to be six and the height will be six so it will be a perfect square and since I want it to be Circle I will say rounded full for 100% of radius and if I save I should see uh the user profile icons over here and you can see I am getting sort of icons over here and these icons are same because I have used my this account which I'm logged in currently to create all all of the 10 blogs so that's why all of the profile images are same but if you use different accounts to write the blogs then the images will be different so after the image I need the name so for that just add a p and in the class name I can give it uh line clamp and I can say one so it will be it will not break the word it will just over hide the Overflow only only in one line and what I want is I want first of all the full name of the user and then I want adorate and then I want the username of the profile which is I can get from this underscore user at theate username so if I save you should see here that this Kunal is my name and at theate Kunal is my ID and these both are same because again for setting the username we have have told our server to just remove the at the rate and the domain part but and and whatever you get uh set that equals to the username and that's why it is konal yeah so after the P let's add another P tag and you can give it a class name and say minimum width to be fit so that this won't shrink because remember I'm using flex and since it has a fixed WID the image has a fixed WID it won't shrink and this paragraph has a fixed WID which is the minimum width so this won't shink which means that this will go overflow and it will in mobile screens and if you don't give the minimum width fit then uh the date that you will type will uh be hidden or it will be stringed or in uh it will be word break because of this full name and the username because it's a long text so over here I have to like format my uh uh date because if I just type here like published add and see the output you will see that I'm getting 2023 11 and then I am getting a lot of U en cryptic thing I want to convert it into a date that I can actually do uh show over here so how can I do that for that I will create one more function so just go in the common folder and inside here you will find date. jsx so just open it and inside this folder we will do all of the uh we will make all of the function that we need in order to format our date so I need one function over here so let's create that in order to for the date uh based on this published at Value so inside it you have to create first a variable and let's call This months and you have to actually uh create all of the months uh actually insert all of the months inside this array uh like 12 all of them uh because if I call a math actually not math if I call date. get month which is the JavaScript function in order to get the month value it will give me a IND uh a numerical value and to convert that numerical value I have to have this array in so that I can just pass that number as a index in order to get the uh uh alphabetic value of the month so I will just quickly create a month array here so this is the months array which contains all 12 months in just three letters so now I can uh access any uh alphabetical in item from over here just by passing the get month numerical value and same as that make days uh make days array as well which will be containing the Sunday Monday Tuesday because uh from JavaScript you also get numbers for this case so I need the array and for that make sure you start with Sunday because if you don't start with Sunday then the zero that um JavaScript will return will mean Monday for you but actually the Zero from JavaScript means Sunday actually let me type this full instead of short so save this and after this we are done with these two variables now I need to create a function which will just convert that time step into uh the actual months and days and then we will uh be able to send that back and return the formatted value so over here make a function let's call it get day and this will just give me the date where U and this will take an argument which will be the time stamp and this time stamp is what we get from this publish ad so this publish ad is the time stamp that we will pass in this get day function and this will do is this is uh just make a variable and make a new date class and while creating the date just pass this timestamp over here so it will create a date with this timestamp so that you can get the actual day and month according to this time stamp so you can just now use the return and let's use the template literals and over here I will say date. get date in order to get the date from the Tim stamp and after that I will add a space and then I will say Dollar in the col bracket I will say months and in the brackets remember this months is an array and now I need the month of the uh date so I will say this uh time stamp I need the month so I will say date. get month and I will run it so this will give me a number from 0 to 11 and that will just pass into this month's array to get that index value so basically this get day will uh return you a date and a month of that time stamp and make sure you export this like this so that you can actually uh access this function outside this file so over here uh instead of just saying published at what I will say is I will say get day which is that function so make sure you import that as well and I will call this function and I will pass the published at timestamp over here and if I save this I should get the date and the month of the publish instead of the time stamp and you can see that now I'm getting one November and for all of the post because all of the post I have just created because uh before recording this so that's why all of the post has the same publish ad value if you want to check whether or not it is really working you can just go in your mongod DB and let's say if you want to change the publish that you can click over here well actually you should not uh change the time stamp because you don't know what is the correct time stamp will be so uh leave the publish that but you can actually change the title blog ID description content typ anything you would like to change you can you just have to click it and uh type it and just click on the update to update it anyway so let's work on the other things so after this blog card uh this information what we have in our blog p uh blog card is the title and the short description and one tag with this activity counter and on the right side I have this uh Banner of the block so let's make that so after the This Ti let's create an H1 and this will basically just render the title of the blog so I can just pass title over here and let's give some class name so uh let's say the class name to be block title and this again the block title is a custom class that is inside your index. CS file so you don't have to write the classes for this title because the index. CSS is doing it for you so after this make a P tag and and uh this P will be the short description so I will add this over here and this contains the short description because in the server you can see the response is the short description which contains the short description so yeah now let's give it some uh class names and let's say margin from five direction from top and bottom will be three units and text will be XL and the font will be gasio and the line height which is the leading will be 7 units and maximum small will be hidden which means if I am on the smaller screens it will be hidden but if I am on the medium screen then it won't be hidden and I will say medium then if I am on the medium screens then I will say U maximum to maximum 110 pixels um 1100 pixels actually so this is what it is telling is from medium to maximum 100 uh 1100 pixels I will add hidden class to this and then I will add a line clamp of two so that I will only get two line of this short description even though if it is overflowing I don't want the third line of this uh paragraph so let me just word wrap this and uh let me go back now you can see now I got this information and now I got this title and I I have this paragraph over here here which is the short Des which is the short description and if I open my console you will see that in the smaller screens I'm not getting the uh uh short description but if I go to the medium screens I will get the short description because I have given that style and if I go over uh to the 110 pixels I'm still not getting the descriptions and if I go to the larger screens then I will get the description so this is the way to uh I'm just doing it I'm hiding and showing the short description just to make this website responsive so after the paragraph what I need is I need one div and this div will contain the tag and uh the like counter so over here I can create one span and I can just pass uh the tags to select the tags well if you come over here you will see that tags is an array so I only want the first index of that Tex so I will just say say index zero to get the first element of that tag array and in the class name I can give BTN light because I want it to be look like the B light and I will give padding from y direction which is top and bottom to be one units and from uh x uh Direction which is left and right I will say padding to be 4 units so just save that and I should see tag over here you can see for this I getting cooking tag for this Finance it Finance It Is Tag It Is Tag so now I am getting this this um tag as well now I need the like counter so for that make another span like this and inside this I will add the like icon and the like count so for the like count you can add curly brackets and the like count is inside this total likes uh variable so just copy and paste that variable over here to get the actual total like count and now here I need that like icon so let's just go to the flat icon and search for the like icon so in the flat icon search for like and I will use this icon so just copy this I tag and let's come back to the span tag and paste it over here let's change the class to class name like this and actually let's give it a class of text XL so it will be bigger and let's give some classes to this pan so I will say it to have a margin left of three so it will not stick together with this button it will have a spacing between it uh between and I will say it to be Flex so that I can align the icon and the total light count side by side and vertically centered and horizontally centered so for that I will give flex and then I will say items Center in order to align the icon and the text horiz vertically uh Center and then I will add a gap of two between them and I will say the text color will be text dark dark gr like this and if I save and come back you will see that now I got this icon and now I got this like count which is good but you will see that this tag and this icon is not coming side by side because we have to give Flex box to the St as well so just give a class name and say Flex in order to make the tag and the like side by side and I will say the Gap will be four units and I will add a margin top of seven to have some margin from this short description so now this look like this and yeah so after this I need what I need let's check so after this I need this uh Banner on the right side so how can I make that so again for that I will come to actually I will go out of this uh width full and what I will will do is I will make another div and remember since I am creating these two divs uh I can't do that because to return you have to provide only one parent component so over here what I will do to wrap this well if I come to my uh project you will see that if I click on any of the blog po post it is redirecting me to the blog page so how can I do how I am doing it because I am wrapping this whole Dev containers inside one link element a link component which is provided by the react router component so I will do the same over here I will create a link uh component from the react router and I will import it over here like this and I will close it at the very end and inside this link we will have this ST which is the information and this ST which will be the banner both so that mean whenever you click on any of this text or the banner or anything it will be considered uh to be clicked on the link and then I would be able to redirect the user to uh the blog page so I will work on this link later uh let's first create the banner so over here let's give this div a class name and over here I will say a fixed height of 28 and remember since I giving the width full to this and and I want this and this side by side obviously in the link I will give a display flex and uh that will affect the image size uh so I have to give a fixed width but I have given a fixed height so I can just say aspect square and this aspect Square will give the fixed width as well so it won't shrink the image Accord because of the flex box and I can say BG CR to have a cray background if it is taking so time to load the image and now I will just create an image component over here in the SRC I will provide Banner that I'm getting from here and if you see that I'm getting a lot of red lines here well actually it is not an any sort of error it is just vs code suggestion that it is giving me so you can just click on this bulb over here and you can just uh select the disabled react Pro type for the entire file and this will remove it because this is vs code suggestion that it is giving error otherwise there is no error in our code and in this uh here after this banner I need to give it some classes so I will say width to be full to cover the full width and height to be full as well I will say its aspect will be square and I will say object to be covered so it will be uh in proportions so just save that and if I come to the website you will see uh I got the image I got this i got this but it is not looking like this and this is because I don't have Flex box on my parent element which is this link element so let me just give some Styles over here so let's just give class name and the classes that I want to give is flex to make this div which is this information div and this image div side by side and I will say the Gap will be of 8 units and I will say items will be Center so it will be vertically centered the Border B which means a border Bottom I want and Border color will be border Gray and padding bottom will be five and margin bottom will be four so it will have a four unit of margin bottom and five unit of padding uh buttom so if I save that and refresh now you will see now it look like the uh this block card great now you can see I'm getting this hand icon but if I click I'm not getting redirected to anywhere so how can I fix that or actually you don't have to fix it because it's not broken you just have to provide uh two prop over here and what I want is whenever I click here I will get I want to redirect the user to/ blogs SL whatever this ID is so of course I don't have this rout now but I want to redir the user because we will work on the blog page so whenever we will work on then we will show it but we can create the root right so over here I will use template literal and then say slash blogs not blogs it will be blog slash and inside over here I will access the idid which is this blog ID so this means whenever I click on these cards it will redirect me to the/ blog SL the ID of the blog so if I come over here look uh down so you just look down if I take my mouse over here the root is/ block SL cooking and if I take my mouse over here you will see the root is block SL how can you make the most of the finance so you can see the roots are Dynamic now and if I click I will get reducted but I don't have that route that's why I'm not getting anything and this is the animation that I'm getting so with this actually we are done with our uh latest blog and if I actually show you how this look in the smaller screens by just resizing the window so this is how this look in mobile screens and now I have this trending block section as well over here so now let's work on this trending blocks in order to show trending blocks over here which will be the maximum five trending blocks instead of just trending blocks uh text over here so let's work on that okay so now let's work on our server.js in order to create a trending blocks route where we can make request from the front end in order to get the uh trending blocks so just below after the latest blocks I will make another rout and that will be a get method and the root will be a slash trending blocks like this and it will run a call back with the request and response so inside here I will do the same that I did for the latest blog but here I was selecting the blogs and uh sorting it with the publish chart which is the publish date but here I will I will sort it according to the uh their read count and the like count so that I will get the uh blog which has the most read and the most like at the top and then the lower will be below of that so I will do here I will say uh blog. find to find the blogs and I will just say that find the blogs uh whose draft is false which means they are published so give me that and I want to populate the author here as well so I will say author key to populate the author details and actually instead of typing the key Fields I need the same field so let me just copy this string and paste it over here like this I need the profile image the full name the username and I don't need the ID so after the popular I will say sort uh to sort this data and on what bis I want to sort I want to sort on activity do total uncore reads so if I come an object which has this total reads count which is a number so basically right now I have 10 blocks and all of them has uh total read zero because I'm not updating it right now uh because I don't have any block page to read so that's why all of them are zero so even if I do the Sorting you won't see anything and you will get the latest blog result because a latest blog and this will be getting sorting just bases of this publisher because the total like and the rate will be zero but if you want to see the uh sorting you can come over here and just click on the number and change the zero to whatever number you want and you can do this manually for now I'm not doing it because I know that there there is no issue but if you want to test that you can do that so uh what I was basically saying is I want this total read so I have to access it using this activity because it is inside this activity object so I have to say this activity do total read in order to access that total rate key and after that I will just pass a value of negative 1 which means give me the largest value first and then go to the smallest and I will do the same over here so uh for the like so I will say Activity Dot total underscore likes make sure you spelled everything correctly and I will just say negative 1 to get the most liked block first and at the end I will say published at and I will just say negative 1 to get the latest blog so now after once we get the Sorting done I will select some inputs from the blog and those are the blog ID title and I just need the published at like what time time it what published and I will just remove the ID by saying negative uh minus underscore uh ID and I don't need the banner because in the small uh or the trending blog I don't have any sort of banner if I come to my project you can see in the trending blog I have 0 1 02 03 instead of the banners of the block so that's why I don't want to retrieve the banner now uh I will set a limit of this uh search I will set that I want at most five trending blocks and I don't want to add pation over here so I do not need to create the max limit variable over here I can just say it five now after that just catch the blocks response in this dot 10 and I will just call the data to blocks and I will just return from here with a response of status 200 and uh why ises not giving me error because I have the P here so yeah and with the status 200 I will send a Json which will just contain the blogs with the blogs key great and since I'm using then I have to use catch in order to catch any error and if we got any error I will return with a uh return response with a status of 500 and the Json that I will send will have an error key and the error will be error Dot message like this so save this and it will work so if I instead of making request to latest blog if if I make request to trending Das blogs and if I click Send request you will see I got a status of 200 and I'm getting uh five blogs object over here and now this time I'm only getting the blog ID title and the author detail I'm not getting the description and the uh Texs and all that stuff because I don't need that in my uh trending block so now I can work on my trending block card so let's just go to the homepage and uh let me copy this fetch latest blog function again and paste it right here and instead of calling this fetch latest blog let's call it fetch trending blogs which will make request to trending blogs and once it gets those blogs I will uh store those blog in another state which I will call trending blogs instead of set blogs so I will say set trending blocks for the set function and by default this will be null also so once I got this instead of running the set block to set this data into this state I will say set trending block so whenever I get the data from this trending blog I will just call set trending blog to set the data to this trending blog State and now make sure you call this fetch trending blog whenever the website completes uh rendering inside this user effect so this will just make a request to the back end and it will uh give the uh get the data and it will store that data to this trending block state so once we get that state what I can do is I can come over here and instead of rendering this H1 I can render that uh I can render that trending block so I will just remove it and I will make uh C bracket and inside it I will write the same condition that I wrote here so just let me copy it and paste over here but this time this won't be blocks it will be trending blocks so I will check whether or not trending block is null so if I don't have any blocks in my trending block array then I will render the loo but if I have any then what I will do I will Loop uh through this trending blocks array and I will get the blog data and then I will return an animation rappo which will have the same duration and delay and the key but this time instead of returning the blog postcard what I will return is I will return minimal blog post and this minimal blog post is the component that we need to create so if you go to the components you will see that I have here uh no Banner blog post. component which is the minimal blog postcard and we will create the component over here so let's create the component over here so make a con and we will make a functional component which we will call minimal block post like this and this will return for now and H1 saying trending blog card over here and make sure you export this as a default component like this and since I have this component now now I um I have to rewrite it so that it will import it itself like this and now it won't give me any error so what this I'm doing is I'm just doing the same but I'm instead of rendering the block postcard now I'm rendering minimal block postcard which obviously don't have access to the blog so we will do the same by creating the props and by making the j6 inside this but before that let's see whether or not I'm getting this so if I uh come over here and refresh well you won't see it uh because we don't have that trending button over here so so I have to go to the mobile screens over here so if I click on the trending block now you'll see I got this trending block card over here and if I click on the home I got this home uh route where I have the latest blog and if I go to the trending blog I have this uh trending blog card over here so let me actually uh stay in this Mobile screen uh view so that I can work on it so now what I can do is let's add some props over here and the props that I need is one will be the blog and the second will be the index I will use this index prop in order to decide what index of uh what index uh data I have so that I can give 0 1 02 03 in the beginning of the card and I need this blog in order to set the blog card so let me pass these two values over here so I will say blog and for the blog I will just pass this blog whatever I get and in the index I will pass the index of this blog so I will just say I and that will just pass the pass it as index so now you can come over here and instead of returning an H1 now let's work on rhml and actually before that let me destructure the block component first so let me come over here and let me say make a variable inside the cly brackets I will destructure it later just set it equals to blog and what Fields I want to destructure well I want to destructure the title I want to destructure the blog ID so that whenever I click on the card I will redirect it I will redirect the user to the blog page and I will do the same that I did for the Postcard I will rename the blog ID to ID like this so that I can access the blog ID by just calling this ID instead of blog ID and I have to destructure the author as well so I will say author and from there I want to destructure the personal info so I will type personal info and from personal info I need full name username and profile image like this so just set it equals to the blog and the other thing that I want is I want the [Music] publish at time and let me just enable my word RP like this and let's just save this okay so now instead of rendering the H1 Let's uh make one link component like this and make sure you import this as well over here import curly brackets link from react and the reason I'm adding the link over here is the same for the blog post because I want to redu the user to the blog page when the user click on this card so over here in the two prop you can give the same thing uh you can say blogs slash and uh you can do the same the slash blog slash so add a forward slash and let me just remove this s from here and just pass the ID in the curly brackets like this and let's give some class name to it I will say Flex to have a flex box so that I can uh make the number and the uh information of the block side by side and uh let's give a gap of three units and not actually three just give it a five units and set margin bottom of four units then I will create an H1 inside it and I will say that this will have index as a Content so if I come and refresh over here you will see I got 0 1 2 2 3 and four well I don't want the numbering to start from zero I want it to start from one so I have to actually add it so I will say index over here and I will say index + one uh like this so now if I uh refresh actually uh this is redirected me to the uh I clicked on it so it redirected me to the blog page so let me just come to the home rout again and go to the trending blog and now you you see the numbering is starting from the 1 2 3 and 4 so now I have to check over here whether or not the index is less than 10 because if the index is less than 10 I want to add a zero before the number and if it is greater than 10 then I don't want to add anything because I want two digits instead of one digit so what I can do here is I can say uh index is less than 10 and if that is true so I have I wrote a condition index is less than 10 10 and if that is true in that case I will say 0 plus index + 1 and what I will do is uh in the else block I will say if it is not true in that case I will just return the index so now if I come over here you will see I got 0 0 1 01 1 02 and that's the reason because I have to put this inside bracket otherwise this uh string conation will interfere with this maths so now it should return Me 0 1 02 03 as you can see over here so now let's style this a little bit so give it a class name and let's say blog index and again this blog index is a custom CSS that I have inside the index.css so you don't have to write the classes for this just save it and you will get the styles that you want like this if you want to change the styles of of the custom classes you can just go to the index. CSS and change the classes over there or you can just give the classes uh class names over here instead of just giving the plog index so after the H1 I will render one div and inside that div I will create another div and this D will again uh be a a container for the icon and the name of the user and the uh the profile image the name and the user name so what I will do is I will just copy this whole thing from the blog post component I will paste it over here instead of writing them again and I will just save it come over here and if I save go to my trending blocks you will see that I'm getting errors because again I don't have access to this get data get day so let me import that uh import get day from common dat common date and now in the trend in blog you will see that now I got the user icon profile and the name and the username and the date it got it was published so after this I can just need the title so what I will do is after this I will add one H1 and in the class name I can give it to have a block title class and it will just render title in it so just save that and you should see the title yeah you can see I got this 0 1 for the first um for the first blog and it is looking like this so that's great actually I think I should give the margin bottom to8 instead of four because I want some space over here yeah now this look good so this is our trending blog component and since this tab will be only visible to the smaller screens this is how this website will look in the smaller screens and if you want to go to the blocks you can just click on the home and you will at the latest blogs so now let's let me close this so that I won't see that trending blog over here but what I want now is I want uh a sort of a filter in the right side and below that I want the trending blocks again because over here in the desktop version user can't uh see the trending block so I have to create the trending blog over here so before that let me just create the uh tags and then I will work on the trending blog IND the below so to create the filters and the trend uh trending block section now uh let's work on this St so before working on this let's give some class name to this step and let's just say a minimum width of 40% so the uh Flex box won't affect it width and it will have at least 40% of minimum width and then I will say on the largest screen the minimum width will be 400 pixels and the max width will be minimum so I'm just giving these properties in order to set the minimum and maximum width of this otherwise the flex box that this section has will affect this uh div's width so after this uh give a border of one pixels and actually not one left so that we can have border on the left side and give a border of gray color set padding left to eight unit and padding top to three unit and say maximum medium hidden and this uh class basically mean maximum till medium which means from smaller screen to till medium screen we have we should have this class which is hidden so it will be hidden on smaller screens but it will be visible on medium and the larger screens so over here now I can uh create one more div and this div will contain the filters so I can give class name here I can say flex and I can say Flex call in order to uh get the uh Flex column like this and I can give a gap of 10 so this T basically what it will contain is it will contain the stories and it will contain these buttons so inside it let me make an H1 like this and and I can type here anything so I'm just typing stories from all interest and let us give some style so let's just say font to be medium width and text will be of excel size and the margin bottom will be 8 units so if I save it and come over here let me refresh you will see that this is the right side div and I have this border on the left and I am getting this H1 now I need need the tag over here so before creating the Tex now let's me just create the trending block section over here and then we will create the uh uh what we call uh the tags uh after we create the trending block so after this St we the flex this Flex box after this make another div and this div will contain the trending block so over here I will create an H1 and this will basically uh say trending and now I need a trending icon over here so before giving the icon let me just style it so give it a class name let's say it to have a font of medium width text will be of xer size and the margin bottom will be of 8 units and now after the trending I can give the trending icon so let's go to the flat icon over here and let me search for let me say graph I don't know what it called so let me search for the graph and actually it is something like this I don't remember it correctly graph up AR up yeah here it is the uh the icon that I need so it is arot Trend app yeah up yeah so just copy this I tag and come back to the react code and paste that I tag over here and just change the class to class name and uh I don't think so I do need to provide any class name so if I come over here you will see that now I got the trending H1 with the icon and I have the stories from all interest over here so now I can just render or create the trending blogs over here and to do that I don't need to do anything actually because I already have done this over here so let me just copy this and paste it over here to create the same minimum blog post component that I'm creating on this uh trending blog route so if I save this you should uh see the trending blogs over here like this you can see I'm got getting all of the trending blocks and I'm getting the latest block now I just need to work on the stories uh so for that uh not Stories the uh filter so for that make a Dev over here and give this D A Class name let's call it flex and give a gap of three units and say Flex to be wrapped so it won't overflow and everything will be wrapped and over here what I will do is I will map through an array in order to create the tags or the categories or the filters so how can I do that so for that I will come at the top of this homepage component I will uh create a variable over here I will say let categories equal an array and here I will Define what uh or how many filters I want and then I will Loop through this array to get that uh text from that array and I will uh take that text and put it in the button HTML in order to create a button out of it so what sort of uh categories I want over here one is programming then I have Hollywood then fil making you can type anything you want I'm just giving these uh as a filter social media cooking technology Finance is actually instead of giving technology let me give tag because while creating the blog I have given tag in blogs as a tag instead of technology so I won't be able to get them if I use the technology key over here so so after this finances I need one more category that is travel so this is uh the array which has all the categories that I want to show in as a filter so now I will just Loop through this categories array over here like this do map and now I will get the individual category and the index of that category and I will return a button over here with that category let me make it inside a curly bracket and let me give it a key otherwise it will give me error right and now let's style it so let's give it a class name and let's uh say it to have a tag class and just save it so if I come over here I should see those as tags over here now you can see now I'm getting the programming Hollywood film making all of them as a tag and uh everything is working but uh the styles are not correct so why is that let let me see actually I have to give some I guess margin bottom over here actually what you have to do is cut this and make another div and inside that div paste this so what it will do is uh this div will contain the stories from all the interest part and I will remove this closer which is the close of this tip and I will have this TP which will contain the trending block and now I will close the main main parent Dev which is this uh Flex call Gap and what I just did is actually let me format the document so I can tell you better is I have this main parent div which has this flexbox column so that I can align use the flexbox property by just having the layout in the column way so if I just collapse this you will see that I don't have anything left so that means inside this I have the trending blog and the filter both uh component and after that I have this one D which contains the story from all interest and the category part so if I Collapse this you will see that they are gone but I still have this trending let me just remove this so I still have trending which means this trending is outside this div and I have another div which contains the H1 and the uh trending blocks so make your structure like this and if I come over to the website now I the Styles should be good yeah the styles are correct now now what I want is when whenever I click on it it should uh change the state of the page and then it should load the blog according to that tag so how can I do that first of all I have to check for the click so for that I have to add on click event to it so I will say on click and once it get click I will say load blog by category and this is a function that we don't have so just copy it and whenever we click on the button it will call this load blog back ategory so just copy this function name and let me create this function over here and for now it will just console log me clicked so we will know that it is getting clicked so if I open my console and let me just come over here so if I click on the programming it you can see in the console I got the clicked which means it is working that's great now what I want is instead of just logging it I will first access the event so that I can access the button and what I will do is I want the text from the button I want what sort of button is being clicked so I will say let uh category equal e. Target to get the button and to get its inner text I will say iner text to get the text so that uh what it will do if I click the programming button it will return me programming and if I click the uh button with the let's say travel in it so I will get the travel as a text so once I get that I will call to lower case method in order to lowercase the string and uh that way I will know that this is the category that I got and the user has clicked on this category so once I get this what I will do is I will set the blogs to null and actually what I'm doing here is I'm setting the blogs to null which means that by calling uh uh set block you are setting the blogs state to null which means whatever the latest blog we had it will just remove everything and it will go back to this null and once we go to the null now I need to make request to the back end in order to get the category wise data in order to render it but we don't have any domain right now so we will do it later but right now what I will do is I will change the page State and what is Page state for that first of all let we be let's just create a state state so make a let over here and I will call the state page State and the set function will be set page State and just set it equals to use State and by default it will be home so what uh it does this mean is the pay state will tell you what state uh I am currently in so by default it will be home which means it will give me the latest blogs but when I will change the page State I will change this home to the category and that category then I will use to uh get the data and uh I will use the space state in order to like uh retrieve the data from the back end and to show it so so just uh uh update that past it over here by just saying if page state is equal equals to category not categories category so this condition is just telling you if the current page State and the category which means means the button you uh clicked are the same which means you are clicking on the filter again after clicking it so which means uh you are deselecting it in that case I want to change the page state to home back so I will say set page state to home like this and I will return from the function like this and at the end if the page state is not equals to category which means you are selecting one uh category or one uh filter in that case I will say set page state to that category like this not categories it should be category and if I save it well you won't see any changes because even if I refresh uh you won't see anything and if I click on let's say Tech you will see that I'm getting the home and I'm getting the load up because if I come in my this condition you will see that if the blog is null it will render me the loo and since I'm setting the blogs to null that's why I'm getting this loo and if I click on the tag again now it is a homepage but I'm not uh seeing anything so first of all let uh make the visual changes which means if you click on the button or any category it will turn into black color and if you click on it again to deselect it it will turn back into the normal grayish color so let's first do that and then we will work on other things so uh let's come to this button here and in the class name let me add curly brackets because I need to write JavaScript over here and after tag I will add a space and in the plus I will add some value that I will get from the condition and that value is if the page state is equal equals to the category which means the pay state is equals to the category text and which means I want it to be selected in that case I will return this class which is BG black black and text white because I want the background to be black and the text to be white but if uh the past trate and the category are not same then I will just return an empty string so if I save that and come over here you will see nothing change but if I click on tag now since the tag is active you can see I'm getting the black background and white text but if I click over here to deselect it it got removed so if I refresh it again I can select and it will change the visual uh the UI of the button I can select any category that I want and I can deselect it to go to the back to the homepage and now notice if I go to my project if I click on technology you will see that this got changed also and if I go to finances this got also changed so how can I do that so to do this what I will do is I will come over here where I am creating the in page navigation and instead of saying uh a St itic text which is home I will say page State like this so this page state it just stores the value of the state and by default it is home so by default it will render you home but whenever you change the page state by changing or selecting or deselecting the categories then the page trade will change and that will change the in page navigation so if I come over here and refresh you will see that I'm getting this home if I click on the tech you will see now I am on the tech if I click on film making now I am on film Mak if I click on travel I'm on travel but you will see that the HR is not updating even though the button is updating the text of the button but the HR is not updating because you are uh you can change the text of this but the HR will only update when you click on the button so you can see once I clicked on it the HR got changed so when you change the pay state you actually have to click on this uh button virtually through JavaScript so let's do that uh first so how can you do that so in the use effect what I will do is instead of uh having an empty array I will say page state so whenever the page State changes it will run this use effect and we will run these functions but I don't want to run the fetch latest blog and trending blog every time the pce state change so what I want is first of all I want the uh latest blog to only run when the past state is back to the home uh home value so for that I have to say if PID State equal equal home so if PID state is equals to home then only I will run the fetch latest blog otherwise I won't run the fetch latest blog and what I want is I will check for another condition here if and because I don't want to render or fetch the trending block every time the page string so I will check whether or not the trending blog state which is uh this over here is null because at start this will be null so if this is null then only I will fetch it once it is uh an array I won't fetch any more trending block so I will say if trending blocks and I can just add an exclamation over here which will just tell you that this is uh a null so if it is null it will return you false and that false converted into true because of this explanation and then only I will run this fetch trending block so by doing this what we have is you will see I'm on the tag but if I deselect it I will go back to the homepage and now I will get the latest block again I can go to fill making and you will see the uh loader because I don't have any blocks right now but if I deselect the category I will still get the latest blog like this which means our use effect is working perfectly now what I wanted is I want to update this uh HR by just clicking on this button virtually and how can I do that for that I need the button reference so if I go to my end page navigation which you will find over here like uh this active tab reference and active tab reference and the line and the tab well I just need the active tab reference uh because this uh has the reference of that button so how you can access this active tab ref in the homepage well uh you have to export this but you can't add export inside the conditional uh the functional component to export this active tab so for that what we will do is I will just remove this export and actually I will remove this let variable also um let keyword and I will add export at the top I will say export let and then I will name the variable names over here and I will make a duplicate and I will say active tab ref so I have created the active tab line ref and the active tab ref and I'm just setting it equals to use ref hook in the in page navigation which should not give me any error and uh this export basically should give me the access to this active tab ref to so if I am getting this active tab ref as a export I can import it over here uh so let me do that first so let's import active tab ref from in page navigation component and now I have the access of that reference so once I get that reference what I will do in the use effect is I will say active tab ra do current in order to get that button dot click to click on that button so if I just save this and come over here if I go on filmm making now you will see that the HR is updating because when you are clicking on this it is changing the past trate and once the past trate is changing it is calling the use effect and in the use effect you are clicking on the button virtually so if I click on the finances the HR is changing the social media programming cooking Tech travel everything like everything is uh whenever you are selecting any category it is changing the HR because it is clicking on the button but if I click on the uh PID State again which is this Tech again it will just give me the latest blog by default because I'm back to the homepage so now let's work on our uh categories route in the server and then we will make request from the front end to the server in in order to get the data from there and then we will render those blocks here so now let's work on our server to make a search blog a route where we will uh filter our block data to get the data according to the filters or the categories for that make server. post because we will make a post request to this route and in the request we will send what category or what tag of blogs we want and the root will be search blogs I'm calling it search blogs instead of filters because this route we will use uh for now to filter the home homepage data but we will use this rout for the search page and the user profile both of them so we will use the same uh route for all of them that's why I'm just giving this search blog in order to search the or filter the blog from the data so whenever you make a post request to this this will run a call back with a request and response and what I want to do over here is I want to First retrieve the data from the request so I will destructure it like this and I will set it equals to request. body okay and for now since from uh the homepage I'm making request to this search blog I will just send the tag from there uh and this tag just means we I I want to filter the blog according to this tag okay so now once I get the tag from the body of the request what I can do I can say let find query I will make a variable and I will set it equals to a query we basically we will write a query over here that we can pass to our mongos in order to search the blocks data so the query that will be it will be like this an object with a tags key and it will hold a tag uh value so this tag key represent our whole uh array of tags and just passing the tag value that we got from Front End basically just means that if the TX array include this tag then we need the document so this is the first parameter mean first key mean and then the second key that I want to say is draft false which means I only want the publish blog not the draft ones and then I will just save it like this because I just want to get the document based on the tag and now once I have the find query what I will do I will make another variable say Max limit in order to Define how many of the blogs I want in my um response so I will just set it equals to five for now and now we can make query uh using Mongo's data we can run queries in order to get the data so I will say blog dot find I will so I will say blog. findind in order to find the documents and the query that I want to run is find query and then once it get the blogs I will populate them and again I will do the same that I did so actually what I can do is I can go to my latest blog and I can copy all of this code and I can paste it over here so what I'm doing is I'm populating the author retrieving its personal uh profile image the username the full name but removing its ID then I'm sorting the data according to this published at time and from the blogs I am selecting the blog ID title description Banner activity and all that stuff and then I am setting the limit to to this Max limit which is five for now so whenever we will get any blocks from this tag we will get at most five and then once we are done by the queries it will run do then and it will just return us a response with this blocks uh object and if we got any error we will just conso log it so this is the simple way we did it and don't worry in future uh in this part later in this video we will make this root for our user profile and for similar blogs and for search blogs uh we will do all the blog sorting over in this route so don't worry about it so once we are we have this what I can do I can check it so let's go to request and instead of making get request to trending blog now let's say post request to Local Host 3000 SL search blogs and I will say the [Music] content type will be equal to application Json and the data I want to send is tag and the tag I will say is let's say cooking so if I say tag is cooking and I send the request well I got an error uh I have to make this in codes now let's uh send the request and now you can see I have sent a cooking tag and from there I got blogs and this blocks is an array which contains one two and three object because we only only have three blogs containing this tag cooking although we have 10 blogs in my database but I am only getting this three blog because they have the tag cooking because if you expand any of these you will say in the tags array uh I have cooking over here and if I expand the another blog object you will see that I have cooking in the TX array as well and you will see that I have this test tag in uh these blog as well this test tag I have given to all 10 of them so if I just pass here here um test instead of cooking and send the request you will see now I will get five request five blocks because I have a limit of five but if I remove that limit I will get all of the blocks because all of them has uh this test tag which means our search blog is working so now we have to just make the request from the front end in order to uh get the data according to the filter or the past state so let's do that so let's go back to our react code and in the use effect here where you are checking for pay state is equals to home or not so what you can do is you can add a else block so what that means is if the page state is equals to home then we will fetch the latest blocks but if it is not equals to home then particularly then it should be equals to something else or it should be equals to some tag or filter in that case I will run fetch blogs by category function and of course we don't have the that so just copy it and let's create this function just below this latest block so I will just say const and uh I will make a function quickly like this and what I will do I will just copy this exos and I will paste it inside this blogs by category and here instead of making get request I will say make a post request to not latest blog but to the search blocks uh rout and what sort of data I want to send so in the object I will say tag and in the tag I will say page state so this page state is the current active category and the tag is the key that I want to represent this and this is the data that I am sending to this uh roote and now if I just save this and come back to my website and uh uh refresh and now if I uh let's say click on the cooking because I know I have three blocks in cooking tag so if I click on here you will see now after done uh after clicking on cooking this got changed to cooking and now I have three blocks over here which has uh cooking included in them because all of them have the cooking tag but if I uncheck the cooking category now I will see all other blogs as well like cooking Finance finance and the tag so if I click on tag I will get two tag blogs if I click on finance I will get Finance actually it is finances that's why it is not working so if I just go over here and I'll say it Finance instead of finances and let me just refresh and check the finance now you will see that I've got the finances so that means our filter is working but you noticed one problem right and what is it uh let me just add back over here and let me just click over Finance uh Let me refresh let me click over the finances again now you'll see if we don't have any blog in my database with the same tag that I'm current ly checked on or let's say I am clicking on film making to see film making blogs but I don't have any blog related to this category then I'm just getting this empty uh page but instead I want to show an alert over here saying no uh data in the database or something like that so how can I do that for that we will make another component and we will call that a no data message uh and we will show that component uh anywhere where we want to show that we don't have any data to uh show the user we will show that component instead so let's work on that so to make the no data message component let's go to the folder View and inside the component folder you will find uh no data. component. JX file so just open that and let's create a component over here so make a functional component and we will call this component no data message and what this will function will do is basically this function will take a prop and that prop will be message so what message we want to show to the user and make sure you export this as a default function so let me do that here okay so basically whenever you will create the no data not s it should be D so whenever you will create this you will pass the message prop to show tell that this is the message that you want to show to the user and basically then it will this component will basically return a div and inside of it it will have a P tag and that P tag will be just this message that we pass from the prop so we need to give some classes to the T and these are some basic classes so you don't need to worry about so just say text Center to make the paragraph in the center and we will say cover the full width with the width Dash full class and give a padding of four units from all four Direction and give it a border radius of rounded full which means the Border radius will be 100% And the background color so for that give BG Das gray and add slash 50 which means BG gray is the background color that we want and sl50 which means the opacity of the background which will be 50% and and also give it a margin top of 4 units so this is basically what you need to do to create a no data message now uh how we will render this so let's come to the homepage and basically what we will do is uh I will come over here in the blogs and instead of just going and simply mapping what I will do I will check for condition here and that condition will be blogs. length so this blogs. length is basically telling whether or not do you have any sort of length so if we have an empty array then this will be false and then if this is false then we won't be able to map it right because in in empty array you won't be able to map so in that case we will render the new data message so let me indent it inside it and add a column for the else case and if we don't have blog length then I will render no data message and make sure you import it and while creating it you have to give a message prop and the message that I want to show is no blogs actually let me give it as a string no blogs published and if I save that and come to my website uh go to here if I click on film making now uh you remember I don't have any blog in my database with the film making tag so if I click on over here now you will see that I got no blogs published instead of the blank page just telling the user that we don't have any blog with this tag so if I go on the programming it will say no block publish because I don't have that but if I go on tag it will give me the block because I have some blocks with the tag tag as you can see over here so this is how you can alert the user if you don't have any data and if I click on the filter again I will uh get back to the home route where I will get all of the blocks data so instead so what we can do is we can add this no data message to our trending blog as well so if you don't have any blog in your database then we won't be able to see this or this trending blog or the latest blog in the page right so in that case we want to show this no data message so let me just copy that and we will add that condition over here as well I will say trending blocks. length to check the length of the array so if we have any length in the array then I will run the mapping function if we don't then I will render this no data message with a message no blocks found let me me say uh no trending blocks because it's a trending blocks right no trending blocks and if I save well you won't see any CH because we do have trending blogs but if I just come over here where I'm fetching the trending blog and if I just don't set my blog and in the start I set my trending blocks to an empty array then if I come to the website you will see that it should see uh actually it is not giving me let's see why it is not giving me that oh actually it is not giving me the because the condition I have added is inside this in page navigation which means if I go in my Mobile screen then I will see the no trending block over here but in the desktop views this component is different so let me add that uh let me add that condition over here quickly again so trending blog. length if we have any length then run this mapping function if we don't then run this no then render this no data message with the message prop and the message will be no trending blocks and if I save it now you should see uh an alert over here saying no trending block which means our alert is working and with this our homepage is pretty much done and actually let me just rever back the changes because I don't want it to be an empty array right so let me uncomment this and this should work now yeah now I got the trending block so with this we are done with our homepage we just have to work on pagination so that if I'm getting only five although I have 10 I should see a load more button at the bottom to click on it so it can load more blocks so let's work on that so to work on the load more functionality or simply the page inition functionality we have to first uh change our data structure and what do I mean by that so basically for right now this block State or the trending blog state is like this so if you talk about the blogs the blog state is simply an an array which contains object like this right and individually all these object represent one block but for the pation we won't be able to do this by simply this data structure because it will not be easy for us to track the current page and the total number of data we got and what data we need so we will change this data structure to new data structure which will be equals to this where the block state will be equals to an object instead of an array and this object will contain a keys some keys so the first key it will contain it will have a results and that result will be equal to an array that will contain the blocks as a individual object so you can see whatever we have here right now we want to store that inside a a results key inside this object which will be this blogs State and other than this results key I need one more key which will be the page and this page will basically tell what page I am currently in so uh by default when we will make the first reest the page will be one and then then uh we will make second request to the server the page will get updated to two and then three and then four and so on so this will be a number that will keep track of the current page and then we need another key that will be total do or you can say total dogs and this will be a count of how many documents I have in my document so uh in my database so for example if I'm talking about the latest blocks I have 10 blocks in my database so I will make a request in my server and retrieve the information that how many of the blocks latest blog I have in my database and that will be 10 and at the start I will only get five blogs from there so the page will be one so if I say now then 10 - 5 is not equals to0 which means I have some blogs data still left then I will make another request and this will get updated to two and the data array will uh get five more so now it will be of 10 length so now if I check that 10 - 10 is not equals to True is false so I will not make another request and the page will be just two at most so uh for that we need these three keys I hope you understood that uh the reason we need to change the data structure from this to this actually let me remove this uh so this will be our data structure that we need to work on so let's uh work on that first so now if I come to my fetch latest blog instead of just making a get request to the latest blog because now I have to send the page uh key to the latest blog in order to get the uh data of the second page or the third page now I have to change the cat request to uh post request and in the props I have to accept one prop or the pro uh parameter and that will be page and by default this page will be equals to one and if we don't provide the Page by default the page will be one and we will send one to the back end on this latest blog rout to get the first page of this latest blog section and I will send uh the page as a body so page just simply means page equals to page and this page is just equals to this parameter so uh we need to do these much of changes so you can see now that now I'm making a post request to latest blog and in the body I'm sending this page which is by default equals to one and instead of setting the block data over here right now what I will do I will just console.log the data that we get from the backend uh because we need to uh convert this array that we get from the backend into the object that I just showed you over here right so uh you can't make post request to this data blog latest blog just like this because if I come to my server let me close this if I go to my server.js you will see that I have this in a get get method so I have to change that into post so that I will receive a post method and over here I will destructure it to receive the page from the request. body so that I can fetch or retrieve the page from the request now what else we need to change here what we do want to do is after the select we need to run one more query which is doip and this uh do skip method is a method and it lets you escape the document so if you pass over here like five and since we have Max limit five so what it will do it will uh pass the five documents that will it will get and then it will continue from the sixth uh document so if I have 10 documents in my database then it will skip the first five and then it will start from the sixth and since I have Max limit it will go from 6 to 10 in order to give me those documents so I can't just type a static number over here I will uh calculate the uh esip documents according to this page that we get from the front end so what I will do here I will say that page minus one so basically what I'm saying is whatever the pages subtract the one uh subtract one from it and just multiply it with the max limit we have so basically from the front end by default we will send page equal 1 and if I evaluate that uh value over here so the 1 - 1 is equal to 0 and 0 * Max limit which is 5 is equals to 0 which means at first when we make a request this skip value will be zero so we won't skip any document but then if I click on load more button from the front end to make another request with page two then in that case this will be 2 - 1 which is 1 and 1 * Max limit which is 5 so 1 * 5 is equal to 5 which means it will skip the first five documents so it will start from the sixth because we already have one to five in our front end so I only need these six and seventh and eth and so on documents so that's why over here you have to say page minus one so I hope you understood this part so if I just save this and over here if I just console lock the data and open my console to see whether it is working or not okay it is giving me errors saying pages is not defined so just go to the use effect and in the fet latest blog you have to provide the page value so just say page equal 1 like this or actually remove the brackets and actually just remove everything and uh uh come over here remove this as well so if you remove those curly brackets this won't create any issue and if I just refresh you will see that in the console I got a Blog uh which has this uh five uh objects which is the block so if I just open and show you the first blog over here you will see that uh this blog ID is cooking with a top notes kitchen so you can see that this is the blog over here and if I just change the by default value of page one to page two and now if I make the request you will see that now if I check the blog that I got you will see that the first element of this array is 10 easy step of mastering and uh the first element of this is cooking with a top notch kitchen so you can see the block data is changed because these are the top first five documents and these are the documents from 6 to 10th in my database so that means our skipping of the document is working now we just have to render this over here and we have to first format our data in that data structure where we will have the Page information the result and the total dog so let's do that first and then we will set it equals to the block state so that we can render it again and how can I do that so first of all remove the console log over here I will make a variable and I will call it formated data and uh this formated data is will contain the format of the data structure that we need and over here I will call a function uh that will take the data that we just received and convert back and return us a new data structure which will have the result and the page and the total dock information so uh before doing that let me just un comment it because I don't have that function over here so first of all let's create that so just open your folder View and go to your filter pagination data.js you can find this inside the common folder so open that and we need to code that function over here which will take the data as a parameter and it will just uh restructure it and return back to the uh as a value so over here make a functional component uh and let's call it filter pation data and make it like this and also export this like this because since this is not any a jsx component I'm not exporting this as a default component so you can just add export H start and this will work now this will take uh some of the props and it will take a little bit now this function will take a little bit props in order to function and what are these props so the first prop it will take is create new array and by default that will be false so create new array basically means if we already have an array which means this will be false if we are requesting for page two page three page 4 because in that case we already have the data structure stored in the set and uh State and I just have to uh add the values right but if I don't have an any if I don't have a array or the data uh for the page one then I have to uh restructure the data for that we will use this prop and after this and by default just set it equals to false because for one time we have to provide it as a true and then it will uh go to the false by default yeah so after that uh we need a array parameter and this array will basically will tell you that uh this is the array that we already have in our database so actually you can say it you uh you can say it yeah just say it array or you can call it whatever you want and the data is what you want to attach to the array so basically this array is the previous data this data is the new array that you got from the front end uh from the back end and this create new array just tells you whether or not you have to create a new data structure you will get a better understanding when we will code it and execute it uh so don't worry just follow me so the other thing that I want is page because I have to add a page key in my data so this page will just contain the information of current page and then I uh need one more route which is Count uh roote one more parameter which is count roote and this count rout what it will do I will specify a count rout whenever I will call this pagination function so that this pagination function make can make request to that route in the server and get the total document length so uh suppose we have uh latest we are requesting for latest Blog then this filter pation will request to latest blog SL uh latest blog count root where it will get all of the documents and it will just count them and it will just give us the number so that we can store that number inside the total docs key that I showed you earlier and we don't have any count root set up in our server so don't worry we will set up that also and after the count root actually let me correct that correctly count root the other prop uh parameter that I need is data to send because sometime you need some data to send to this count route in order to count it because in the categories filter you need to send the tags in order to get the total documents of that specific uh tag right so in that case we need to provide the tag to this filteration so that it can retrieve the correct information of total documents from the server so for now we just need these prop uh parameters in order to work with this function so inside it I will just make a variable and I will call it object and uh I'm just calling it object because remember the main it will be an object and it will contain Keys which will be results and the page and the uh total do so for that I'm creating object and I will check for a condition over here and I will say if array is not equals to null which means we have something in our previous data okay by default if I'm making request for page one then the array will be null so this won't Line This conditions uh and if we Line This condition that just means we already have page one and now we have to go to the page two or page three or or whatever page you want and I will just add two and sign over here to say this condition should be true and the condition that I will write now that should also be true so I will say here create new array should be false so I want to check for the false so I have to add exclamation over here so it will convert the false into true so what this condition is basically saying is if I don't want to make a new array and if I already have a previous uh blogs data then I will go inside this condition and I will just set the object equals to this object and this object will first destructure the array and basically this array is uh the object and actually instead of calling this object array let me call it State because this is your previous state we that you have so let me call this state so I'm just setting the object equals to the previous state because we already have that state and what I will do is I will say that uh I will change the keys of that state which will uh what I want to change is the results and in the results I will say first of all destructure the state DOT results so which means whatever results we already have had destructure that and then at the end destructure the new data which is this data property and after this I will just add a page and this page will be basically page the page key so I can add page like this and this will be the page key and you don't need to change the total talks key over here because if we already have the state in our uh front end or in the uh react State then we already have the information of total documents so you don't need to change that every time and actually this will be a little confusing at start but uh just code with me and I'm sure you will get it when you I will will show you how it is working so in the else blog where I'm saying that we are checking for so over here I'm checking for state is not equals to null which means I already have this type of data structure in my state but what if I don't have anything in in my data structure because you see by default the state is null so it won't lie in this condition because this state is saying not null and this will get false then so if the state is by default null in that case I have to create some I have to create this data structure so for that what I will do I will make exos request so I will import the exos and I will make a post request to import. meta do n. weor server domain and the rout that it will make request to it will be the count rote because I need to make request to this count route in order to get the information of total document ments we have in our database and obviously this exos will take some time in order to process so therefore I have to convert this function as a asynchronous function so I can await over here on this line and in this count root I if I'm making a post request obviously I want to send some data so whatever data I want to send I will say data to send over here and I will just dtop it like this or actually you can just call uh just pass data to send because it will be an object and over here we will not give any headers for now we will CH set the headers later when we need it so once this exos will get resolved we will run a 10 and it will get the data from the back end so I will say data and from the data I just I'm interested in total docs key that we will work in the server so don't worry so when we get the total doog what I will do I will set the obj uh variable equals to an object and this object will contain key results and it will uh have the data that we get from the front end and actually just type data over here because data is an array that we will provide and then the page will be by default one and the total talks will be equals to this total docs and now if we got any error just uh add a cat block for that so I will just console.log the error like this and if I save and actually I just have to return the object like this so uh make sure you await over here in the exos request otherwise you won't be able to return this object otherwise once this exos will uh finished you you have already uh returned the object so make sure you add the a over here so our filter page ination data is pretty much done now we just have to call this in order to convert the received array into an object with results key and the page keys and the total docs key so what I will do is I will go back to the homepage and over right here I will uncomment this and I will set it equals to format uh uh not format what it was it was a filter pagination data so filter pagination data and make sure you import that as well so just call this function and pass an object inside it and now we will provide all these all these parameters values over here so for the state I have to say what state I want is this block so I will say blocks like this and then in the data I have to provide what data I want to send so you will see in there I have the state so if the state is null it will go over here and retrieve the information of to uh total documents in the uh database and this data is what the data we received from the back end over here so just say data actually not data data dot blogs because data is an object and do blogs is the key uh data is an object contains the blocks key which is an error so say data. blocks and in the page you can say one which uh actually not one whatever the page value we have over here say that and then I have to say count root and I have to pass this count route but I don't have any count route uh we have to give a a rout over here where this filter pagination can make a post request to get the total documents but I don't have that and right now so I won't be able to make any request so the route that we will create in the server later is test route which is all latest blocks count and you can type this and it won't create any issue and if I just uncomment this set blog now and instead of setting the data. blog I will set the formated format data and actually let me call it formatted data like this and if I just say it well if I come to my website you will see a lot of error because you can see that 404 not found this all latest block count does not exist that's why it is giving me a sort of error but pretty much we are done with our reactjs part now we have to go to our no nodejs uh in order to work on the server to make the all latest uh blogs count route in order to get the uh count of all the documents so let's go to the server and just below the latest blogs I will make a server and I will make a get request and get method and the root will be all latest blocks count and I am making a get method request and actually not make a get because if you come over here you will see that exus is making post request to this count whether or not you want to send anything you still have to provide the post and make sure you send you set it this data equal uh data to send uh to an empty object by default otherwise it will create an hassle because it will be undefined if you don't provide it from the function wherever you call it so uh okay so over here let's just change it to post and it will run a call back with request and response as a parameter so once I have uh a request over here what I want to do is I have to say blog in order to access the blog collection and to count the documents you have to just say count docum and the count documents method is a Mongo's method and it lets you run a account query in the mongod DV in order to count the total number of documents you just have to pass on what basis you want to count or filter the data and the bases that I want to filter the data will be the same that I used to to retrieve the data of the DAT blog as you can see in the find I have passed this object saying give me all of the blog whose draft is false so I will use the same same condition over here saying give count all of the blocks which has the draft equal false so that I will know that yeah these much of the blocks I have in my database which is which are published and then when is got once I got the count document I will just say count uh to access the count in the den block and once I got the count which is the number I can just return a response with a status of 200 and the Json that I will return will be total docks and remember I am saying total docks because I am retrieving the total docks from the response and therefore make sure this total dogs and this total SP dogs are correctly spelled and this will be equals to the count that is this count that we will get from the count documents method and since it's a then if we get any error make sure you run cat that using the sketch blog and just conso log the error do message if we get any and what I will do I will return a response with a status of 500 and I will say Json and the Json will contain an error key with error. message just like this so if I save now I have this all latest blocks count rout which I am passing over here which means whenever you will run this filter pation this will have the all letters block count as a count route and it will run uh this x which will make a post request to that count uh count root and from there it will get the total doog and it will create a new object with the results uh and it will equals to the data that we have got from the all from this route the latest blogs and then it will set the page equals to one because we are creating a new object and then it will set the total doc equals to the data that we received from this all latest blogs count rule so I hope now this is I'm making sense to you so if I just save this now and before setting this set blog if I just console.log uh the formatted data over here and actually let me make another console log and actually let me cut this and paste it over uh let me just console log at the beginning and let me say data do blocks so now you will see that this is the console uh that that this console will log our previous state data structure and this console will log our current data structure so if I come over here and refresh now you will see that here I got uh this 1 2 3 4 5 five elements five items in an array and the second console that I got is a promise which is spending and this is because if you see in the field ofation it's an asynchronous function which means it will take some time in order to get resolved but before it is getting resolved I'm just setting the formated data uh as a Blog and I'm not actually uh waiting for this to get resolved so I have to wait over here in order to get the resolve value from this function so for that just add a weight over here and to make uh use the a weit you have to convert this call back as a asynchronous function so just add async at the start of this uh this bracket so this will convert it into asynchronous function and now if I just refresh you will see this is the data structure that we had uh before that we were storing in our block State and now this is the data structure that we have stored in our data structure and now you can see we are currently on page one and the results we have is five which means our Max limit is five and we have a total document which is saying 10 which means we have 10 documents in our database from them I only have five right now so I can make request to page two in order to get the next five so till here I I guess you understood everything if you have any doubt feel free to ask me in the comments I will be glad to uh tell you and clear your doubts but uh I think you have you got a clear understanding of what we did basically so now still if you come over here you will see that I'm not getting the blogs it is just saying me no blogs published and why is that because if I come to my code and come from over here you will see that I'm checking for blogs. length but now since blog is not an object it's a uh not an array it's an object now I can't check its length because it's an object not an array so I have to check blocks. results results because you will see that the data that we want to render is the results um so I have to check dot result length and I can't map through blogs because blogs is now a state which is an object so I have to say blogs. results to get the array from the blog State and then I want to map through it so if I save it now and refresh and let me clear the console now you will see that this is my current state data structure and now I got my blocks now since I have the data structure set up I can work on the load more button in order to uh whenever we will click on that uh we can just just change the page number to by one and then uh we can load the next five or six documents so now let's work on that so now let's work on the uh load more button so for that just come to this condition where we are mapping in our results in order to render the blog post card so what I will do is once I am done with this query which is this uh uh curly brackets once I'm done rendering the cards I will press enter and I will render one component and that component will be load more data PGN and this is obviously we don't have this component right now but basically this component will render the button where we you can click in order to uh load more blocks so what you can do is just open your folder View and uh in the components you will find load more. component. jsx so open that and let's make a function component so Mega con and and let's name it load mod data ptn and let's make a functional component which will return something that we will write just in a moment so make sure you export this as well as a default function like this and if I save and come over here let me rewrite it again so that the vs code imported like this and now you will see now I not getting the red line okay so we are done now what this button will take this will take two props and uh let's define it over here first so it will take first of all the state which will be the value of the state so it will take the whole state which for now it is the block state so it will have uh the current value of so it can track the current page number and the current total document count and the current what you can say uh total number of blocks loaded so for that we have to provide the state and the second thing that we want to provide here is the data actually fetch data function like this and this fetch data function is basically we will uh give this a function uh so that whenever we need to fetch the data and for uh for example U we want to load more uh latest blocks right so we will pass fetch data function we will pass this fetch latest block function so that this load more knows whenever you will get clicked what function you have to call it has to uh call this fetch latest block and I am creating this as a prop because I want this load more data button in other places as well like the search page the profile page and the similar pag similar blocks so I need this button uh like everywhere so I need this F data function to be Universal so that I can provide uh them while creating it otherwise uh I have to create create individual load mode data button for all of those function right so let me come over here and let me provide the value of those two props so the state will be equals to the blocks because I'm uh currently working on the blocks pation and the second parameter is fetch data function and that function will be fetch latest block so this will be the function so save that and come over here because we have to code a lot of things over here so before returning what I will do I will check for some condition so I will add F and what I will check here I will check state is not equals to null and state DOT total docs is greater than state DOT results do length so basically what I'm uh saying here is the state is not equals to null which means we have have something in our state which means the page one is already loaded and then I'm checking state. tootal docs which means the total number of documents is greater than the results that we already have which means if I have total documents in my database 10 and I already have uh five loaded then this condition will be 10 greater than five which will be true and in that case I want to run this because if we have uh a page page one loaded and if we have a greater total documents than the result length then we will R uh render the button otherwise we won't render the load Moree button in order to load more data because we don't have any sort of data to render right so for that I have added this condition and if we have some data to uh load in our uh front end what I will do what I will return is I will return a button and this button will basically just say load more as a text and I will add some classes to here so I will add class name to Let's style uh to style it so I will say text should be dark dark gray padding will be to from Al Direction and uh in X Direction I will say three units and whenever we will over to this button I want the PG to go to the gray uh with 30% opacity so I add sl30 and then I want the round roundness and then I want the roundness to be medium so I will just say rounded MD and give it a flex and uh uh just set its item Center to have the Align item Center property and give it a prop uh gap of two units and just save this so uh well technically this is the load more button now what I want over here is uh I want to make a on click event to this so whenever you will click on the load more button what this on click function to do so basically this on click function will run a call back and in that call back I will run this function which is this fetch data function and fetch data function will be different for different load more buttons for this currently uh currently for this load Moree button the fetch data function is fetch latest block because we are making page initi for the latest Pro so here I have to call this fetch data function which will be representing uh you are calling the uh which will be uh similar to you are calling the fetch latest blog so you have to provide the props that the fetch latest blog accept which is this page so over here you have to give pages to this so what I will do is uh I will say page equal state DOT page + one so uh actually let me actually let me remove this because I don't have to give it like this or actually just convert it back to an object so that uh instead of giving where it is uh over here instead of saying state. Page Plus One it doesn't make any sense so now if I just provide an object with a page key now this will make sense uh that yes uh we are sending a page to this function so over here since you I have converted this uh and an object uh I have to pass page equal 1 over here when where I'm calling this uh use effect otherwise it won't work so over here like this and just save this so basically what I did is uh whenever I am clicking on this load more button I am calling a call back which is just calling this fetch data function and with in this F data function I am passing this object with this page key because this load uh which this fetch latest blog takes an object with the page key and uh the value of the page key that I am sending is the state. page which is the currently current page and I'm just adding one to it so if I just save it and check whether or not it is working and if I just refresh the website uh and you should see that it is working so you can see and now I am getting this load more button at the end because I have five more blocks in my database so if I click over here you will see after that I got five more blocks you can see 1 2 3 4 5 so I got new five blocks and now I have total 10 blocks loaded in my front end so if I go at the end you won't see the load more button because now I don't have any other document left that is inside the database but is not uh rendered in the front end so with this the load more functionality is done I hope you got the pagination functionality it is little bit complicated if you didn't got it uh I recommend you to watch it again if you have any doubt feel free to ask me in the comments I will be glad to answer those so after this one more thing left is if I click on any of these categories let's say in cooking well you will see I got an error and uh this is because now I am checking in over here in the homepage while creating the blog cards I'm checking for Blog start result but for the categories if I come over here uh the fet blog it is still uh following the old data structure which is simply an array so the state is simply an array but not an object so we have to convert this fetch blocks category same way that we converted this latest block so that we can get this formatted data over here while setting the block so let's do that so over here what I will do is after sending this tag I will send a page also and for that I have to create page over here as well so I will say page equal by default it will be one and make sure you can create it as a object so that whenever you will pass while calling this function you will know that yes you are passing a value of page so uh what I want to do is I want to send a page and this will be a post request to this search blogs and over here when it will get the data what I want to do is just copy everything and paste like the uh like here and since I want to wait for this filter page generation data I will add as sync at the beginning to make this function asynchronous let me correct the spell so yeah so make this asynchronous function and let's change the value of these for filteration data so the state value will be blogs because we are uh saving the categories blog in the blog state so uh it will be same and the data will be data. blog because from the backend I am receiving data. blogs and the page will be this but the count route this time will not be all latest block count because I'm not making request to all latest block account um uh all latest blog but I am making a request to search blog so I it has to be a search blog count right so I have to say search blogs count and we want to send the tag to this rout in order to get the accurate number of documents to accurate total number of documents so if I come to my filter presentation you will see that in the exos you have you are making request to count rout but I am also sending this dataor toore send as a body and we have this as a by default as a uh parameter here by default set equals to an empty object so you can actually use that parameter you can just say data to send and you can provide the object over here that you want to send to this count root data and obviously in this I want to send this filteration uh thing which is this tag otherwise I won't be able to filter the blocks according to that tag and I won't be able to get the accurate number of the total documents so make sure you add the data to send with an object and this object will contain the tag key which the which is the Past St so if I just save it and come back you will still get some errors if I just uh refresh you will not see any errors because I'm not calling the fetch by category right now but if I click on any of the category you will see a lot of Errors because I am first of all not giving it a page so let me give page over here saying by default the page will be one and if I come over here and refresh again click on any filter now you will see error saying search blocks count is not found because we don't have that route in my server so let's go to the server and let's code the search block count route so over here after this search blocks press enter and make a server dot post method request and we will make a post method request to search blogs count root and it will run a call back with a request and response now inside it we have to first get the tag from the request. body so I will destructure it like this I will make a let and I will say tag equal request. body to D structure it from the body and then I will do the same that I did over here I will Define a f uh query over here and this will be equals to tags which will be equal to tag and the draft will be false because I need to check for the uh what do you call I want to check for the publish block right and then I will run block dot count documents method in order to count the document from the blocks collection and the query that I want to check is I will pass the find query in order to count the documents and once I am done counting the document I will catch the count uh number in the then block and I will just return a response with a status of 200 to the front end with a Json which will have total talks as a key and it will contain count as a value and if we get any error I will catch that using. catch blog and I will just console.log the error. message and also I will response actually return a response with a status of 500 and the Json that I will send will will be will be an error key with error. message so if you save it this will work but I want to change something over here as well because again I am working on the page Nation site right so over here what I have to do is since now if I come to my front end you will see since now I am sending this page all Al with the tag I have to uh get the page over here as well because again I will call fetch blog by category function whenever I want to load the next count of the blocks right so for that I have to destructure the page over here and I don't need to do anything uh instead just uh come after select just say do Skip and we will run uh we will give the same mathematical equation over here that we gave for the latest blog I will say page minus one uh multiply with the max limit and this will just say it to uh this will just tell how many document it has to skip according to the page number and for the uh search blog and to just test the load Moree document load more functionality for this search blog right now what I will do is I will change the max limit to two because I don't have five or six uh blocks with the same category so I won't be able to show you the load more functionality if I just set the max Fang uh limit to five so if I save this and come back over here refresh you will see that I'm not getting ER any error but if I click on any of the category let's say tag you will see I got no error and I'm uh successfully getting the blogs uh related to this uh tag category but you will see I'm not getting any load more button because I don't have more than two blocks for this Tech category but if I go to cooking which has three blogs uh so you will see I only got two blogs but now I got load more button uh to load the other blogs as well and since I have only one it will render only one right so if I click over here you will see instead of rendering one it rendered these blogs and you will see that these blogs tag are also different this is travel this is test this is test these blogs tags are not cooking but still I'm getting those in cooking uh category why is that because if you come to the home page. GSX you will see in the load more button you have given fetch latest blog as a uh fetch function so whenever you will click over here it doesn't matter you are uh working you are on the categories page or you are on the homepage or the Home Route it will call the fetch latest blog in order to fetch the blocks and we don't want that right so to uh instead of uh just calling fetch laters blogs every time you click on load more button here I have to check for a condition saying if the pce state is equals to home then only I want to run this F latest blog otherwise I will run fetch blogs by category so for that uh just add here a condition like this and let me just remove this I will say page State uh page State like this is equal equals to home so if the page state is equals to home then I will run fetch latest blocks otherwise I will run fetch blocks by category and let me enable my word r and if I save this and come back over here and refresh now uh let's see it is working or not so if I click on cooking I will get two blocks because the max limit is two but I have three that's why I'm getting load more so if I click over here now you'll see that now I got the last block that was the third cooking uh tag block so now you can see the load more functionality or you can say the page generation is working for the categories also and if I uncheck it and go to the Home Route which is the latest blocks you will see I am getting the load more because I also have uh five more blog in my database so basically with this we are done with our homepage we have created our latest blogs over here with the load more functionality for uh the latest blog and for the filters we have done the filteration and the trending blogs section and this page is also resp sponsor so if you have any doubt feel free to ask them in the comments I will be glad to answer them and with this we are actually done with our homepage so now let's work on our search page since our homepage is done now let's work on the search page and before working on the search page now let's work on this search input so whenever the user click on the search input and type anything let's say cooking because I have a blogs to cooking and let's say user presses enter now I want the uh that user should redirect it to the search page where we can uh sort or show the search results just like we have in the project like if I type your cooking and press enter you will see uh I am redirected to/ search SL cooking where I'm getting result uh of this query which is cooking and since I don't have any blog it is saying no blog publish and on the right side I have this us us related to this where I'm searching for users so let's create this page in my project so for that let's open the nvp bar. component. jsx first so in the folder view inside the component folder just find the nvar do component and open that and over here find the search input box so this is the search input box I believe because the placeholder search so over here just add one event and the event that I want to add is on key down and uh whenever this get a key down I will run handle search function and obviously I don't have it so I will copy it and I will make a function over here and I will add e as a parameter to access the event so that I can access the input so I will make a variable I will call it query which will be the search query and I will set it equals to e. Target to get the target of the event which is the input and I will say dot value in order to get the value of that input so once I got the value of that input what I will do is I will say I will check for a condition I will say if e do key code is equal equal to 13 and remember e is the event dot key code is uh the key that you that provides you the uh key code of the key that is pressed right now and the 13 is referred to the enter key so I'm just checking for that the user press Enter key or not so if the user has pressed the enter key and I will add to end sign to check another condition and I will say if the query do length which means if we have something in a query which means we have something in our search input field then what I will do is I will navigate the user to actually let me correct it navigate the user with the small and it is giving me error because I don't have used navigate setup over here and you know how to do it so don't worry we will just to that in a moment but over here what I want to do is I want to navigate the user to slash search slash and in the dollar and the curly brackets inside it you can say query to uh redirect the user to/ search slash the query that user has uh typed and make sure you use template L otherwise in the single codes you won't be able to access a variable like this and let's uh make this navigate so that I will not see that red line so I will say let navigate equal use navigate over here and uh once you use the use navigate make sure you import use navigate from reactr otherwise you won't be able to redirect the user from one route to another and just save it and if I come over here so now if I click over here and let's search for cooking and press enter okay it's not doing anything let's see whether or not I'm getting any error if I press enter well it is not working why is is not working because I am checking for this and the L actually let me just console. log the event so that I'll be sure that yeah this function is being called so if I press enter right now again Let me refresh this let's search for cooking again and press enter now you can see it is working and I am redirected to slash search SL cooking which means I am on the search page now because I'm on the search but uh I'm not seeing anything because I don't have the search root set up in my app.jsx so let's do that first so before doing that let me just remove this console and now you can close the ne because we are done with the ne so open the app.jsx and over here in The Roots just after the sign up route I will make another root tag and here I will check for a path and the path will be slash search and you don't have to add slash because this slash we have as a parent so just add slash uh search slash column and you can call it whatever you want to type here so I'm just typing query to identify whatever is written after the search so that I can uh get it out when I will work on the search Feld and basically what I did over here is you can uh file setting your path you can uh type any static thing let's say you are typing search slash uh cooking or you can type search SL tag these are the static path or static route so that if you type this you will render the search page only if you go to the search SL toen or you will go to SL search / tag but what I did over here is I have created a dynamic route which means I want to render let me first complete it so I will add a element over here and I will render uh in H1 saying search page so what I just did over here is uh this path just basically means that on the search slash whatever is written after the search and then the slash doesn't me it is uh doesn't mean it is this or it is cooking or it is Tech or it is uh Finance whatever it can be something which makes sense or it can be something which doesn't make sense uh it's just a dynamic sort of ID so if we have anything after this search slash then we want to render this it just simply means that so I hope you got that so if I come back to the search SL uh cooking page I should see the nvar and I should see the search box uh search page text because now I have this route in my uh app.jsx and I'm am therefore I'm getting this Nar component and this search page H1 component as well so instead of rendering this H1 what I will render is I will render a search page component and obviously I don't have that so let me make that so just go to a folder View and inside the pages folder go to the search. pages and over here let's make a functional search page component like this and this for now will again return an H1 saying search page from jsx component uh actually functional component you can type anything functional component I will export this as a default function like this and if I save and make sure you import that so uh let me type that again and vs code will import it for me so if I just save that and come over here now you will see that I got a text with search page from functional component which means this search page is being rendered so now let's close the app.jsx and now let's work on the search page so now instead of returning this H1 I will return an actual search page so before uh working on this Return part what I want to do is first I want to retrieve this uh cooking or whatever is written after the search and remember if I again come to my app.jsx you will see that after the search slash I have this colon and then query which means whatever is WR after the search and slash I am referring that as query so I can use this query in order to extract it from the uh address URL so how can I do that for that I have to say let and I have to destructure it from an object and don't uh and that object is use params and this use params is a function or you can say hook use param is a hook that is provided by react router Dome and basically this use params hook return you the parameters of the address bar and because this query is a parameter of the address that's why it will be inside an object and from that object I want to destructure it so that I can access it directly so that's why I'm destructuring it over here and saying it query so that I can access the query so over here now if I render the hedge1 with uh let's say query over here and let me say search results search let me correct that s e a r c h search results for Dash and this query and if I save and come back to the page you will see this time I got search results for cooking and because I have cooking after this slash but if I say type any random thing and if I present now I will see search result for this string and if I say let's say tag I will get a search result of tag because now this query and the is dynamic because this search rout is dynamic so yeah anyway so once we got the value of the query what I want to do is I want to now render the search results so for that first of all let's make the U NV navigation over here which will be the in page navigation just like this which will have the search results for and then the string that you are searching for and in the mobile screens uh you will see another option which will be this account smash so let's create this first and then we will uh make request to the server in order to get the search results and then uh we will render it over here so just remove this H1 and make a section over here just like this and what I will do I will add a class name I will say h cover again this h- cover is a custom index uh class inside the index. CSS so you don't have to worry about it give a flex boox property to it and uh a justifier to be Center so it will align all the item in Center horizontally and at a gap of 10 units and inside the section we will make this part and this user related search bar so inside this section what I will do is I will add a div and and this div will be the search div so the search results block part so I will say uh it's withd to be full so just give a class name of it tful and inside over here I will create the in page navigation just like this and again if you don't remember this in page navigation needs roots and Default hidden in order to work so here I have to provide those prop values so I have to say roots and in The Roots I will provide an an array and the first value of this array will be a template string and just use the template string so that I can add this query inside the string so the text will be search results for and over here like this and inside the C bracket I can say query so this will be the first element of this uh Roots array and the second element or item of this Roots array will be accounts m matched and this will uh show we will show only in the mobile screens uh to show the user profiles uh according to this search results so uh to only show this accounts mat on the mobile screen you have to give Default hidden prop as well and there you have to make an array and you have to give this account M as a item of this array so let me enable my WRA and with this I should see two buttons or actually one button just saying search result for tag because I'm on the larger screens but if I go to mobile screens like this now I should see account match and if I click over here and here this will work but but this is giving me error but don't worry about worry about it this will get fixed when we will add childrens to this in page navigation so let's come over here and inside of it again make an empty component because we want to render the uh we want the first children to contain the blocks and the load Moree button so over here for the blocks I will make uh an U I will write curly bracket because I have to write CHS condition and then uh I will do the same thing that I did for the homepage so let me go to the homepage actually and uh let me just copy this whole portion actually uh yeah and let me copy it and paste it over here like this now you will see a lot of red lines because obviously we have to import and change uh some of the things so uh first I don't have this blogs state so I have to create that state so just create that block State say blocks and the set function will be set block or you can call set blocks whatever you want let's call it set blocks and just set it equals to use State and by default that will be null now this is giving me error on loader because I haven't imported it so import the loader from loader. component now it is giving me error for the animation wrapper so make sure to import the animation wrapper as well now it is giving me error on the Block postcard so again import block postcard and now it is giving me error on this no data message so import no data message and the last thing that I want to import is this load more data button so let me add import load more data button and what else yeah it is giving me error on this fetch State fetch data function so actually remove this fetch data function right now because I don't have any data function right now so let me just comment this load more button and we will uncomment it at work on this later when we will have a function to fetch the data from but right now I don't have any data so basically if I come to my website and uh reload you will just see a loader over here because I don't have any blog or I am not changing the state of the block so it is null by default and that's why I'm just getting this loader over here so now let's work on a function which we can use uh to make a call to the back end in order to get the search result according to the string or the query and then we will update the block State according to that so let's do that so after this press enter and let's make a function let's call it search blogs in order to search the blog and this will be an object and it will take page and that page by default will be one and it will take create underscore newcore array which will be by default false and remember this create new array if I go to my common folder and this filteration you will see we have this create new array parameter over here it is the same parameter that I I will use over here to indicate the value of this in order to format it because a lot of time I will need uh this to create a new array completely irrespective of this blog being not null so for that I'm doing it and let's make this function like this so over here what I want is I want to make request to search blogs rot so if I come to my search blogs rout over here you will see that right now this blog is only accepting tag and the p page but I have to send this query instead of tag so let's just code the query part over here and then we will work on the server and modify some of the things so that it can query uh the uh it can run the find query according to the query that we get from the front end instead of Tex so over here I will say ex. poost in order to make a post request and the root is uh import. meta do n. Vore server domain for the Local Host 3000 port and I will just add the/ search blogs at the end to make request to this part and over here what I want to send as a body to this route is I want to send the query and I want to send the page number because I want to add page ination to this as well so once this exos get resolved I will catch the response using do 10 and now I will do the same thing that I did for the homepage so let me open the home H page and let me actually copy everything from the fet trend latest blog so let me just copy it and paste it over here so I will asynchronously I will run a call back which will have access to the data and I will run this filter pation data and actually it is giving me error because I I haven't imported it so let me import that over here fetch what it is it is uh filter pation data like this so it won't give me errors and it is giving me error set block because I have this set block state so actually let me remove this set block so it will not give me that error so now I have to Define here what sort of parameters I have to send so over here the state will be blocks because I have a block State the data will be data. blogs because from the back end you will see that I'm getting the blogs key and the page will be again this page and the count root F in this case the count root will not be this but instead it will be search- blogs. count and we have this root over here you can see we have search- blog D count over here search blog count over here and we need to send this query as well to this uh search block count because remember for the categories filter we were doing this tag you uh filtering the data using the tag and for the search we have to uh filter the data according to that question query so that I can uh count the exact number of document in the database so for that I have data to send param key and this key value will be an object with a query key and a value so just save that and other than that I want to send this create new array as well to tell whether or not you have to create a new array so by default it is false but whenever you call search blog if you uh set it create new array to true then it will be true and then this data will being uh will create again so just save this and well actually it is working so just copy the search blocks and what you can do is you can call a use effect over here use effect to run this only when we are done with the uh rendering and what I want is I want to render this whenever uh I want to run this use effect Whenever there is a query change because if you are on the search page and if you search anything else the query will change so in that case I want to run this use effect again and in that case what I will do is I will just run this search blogs again and I will call This And when I'm calling it I can just simply call it actually it doesn't matter so just save this and if I come to my website and uh I'm not getting anything so if I open my console you will see I'm getting a lot of error and actually if I clear clear everything and refresh it again to see what is going wrong over here it is saying cannot read properties reading and off page so actually you have to provide page over here so uh let me say it to have a page of one and let me save this so I think it will not give error yeah now it is not giving me error it is just saying no blogs published so if I search for cooking and press enter you will see that there is no issue no error but yeah but I'm I'm not getting getting any results so how can I get results for that I have to change my uh server over here this server block count route and the search blocks route in order to accept the query and filter the data according to that query so first of all destructure the query over here so that I can access it here so I will say query and add a comma so I will now have access to query now remember I have created this find query and was setting is equals to this and the reason I have created this as a variable and not put this directly in the find is that now I can uh check for a condition I can check if there is a tag because if we provide a tag we won't provide a query and if we provide a query we won't provide a tag so if there is a tag then I will set this find query equals to this condition otherwise this will be empty like this so uh we will find Define the find query over here and if we have a tag then we will run the uh this and we will set the find query equals to this but if we don't have the tag which means I will say else if we have query instead then I will set the query find query equals to whatever I want over here and then the query will get changed and this will work the same because now the only thing that I needed was the query so let's see what the query is so here make an object and just say draft to be false because I don't want any draft and then I will say title and here I will check what on What basis I will search is in the title let's say I have a title of how to code uh njs or let's say how to debug njs and I want to show this blog when we search for dbug or let's say JS or let's say how to debug if we search for JS or how to debug or debug so basically what I'm saying is whatever the query user is searching I want to check whether or not that query is included in the title of any of the blocks if uh we have a title or if we have any blog with the title uh which has uh that query inside it then we will give the blog in the search result so to check that in the you have to say title the key that you want to check and then you have to use the Rex class over here to create a new Rex and I will say new in order to use the Rex class so reg expression like this and in order to use reges expression uh you need to use this regx expression class and now over here you can pass this query and you can then in the second parameter you can say I so this query basically means that the query that you are want to check and this I just means that it's in case sensitive which means Capital uh JS and JS are both equal right so uh by doing this uh the search will work so if I come over here and refresh and since I'm on the cooking you will see now I'm uh getting these two blogs related to the cooking and if I search for tag and press enter now you will see I have searched for tag but I still got the cooking related blog and then I got this tag and now if I come uh and now if I again search for cooking you will see now I got again the cooking block but these are not getting removed when I'm searching for new query and why is that because I am changing the query but I'm not changing any state in order to rerender uh these thing and I'm not clearing my old data from my state because uh I have I'm just creating the uh I'm just adding the data that is coming from the back end uh to the current data but I'm not creating it and that's why I have this create new array as a prop to the search blog is to that whenever I call this use effect I can just call this you uh create new array in order to create a new array to just remove everything from the state so how can I do that is I can just come over here and after this I can say create new array to be true so whenever there is a change in query I will create a new array which will just change the whole state and before doing this I also will call reset reset State function and I don't have that but I will create it over here I will say con reset State and this reset State function what it will do is it will reset all the states we have and currently I have this blocks state so what I will do is I will reset that value I will say set blog equals to null which is is the its default value so I will first of all whenever is there is a change in query I will reset the state which means I will remove everything from the Block State and then I will run the search block State and I will say the create new array to be true in order to create a new data structure uh and do not use the previous data so now if I save and refresh over uh refresh and let's see it is working or not so for the cooking I got two U blocks and if I come over here and say tag and press enter now you can see now the data got removed because that was old data and now the new data is being rendered for only the tag blogs so if I remove this and search for finance and press enter you will see I got the blog related to finance and the reason I'm getting this is not the tag but the reason I'm getting is because the word Finance is included in the title of these blocks and if you type anything you will just get this no blocks publish so which means our search blog is pretty much working but uh now we have to add a page ination to it so let me uncomment this now and since I have a fetch data function I can just pass that over here I can just pass search blogs like this and I can save it so whenever we will click on load mode button it will just call this search blog which will have a uh which will have this page one and create new array Falls as a default value so if I save it and come back and let me search for cooking because I have three blocks ready to do it but you will see that I'm not getting the load more button and the reason I'm not getting the load more button is because the count rule the search blocks count if I come over here this this is not uh running the query according to the query it is running the query according to this tag so I have to add the same thing that I have added here in order to accept the query like this so if we have any query in my request then I will change the find query equals to this and let me make that find query variable over here and D structure the query from the body and if I now save this I should see a load more button yeah now you can see I got a load more button because I have one more blog in my database so if I click over here you will see that now I got the other database uh the other blog that is was in my database and now I don't have the load more button which means the U searching is pretty much done now you can search for anything and you will get the data and uh the pagination will also work so the other thing that we have to work on is on the right side we need to search for the users so let's do that and let's create the search user route where from the front end we will make request in order to get the search results of the users so just after the search blocks count you can make uh another server do Post method and this will be a root search- users so whenever you will make a post request to the search- users it will run a request a call back with a request and a response like this so what I will do here is first of all I will destructure the query from the body so I will say destructure the query from request. body and once I have the access of the query what I will do I will find the user in my user collection so to find the user in the users collection I have to say user for the users collection and to find the document I will say find and now here I have to pass the condition on what basis I want to find so what I want is I want to check for the username so the username if I come to my user users database uh uh schema you can see that in the user schema you will see that the username is inside this personal info object so to access that username you have to say personal _ info and then since it's inside that so you have to say dot username so then only you will get access to that username and what I want to say is again the same thing that I did for this uh search thing is I have to create a new reg expression class and I will say this the same exact thing so I just copy this and I will paste it over here so basically what I'm doing here is I am um searching for all the documents that has uh those written query inside their uh username after the find what you have to do is say do limit to limit the search result and I will just limit the search result to 50 and at most we will render a 50 users and I will not add page inition to here because if you are searching for a particular user you can type that username and you will get the user so I'm not adding the that pation so what you can do is after that you add a can add a select in order to select what keys you want to um you want in the response so I need personal info. full name then I need personal uncore info do username then I need personal _ info dot profile image and I will remove the ID from there so I only need these three Fields I need the full name username and the profile image of the user and once I get all of those I will run dot then in order to catch the uh users data and once I get the data I will return a response with a status of 200 and I will return a Chas on which will have users in it and if we get any error I will catch that using cach blog and I can just return a response with a status of 500 and the Json will be error Dot message just like this so if I save you won't see any changes because we have created the rout but we are not making request to this so actually let's check this route using request. so I will make post request to search users and what I want to search is I want to send query and the query I want to send is let's say KU because I have users in my database with Kun uh in the username so if I just make send request you will see I got users and in there I got one object which has a username Kunal and then I got a username konal 438 so I got got these two users which means this route is working so now let's make a request to this root from front end so over here before making request uh just after this block state make another state and this state we will use to keep track of the users so I will say users and set users and I will set it equals to use State and by default this will be null so just save that and what I will do is I will create now here another function and that function will be fetch users and I will set it equals to this function like this so so just make a fetch users function and this will not take anything because we don't want a pagination system in this thing to so I don't have to provide the page or the create new array anything like that so I can just work on uh by just simply making exos request to the backend so how can I do that for that just simply add exos and since I want to make a post requ I will say do post and the root that I want to send request is is actually import. meta do n. Vore server domain and the root that is uh it is search- blogs and the data that I want to send is again the query itself and once I got the data from backend I will destructure it like this to get the users from there because remember uh I'm restructuring the data from the response and the data as an object contains the users key so I'm destructuring that like this so that now you I can access the users directory and I will just set this users in this set user state so I will say set user State and in the function I will pass users and I will just save this and make sure you call this fetch users function in the use effect whenever the query changes and in the set reset reset State function make sure you re are resetting the set users otherwise the same thing will happen uh as we uh saw for the blocks the new users will uh come below the previous data and the data won't uh re recreate so after the done with this if I go back over here and search for let's say KU and presenter there is no blog related to this string but I have a user with this string so I should see user over here but I am not getting it because I'm still I am getting I'm am fetching the user and setting it in the state but I'm not rendering those and showing in the UI so now let's make the UI for that to render the user card now what I will do is actually let me collapse this because this is the first children of this in page navigation which is just showing the search result which is the blog result now let's work on this accounts match so what I will do is I will render here one component and that component will be user card rapper like this and we don't have this component so let me just copy it and uh let's create this component right over here so let's create this component like this and this component will return a jsx so I will make an empty uh component like this and over here I will check for some conditions so for that I have to add uh the curly brackets to write JavaScript inside the jsx in order to run the conditions check the conditions so what conditions I want to check is first of all I will check whether or not user state is null so I will say user equal equals to null so if user is equals to null in that case I will render the loader uh UI which means the loading animation because I don't have any user in the state but if I have any user in the state in that case what I will do is I will see I will check whether or not user has any length which means I have any user in my state or in the array or not so if I have any any user in my array what I will do is I will map through the users and I will get the user and their index and for now what I will do is I will return the user just simply like this and in the else condition which means if I don't have any user in the array in that case I will render no data message like this that we are uh the same way we are doing for the uh blogs and here in the message prop I will just say no user found and I will just save this so now since this is rendering the user card rapper on accounts smash tab if I go over here and open my console so that I can resize a window and just click on account match now you will see that I am getting this uh loading animation but I'm not seeing this no data message and why is that uh actually let's see so let me come over here which is this fetch user and let me just console do log the users over here to see why it's not working so now you will see that it is saying undefined which means this users is undefined and why is that so actually let me just remove this and instead I can just set the users by saying data. users like this and it should work then so in the account MH I'm still getting this error so I think there is a issue in this actually let me console log the data that I'm getting so what if I just console.log the data itself let's see what the type of data I'm getting so you will see that this is the data I got and there is this data and the blocks which is an empty array actually uh why I am searching for blog yeah actually this is blog so I have to search for users yeah that was the issue so let me fix this again let's say data and from there I want to extract the users like this and now I can remove this data from here and I can do this like this because I was making request to search use blogs instead of making request to search users that's why it was giving me error so now if I just refresh and go to account match now you will see it is giving me error saying users. map is not a function okay why is that uh let's see users. map is not a function so what it is then let me console. log the users uh state to see what is the data that is being stored in the state and it is an array with two objects so it should give me uh uh actually instead of this let me return an H1 saying user dot personal info uh actually the user what we have is a object with uh full name right so I will say dot full name over here and in the H1 I will just pass a key with the I and now let's see whether or not is working so if I just refresh and go to account match okay I got again the error saying users do map is not a function actually it is map not map yeah that was a type error so now if I go to accounts match you will see I'm getting users full and the reason I'm getting not a full name user full because I hav't put it inside this curly bracket so now I should see the full name of the users so what is the name of the full name users why is not showing me that do I have to say personal info dot let's see yeah uh I have to check for the personal info because user is the object with the personal info key well uh anyway just remove this because we don't need this H1 I was just showing you that we got the data and we are able to render it so instead of returning the simple hed1 we will return the user card over here so what I will do is I will render user card component and obviously we don't have this user card component so I will create this card component and before this user card actually add a animation rber because I want to add the fade in effect and over here I can add key and not key value just key and the key will be the index and I will add a transition to add some DeLay So by default I will pass an a duration uh I will pass object with a duration of one and I will say a delay will be I into 0.08 and let me enable my word rap so that you can see everything correctly yeah so this will be the transition and inside the animation wrapper I will Rend a user card and this user card will take two props will take one prop which is basically the user which is just this user data so I will just say user over here and this will give me error because I don't have user card over here so let's create this so you will see inside the component folder I have user card.com component.js open this and make a user component over here user card just like this and make sure to export this as a default function like this and here make the prop which is this user prop so add a user like this and make sure you import this user card at the top of this search bace so just save it and now you won't see any error over here and now you can just work on over here return for now in H1 saying this is a user card and if I just save it and go to my account smashed you will see I got this is a user card which means this is working so now let's work on this user card and instead of rendering this is a user card let's render the profile image and the name and the username of the user instead of this H1 now we can work on the user card so before removing the H1 let's first t St to the user data that we are getting from the search page so let's define here the D structure and let's set it equals to user and the things that I want to destructure is first of all the user is an object which contains personal info key so I have to do let's type your personal P let me type it correctly personal info and that personal info is an object which contains three keys which is full name username and profile image so I just need these three images so I don't uh three so I just need these three values I don't want to access them by saying user. Pro personal info. full name so I'm just restructuring it so that I can access them by just saying full name username or profile image so now instead of rendering this H1 what I can do is I can make a link component over here and make sure you import this link as well so let me add a import over here let's say import link from react and the reason uh reason I am making a link is because inside this link I will make my user card and the reason I and the thing that I want is whenever user presses on the user profile or name or username or anything basically if user provide press the mouse click on uh uh the user card I want to redirect the user to the user's profile page for that I have this link and in the two I have to provide the root where I want to redirect the user so I will set equals it to it in uh uh template string and there I will say slash user slash in the double code U curly brackets I will say user name that I am getting from this users data that uh from the search page so basically I don't have this SL user SL username path right now but when we will make the profile page then we will have this path so you don't have have to worry about it you can give this link right now uh and after this let's give some class name let's say Flex so that I can make the image and the username side by side and add a gap of five units and say items to be center items to be Center and give a margin bottom of five units just like this and inside it I need first of all the profile image so I will add an image component and in the source I will provide the source of the image which is this profile image this contains the URL of the image and in the class name I will say width to be 14 and height to be 14 for a complete square and I want it to be Circle so I will say rounded uh rounded uh rounded full to have 100% of radius and if I just save it and come over here so instead of getting the text now you will see I got one image over here and the other image over here and the reason I'm not getting the image over here because this account was signed in using Google and the Google is stopping me from accessing the user profile that's why I'm getting this error because you can see it is giving me uh 403 which is permission error because it is forbidding me in order uh to access the image so it is not a big deal when we will work on the account setting where the user can change the profile image then we will update this profile image and you won't see any issue okay so over here now I want to make a div and this T will contain the usern name and the user full name so over here I will make an hment let's give it a class name let's say font to be of medium width text to be of excel size and the line clamp will be two so if we have a longer full name I will clam the full name to be two line so I don't want to go on the third line and in the content I will say render the full name then I will render a P tag and I will give some class to it too I will say text to be dark gray like this and in the content I can just say username and since I want the username to start with at theate I will add at theate before uh this bracket otherwise this will give error if you add bracket inside the username so uh this is much this is our user card if I just save it and come to my website you will see that now in the accounts match I got the user profile the user name and the user full name name and the same goes for this but I am not getting the image again uh because the Google is not allowing me to do that so if I go to this I will get the search results of blogs and if I go to accounts match I will get the users card so basically for the Mobile screen the search page is done but if I come to my um desktop screen I am only having this search block part I don't have the user search on the right side so let's create that so now let's go to the search page and let's make the user card on the right side so after this div let's make another div over here and let's give it some class name uh the class name I want to give is the uh minimum WID would be 40% so at least this will this T will cover at least 40% of it and on the larger screens I will say the minimum weight to be 400 not 400 it should be 350 pixels and then I will say Max withd to be minimum and the Border L will give the Border left and I want to change the Border color to border gray and I want to add padding from left side of eight units and padding from Top will be three units and I will say maximum uh Das mg which means till medium screens I will have this class which is hidden so till medium screens I will be uh uh hiding this STP because I only want to see this in larger screens so inside it I will add an one H1 let's give some class name let's say the font should be medium and uh we should have a text Excel size and the margin bottom will be eight and I will just say user related to search and after this now if I come to my actual project you will see this after this H1 I have this uh uh icon over here so let's add this icon so let me go to the flat icon and let me search for user over here and what icon we are using we are using this icon so let me just copy this and let's go back to the code and let me paste that over here change the class to class name and save that and if I come to the page you will see this is how our Dev looks and this is how the H1 looks I think I should give some margin top to this because it's not property aligned so let's give it uh mt-1 one unit margin from top and now it is uh pretty much aligned so after this I just want to render this user card wrapper because we already have set up the user card and the state already so just by adding the user card rapper over here you can see I got the search result according uh to this this uh uh this user search query so if I search for here let's say cooking and press enter you will see now I'm getting no user form in the user search result and in the search results of blog I'm getting these two blog and if I click on load more button I can load more blogs so with this our search page is also done so now let's move on to our 404 page okay so now what I want is I want to create a 404 page so what is the purpose of 404 page well we want to show 404 page on the roots that does not exist in our project so let's suppose if user is on our website and if he or she go to some random route that we don't have in our website then instead of getting this blank page I want to show that 404 page to tell the user that the route you are on does not exist and you can just go back to the homepage so how can I do make uh how can I make that so let's go to our code and let me go to my folder structure open the app.jsx file and here inside this parent route where we are rendering the nav part what I will do is at the very end I will make another root and here in the path element I have to Define that render the element in any path so what do I mean by any path well if I give you a star so basic basically path equals star basically means any path inside this root path which means it can include SL search also it can include slash user also and can include slash signin also so that's the reason you need to put it at the very end so that if a user go to/ sign up or sign in or search we will render these first and if user uh does not go to these fixed Roots then we will fall under any path and then here we will just render an element and for now I will just render an H1 to show whether or not it is working so I will say 404 page and if I save and go back you will see that I'm on random path that does not exist so if the page loads you will see now I'm getting a n part with an H1 saying 404 page which means even if I go to like any random other domain let's say this and then slash this and that you will see that I'm still getting 404 page but if I go to my homepage I will get my homepage as usual or if I search for like cooking or anything I will go on my search page as usual because these roots are above this any uh path route that's why the 404 page is not rendering in that case so instead of rendering an H1 over here I will render over here page not found component and obviously we don't have this component so just go in the pages and you will find 404 page do jsx so just open that and let's here make that page not found functional component like this and this for now will return NH H1 saying page not found and make sure you export this as a default function like this so let me now retype this so that vs code will import it in this for file and if I save this now and I can close this folder view so now you will see that well I'm on the search page so if I just go to some random route now you will see that I'm getting page not found which is being rendered from this page not found which is this simply an H1 so now instead of rendering this H1 now let's make our 404 page so what we will make here is we will make a section and this section will contain r404 page so I will give some class names to it I will say height should be cover so again this s Das cover is the custom class inside the index. CSS to cover the full height negative minus the Nar height and I will give it a relative position with a padding of 10 units from all over the places and I will give it a flex property because I want to use flex box properties inside the section I will say Flex direction would be column so instead of getting all the children side by side I will get the children's one above each others and I will say items to be centered so they will be aligned horizontally centered and I will then give a gap of 20 units with text Center so all of the text inside section will be in Center position so if I reload the page well you won't see anything because I don't have anything inside the section so over here let's first create an image so I will make an image tag and in the source I need to provide the IM source which will be page not found so first of all I have to import that image right so at the top let me add import and let's call this image name page not found image from and let's give the path of the image which is inside the images folder which is this 404 PNG and now I can give this variable inside the source to load this image and I will give some class name but before that let's see the image so now you will see this is the 404 image that I want to display in the center but I want it to be little small so for this first of all I will give the property select none so that user can't select this image and then I will give a border of two units and the Border color would be border gray and the width will be 72 units and if I give the aspect to be squar then the height will automatically become 72 units and now I just have to give object cover so that the image would maintain its proportions and I will give it some uh roundness a border radius so now let me enable my wrap so that you can see all of the classes that I have given so if I refresh you would see the output like this so after this image we need an H1 saying that the page is does not exist so I will make an H1 over here and this will just say page not found if I see how it looks it is this H1 over here and now let's give some class name so I will say the text size should be text 4 Xcel and the font family will be font galao and the line head will be leading seven like this and now make a P tag and inside of here I will say the page you are looking for does not exist right and then I will say head back to our to the homepage like this and if I I come to my website you will see the page not found hphone is looking good but the paragraph It's also good but what I want now is and in this paragraph I want this homepage to be clickable so that user can click on this homepage so that we can redirect the user to the homepage instead of being on this 404 page so how can I do that for that I have to use a link tag over here which is obviously we would use it from the react router you can see the link tag is importing from the react router so make sure you close this link component after this homepage so this whole homepage text will be clickable and in the two prop I will just give on uh the route where I want to read which is the Home Route and I will give some class name over here I will say the text should be black in color and the text should have underline now let's style the CL paragraph as well so I will say the text color will be dark gray and the text the size will be XL and the line head will be leading seven and I will give a margin top of8 units so that it will not uh go so it will have less space between this and this and now if I refresh this is how it looks and the spelling of exit is incorrect so let me fix that so after paragraph I need a div and inside this let's just give a class name and let's say it mt2 be Auto so by giving margin Top Auto this will come at the below at the very bottom and well this U well this D will basically contain the logo of our website and just with a simple text which says read millions of stories around the world basically it will just explain what our website is so I will make an image over here and I will give a source and again to give a source I need to import that image so I will import and I will call this image full logo and I will import this from images folders and you will see there we have a full logo so inside the source I will give this full logo and I will give some class name I will say hi to be8 and object should be contain instead of cover and I would give a display of block and Max uh the margin in X direction will be Auto and the select will be n because none because I don't want to select the image so now you can see this logo over here just after that below of that I will make a paragraph and this will just say read million of millions of stories around the world like this and let's give it a class name let's say margin from Top would be five units and the color of text will be text do gray and just save it and this is it so with this our hom page is all to done and if I click on the homepage you will see I'm redirected to the homepage and even if I try to go on some any random route that literally does not exist in our website and for Center this will will just give me this page not found with the option to just redirect the user to homepage and we are done so now let's work on our user profile so that if user click on this user name or like uh let's say if I search for John and I got two users matched with this search result and if I click on them you will see I'm redirected to/ user John so now let's work on the profile page so instead of showing the page not found over here we will show the user detail where we will we will see the users profile name and the profile image full name username with the bio and everything else so let's do that so now instead of getting this 404 page let's render the user profile page so for that before just before this route where you are rendering this page not found we will create another root component and this root component will be same as we have uh for the search but instead of this query as a parameter I will say it to have an ID which we will use to retrieve the user ID from the address bar so I will say user because this is the uh root and then under user I will say call an ID so whatever we get after the user and for slash we will retrieve that as a ID parameter and then we will consider uh the user well we will consider this as a user profile page so I will say render this element and this element will just basically for now return an H1 saying user profile page and if I just save it instead of getting this 404 page I should see user profile page yeah now you can see now I'm getting this user profile page S1 so first of all let me enable my word repap and instead of rendering this H1 now let's render the profile page component so instead of that uh render Prof file page and close it like this and obviously we don't have that that's why I'm getting this red line so just open the folder View and go to Pages folder and inside this you will find profile page. jsx so just open that and here I will just quickly make the profile page functional component like this and this will return NH H1 saying profile page from component like this and and uh then make sure you export this as a default function also and again I can type this profile page component so that vs code will import it for me and if I save it now now I should see this text which is profile page from the component and you can see I got profile page from component so we have created our profile page rout and I'm successfully rendering uh this H1 so instead of rendering this H1 we will create the profile page instead so let's do that before working on the UI let's make request to the server so that we can retrieve the profile uh the user profile information and once we have the users's profile uh as a data then we can render it in the UI to show the user right so for that uh what I will do over here is first of all I need to retrieve the ID from the address bar so how can I do that again if you don't remember that uh how we retrieve the ID from uh in the search page uh well that's easy make a variable and we need to destructure the ID from use params hook which this react router provides and use params will give you an object with all the parameters as key and from that object I want the ID key so I will say ID and I will uh I will not call this as ID but I will rename this param to profile ID like this so just uh add a column and type profile ID so now you can call Profile ID in order to access this ID which exist in this user params Hub so great we got the profile ID so instead of rendering this I will say profile page Dash and in the curly brackets I can say profile ID to see whether or not I got the ID so if I save I should see the profile ID and you can see I got profile page- John which means I'm in the John's profile ID but if I go in my search and I search for Kunal and if I go to account Smash and then click on the user you will see the profile page it is giving me konal which means it is working so now let's make a request to the server in order to get the data of this profile but before making request to the server we need a route in our server where we can listen for that request right so for that let's make that route first and then we will make request from front end so just go to your server and after the search users we can make another post request method and the root will be get profile in order to get the profile and it will just run a request a call back with a request and a response as parameters and inside it first of all I need to destructure or uh the username from the request body because from the front end whenever we will make request to this get profile we will send the username of that profile to this rout so that we can search for this username in our mongodb in order to get the data right so I will say here user because I need to find the document this user in user collection and to find the user I will say use find method and since the user name in our database are unique instead of saying find I will say find one method because this will just find one document and then will stop its execution so I will say find one and I have to give the uh value over here on what basis it has to find so I will say here personal personal info. username again if you don't remember just go to user.js and you will see that the username is a key that is inside this personal info which is an object so in order to access this username you have to first access the personal info and from there you have to access the username by just saying personal info. username and these should be in codes in order to refer the key and the value that I want to check will be equal to this username that we got from the front end so once we get the data or we get the document in the collection I will use the select method in order to select the particular fields that I want to select so what Fields I want to select well what I want is I don't want use a password because if you see in the personal info I have password also along with this username but I don't want to send this password string in the front end because I don't want the user to know their password strings right so what I will do here I will say minus personal info do password and by just adding minus mongodb will not select this uh field which is this personal indesco info. password and the other field that I don't want is Google o so just add minus and then Google o and this Google uncore Au if you see will have be uh is a Boolean value which does uh will just which just tells whether or not it is sent in by Google so after it I will just add minus updated at will uh basically this contains information on the last time update of the document and I will just remove the blogs from this U user also because for blogs we will use this search blog instead of the cat profile we will make request to search blog and we will pass the user in from the front end in order to get the user return blocks so that's why I'm removing the blocks from here and once everything is selected I will get the document using do then and I will can and call that document user and I will just return a response with a status actually the status of with 200 and the Json that I will send will be just this user and actually just don't add these brackets because this user is a a object so I can just send that object over here like this and add a cat so that if we get any error in then blog we can handle that so I will just console log the error if we get any and I will return a response with a status of 500 and the Json that I will send will again an error and the error will be the error do message just like this so just save it and let's check this rout from request. rest so I will make a post request to get profile and the content time will be application SL Json but this time the username will will be let's say John and if I uh click on send request you will see now I got the status 200 and I got personal info which is containing the information like the full name the email the username the bio and the profile image and it is containing the Social Links which obviously we don't have right now and then we have account for like total post written by the user and the reads and then we have this join but I'm still getting this updated at and I guess I have M misspelled it over here yeah I have misspelled it over here that's why it is uh giving me the response but now I fixed it so I won't get this if I go over here and let's say I search for some user that does not exist so let me type anything and let me now make a request and now you will see that I am getting null so now in the front end if a user try to access some user profile which does not exist by providing any random username then we will receive this null in the response and once we will receive this null in response what we will do is we will redirect the user to 404 page which will just display that this does not exist the page does not exist so right right so just save that and now let's work on our front end because our server part is done so let's come back over here and let's make a state so that we can store the profile data that we get from the back end and and then we can use that state value in order to render the UI so for that I will make a state over here I will call that state profile and the set function will be set profile I'll set equals to use State hook in order to use the state and the by default value of this will be profile data structure let me type it correctly the structure yeah like this now what is this profile data structure well we will make a mty profile data structure in our front end so that before even making request to the front end we will uh need to render something and if we just set this in know null and if I try to render the UI it will throw error because then I won't be able to access the usern name and full name because before making the request I'm rendering an a UI with no uh data in my state and in that case it will give me error so I have to provide it some sort of empty uh data so that yeah it won't show anything but it will uh still get rendered and then we can uh make request and once I get the data I will remove this empty data structure with uh that data that I received from the back end and then we can render uh the correct data so what do I mean by that well if you don't understand don't worry it's just a way to not get into a error so I will make a profile data structure over here at the top I will first export this as well because we need this profile data structure in other files as well that we will work on other parts so I will create this variable over here like this and this will be an object and this will look exactly the same way that we got the response so if I click on type John and send request the respon that I'm getting this will exactly look same so just like that so I can here say personal info and this personal info will contain full name with an empty string it will contain usern name with an empty string and I can say profile image and it will be an empty string the bio it will be of pause and empty string and uh after profile image I need account _ info which will uh contain total post make sure you give underscore instead of Dash which will be by default zero and then I will say total blogs which will be by default zero and after that I will have Social Links which will be an empty object and there I have I will have joined at which will be an empty string and why I have created this again well you don't understand just wait a moment I will explain it to you right now again so uh over here now before rendering the things or anything what I will do is I will destructure this profile data right so let me just first of all get this actual data from the back end so that I can explain you better why I did this so let me make a function over here which will call make a request to the backend in order to retrieve the data so make a function over here and let's call this function fetch user profile and make a function like this and what this function will do basically it will make an exos request to the back end in order to retrieve the data of the user profile so I will say x us and make sure you imported as well it will make a post request so I will say post method and the root that I want to make request is Port meta do n. Vore server domain to get the Local Host 3000 p and in the codes the rout that I want to make a request is get profile profile like this and the data that I want to send in the root actually let me enable my word dribe over here is if I come over here you will see that I am sending username to this get profile route so I have to send username name over here so I will say username and the username that I will send will be this profile ID so I will just paste it like this and this will make a post request to this get profile method so once I got the data from the server I will I will destructure the data and rename the data as user just like this and inside this call back I will say that set the profile to the user that I got and I will actually let uh uh just console.log the user to see whether or not I got any response so now uh since I am using do 10 I have to use this sketch in order to catch any error and if we get any error I will console log the error and I will uh say Set uh and for now it will be like this so when do I will call this fetch user profile well once I'm done with this rendering I will call this fetch user profile once in order to fetch the profile of the user so since I want to call this after rendering for one I will just use use effect hook in order to make a request and since I wanted to make only one time request I will give it an empty array and inside of here I can just call fetch user profile like this and if I save and expand my browser window and open my console I should see the user in the console and now you can see I got an object with account info personal info Social Links and joined it I got a lot of information over here so which means I am uh this fetch user profile is working and I'm able to set this as a profile state in the profile state right so now I want all these data to be destructured so that I can access them directly while creating the UI right so I need to destructure them over here here so let's do that so let me close this console and expand my code view vs code now over here let me destructure the data that I'm getting from the back end so I will say let and I will destructure the data inside the bracket but this will be equals to this profile State we have over here because I am setting this user that I'm getting from the back end to this profile state so let me remove this console because I don't need this so what I need need is first of all I will destructure this personal info object which contain this full name username and I will rename this username to profile uncore username because I can't use uh this username because in later in this video I will access the currently logged in username uh uh currently logged in users username which is also called this username so and the other thing that I want is I want profile image and and then I want bio from this personal info and from there I need to destructure the account info and this account info contains two keys one is total post post and yeah it is post and it contain another key that is total total reads like this and after it I want to destructure Social Links and I want to destructure joined at so if I save this and open my console and expand this window and actually let me console log everything so I will say console.log the user and I will save this so now if I save this you will see that I got you I'm getting this user over here like this I got this user data and I'm not getting any error right so uh why I I created this data structure over here because now you will see that whatever key I am destructuring over here at the start of this code is inside this person profile data structure uh data structure right so and this is by default set equals to this profile state but what if I don't provide this and provide null uh just like we did for the block State and other states in that case I won't be able to destructure these keys because I can't destructure the from the null so even before I'm calling this the JavaScript or the react has to destructure this in order to render the stuff and then go to use effect in order to fetch the request and before doing so the profile state is null and since it is null I'm not able to destructure these datas and that's why I have created this an empty data structure so that I won't face these errors so if I just changed this to uh what it was it was profile data structure so if I just change it to profile data structure again you will see now these error will gone will go and now I will see the data in my console so that's the reason I have created this as an empty data structure over here so I hope you got this right now so now let me remove this console log user and let's add a loading animation so that until uh we get this user profile we will show the loading animation and once we get the user profile we will hide the user uh uh the loading animation and then we will render the user profile uh details so for that I need another state so I will say let and over here I will say loading and I will say set loading equal use state in order to use the state and I will say by default this will be true which means you have to show the loading so for that I will come over here and what I will do is in instead of rendering this H1 only I will first render an animation wrapper because again I want to wrap this page inside the animation wrapper in order to give the fading effect and this inside this animation wrapper I will add curly bracket in order to check for condition using JavaScript and the condition that I will check over here is loading and remember this loading is a state so it can either be true and a false and by default is a true so I'm just saying if loading is true then render loader component and if it is not true which means it is false in that case render this ed1 for now I'm just saying this so if I just save this and if I go on the page you will see that I will get this loading animation and uh uh it doesn't matter I got the user profile or not from the back end I'm not updating the states and that's why I'm just getting this loading animation so once I got the data from the back endend instead of just setting the user or instead of just setting this profile state or updating this profile State what I will do is I will update the loading State as well so I will say set loading and I will just say it to be false and what I will do I will just copy it and I will paste it over here as well so even if we get any error I will just remove the loading animation so now if I uh refresh the page you will see uh we got we got the loading for some amount of time and then I got this profile page text because I got the I received the data from back end so since I have the data now now we can work on the UI in order to render those data so let's just remove this H1 and instead make a section over here and inside this section let's give it some class name let's say h2b cover and uh I will say on the medium screen or larger than that the display would be flex and it will have Flex Direction row reverse give it item start to align the item on the start give a gap of five units and say minimum 100 and say minimum 1100 pixels so which means if the screen is at least uh 11 00 pixel in that case I will change the Gap to 12 unit from the five and you won't see any changes because we don't have anything inside the section so I will create a div over here and this div will contain the user profile informations and after this St we will create the in page navigation which will contain the uh blog and the about of our user profile so over right here what I will do is I will first of all let's give it some class name so I will say to have a flex box and it will of be a flex call Direction and on the max maximum medium which means till Maxim uh till medium screens item should be in center and then we want the item to be on the left side so I will say items to be start or actually you don't have to say anything because by default it will be on the left side so now you can give a gap of let's say 5 units and the minimum width will be 250 pixels and actually before giving more classes to it let me just add something in the dep so that we can actually see how this CSS is affecting those elements so uh let make uh let me make an image over here which will be the profile image so this source of this image will be this profile image that we have D structure from this profile state so I will just copy this profile image and paste it over here and save it and I should see the profile image over here like this now you can see I got one image over here and if I click on search and search for let's say John and uh well I got no blog published so if I go on account mag and click on this John you will see this is the profile image that I am getting so now what I need is I need to give some class name obviously so I will say the WID to be 48 and height to be 48 unit as well the background will be gray of a break gray color and I will say rounded rounded full so it will have a full radius and on the medium screens I will say the width will go to 32 and on the medium screens the height will go to 32 units as well so if I save this now I should see a circle circular image like this great so after this image what I want is I want an H1 which will display the profile username so I will just say at theate and in the bracket I will say profile uncore username because remember I have destructured the username from the profile and renamed it as this profile uncore username so if I just type the profile username it will access this username from the profile state so if I save it over here you should see an H1 with the profile username this uh which is at the rate Chan so now let's give it some classes as well so I will give text to be of 2 Xcel size and font will be of medium width and that's it so after this I will create a P tag and this P tag will uh display the full name of the user so I will just say full name here and let's give it some class name so I will say text should be of excel size and it will be a capitalize and I will say height to be 6 unit so it will make some space between the uh full name and the user profile name like this so after the paragraph I will will make another P tag and this P tag will contain the information of these two things which is the total post and total reads count so what I will do here is I will make curly bracket and inside it I will say total post and then I will say blogs because this will be the number and then this will say just it uh blogs and then I will add Dash and then in the brackets again I will say to reads and this will be reads so if I save this you should see a number and the blocks text like this which is just saying zero blocks and zero reads and I don't need this Dash over here but let's say uh let me go to my database let me just sign in so let me come over here in the users collection and let me find the uh user with the username John and I believe this is the user yeah uh this user has this username John so what I will do here is I will expand this account info and for now I will manually change this total post and total read count because uh for now I can change these manually when we work will work on other features in the later parts of this series then uh these we will update automatically so you don't have to worry about it so for now I will say total post to be like 10,832 something a bigger number and the total rate to be like 24568 like something like this and if I just click on update to update these number and come back to my front end and refresh the site you will see now I got this long uh digit with saying blocks and this long digit with saying reads so the reason I changed the number to this long uh count is I want to show that if we have a very large number like this 10,000 or 24,000 it is kind of not uh readable because you have to go from here step by step in order to read it yeah it is not that read friendly so how can we add commas over here to separate the thousands from the hundreds and the ones so for that we have a JavaScript function and we can do that over here so after the total post I can say dot two local string and this two local string it will just con uh convert the integer or the number and style it into the actual uh number form where you can div differentiate between th000 and 10,000 as you can see over here uh this 10,000 is getting separated from this 800 by this uh comma so I will do the same for this blog as well uh this read so I will just copy this method and I will call this after total read like this and if I say I should see a comma between four and five to separate it from the hundreds right so now this number is more readable great so now after this what we need in our profile is first of all I need a edit profile button over here and I want to show that edit profile only if uh we access if the user is logged in and the user is accessing his profile if you are not logged in I won't show the edit profile or if you are accessing someone others profile or someone uh else user profile you won't see the edit profile you will only see the edit profile button on uh only when you are logged in and you are accessing uh your profile page so for that first of all let's create the edit profile button over and then we will see how we can show it particularly when the uh user is logged in so for that I will make a Dev over here I will give a flex class to it and I will say Gap to be your four units and uh margin to will be of two units and inside of it I will make a link tag because I want whenever I will click on the button it will redirect me to the settings page which does not exist for right now but we will work on it on the later parts so I will say in the two that redirect the user to SL settings sledit Das profile so whenever you will click on this link it will redirect you to the uh edit profile route and I will just say to display edit profile in the button and let me give it some class name so the classes will be BT and light and I will say the rounded to be rounded medium to have a medium order radius and if I save you should see added profile button over here and if I click over here you will see page note F because it redirected me to the settings Ed profile and since this route does not exist in my code right now I'm getting this page not home so if I go back uh you will see that it is working but now I want to show this only if I access the my own profile so how can I do that first of all for that I have to retrieve the current logged in user username so how can I do that for that I will uh make a let over here and I will destructure the user from user context that we have created in first part so I will use the context over here to use the context you will use use context hook and pass the context that you want to use and the context that I want to use is user context and make sure you import user context and use context both so this user context if you don't remember just open it it has this user or uh inside it and this user or is the object which contains access token and username so over here I will just say uh user or and from that object I need the username to check whether or not this user is uh the profile page that the user is viewing is is his or not so once we get the username what I will do is I will come over here and I will check for condition so I will add curly bracket and S it I will say profile ID and profile ID is the parameter that uh I am retrieving from the address bar so I will say this profile ID if it is equal equals to the username that I am getting from this user context which means the logged in user is accessing his profile in that case I will render this link and if that is not the case I won't render anything and I will just pass an empty string so if I save this you won't see the addit button because I'm not logged in right now because you can see I am getting this sign in but now uh since I have this John over here let me just write uh let me just sign in with that account so I will sign in with that account and the password would be I guess this and let me press sign in okay actually the password is wrong so actually just leave it I don't remember the password right now so let me uh log in with some other account to show you the feature so if I click on sign in now I am signed in and I am on the homepage but if I click on my profile you will see I am having this option profile to go to my profile page and if I click over here you will see that now I got the user profile which contains my information like the name the full name the user name and how many blogs I have written and how many reads I have but it also is showing me the edit profile but if I search for some other user let's say John and if I open that profile you won't see the edit profile button because you are not allowed to edit the uh others profile right so now let me work on my profile so so now you will see there is one error and what is it uh since I am on the uh John's user profile I'm not getting the edit profile right but if I click over here and click on the profile you will see that now no data is changed I still getting the Jo profile but I got this edit profile and why is that because if I unex uh if I expend my window you will see that I am on currently user slal rout which is my uh username and that's why I'm getting this edit profile and this is happening because we are not resetting the profile state before changing this uh parameters I want to reset the state every time this parameter uh changes this parameter of the address changes or you can say the profile ID changes because otherwise the rendering will not take place and we won't see the new data as you can see even though I am on this Kunal route I am not getting my profile I'm getting the John profile because this is the previous data I have stored in my uh profile State and I'm not rendering that so how can I do that for that let's go back to the code and in the use effect let me add values over in this array so that I can tell when you need to use uh run this use effect so what I will do is I will pass profile ID over here so whenever this profile ID which is the parameter in the address bar which is changed so I will saying whenever this profile ID changes what you want to do is you want to fetch the user profile and what I will do I will set for like if uh let me not add the if what I will say is I will say call the reset function not resize 2 it should be reset States like this and let me just copy and create this function so I will create this reset State quickly like this and basically this reset state will reset all the states uh we have over here so for now we have these two states so let me reset those so I will say set profile to the profile structure data structure and I will say set loading to True also so I'm just resetting all the state values back to the default ones whenever the profile ID is changing I'm calling this reset state which is just changing all the state values and then I'm calling fetch user profile in order to fetch the new user profile so now if I go back and now you can see I am on the John's page getting the John's profile but if I now click on uh my d profile and if I click on the profile to go to my profile page now you will see since the state is changed now now I'm getting my own profile image and my own profile data with this edit profile button and if I go back to the John's page I will get the John's page and I will not get the edit profile button so that's the reason when you are using the dynamic Roots you have to reset the state whenever those parameters changes otherwise the reactive phone to rerender these stuff so with that now let's work on the about section render the about component of this user profile what I will do is just after this uh edit profile D I will make this about user component and obviously we don't have this component so let's just create this component so go inside component folders and we will find about. component. jsx over here so let's quickly make that component right here so let me make a functional component let's call this about user and they this will return NH H1 with the about user with just a text so that we can be ass sure that yeah it is working and make sure you export this functional component as a default component and now I can import this over here so import the about user right here and if I save this I should see the about user over here and that's great so what this about user will take well I need to introduce some props over here in order to send this bio and the social link and the join ID these three values to this component so over here what I will do is I will Define some props and I will say bio then Social Links and I will call another uh prop joined at if I save it I have to pass these Prof values while creating this user card so I will say bio will be equals to the bio variable which is the structure getting the structure from the profile State and the same goes for Social Links I will say Social Links will be Social Links and join that will be joined at and if I save it and come over here you won't see any changes but if I come over here and I'll just in the brackets I'll say join add you will see that I about use user Dash and I'm getting this time stamp which means that I'm able to access these values in my component so instead of running this H1 with this uh Tim stamp let's Now work on it and render the bio social link and the join it so remove this H1 and instead make a Dev over here let's give it some class name so I will give it a class name I will say on the medium screen the width will be 90% And on the medium screens the margin top will be of seven units and I want it to be hidden on the smaller screens on the smaller screen so how can I do that for that what I will do is I will make add curly brackets in the beginning and the at the in the beginning and at the end of this class name and I will just add a space after this margin top and I will concatenate this with class name prop that I will introduce over here and what I will do is I will make a class name prop over here so what I just did basically is while creating this about user component I can give any class over here and that class will just concatenate with this existing classes and what class I want to give over here while creating this is I want to hide this component on smaller screens because in the smaller screens after the edit profile button I will just directly the uh load the user return blog and I will have the in page navigation tab over there to just switch the blocks to uh the about user panel where you can view the users uh about information so for that I will give class name over here and the class name that I will pass will be the maximum mid medium which mean till medium screens I will add hidden class to this user and now you will see now I'm not getting that H1 over here well still I don't have an H1 so why I will get it so for now I will say an H1 over here with about user and save it and you will see that I'm not getting any H1 over here but if I expand my window now you will see that now I'm getting about user here because on the medium screen or larg screen I will display the blocks over here and I will display the about user over here so let me now remove this H1 and let me go to the medium screen so that I can get this user over here and let me enable my word drive for the vs code right so inside this what I will have is I will have a paragraph which will just show the bio of the user so I will say over here that in the uh brackets I will check for a condition I will say bio. length to check for the condition and I will say if there is a length in the bio then I will obviously display the bio otherwise I will display nothing to read here like this and if I want to give some class name let's just give the text Excel for Excel size and and I will say the leading to be seven save it and you will see I'm getting nothing to read here because the bio is an empty string for this user profile so after this paragraph let's render a d and let's give it some class name so I will say it to have a flex box because inside uh this T I will contain make or render the Social Links so I want all of the Social Links to come side by side that's why I'm giving this a flex boox and and I will have a gap in X direction of 7 units and I will have a gap of a y direction of 2 units because I will allow the flex wrap over here so I will say Flex to be WRA and I will give a margin in y direction to be 7 units and I will save the items to align in center with the text of dark gray and if I save this well inside over here I have want what I want to do is I want to Loop through each individual Social Links and I want to check whether or not the string is empty so if the string is empty I won't render the icon but if the string is not empty then I will render the icon and when the user click on that I will redirect the user to that particular link but for now if I go to my mongodb uh I don't have any social link for this account so if I go to over here which is this uh I am logged in with this username right so you will see that in the social link I don't have any sort of links so I will say that for right now just go uh to your account in the mongodb and on what account you are logged in just addit at Social Link and just add two or three Social Links over here so that we can test that whatever we are making over here or whatever we will code over here is working or not uh which means I'm getting the icon over here or not so for that just pause for a moment and just manually add the links over here and update like this by clicking on the update button so I hope you have uh added the Social Links manually for now in this account I have these three Social Links add it the YouTube Instagram and the GitHub so we can test that we are only rendering these three icons not the other icons which is this Facebook and Twitter and whether or not we are getting any sort of icons so after done with that let's code over here so what I want to do here is just add add a curly bracket because I want to write JavaScript inside the j6 and what I will do is I will say object. key and keys and I will pass the Social Link inside this function well basically what this will return if uh this object. keys will return an array of the keys of the provided object so if I provided this Social Links over here the keys of this social link will added into an array which means I will get an array with YouTube Instagram Facebook and so on like whatever Keys we have in this uh object those keys will added inside an array and this will basically return me an array so once I got those array like the YouTube Instagram Facebook I know that currently what sort of Icon I want to render right so in that case I want to Loop through that uh array by calling this map function and from there I will access the individual key like this in this call back and for now let me expand this so that you can see this code better and over here what I will do or actually let me go to the profile page and remove this class name Max hidden for now so that you can actually see the uh component over here and once we are done with the component we will hide it so inside this mapping function what I will do is I will say let link equal Social unor Links because this social link is refering to the main uh main object and from there I want to access this key or so I will say square bracket and I will pass this key so by doing this you will get the value of that particular key from the social icon and you will store that inside the link now I just have to check whether or not it has any sort of length so if this link has any sort of Link Link which means I have social link in my database and you don't have to worry about whether or not it's a correct URL because when we will uh add a feature for the user to add the social link there we will add that condition uh which will validate the uh links and if the link is invalid then we W allow the user in order to update the document so over here what I will say I will say return link if link is true which means if link has some value and that case I will say return a link component which is from react router obviously and and inside it well I need to render the icon and how we will render that icon I will show you just in a moment for right now I will uh say that instead of rendering the icon just give me the key which means if it is a YouTube icon I will get YouTube if it is a Instagram icon I will get Instagram okay so and I will just add a colum and I will say that if the link is not exist which means it doesn't have any sort of uh length in that case I will return an empty string and over here in the two prop I have to uh give the link so that I can ex uh tell so whenever the user click on this link whether it has to redirect and if I save you will see that now I got this YouTube Instagram and GitHub these three links because if I come to my mongodb you will see only these threes have links and Facebook Twitter website these three inputs uh field these three keys does not have any sort of value that's why I'm getting only these three keys and I'm getting this hand cursor and if I click on it this will redirect me to my link page which which is linked with this text so uh let me give it a key and I will give it a key because I am again mapping so it's good to use the key so that you don't so re can differentiate the elements now let's give it some class names actually no need to give class name over here give this target drop and just say underscore blank so what it will do uh not blank black it will be blank so what this target will do is whenever you click on this it will redirect you to that page but in new tab so you won't leave this website but it will just open that page in new tab so you won't uh get out of our website right so instead of rendering this key now I want to render the icon and how can I do that for that let's go to the flat icon and over here let me search for YouTube you will see I only got one result so if I click over here you see that it class is fi fi- brand- YouTube great and if I uh actually let me just copy this class so that I can uh show you it clearly so let me just paste it over here don't worry about errors we will work on it so now let me search for Instagram and if I click on it obviously I got only one icon and if I click on the uh icon and paste it over here you will see that the difference between YouTube and Instagram classes is just this name this YouTube and Instagram and actually this name which is this YouTube or the Instagram actually we are getting it from this Keys mapping because the key is actually YouTube and Instagram right and if you don't believe it let me search for GitHub and I will get only one icon if I copy this and paste it over here you will see the GitHub link is also uh icon is also same we just have this GitHub at the end and we have YouTube at the end for YouTube and Instagram at the end of for YouTube so what I will do here is instead of rendering this key I will render this itag over here but I will say first of all the class should be class name and I will add curly brackets over here because I want to run some conditions in order to change this class name and concatenate it so what I will do is I will remove this YouTube from end and I will just leave this fi fi- Brands Dash and actually remove this brands also and just leave this fi with a space and then just say space and let me just add a space over here so that you can see it clearly so after the space what I will do I will run a condition and that condition will basically check if key is not equals to website because if if key is equals to website then this format will not run because you can't say Brands D website because that does not uh make sense so uh we can only have this format for the Social Links like the YouTube Instagram Facebook or kup so I will remove the website key for now and I will say that if uh the key is Not website then in that case what you have to return is you have to return fi Brands which is this and I will add Dash and I will then add plus to concatenate it with the key that I getting from this Loop like this right and actually let me disable my word drop so that you can see this class name in one line so what I'm doing is first I am concatenating I am having this fi class over here and then I'm checking for a condition whether or not the key is website so if the key is Not website I'm returning this fi- Brands which will get con enate after this fi and it will concatenate with this key which will be like YouTube Instagram Facebook GitHub or anything and we will add a else blog which means if we don't have this uh website like if the key is website in that case what I will do is I will search for website over here to uh get a one website link let me have this one actually or let me find some other else let me use this icon yeah this one so let me just copy this actually not copy the whole just copy this fi- R globe and just paste that over here so if I have a website key then this uh class will get attach to this uh I thing uh I component otherwise it will attach this fi- brand D the key itself so if I save this now and it is giving me error because I have these three eyes over here so if I remove this now you will see instead of getting the YouTube or uh the Instagram text I got the icons which is this icon over here YouTube for YouTube and the insta for Instagram and GitHub for GitHub icon now I think I should style this icon as well so what I will do is after this condition I will add plus to concatenate some other classes and the classes that I want to concatenate is text to Excel for uh 2 Excel text size and I will say when we hover over the text uh um the icon should change its color to text black and if I save it now you can see this is how it is looking and if I click uh Tak Mouse over the icon the color is changing to uh black color and yeah now it is good now let's test whether or not this website condition is working correctly so let me just quickly go over here and let me say hdps and let me give example.com anything and let me update ated so now I have this website link also in my uh data so if I just refresh it I should see yeah you can see for these three I got the same uh key with this fi Brands the key and for the website I got this fi- r- globe icon which means everything is working correctly so after this actually I'm now let me enable uh the word repap because uh we are done with the social link so now we can move on to other thing that is the join at paragraph so I will add a paragraph over here and this will basically will display the join de time stamp so uh what I will do here is I will say get full day and I will run this function and actually you can't run this function like this you have to make a c and you will say get full day and inside this function I will pass join at time stamp so basically we don't have this get full day so let me just copy this name and go to date. GSX and remember this date. GSX are is handling all of the time stamp and date related functionality so I only have get day function over here but I need one more function over here which will be get full day which will take Tim stamp as a parameter and it will again uh make a date new date class from that timestamp like we did for the get day over here and what I want to return from this get full day is I want to return the date the month and the full year of the joining date so I will just return date. get date to get the date of the joining and then I will add space Dollar in the curly bracket I will say get not get I have to get the money month right so let me just copy this from the C and I can paste it over here so it will give me the month and then I will add plus a space and in the dollar uh value bracket I can say date. get full year and now if I uh call this method and save it now I have this get F day now to use this F day in external files I need to export this so export this and now import this function in this about user over here so just add import get full day from the date and now if I just save it now you will see that I got a text saying 25 September 2023 which means this is the date when this user joined the blogging website uh this website so now let's give it some classes let's set its text size to text Xcel and let's say leading seven to make its line height little bit tighter and set its color to text dark gray and just save it and actually I will add a text over here saying join on Space get F day so if I save it uh this is how it looks and with this these three things are about user so uh these three things I won't show in the mobile screens I want to show this on the medium screen so I will do the same thing again I will just add the class name back with the max medium hidden class so if I save this now you won't see the user about using over here because I'm on the mobile screens so if I expand my window now you will see that say on the medium screens I got the profile image edit profile button and the about user over here so now let's work on the blog section so that we can load the users blog before creating the blog UI we have to do the same thing we have to create a blog state where we can store the block data and then we have to make request to the server in order to get the block data and update the state and once we have the blog uh once we have blogs in our data or the state then we will render them over here so before that so let's make a state of blocks I will say blocks and the set function will be set blogs and just set it equals to use State hook and by default they will be of null value like this and what I want to do is just make a function over here which we will call get blog actually we will call get blocks like this and this get blocks will take an object as a parameter which will have a key page and by default the page will be one because I want to add paging over here we will do the same thing that we did earlier for the homepage or the search page so I will add the page equal one by default and then I will have another key which will be user ID because now I will make a request to the search blogs and I will send user ID instead of sending the tag or query in order to get the blogs written only by this user ID and the user ID I can get from this user so whenever I get the user before setting it in the profile State I can call this get Block function where I can pass this user ID and then I will be able to make request so what I will do here inside this function I will say that user idore is equals to if I have this user ID which means if I have passed this user ID while calling this get Block in that case I won't do anything well actually I will say this equals to undefined which means if I haven't passed this user ID when calling this get blog which means I already have this in my blog state in that case I will just say that take uh the blog State and from there take the user ID and if the BL user ID do exist which means I have passed the user ID while calling the cat Block in that case I will say you uh can be equals to the user ID itself so what I'm doing is basically for now uh when you call it for the first time you have to provide the user ID uh from this function right over here and then this statement will just set this user ID equals to whatever you user ID you have provided and once you get the data from the back end while formatting the data and converting the data structure into the object with the results key and the total docs key we will add one more key to that which will be the user ID key which will store the user ID of the currently fed user so that we don't have to pass this get Block every time because remember to load more blocks we have to call load more button and that uh we have to specify then that these parameters you have to pass in the function every time you have to call and we have didn't set up date like that so we can't pass any parameter value with this with that so we should have to give this condition over here so after this just make a exos request which will be post request and let's make a request so add the Local Host toot over here so it will be import. meta do and. weor server _ domain and the rout will be/ search blog and the data I want to send is autho with the user ID and I want to send the Page information so once I have uh made the request once I get the response I will catch that using 10 blog and I will make it a synchronous call back and here I will destructure the data like this and and I will call this as synchronous function let me correct this spelling as synon okay inside it now I have to format the data that I received from the front end back end and this is the same thing that we did for search blog and homepage so I think now you uh know what I'm doing so I will make a variable say formed data let Set equals to A wait and let's let's call filter page ination data and while calling this function I need to pass some Valu so I will say state is blogs and the data that I want to add is the data itself actually the blogs from the data and I want to send uh set page equal page and the count rout that I will uh give for this it will be slash search SL Dash blogs count in order to count the total documents and I want to send this data to send I have to Define what data I have to send to this count route in order to count the total document so the data I want to send will be an object and it will have author key which will be equals to user ID so if I save it now I will get the formatted data and once I got the formated data what I will do is I will save format data do user ID so that I can set one more key inside this formated data which will be equals to this user ID that I got from uh this parameter so now then I don't need this user ID again and again and now I can just call set blocks function in order to set this for metod data and if I save you won't see any changes because we have created this but we are not calling it so let me just copy it and what I can do is when uh I am over here in the Dan block the fetch URL so where I'm setting the profile State what I will do I will just call this get blocks function and I will pass here uh the profile uh the user ID so I will say user ID key will be user doore ID because this user refers to this data and this data has this underscore do ID key so you can't have to say do ID because this user is the object and it has this underscore ID key and this user uh underscore ID is just the name of that key so just save that and uh even if I save it I will see some errors let's see am I getting any error okay I didn't got any error but this won't work because I am making request to search blogs count and search blogs but our search blog route is not accepting this author because it does not know what to do with this author key it it only knows the tag and the query key so let's change that so let me close this request. WR and user and response and let's work on the search blog so over here what I will do is I will add another else if and I will say else if I have author in that case I want to change the find query equals to and before accessing the author make sure you you destructure it from the body like this and let's change the find query of the author so if I have any author in the request body then I will say the find query will be author equal author so you can just remove the colum and the draft would be false because I want the publish blocks only so just copy this condition and actually paste it inside this search block count so that the block count will also work fine and actually add me this uh author over here as well to destructure it from the body so if I save it now and over over here let me uh console.log the formatted data over here so if I expand my window and open the console and refresh now I should see blogs over here now you can see now in the results I got results and in the results I have these two because I'm using this uh search blog which has a limit of two that's why I'm getting two even though this user has written 12 blocks from which two blocks are drafts so over here I got the these two things and in the user ID I got the ID of this currently uh user current user so which means I got the uh block data now I just have to render it so now just remove the console log and let's just work on the UI so after the dev which is this main day which is this whole section so after this div let's make another div let's give it a class name maximum uh width to be maximum medium and the width I will say margin top to be 12 so maximum medium which means tail mediums spe the margin top would be of 12 units and then I would save it to be full like this and inside this div I will create the blogs in page navigation so I will say in in page navigation and this will export the in page navigation component as well so inside over here what I can do is I can go to my homepage because uh that is also uh getting rendering the blog data from the blog state so we just have to do the same thing so just go to the homepage so that I can copy this in page navigation from here and paste it in the profile page like this okay now we have to style this a little bit so actually let me intend it properly like this over here now in The Roots uh let's change the past state to blocks published and instead of saying trending blocks as a second tab I will say about and by default I will hide the about which means this about will only be visible in the smaller screens but it will be hidden in the medium or the larger screens then I will say if plog is equals to null then uh render the loader if that is not a case then I will check for blogs. result. length so if we have any sort of length then I will render this with a block postcard and it is giving me error because I don't have access to the uh I haven't imported that so just import block postcard over here and then the error will go go and then I have this no data message and also I don't have uh I haven't imported yet so let me import this as well no data message then uh we are having error on this load mode data so let's import that as well over here and after that I am uh setting this fetch data function with this condition so actually remove this condition because I don't need this condition over here instead what I will pass here in the fesh data function will be the get blocks function because remember this get Block function is defined over here which which is basically making request to the search blog passing this author ID in order to uh get the blog uh from uh the blogs written by the author and instead of rendering the trending blog as a second uh element or second children what I will render over here is about user card and over here I will just pass about information which is like the bio will be equals to bio and the Social Links will be equals to social links and uh the join that will be equals to the join at but now this time I won't give the class name over here because remember if I give the class name over here uh I have given the class name over here to hide it from uh the smaller screens but I don't want to hide this from smaller screens right so now you will see that I got two blogs and it is giving me load more option because I have written 10 public I have published 10 blocks from this account so if I click on load more you will see after these I got two two more blogs written by this author and if I click on the about I will see about information which is just stating the nothing to read here which is the bio and the Social Links and the join inate and if I expand my web view you will see that the blogs are coming on the left side with the load more option because I have 10 and it is currently uh loading five so I four so I can click on load more to load uh 2x more blogs and on the right side I have my uh profile information with be about okay so we are actually done with our profile page but we have to fix those two or three issues and I think we need to give some classes to this profile image uh profile not profile image this profile section so that we can have a border on the left side and some space over here so let's give some Styles over here and then we will see what are these issues that we need to fix so let me go over here and this is the div which is containing the image the profile name and the about user so just over here after uh the minimum width 250 pixels we can give some more uh classes like on the medium screen the width will be of 50% and I can say on the medium screens the padding from left will be eight units and on the medium screens the Border will be left and the Border color will be border gray and I will say on the medium screen it will be of stricky size and I will see on the medium screen screen the top would be 100 pixels and on the medium screens the padding from y direction will be 10 units so if I save this now now you will see a spacing over here with the border on the left side that the website reload now you'll see now this look much better and now what are the issues that I'm talking about so first of all now you uh see that I am on the Kunal profile where I have loaded this blog and I have loaded the profile information but if I go back you will see I'm on the John profile uh profile but there is a issue and that is I am getting the blogs written by the Kunal author because you are seeing that I am uh getting this Kunal in the uh information of this block card so how can I remove it first of all uh where I'm resetting it uh here where I'm resetting the states I have to reset the blog St State as well so I have to say set blogs and I have to reset it back to nut so by that if I go to this Kunal and if I come back you will see Let me refresh it so now in the John's page I don't have any block if I go to konal user profile I will have two block and if I come back you will see still I have these two blocks over here which means the block status not resetting and actually we will not reset the block State and we will do something different because even though I'm setting the blocks to null you will see that the issue is not resolved so instead of giving the set blocks over here to null what I will do is I will introduce a new state over here so let me make another state and I will call the state profile loaded which will just contain the information of what profile it is currently loading uh on the page currently loaded on the page so what I will do is I will make a set function for this profile uh set profile loaded and by default I will set it equals to use State and by default not context it should be use State and by default I will set it equals to nothing actually it will be an empty string so I can pass an empty string over here like this now once I F the user from the profile uh database what I will do while setting the profile uh State I will set the profile loaded State also and here I will just say the username actually not usern name we have to say profile ID and this profile ID is the uh parameter that we are getting from the uh what do you call the address part so uh This Way whenever I'm uh getting the data from the back end about the pro user I'm just setting it equals to the profile loaded state so that I know that currently this username is loaded now what I will do is I will first of all in the reset State I will reset that uh profile loaded as well to back to the string and in the use effect what I will do is whenever this blog ID changes this will run this use effect right so over here I will say if the profile ID right now which means the profile ID that is I'm currently in is not equals to the loaded profile which means if the profile loaded which means what uh information we are uh showing is not equals to the uh profile ID that we are on in that case what I will do is I will remove the blocks and I will say set blocks to null to remove the blocks and then if uh here I will say if blogs is equal equals to null which means if blogs is not uh does not exist if block state is empty in that case I will call this reset State and fetch user profile otherwise I won't call This And I also will add comma blocks over here so whenever the blocks changes I will uh call these two functions uh uh these two conditions so just save this and this will resolve the issue so now currently I'm on the John's page that is reload now you can see I am getting the John's user information and if I go to my profile you will see that I got my profile with the blocks I have written and if I go back now now you will see that now it again make a request in the back end and got no blocks that's why it is showing me no blocks published and now the issue is resolved so now one more thing that we have to fix is if I go over here and just after John let me type any random string well this is a valid string that we will going to check in the database for the user and if I press enter well this does not exist in the database so now I am getting a blank page but what I want is if I don't have the user in the database that then I want to redirect the user to 404 page or actually I want to render the 404 page so how can I do that for that what I will do is I will first collapse this section and I will add one more condition or below this and that condition will be profile uncore username do length which means I am checking for the profile username do length but remember if I am getting uh if I don't have that user in the database it will just be equals to null and from null I won't be able to check the length in that case I won't be render uh go inside this condition so I won't render this so if actually let me correct it again so let's add a else blog which means if we have a username uh inide our project then we will render this and if I don't have any username after making request to the database then what I will do I will render the page not found and this page not found will render the 404 page so if I reload the page and this does not exist Let me refresh and actually it is giving me error and it is saying personal info profile of as it is null yeah actually it is giving me null so what I will do over here is I will say set profile user only if user is not equals to n so I will add a condition over here saying if user is not equals to null then set the profile to user otherwise don't update the profile we will just have this empty data structure and uh uh we will just uh remove the loading animation by just setting the loading state to false and now if I come over here you will see since this user does not exist it will take some time and since this user does not exist I got this 404 page not found but if I click over here and go to my profile I will at my profile because this Kunal username does exist in the database and if I try to go some random user profile page you will see that I got this page not found so with this so that's it for today we worked on lot of things today we made fully working homepage and search page we made Dynamic roots for user profile and search page and worked on profile page and we've made a 404 page for invalid Roots as well so with this part done we have actually halfway done with our website in next part we will learn to make PL page with blog interactions like and comment part and then we will work on dashboard in order to manage the blogs or notification we also have to make setting Pages where user can update their profile and change login password so with that if you haven't subscribed the channel yet to that and it's a big motivation for me in making these videos also if you like this video give it a big thumbs up if you have any doubt feel free to comment I will be glad to answer them thanks for watching keep learning and see you next time