Build & Deploy Full Stack Next.Js Online Grocery React App Store | React, Strapi, Tailwindcss

hey there and welcome back to tub guruji Channel today in this particular video we are going to build an online grocery store application with the help of nextjs and react and this application we are going to build completely from the scratch let's walk through the application first and then we'll talk about the Technologies which we are going to use to build this application so if you see on on the screen we have this beautiful header section and this is the landing page of our application on the um heading section we have this category section where user can uh jump on any category okay uh depends on the uh selection of the user Choice then we have this beautiful search bar here we have this cut option and then you have the login button where user can login to our application so this login system asual we are going to build completely from the scratch okay then we have this beautiful slider okay now all of this UI and everything for that one we are going to use telin CSS and Shad CN UI library now if you scroll down we have this beautiful category section and if you see how beautifully we animate each of the category then we have the popular products and you will see how clean design the UI we build with the help of twiin CSS so guys if you are new to the nextjs if you are new to the react or T CSS don't worry because in this particular course everything we are going to build from the scratch now each of this category option to add into the card okay now if you click on the add to card you will see the uh the details of the products okay along with the quantity even you can add or increase this quantity as well and you boom if you see the price also get calculated depends on your selection okay you can decrease the size or you can increase it now you have option to add into the cart as well if you try to add into the cart without login our application will Reed you to the signin page if you don't have an account you can create a new account okay so for that one to store our all of our data we are going to use a strappy CMS if you are new to the strappy CMS don't worry because everything from creating the strappy project or setting up the strappy project everything thing we going to learn in this video okay so strappy is completely free to use and uh you have fully control and you can customize whatever you need on this trpy CMS as well now let go to and click sign in and we'll sign into our application okay so I will enter the username and password so I will have email and then I will enter the password as well and once you sign in you will see that beautiful toast messes at the bottom that you sign in successful and boom you will see that login button is no more on the header bar okay because you already log to our application now you'll see the card is empty currently okay now if I try to add any of the item let's add this item you can select the quantity click add to card and boom it's added to our cart okay and now if I go back to our cart see you will see the count okay without refreshing our application you will see the card get updated okay let's add couple of more item so let's add uh this item let's add three quantity let's add to card and boom see let's add this mango as well and it's getting added now you can click on this card wow so cool right you got this side sheet and here you will see all the cart item or card sorry item which you added into your card along with the image along with the name of the product how many quantity you added and the total for each of these particular items so cool right now if you think you don't want this item anymore you can just click delete and if you see the item get removed you will get this beautiful toour message and from the card also the item will get removed not only that but your subtotal also get updated immediately as soon as you rem remove or add an item to your card okay now you can go into any of this particular category just click on any of this category and you will go to that particular one if you want to click on vegetables see how beautifully it changed right now one more thing I want to tell you here this particular uh UI is completely responsive friendly okay so depends on your screen size it will change the layout okay if I go to this home screen see now if I change this one the if I change the size see how beautifully it's changed their layout okay and depends on the screen size it's completely a mobile respon you as well now if I go to the card and click check out okay you will beautifully land on this uh checkout page where you can enter the billing information you will see the total card the delivery charge the tax everything get calculated automatically okay now uh we integrated the Paypal payment Gateway okay and I'm I'm going to tell you a easiest way to integrate PayPal and you will not find any video like that okay so within a couple of lines we want to integrate the Paypal payment Gateway now enter some information over here and we'll add some email We'll add phone I will skip the phone we'll add the ZIP code okay and the address as well and if you see as soon as I enter all the information then then only this button get enabled if I click on this button right you will see that you can login with the PayPal or you can pay with the debit or credit card here you have can fill all the details here you will see the amount and here if you see the total amount exactly everything is matching right perfect now obviously I'm not going to add the card but you can go ahead and uh try this out not only this one but you have option over here to go to the profile my order you can even log out from the application now if I go to this my order here you will see the previous order okay which I already uh placed the order and if you see the status when I create the order the total amount of the order but wait if I click on this one boom you will see the all the order details all the item which you added along with the item each of the item price the quantity and the total price of the item as well and everything total of that particular order you will see over here okay and as I told you all this application we are going to build completely from the scratch and we are going to build completely responsive the stripy CMS we are going to use to manage our all of our content here we going to store all of our data all the category we are going to add all the orders you will see over here you will see how can we add the all the products everything we going to learn in this particular video this video going to be interesting one and if you really like this video press like button watch the complete video and uh share this video with your friends if you did not subscribe to my Channel please do subscribe and without doing any further delay let's begin to develop this beautiful application so next J is one of the best react framework for the web application and if you go to this nj.org this is the official on website for the nextjs nextjs is uh very rich uh when it comes to routing okay because nextjs is taking care of lot of uh things you don't need to do a uh manual configuration so um in order to create app this is the command in order to create and nextjs application so go to your project uh folder where you want to create a project open the terminal at that folder and then just type npx create next app at latest at latest means it will create a latest version of the nextjs application click enter and then it will ask you to proceed say yes and then you have to give the project name so in this case I'm going to give grocery or we can say online grocery store online grocery store click enter now it will ask you do you want to use typescript so in this case we are going to use uh ja JavaScript so I will say no to this one the es L say no the will you like to use telin CSS so obviously we are going to telin CSS so once you say yes while um creating this project NJ automatically install the T CSS for us then will you like to use Source directory say no uh for app router we want it so yes and for allies as a star at theate say no and now if you see here it installing the react react and nextjs as our dependency this is are the default dependency and some de dependency for the tailin CSS so if you see right now is getting installed we'll wait for a second and now if you see our project is get created okay now close this window and then go to the vs code locate the folder so I will open this folder and then online grocery store let's open that one say yes trust the author and if you see on the left hand side we have this project and all the files and the folders okay so on the left hand side we have this app folder where inside that we have global. CSS which include all the CSS which is applied globally for our application then we have layout. Js file uh which is uh contains a metadata and if you see we have defined the children inside the body so whatever the page you are going to render it will render to the uh to through these childrens okay then we have the page. jsx which is our default page okay when you open the URL right or default page will be this page.js file after that we have this node module obviously we are not going to touch uh throughout this course the these are the uh dependency which we install okay all these files uh inside this node models then inside the public folder whatever the image font assets we are going to keep inside this public folder so once you define it you can directly use it without giving a complete path okay so once we start developing our application you will get to know much better then we have this next. config MGS file which help us to uh configure related to the next application okay obviously we are going to use a couple of times this one okay and you will get to know how and uh why we need to configure the ne uh inside this ne. config MGS file then we have this package.json file which contain the uh name of the application the version the script to run the application or to build the application some of the D dependency and the dependency which is default okay and inside the package lock. Json which help us to maintain the SP install uh dependency specific version okay so even though you are in different different environment so package lockon will help us to maintain this dependency versions throughout the different different environment then we have this post CSS which is related to the tailn CSS configuration and if you see these are the uh tailn CSS uh content where you can Define the path where you want to apply the tailin CSS okay so let's run this application first so here if you see we have option called terminal click new terminal and it will open this terminal at the bottom just type npm run or you can say da click install and sorry run and if you see uh it open our application on this particular URL with the port 3,000 okay so open this one and boom now it will take a couple of second to build it and you will see the default page will look like this okay now let me bring our code and this uh application running application side by side so as I say in the beginning that page. jss which is our starting point and which is our default page okay so whatever you code you see inside this page.js uh that is what is rendering here okay if I change this for example get started by tube guruji and if I save this one you will see the change immediately see over here okay so right now what I will do I will just clean this out and I will just put the empty du tag okay and here I'm going to write uh some T for example subscribe to tube guruji okay if you did not subscribe to my Channel please do subscribe and you will see the text subscribe to tube guruji right now this are the line is coming because inside the global. CSS inside this root class we Define this particular background start and end color okay now if I remove this one you will see the change now our color is completely white okay perfect so right now the next thing we want to add is uh the Shaden UI okay so Shad CN is one of the popular Library okay based on telin CSS and it has a lot of predefined component that we can use it while developing our application okay so let me go through go through it okay so if you see these are some example okay the dashboard or the card I don't know why it's yeah let me refresh it so you will see a different different cards you will see some playground mean these are some example but inside the component you will see a bunch of different component for example if I go to this button component you will see the example and how to use it how to install this particular component okay so first thing uh obviously we need to integrate this shat inside the nextjs so let's go to this installation section here you have to select the framework so in this case is our is ours is nextjs click on that one as we already created the project so we'll skip this step now in order to install you have to copy this particular line of command okay which is saying the install the sh if which initialize the shat so open the new terminal and then paste it this command okay now once you paste it right it will ask you do you want to use which style okay so shm Pro default and New York there's not much difference so I will select the default one now the base color which base color do you want so I will select the neutral and it's saying do you want to use CSS variable for the colors so say yes and then it will install dependence dependency and boom it's ready now once you install this dependency you will see there are two folder get added outside of this app folder one is a components and another is a la okay which stand for Library so inside the component right now if you see it's completely empty because we did not add any component right but inside the LI it contain the package okay obviously we are not going to touch any time but these are the components folder where once we install any components it will get added here let's test it out so if I want to install this um button component right say go to the button you will see the example how to use it you can check the code okay and in order to install it here is the command to install this button so go here go to your vs code terminal and then paste it here like this okay okay once it installed you will see inside the component folder we have one one new folder called UI and inside that we have this button. jsx okay now these are the default code which is already there okay obviously if you want to customize it you can do that but right now we are not going to touch as I say and let's add a new button over here so we'll say button okay and if you see as soon as I type I'm getting this uh suggestion okay and obviously this button is getting imported from this component / ui/ button and import it and then save it now if I go back to our application you will see the button over here see but right now we did not give any text so let's give some um button name so here we'll say subscribe and then save it and if you see the text button text is showing on the screen now as I say right you don't need to add this padding add this margin change the color to background color to some other color and like blah blah blah okay as we use this stat UI component it automatically add the um button components for us okay next important thing that I want to tell you that right now as soon as I added this button right the back the color is a neutral color and obviously that's a black in the background right and if you want to change a primary color okay if I go to the T.C config.js you will see a bunch of change thist extended colors uh CSS get added over here okay and this is added when you install the Shad CN UI okay so that's time uh this all this line of code is get added so here I'm going to change this primary color right now the primary color is kind of black so here I will change this primary default color to something like greenish so here I'm going to change this okay and 5 T this will be the primary color I'm going to keep if I go back to our application you will see the change immediately okay so our button is kind of now green color okay and every time when I create a default um comp add Shan component the default color will be like this whatever we added here okay and one last important thing I want to tell here right now the font you see is a default uh font and if you want to change the font for your application let's go to this underscore sorry the layout. JS file where you have this constant enter font okay this is nothing but a font and if you see it is importing from the next SL font SLG gooogle okay now if you want to know how the font will look like and which font to select you can go to this Google font okay and whatever the font you like on this one you can just select that font okay take the name for example in this case I want to use this outfit font okay and if you see this is the outfit font that I want to use for our application so what I'm going to do here obviously you can put the both the font but I will remove this one and if I type outfit you will see the outfit font is get uh getting the suggestion and you can add that one now obviously here you can change it I will change this name doesn't matter if you want to change you can okay and here I will say the outfit okay and then save it and then immediately you will see the font style is changed and it's not only for this one but is change for all the application so cool right so at one line of change you will you can change your font for your application and before moving to the next section the last point I want to tell here that uh we have to add two important extension which is very important while developing the uh any react application so one is this es7 plus react Redux nipet tool I will say and install this this is very important button okay and this will help us to Auto uh add the uh template for us okay I will get I will show you how to do it and the another important one is to add this telin CSS intell sense which will give you the suggestion while you typing the tailin CSS classes okay now let's add a header for our application so in order to add a header right uh I'm going to create a new folder inside this app folder okay but I'm going to create a new uh folder with the name starting with the underscore and then I'm going to give the name called components the reason is whenever you create a folder with a folder name okay and when uh this inside the nextjs will consider as a new route okay obviously um you might be confused for now but once with move forward in this particular course you will get to know much better okay but you in order to avoid the route okay you can start your folder name with the underscore components okay so over here once you define that inside this F particular folder I'm going to add a new file called h. jsx now this uh whatever the component we are going to use for the home screen or for this particular page I will put it inside this particular folder now over here in order to add a template right you have to write all this export function function name all of these thing right but as I told you in the last chapter that you can uh use that uh vs code extension right in order to add the template just need to type RFC which is stand for react functional export component just click enter and boom your auto template for this particular um component is ready right now once you save this one let's go to the space. JS file okay where you can add it but we will add it inside the layout. CH because we want this particular uh header throughout the application right so just keep it here as a header and if you see it's importing from the _ component and then save it okay if I go back to our application you will see okay let me refresh once you will see the header over here okay let me clean this out this page.js I will remove this code we say just home okay now let's go to the hiter let me close this one and uh here first thing we need to add an image okay the logo of our application so uh inside the public folder I already added uh this logo.png file okay uh if you want all all of this as it then the link of this particular uh source code is in the description you can check it out now once you uh go here in order to add a image you can add image and this image tag is importing from the next SL image for this image you have to give the source property and then the file name so you can directly access using slash logo.png right so obviously once you define like this the nextjs will automatically go to this public folder then you can give the alt tag we'll say logo we'll give the width so depends on your requirement you can give the uh width so here I will give the WID of 17 maybe 150 pixel o sorry and then I will give a height of 100 okay and then save it and if you see the logo is showing on the screen so beautiful right perfect next thing I want to show the category drop- down okay so for that one uh let's wrap this de s wrap this all this image and all in one de inside that one I'm going to add a one de again and here we'll say to tag maybe and we'll say category like this okay see obviously uh I want to add icon as well okay so you can get this icon if you see once I type for example align layout something like this right you will see this importing from the Lucid react so Lucid react is a very rich uh icon Library okay if I go to this Lucid you'll find this Library it is already installed in our project when you install the S SC right along with that this Lucid also get installed and here you will see a bunch of different option right for example if I type something like layout and if I want this kind of layout called layout grid right you can just type in your application for example if I say layout layout grid and if you see is importing from the Lucid react and then save it let's save and let's go back to our application and you will see this icon over here okay now let's bring this icon in one line so we'll say class name make it flex and then we'll go Gap of two something like this see if you want to change the icon height you can just give height of five width of five see okay make this item to be in the center so it will be in the one line perfect now uh let's give some style uh to this de only okay so here we'll give a style for example uh let's say you want to give a border okay then you can give the rounded to be full obviously you can add the padding of maybe we can add a padding of two padding X to 10 something like this okay and uh let's let's uh add some background color as well so we'll add a back background slate 200 okay and I want to bring in one line okay after grocery store so for that one you if you remove this du that's fine because we already attach everything to this S2 tag only and for this du let me put everything in one line yeah you can add a class name and here we'll say Flex okay once you f say Flex it will come in one line like this okay then we'll make item to be in the center and we'll give gap of maybe let's give eight see like this okay if I increase the size this is how it looks okay after that one uh we need to add a search bar okay so for that one I will add a du and for this du let's add a input okay sorry first We'll add the search icon so just type search you will see get the icon and then we'll add a input tag let's add a simp simple input tag of type text oops then we'll say a placeholder called search and done okay let's bring everything in one line so class name to flex gap of three and uh item to be in the center We'll add a border and rounded corner to be full obviously We'll add padding of two sa okay and our search bar is also ready uh let's give some margin x25 okay and if you see our beautiful search bar if you see this outline when I click on this one it's showing this outline so let's remove that ugly outline so we'll say okay that's outline for the input so here I will add a class name we'll say outline none okay and if you see now we don't have outline now here is one important thing whenever the screen size is smaller I want to hide this category and the search bar okay or we can keep this category obviously but let's hide this search bar okay so it's very easy for this du you can just say hidden okay if you hidden it will go away okay but when the screen size is medium you can just mark it as a flex see it's there right just mark it as a flex so Flex is applicable only when the screen size is medium if I save this one and if I increase the size you will see the search bar okay now obviously all of this content is touching to our uh side browser okay so let's give some padding so for this particular du add a class name we'll give a padding of maybe let's say five and let's see how it looks yeah and let's go shadow of medium and you will see the beautiful Shadow and this is how our header is about trade about not completely but about okay and now on the right hand side I'm going to give a button one for the login and sign up and another icon for the card items okay so let's go here and after this du because we have this du right after this du I'm going to add DE and here I'm going to add a button okay and if you this if you see this button I'm adding from this component and we'll say login okay if you see this button is came down and before that one I'm going to add um cart I don't know it's called shopping cart I think okay see shopping bag we can add okay and then uh here we'll say a text called S2 and say zero and shopping bag I will add inside this S2 that will be good actually like this okay just for this one let's make Flex gap of two it's the item to be in the center okay and if you think you can change the font to large perfect now bring everything in one line okay so it will come on the right hand side but before that let's bring these two item on one line so we say for this do as a flex gap of five like this okay make sure to is vertical to be Center so item to be in the center and now for this de let make it as a flex okay and if I increase the size so right now this is how it looks obviously we want these two item on the right hand side so you can just Mark here as a justify between like this and save it and boom this is how it looks correct so cool right now if you think this border line or Shadow is too much you can change to maybe small and when you you change this to small this is how it will look like and if you see on the smaller screen it's showing the category the login and it will hide the search bar okay now if you think let me go to the inspect panel okay and if I go to the this mobile view right you'll see this mobile view look like this Let me refresh once okay so ugly right so in that case you can remove this category item as well okay so what we can do let me close this one you can hide the category item as well well so here when the screen size is me medium we'll show it as a flex otherwise will hide it okay perfect so this is how beautifully we added this uh search bar but there are a couple of things we need to add first thing obviously once we add the authentication right and once user login we will show the user profile icon to this heer and on the click of this category we want to show a drop down so for that one let's go to Shad CN and here search for the drop- down menu I think yeah and this is how we want right so this drop down menu we want to use so first thing let's copy this command to install this component and inside the terminal let's go to the terminal and paste it here so it will get installed and this is very easy to use it okay let me show you now first thing you need to do to import this component so copy this paste it here here okay and then this is a simple example that how to use this drop down menu okay so if you carefully see here right this is the trigger point when when we say trigger when uh then when this click of this button or Open click on this open right this content will display on the screen so let me show you how so copy this drop down menu and then obviously we want on the click of this C h2 tag which is our category okay so let me put this below this H2 yeah over here oh this is search right uh let me see I confused where we added this so okay over here so we'll paste it here okay let me bring in everything in one line let's save it and you might see a text called open see if I click on this see how beautifully we get we got this drop down but we want to show this drop down on the click of this category and not open okay so what you need to do you just need to copy this S2 tag and then paste it inside this open okay now if I save this one you will increase size you will see this category and if I click on this one see you got this drop down menu so cool right perfect now obviously we don't have the category list yet obviously we'll get it from the back end but let me uh here we'll change the text called browse category browse category you can remove it if you want and here will be the our category name will be display okay once we have the category from the back end but for now I hope you understand one more important thing inside this drop down trigger component as we added this S2 tag here you have to mark it as a as a child okay so otherwise you will get a warning message or error message inside the console now if I refresh this one if I click on this category you will see okay just make sure to change this uh pointer to be cursor pointer so that's little bit easy so like this okay perfect and you have option to select this item as well now in the next section what we are going to do we are going to set up a strappy CS as our back end okay so that we can add a categories and then with the help of rest API we'll fetch it and then we'll displayed uh inside our dropdown for our application back in we are going to use strappy CMS strappy CMS is one of the best uh CMS in the market right now and which help us to manage our content okay and also it will generate the rest API and graph query as well uh so you don't need to do anything okay so with the help of strapy all of our content we will manage it okay also for authentication also we going to add strappy and there are lot of different feature where you can do it even though you can connect this strappy to uh any uh storage service like AWS Cloud to store our images and all so everything we going to learn in this particular course so first thing you need to do is go to this strappy doio and here you will find uh official website where this is the command to create a strappy application also uh inside the product we'll find a lot of different thing that their documentation is quite Rich okay and as I say um the strappy is the best CMS currently in the market so what we need to do let's copy this uh command go to your terminal so where you want to create a project so inside this particular folder I will open the terminal at that particular folder and then just paste it the command okay so if you see this this is is the command called npx create strappy app at the lat latest latest means it will uh install the latest version just I'm going to change the name of the project to let's say grocery admin and click enter now you want to proceed say yes and then it will install uh the dependency before that it will ask you for the installation type whether do you want a quick install install or custom install when we say the quick install so it will um use the SQL light as your database and you don't need to do any configuration for that one okay but in this case I'm going to use a manual settings or custom installation type because I want to use a post Grace SQL as my database if I select the custom it again give you the choice of selecting the language I will keep the JavaScript but here if here you see the type which is the SQL light post Grace and the MySQL so you can select any of them if you want to know how to use set up MySQL I have already some previous video where you can use the MySQL with the hostinger but it's a paid means you need to buy hostinger Services right uh if you have want to use a free service I will definitely suggest go with the post Grace okay and if you see once you select the post Grace you have to add the database name uh the password and lot of things right so this thing you will get it uh from some postra service provider okay so for that one uh we are going to use render because render is free to use okay and they also provide a post SQL and for the strappy deployment as well we can use the render okay so if you don't have an account on a render okay so create an account and let's go to the dashboard over here if you see I already have some Services is running right now but if you click on this new button here you will see different different Services here you have option called post Grace SQL click on this one and then you can give name so here I'm going to say grossy store okay we'll see online grocery store grocery store like this and then uh you can add the database name I'm going to say Crosser store the user you can add okay or if you did not specify they will generate randomly okay I will keep the database name and the username as the same then you can see the version uh you can select the nearest location uh which is near by you then you can have this API key I don't know okay don't need to add and here you will select the free service as a hobby project okay so obviously as I say you can also pay if you want more but if you are developing and if you doing a small business then I will definitely suggest this free service then just click uh that uh database but if you see it's got error that is saying this name Dash will not work let's try to add uh underscore and let's see and yeah so let's say create database so it's saying minimize database downtime with the high availability okay so here let's go to setting here we will say high availability as enable I don't know standby okay let's see let's do uh different thing so right now if you see uh the status is creating okay so we have to wait for that one and also the store is getting ready our post SQL is getting set okay but in meantime what we can do we can add this uh database name so let's go back to our terminal here we can add the database name then the host name so if you see this is the host name okay which you need to add but if I go to here and over here as well this is the host name it's little bit confusing so for the host name right this is the host name but this is only used for the internal use okay obviously we cannot use that one but if you go to this external database URL here you will find this particular host name okay which is the DPG and all of this until this point okay so copy this one so you have to copy after the ad theate and then let's go back to our terminal again and paste it here okay after that you have to provide the port number okay so let's go here and if you see this is the port number called 5432 so paste it here like this then you have to provide the username which is already there okay so if I see see this is the user name after that uh the next thing okay let me go enter and then we have to provide the password okay so password for this one right if you see this is the password you can view view it and just copy this one and then paste it okay and what else let's enter it see it's saying enable SSL connection I think we say no most of the time uh you don't need to but let's say no for now and then it will create a database for us okay it will check everything and then it will run out so we'll wait for this one in meantime if you see our database is ready the strateg is showing as available right now you are you have u 1 GB of storage which is a lot okay and everything is ready to use it uh so I don't know it's ready oh it's still installing so we'll wait I will pause the video and if you see our code is ready now okay so our project is ready now you can go to this project by opening vs code so what I will do I will open a new uh window uh from vs code and here I'm going to click open a folder over here just locate the uh project where you created and here this is admin panel and we'll open this one okay let's open it and over here you will see the bunch of things so inside the database or we don't have anything but inside the config we'll see database. JS so obviously we we are not using MySQL but if I go to the Post SQL right this is the configuration is here and inside the EnV file you will see the whatever the variable name we added uh it will displayed over here okay if you think something is not right you can change any time from here okay so easy and uh in order to run the strappy in the development mode you have to run this command called npm run develop so let's go here and just type npm run develop okay so it will run in development mode so we'll wait so here we got one error okay while running this one so it's saying there seem to be an expected error and this is error so it's saying that SSL T LS is required because we make it as a false so just for this uh database make it true save it and then rerun it again okay so I will just stop it and I will just clean this first and then I will run this npm devop command and boom if you see our project is running on the post localhost 1337 SL admin okay if I go to this particular uh link first obviously first time you are opening you have to register yourself okay so let's register yourself so I will put uh some information and I will P some password as well and then let's uh click on let's start okay once uh you are registered right you will automatically log to our dashboard and boom on the left hand side we have this type dashboard with the some many options here obviously this is the welcome board okay so you if you are new and you want to take a tour you can take this tour as well okay but obviously one by one uh we will learn through okay not everything at a time so main thing uh if you see if I go to this content type Builder right now uh this is the default content called user okay it has some information but if you want to create a new collection type okay when we say collection just consider it as a new table inside the database okay so let's create a new collection type and here we'll say a category and it automatically create an API ID for us and plural for us in advance setting you have some option here okay right now just click continue and here you can add options for example let's add a text and for this text let's uh if you want to add a name of the category right so you can write name you can add another option for example if you want to add an icon okay so let's go to the icon for that one obviously you want to upload the image so I will select the media and here I will simply say icon okay and what else you want to add you can add it here so for example I don't know whether do we have the slug name here uh I don't see and for the color prop because if you want to add a background color I will just add a simple text and we'll say color okay and let's say finish and if you see these three uh item get added inside our uh category collection now this uh item we can call it as a new column inside our table now if you click on the save let's say save right now what it will do it will actually create a database uh with all these three new column and obviously it will restart our stripi appc so we'll wait and if you see the new category get added now if I go to this content manager you will see the new collection type of category and here from uh this particular content manager section you can add a new entry let's say uh you want to add a fruits as a category right and here obviously you can add icon you can add a color and once you click save it will save that particular category and if I if you see here let's go back okay so right now you will see that c category get added but the status is is a draft mode okay obviously once you save it okay you have to make sure that you will publish it once you publish it then only it is live or available in our API okay so now this record is published and live now the question is how to access this particular uh AP uh this data from the API right so for that one let's go to the settings and inside the setting you will see the option called roles okay so inside this Ro option you have one is authenticated and one is public when uh the for authenticated it means that API request need authentication for the user okay that we also we want to see in this course but obviously category or to face the category display on the um home screen right you don't need authentication so let's go to the public and over here if I scroll down you will see the permiss tab where we have this category uh section okay because that's what we newly created now you can have option to create a category find and everything right obviously we will just uh add this option called find and find one that's the only permission we can give to the user okay and here you will see this is the end point of the categories okay now you can simply uh if I go to this Local Host 1337 okay/ API and you can just uh use this/ C for example if you want to find all right so this is the API endpoint I will just paste it here click enter and boom right now if you see oh we did not save it so make sure to save it so that's the reason we got this 403 error let's save it and now it's saved let's go here and refresh it and boom if you see we got a data with the ID and attribute which contain the name of our category color obviously we don't have and everything okay obviously we did not uh added any uh Media or icon or image so this is the media library where you can create a folder or you can add image in specific folder as well or you can add a new assets from here okay so if I browse any assets let's take on one example okay so I will upload this image okay select this image and let's say upload and you will see that image get uploaded if I click edit and you will see this link okay if I paste this link over here you will see the image But If You observe the link is start with 1337 and upload because it store locally along with the um this particular strappy backend okay now in order to connect your media with some other uh service provider or storage provider like cloud or AWS okay uh so you can that also you can connect okay so if I go to this Marketplace and just search for the option like Cloud okay which is very easy and free okay and let's go to this providers and here you will see this Cloud okay there are some couple of steps that you need to follow and then you can ready to use if you really want to know how to connect the cloud H I will definitely suggest go to my this particular video called Full stack appointment book booking app where I use a strappy and there I explain how to connect strappy with the cloud backend okay now let's go back to our application and in meantime okay I'm going to add some more category inside our category collection okay along with the icon and color so that we can f that in our uh application so guys I'm using this eraser. application for my documentation purpose and I also make a clone of this eraser. application the link is in the description you can go ahead and watch it this kind of application we you already built it okay but this er. application is quite helpful when I want to explain something okay and everything so if I go to this existing document which I already have so over here um you will see uh this diagram right over here let me explain how uh the strappy and our application is going to connect with each other so consider this is our application right and whatever whenever you want some data to fet right we will make a request okay to the strappy CMS then strapy CMS will get the data from the database okay so obviously right now we are using post Grace SQL and from that one he will get the data once the data is returned back to the stpy CMS we'll get the response over here okay uh to the application same thing we going to follow in while doing or integrating this trpms so right now uh inside the category as I say in the last chapter that I added some of the um category over here okay and along with that I also added some icon as well okay now if you really want to know where I got this icon so definitely go to this flat icon.com and over here you will find a bunch of different icon for free okay so you can use whatever the icon you want let's go back to our application and as I say uh inside the setting inside the roles okay and over here okay let me refresh the screen we have this authenticated and public as the category API should be public so go to the public and make sure that you selected this find and find one and then save it okay so this is the API endo and as I mentioned earlier okay and one more important thing before moving forward right right now as I we let's uh go here and say categories okay if you see we got the name okay obviously color we did not add it but who created and everything but okay but here is the um missing thing is icon the icon is not here okay the question is how to get this icon right so for that one one you have to write question mark populate is equal to Star and once you populate is equal to Star so whatever the item or whatever the field the called nested field is there inside your collection it will display so in this case if you see we have this icon and inside the icon we have this attributes and inside that we have the different format thumbnail and from the URL you'll get the URL okay so this is very important obviously all of these you will find on the strappy documentation if I go to the docs right and here you will find everything about the documentation for example let's search for the uh API right and if you see we have the uh documentation for the API rest API so if you see this is the particular field called populate and they also give the example how going to it works and all okay see okay so obviously when you stuck somewhere you always refer the stpy documentation so let's go back to our application and first thing we need to do is to install the HTTP client called exos so we'll just say npm I or me install exos okay if you don't know about the exos so exos is the HTTP uh client okay which help us to uh get the data from any API endpoint and it's very easy to use okay so that's the user we are using this uh exos so let's go back back again and once it install okay over here um inside the app folder I'm going to create a new folder and we can call it asore utils inside that one I'm going to create a new file called Global api. jsx inside This Global api. jsx first thing we need to create a exus client so we'll Define a constant ex client is equal to exos and if you see this exos is inputting from the exos dot create and inside that you have to provide the base URL so in this case the base URL is nothing but our API endpoint URL okay so this is the local 133 7/ API okay like this and once you define this exos client now you can create a endpoint called constant G category is equal to exos client or you can write like this exos client. gate and then over here you have to provide the API endpoint so in this case is categories okay obviously we Define the API SL API already inside our base URL so we'll just Define this slash category okay and then let's export this one so let's say export default get category and that's all so now once you export this one so that it available to use it throughout the application okay now let's go to the header where we want to show this category and inside the header we need to Define one method called constant get category list and over here we'll say Global API do get category okay and obviously this is a a um promise so we have to make do then response and just console the response okay now as we Define the get category list we need to call this method right so for that one we are going to use use effect as a react hook so use effect is a hook will execute for every instance right so obviously if I did not Define this empty array then it will execute infinite time okay but if I Define this empty array then it's only execute once once this component get load okay now over here I will say console do log and we'll just sorry not console or log my bad we have to call this method get category list so over here we'll just say get category list so what will happen when this component get load this use effect will go load only once or execute only once and then our get category list will get called okay now here I will say category list response and we'll just response it okay here I'm want to and let's see the result so let's go to our application Let me refresh once so right now we got error that use effect uh we use this use effect on the server side obviously we have to make this particular component as a client so we have to tell nextjs that okay this component is on client side so that's the reason you have to Define at the top as a use client and and once you define if you see the error is gone let's go to the inspect panel inside the console you will see the result and boom inside the object we have the data and inside data we again we have the list of object right so what we can do we can access our actual data or actual list of category using the response. data. data and now if I refresh this one now you'll see we got this respond data all this category list we got it here okay but one more important thing if you see right as I say that us effect will execute only once right but here uh user execute two times Okay the reason is uh there is a one configuration we have to make it okay which is called a restra mode so let's go here and go to this next. config MGS file okay so inside the next uh config here we have to just write react strict mode okay so if you see this nothing but the next runtime streak mode complaint and here you have to make it as a false okay and now if I go here let's clean out let's refresh it obviously you updated the next uh configuration file it takes time to load uh the application but if you see now the inside the result you got only once now obviously that API only call once okay and now we have the proper data perfect now what you need to do okay let me minimize this one inside the header we'll Define one state to store the data so constant category list comma set category list is equal to use State okay this is empty array obviously and then over here we use set category list response. data. data so what will happen with the help of the set category list we'll set the value and now inside this category list we have this data okay so this is a actual State now let if I if I remove this console let's save this one and obviously we need to iterate that value inside this uh drop- down menu content okay so over here we'll just say uh category list. map here we'll say category comma index and then is Arrow function okay and inside that I will just Define this category and obviously we don't want this one so I will delete it and inside the profile we need to show the category name okay so here we'll say h2 tag maybe and inside that we'll say category dotame okay but wait it's not simple as that because if you see the response right in inside the response we have the property called sorry field name called attributes and inside the attributes we have the name of the category right so in order to access that we have to category do attributes do name okay now you'll get the name let's save everything and let's go back and test this out so if I click category and boom you will see the list of category whatever the category you added inside your strap is CS okay now obviously I'm going to add much more thing into that one so let's add a image as well so we'll say image then source and inside that one you have to add category do attributes and just to uh show you that in order to add the icon obviously we are adding icon right so let me go back and over here inside the attributes if you see we don't have that icon because inside the API which we Define over here we have to add a populate is equal to Star okay and then only okay let me comment this out then only we'll get the list of all icons so if I go here okay let's ignore this error for now okay so if I go I don't know why we did not get the error let's go to the network tab okay we have this result oh we did not consol it but that's fine that's the is not showing but if you see in the preview right this API endpoint now inside the attribute we have the icon inside the icon we have data again attributes and then we have the URL see okay so just to show you that where this uh the actual URL we want to use so over here I will say attribute do icon do data. attributes. URL okay and you can just to make the question mark add optional means if the data is not there it will not throw an error now once you define this one let's define alt tag as a icon width you can give for example uh 23 height I will give 23 and let's save this one let's go back to the category and if you see this category is broken right now Okay the reason is the icon is just returning the path okay and if I go here if you see it just returning this particular value and not a complete URL okay and if I click on this one this is the URL we want obviously we need to attach this Local Host 1337 right so I will copy this uh base URL let's go create a new file in uh over here and we can call it as a env. local inside here I will then next underscore public underscore base backend we will say backend base URL backend base URL okay and then I will paste this URL okay let's say like this only now why the next public okay because if you want to use an any uh environment or variable right you uh on the client side then you have to provide this nextore public okay and then the name of underscore name of your variable let's save this one and I'll just copy this one and inside the header right over here we'll just add process. EnV dot this particular URL plus uh the remaining Ur path of your uh icon right let's save this one go back to your application Let me refresh spread sheet and wow we got another error right so it's saying that host name Local Host is not configured under the image in your next. config.js so here is thing whenever you are using a third party um images or any assets okay then that your domain name need to be configured under the next. config.js that is for the security purpose so let's go here and inside the next doc config JS file okay over here you have to Define images inside this images you have to Define domains and inside the domain you have to Define which domain you want to allow so in this case if I go here you can just copy this host name as a local host and I will just P put it here and then save it obviously we change the file so if you see here it will say that you change the file and it will restart your application let's refresh it now and now it's loaded if I refresh once if I go to category now it's still not showing it okay let me check why so go to the inspect panel go to the console so here if you see uh we the images or icons are broken so what you can do okay let's go back and here you have to mention unoptimized as a true the reason is we are using the locost image okay obviously once you deploy it you have to change this one and even though if you did not use the unoptimized it going to work so let's go back here and let's test this out and boom if you see how beautifully this icon is showing on the screen okay now just uh let me increase this size to 25 and over here I'm going to add a class name and for this one I'm going to add a flex we go a gap of two align item to be in the not item to be in the center and let's save it and let's test this out and I think that's look much better right if you think that you want to increase the size you can just change this one image size and one more important thing here I'm going to add cursor pointer okay so whenever I hover on this one you will see the cursor okay and I think everything's look good to me so if you think that you want to increase the text size you can go ahead and let add a class name text to be large and once Define the large that's good and if you think that to increase the size let's add a 30 and yeah now it's much better right only thing that I want to give more Gap yeah okay so guys I hope you understand how beautifully we implemented this category drop down and we Face the category from the database strap mean it means the strap is CMS with the help of their uh rest API and we display it on the screen if you have any question until this point let me know in the comment section now it's time to add a slider if you see on the screen for the home screen we are going to already add the header but after that one we are going to add slider category list the popular products and the footer Okay so if you see this is how our application will look like this is the header that we already added then obviously we will uh show a full width uh slider and after that we're going to show the category and so on okay so for that one uh inside this strappy dashboard I added a new collection type called slider inside that I added the name image and in numeration so it's kind of drop down okay it's you can select any one of the value from the drop down and for that one I already gave a True Value which is home and banner okay right now I'm not going to use but later on if you need it we can use it and for the slider collection type I added this three uh default value not default but we added this three uh images along with the name so may you have to make sure whenever you want to use this particular API okay in the inside the public you have to mark this slider as a select all or you can just say find okay because we only want to face the data and we will not allow user to delete or anything right now once you save this one as you know that we have the SL sliders as a API end point for this one okay so if I go to this find you will see this one now copy this let's go back to our application let me close all of this window and inside the global API so let me go to This utls Global API right here we're going to add this constant get sliders and exos client. gate slash oh we already have the API so we just need a SL sliders and we want to Fage images and all the data so I will write populate is equal to Star okay but here is thing right uh we going to use the server site rendering so I will also return the data so as this is a promise I will just return the response. data do data okay so we can directly use from here okay you don't need to again uh make a promise at your uh page.js file so once you made this one now inside the page right we just have the text here obviously we going to add a slider over here okay so for that one let's create a new component inside this component folder and we can call it as a sliders or just slider. jss add the default template save this one and let's import this template and save it okay now if I go back to our application Let me refresh once and you will see the text called slider okay but the problem is here as this is a server s side rendering okay we have to make this fun fun uh particular function as a sync okay so that you can say constant slider list is equal to await Global API okay dog sliders and that's all you don't need to do anything because this G slider uh Global api. gate slider will already make the promise and it will return the data uh through this gate slider okay and then inside the slider list we will get the slider list data now this slider list data we need to pass to this slider so we'll say slider list and slider list now here is thing right if you remember inside the header we call this and we store in in a one used State okay and to call this method we use use effect okay and for that one obviously we mark this as this particular component as a use client because we are telling that okay use this particular component on the client side correct but uh just for the information purpose or for uh learning purpose I make this component I I will I keep this component on the server side okay that's the reason I did not mark this component as a use client and directly we call this method and we store in the data and which data we are passing to this slider now make sure to get that data so we'll say slider list and here we need to render that one okay for the rendering purpose we need a slider okay so right now we got one error that slider await okay let me refresh once so let's check so this error is came because you are trying to access the locost from the server side and which is not acceptable so here if you see this is our base URL right here you have to just replace it with your IP V4 uh address okay which you can get it from the command uh and then save it now once you add that one let's refresh it and if you see the error is gone okay next we need to add the slider right and for that one we'll go to the Shad CN UI for this Shad CN UI component you will have one component called uh carosel okay which help us to give the slider kind of AP like this see and it's very easy to integrate first thing you need to in install or import this particular uh component so let's go ahead and install it so insert a new I will paste it here and then one in install you just need to import this uh statement so inside the slider component I will add this uh import statement and then we'll just add this corosal okay so if I add it here like this okay and save it and let's go back to our application to see it and if you see these are the three dot is coming up right obviously just a three dots nothing is display on the screen now what we are going to do I will remove this two and here we just iterate this slider list do map we'll say slider comma index and the arrow function okay and in that we'll add this CER item like this okay we'll give in key as index and inside this corer item I will Define the image because we want to show the slider which is image so here we'll add a source and to get the slider information the slider image which is inside the slider dot attributes do image do data Dot attributes. URL like this okay make it optional means uh once you add this question mark so it will be kind of optional and you will not get any error and we'll give width let's give a width of ,000 for now height I will give 400 all tag we say slider and we'll add a class name here we'll say with full let's say save this one let's see if I refresh this one right right now it's if you see it's broken because we did not Define the base URL so we have to access using process do EnV Dot and let me go to this EnV file so this is our base URL so we'll just add it here and plus sign let's save it and right now we we CAU one error that failed to pass undefined so it's getting undefined right one 337 so it look like this particular thing is not working correctly so it has attributes do image. data. attributes. URL it looks correct to me so inside the global API we by mistakely put this uh poate so it's supposed to be populate okay and now I don't know where this will work or not still wow still not working so after this um particular issue right that's because as I say early uh we need to change this Local Host base URL with a actual URL so so let's get it from this Global API which I copied there right so this particular domain we need to add okay instead of local because you we are using at the server slide so I will just paste it here like this let's save it and boom if you see we got the image okay now obviously uh uh for this particular image we going to give some styling so for this uh with full here I'm going to add a height of 400 or let's say 350 pixel let's say 400 pixel save it and let's see it now I think that's good here I'm going to add object uh cover okay and rounded I will make 2 Excel let's save this one perfect okay also uh inside the page.js file I'm going to give a padding so for this one I'm going to give a padding of 10 and this is how it looks okay we'll give a padding on the x-axis so this button will get visible so let's go here and we get padding X to maybe 60 okay and see now you can move this one see and our slider is ready okay it has a beautiful corner and everything looks perfect now obviously on the smaller screen right this is how it looks so you what you can do uh let's go to the slider and this height we will add when the screen size is medium for a smaller screen we'll just pick uh we will set the height 200 pixels see okay but as soon as I increase the size it will increase it see okay looks good also if you think the padding is little more on the smaller screen you can just change it here so this particular padding we can give for the 10 and for uh the small screen we will set the padding of five okay like this see and on the bigger screen it will look like this so guys um that's all for this particular slider section if you have any question any doubt let me know in the comment section now it's time to add a category list we already added the slider and the category list we will show in the form of grid so uh we already know that we already have the sliders okay sorry the get category list but as we we use this endpoint for the client side okay so what I will do I will paste it a new one and I will just rename this to get category list and here only I'm going to um make the promise similar like for the G slider right and it will return the result so response. data. data like this okay and then we have to make sure to export this one and save it okay let me close all of this tab now and then here inside the component we'll create a new folder and we'll call category list. jsx add the default template save this one and inside the page where we want to show the category list after the slider right here we'll just say category list and then I will add this component called category list and save it now if I go back to our application and Let me refresh once and here you will see the category list okay now to implement it right first thing we need to do is to F the category list data so we'll say category list is equal to await Global api. get category list okay so obviously in this get category list we already making the promise and then it will return the required data now this get category list we will send it to the category list component okay so here we'll just accept it here like this and then save this one and this one now inside the category list we will iterate that category list so first thing I'm going to add the S2 tag and here we'll say shop by category okay we go style oh sorry class name and inside that we'll set text to be primary color font Bol okay let's see how it looks see we can increase the size or or I want green little darker so let's say 7 600 and then we'll increase the text size maybe we can set a large or let's make bigger we do excel oops Yeah and that's good now obviously we'll give margin so we'll say margin top to five okay now as I say we need to iterate this category list so we'll add one de and inside that we'll add a category list do map in order to iterate it then each category will will f it and the index index value will hold 012 and then the AR function like this okay and inside the D first thing we need to show the image or icon then we'll add a source here and inside s obviously we need to show the icon so we will get it from category do attributes do icon do attributes dot oh sorry here it need to be a DOT data do attributes do URL okay now if you think that this is very long and every time you need to write you can map the value okay to specific format and before that one obviously we need to add process do environment and our environment key every time I forgot but yeah I will copy from here paste it here and plus okay after this one we need to add a width we add a width of 50 height of 50 all tag I will give icon and then let's save it now if I go back and you will see the list of icons is display on the screen perfect let me bring this side by side so maybe this will help you help you to get to know much better now after that I'm going to add a category name so here category do attributes do name okay and then you'll get the name see okay now obviously we need to show in the grid format so for this particular de I'm going to add a class name we'll say agreed now for this one when the screen size is smaller I'm going to show the grid of column three okay and see the effect same okay when the screen size is smaller We'll add a grid column of four when this medium GD column of five or maybe we can add six and when it's large we say G except for large we'll say gr column of maybe eight or let's say seven okay if I save this one obviously it's a smaller so it will look like this but if I increase the screen size you will see um the seven columns is get created okay now let's bring everything in one line so for this class name uh we'll say Flex Flex column item to in the center after that that one I'm going to add a background color of green of 50 okay if you see it beautifully added here also I'm going to give a gap of two and for this in between these two items right uh two column we'll say gap of maybe let's say five something like this perfect now for this du we add a padding of maybe let's add a two let's see how it looks we add a four okay let's add three only and then we'll make a rounded corner to be large okay here I'm just giving margin top to two because not touch then it will not touch to this one okay now if I increase the scen size this is how beautifully it looks see okay now let's add some animation effect so for this de okay um before that okay I want to also I want to add a class name we'll make this text green and I want a green darker maybe 800 something like this see now on how okay we want to change this effect but first thing we'll do we'll add add it as a group okay and then for this image we'll add a class name we'll say onover we want to uh scale the image by maybe let's say 125 okay for smooth animation We'll add on transition all and animation effect is is in out and if i h on this one see so cool right and it's very smooth correct also uh we'll make this cursor pointer now see okay now the thing is if I um hover on this fruit or milk it's not working right so what you can do as we mention this as a group so obviously this all the comp U uh tags which Define inside this du tag it consider as a group and here you can just say Group H okay when you h on any of the uh groups or any of the item in the group that change will affect to this group how effect see now if I go here see okay if I increase size and this how beautifully it looks so cool right so this is how you can add now if you think that okay let's change the background on how right you can do that so here simply I will say on H we'll change the background green to just 100 for example and if you see cool right so on how you go also see that particular change let me change little darker let's see how it looks see this is how it looks I think 200 is fine so guys that's all for this uh particular section that how beautifully we uh fet on the server side about um this all the category list okay and with the strappy back end you will very easy to implement this functionality because strappy once you create a collection and everything it automattic Aly generate the rest API for you okay and that's how the strappy is very helpful when you are trying to build now next thing is quite interesting is to show the products or you can say popular products okay uh on the screen okay so that's what we are going to uh see next now it's time to implement the popular product uh uh section okay where we going to show the popular products on the home screen itself okay so let's go back to our application and over here let me open this application as well okay and obviously after this uh shop by category we going to show the list of products so for that one I already added the collection type called products and inside that I added the name description MRP means uh the actual price of for uh price of the item and selling price if the user want to uh give some discount right he can add the selling price over here okay and then item quantity type in which type the item will be going to sell the slug slug is important uh when you are navigating it okay and uh to refer it for SEO purpose as well uh so for that one I added the uid right now it's not that much mandatory it's up to you then we have the images okay uh so here I added the multiple images uh you can add a single image it's up to you and then last is category so category is type of reference and then you just connect this type uh I connected with the menu to menu to the products okay let me show you the one example so inside the content manager under the products I added some few products so let's open particular product for example let's open this product right here I added the name description the MRP which is four but he want to user want to sell it for $3 then the item quantity how much quantity you are selling 500 G okay per order obviously per quantity then slug this is autogenerated if you regenerate it right it will generate depends on the name because that's how I connected it and the main important thing is connect it with the category okay so you can just select this category perfect now let's once you save it make sure from the setting you you will enable it uh sorry you will enable the uh get find and find one AP uh ra API so that is important and once you done this one now we'll go back to our application and inside the global API let's go to This Global API here we need to add that endpoint so we call we can go constant get all products we'll say exos client. gate and here we'll just call products question Mark populate because we want to populate all the details is equal to stop then we'll make a promise here and here we'll just return the response response. dat. data and then make sure to export this one and save it okay now obviously inside the page under after this category list we need to add the product list okay and obviously for that one we need to create a new component so under this underscore component I will create a new file and we can call it as a product list. jsx now here add a default template and save it let's go back to a page.js and here let's add that product list so we'll add product list component okay and save it now it's time to face data so constant get or we'll just say product list is equal to await and here we'll call Global api. get all products okay and then this product list we need to send it to this product list component like this now inside the product list we will accept it here as a props okay like this and save it okay now here first thing we'll add a title so we'll say uh our fresh or we will say our popular products obviously if you go to this category right same thing uh same styling I'm going to copy so let's go to this product list again let's paste it here I will just Cur this particular text and replace it here okay and save it now if I go back to our application Let me refresh once and if you see our product our popular product text is showing on the screen obviously we'll give some margin so add a margin top to 10 next we need to add iterate the product list so let's add a du okay and over here we'll iterate this product list map here we'll say product comma index like this okay and over here instead of writing the code for the product item we cre a new component called Product item okay so that we can use it whenever we required so here I added the product item add the default template let's save this one and let's add the product item over here okay for this product item we'll part uh each of the product like this and inside the product item let's AC accept it here as a prop we'll say product okay perfect now let's say make sure you are not getting any error after that let me bring this side by side and over here first thing we need to show the image so we'll add image then source for this image We'll add product dot or first thing we need to add the base URL so which is the process do EnV dot let me get that URL which is the sorry the variable name and I will paste it here we'll say plus and then the product dot attributes dot images do data obviously I'm going to show a first image that's the reason I'm giving data of zero dot attributes. URL okay after that one we need to give width and height let's go width of 500 for now and height of maybe 200 okay and we go alt tag so all tag will use let's say image only okay now here if you see the all the images is display on the screen let's give some meaningful alt name so here I'm going to say product do attributes do name okay but perfect now obviously we want it in a grid format similar like this category right so let's go to the product list for this de I'm going to say class name let's go grid here for the um very small screen right we'll say grid calls 2 okay for the medium size we get grid calls three and for large we'll say grid column three column four and save it and you'll see the magic see okay right now the screen size is smaller so that's the reason it's showing the two column for the smaller screen but if I increase the size if you see the four Images is showing obviously we need to give some styling and that so we'll do that now so after this product item let's add a text for the name of the product uh which is the product do attributes do name and next is for the pricing okay so we'll add attributes do MRP okay and if you see the name and MRP is showing obviously we going to modify this MRP okay little bit but for now now we'll add some styling to this one so for this uh du let's add a class and here we'll add a padding of maybe we'll add a padding of five let add a six okay but when the the screen size is smaller we'll add a padding of two only okay and this padding is for uh larger screen next we add a flex we'll say Flex column item to be in the center we'll say justify uh Center and then we'll add a gap of three see now everything in the center okay let's add a border as well so border and we'll say border sorry rounded corner to be large something like this see okay obviously we add a gap let's see if I increase the size this is how it looks okay but in order to add a gap between these two grid we need to go inside the product list so here I will say for example we say add a gap of five okay but this Gap I want to add five uh let's see how it looks I think that that's pretty good okay next thing uh inside the product item I also want to add a button so let's add that button as well so add a button and here we'll say add to card now I'm going to give variant is equal to outline and button is not defined make sure to import this button from the component UI Library okay and now if you see we have this beautiful button but if If You observe here right if let me increase the size this button is not in one line for this it's up here it's down right because our image size is not constant so for this image I'm going to add a class name and here we'll say height of 200 pixel un that I'm going do width of 200 pixel some specific width and height and if you see now the the all the buttons text or title everything in one line okay that's pretty good also here I'm going to say object content okay so it will not get stretch you will see that CH okay next uh for this button I'm going to add oh sorry for the We'll add a styling so here I'm going to add a class name here we'll say text to be primary color and uh on Hover I want to change the text to be white and and on Hover again we'll set background to be primary and if I hover on this one right let me you see okay like this perfect for this H2 means for the product name I'm going to add class name here we'll say font bold text large and same thing we want to do it here class name font bold text uh I will I will not add a bold actually okay let's keep like this for now okay and right now this is how it looks now as I say right uh in the database right inside our strappy we added a selling price as a one field okay so inside the product let me open one of the product and over here we added the selling price as a one field right and MRP now whenever the selling price is defined we have to strike through uh this MRP and then we need to show the selling price as the actual price of the item so it's very easy so what you need to do uh for this h2 tag here I'm going to add product do attributes dot selling price if the selling price is available I'm going to add a new h2 tag and there it will display similar kind of uh value only the selling price instead of mrb okay and obviously in order to add a St throw right we have the one property it's called let me show you so it actually called a line through so if I go here and we'll say line through and if I save it this is how it looks see okay so it will it will actually do the line through okay that's good so what we need to do we need to add a condition over here okay when to show the line through so in order to add a a styling right uh Dynamic styling here you need to wrap this inside the curly braces this particular tag I will remove the single code and then you can add the condition over here like this inside the dollar and the curly braces so here we'll just say if the product do attribute do selling price is available okay then obviously I added the and condition then add a line through okay and also I'm going to change the color to the gray color of maybe 500 and then let's save this one okay and if you see for this one is line through and it's showing the selling price for this one is we don't have a selling price it's not showing and like that okay now obviously we want it this in one line so I will just wrap inside One D this all uh to S2 tag I think that's correct yeah let me cut here and paste it inside this de the reason is uh I want to bring in one line so I will add a fck class name fakes and gap of three something like this oh so we don't want the name so I will keep that name outside of this de okay now yeah now it's good and if you see the change okay now it has a beautiful dollar sign if this selling price is different we can show it okay obviously for the selling price only thing that I want to add is class name font bold and will say text large and here as well I will add a text large okay if you think this font bold okay that's fine we can keep as it is okay and if you see now it strike through beautifully okay now on how as well you'll see the button get changed immediately if I increase the size see this is how beautiful it's looking right one more change I want to do for the product list here I'm going to give margin top to maybe six something like this see and let me show you how responsive it is right so if I go to the inspect panel let's I'm changing this size okay so if I increase the size see for the medium screen is showing the three grid and so cool right without disrupting any of these particular uh images or data or anything right so guys uh that's all for this particular section that we beautifully Define this one okay one more last important thing we forgot that is to add animation effect on how of this any of this item so let me do that so over here for this h2 tag no sorry sorry inside the product item over here we'll say on how we scale to 110 and then uh on H we also want to show a shadow let's say medium and if I hover on this one see okay but it's not a smooth trans transition right so just add transition all and is in out you can add the duration as well and now see how cool and how slowly and how smooth it is right see if you think that you want to add Shadow little large let's say large Shadow and yeah that's look good to me see okay so cool so uh this is how you can add the onow effect just I we make this cursor pointer so whenever I hover on this one it will change to this cursor perfect okay and obviously it is completely responsive on mobile as well it so look so beautiful guys so guys I hope you understand how beautifully we F the data on the server side uh using the strappy rest API and how we implement the schema as well inside the strappy and how beautiful we Face the data so we'll play on the screen now obviously we are showing eight item here obviously after that we don't want to show any more item right so I can add a condition for product list only show the first eight item so here we can add index is less than equal to less than eight and and operation if I save this one now it it will only show the first eight products and not more than that on the screen now in this section we are going to add this one Banner over here and the last we going to add a footer for our uh home screen or throughout the application that footer will be the constant okay so let's go back to our application and after this product um our popular product uh section we going to add one Banner okay so for that one I already let me bring this down like this I already add one uh image inside our local and this is how it looks okay it's quite simple but that's what we are going to show on the home screen so let's go to this page.js and here simply I will just add a banner and over here I'm going to add a image tag then we'll add a source obviously uh we are fing from the local so we can directly give the uh file name then width we'll give 1,000 for example the height we'll give 300 we'll give alt tag we'll say banner and then save it now if I let me refresh this screen once and okay oh not logo sorry my bad it need to be a banner PNG okay and this is how it looks on the smaller screen if I increase the screen size this is how it looks right so so here uh I will add a class name and here we will say width to be full height I'm going to give custom size now if you wondered why I'm giving this size in the format of this square bracket because if you want to give a custom size and not the tailin CSS predefined size then you can give that value inside the square bracket okay and after that here we'll just say object content and then save it now on the smaller screen you will not will not see the change but on large scen and now if you see it extended from the both the side and it it is in the center now and if you see how beautifully it look right perfect if you think you want to give margin from the top you can give it now here we will add a footer so for the footer let's create a new component similar like a header inside the underscore component and then we will call it as a footer. jsx add the default template and then this footer we will add inside the page.js file okay so we'll just add this footer over here and save it now if you see this text foter is showing on the screen see okay so on the for that one right uh we are going to use hyper UI okay as I told you before it's quite simple uh these are some of the telin CSS predefined component okay you can just copy and paste it as uh footer uh we don't give much more um focus on it so I will just copy it so if you see there are a lot of uh footer are available I will use this simple one so go to the view make sure to select jsx and then copy this one then let's go back to the footer and over here just paste the footer which you copied okay if I save this one and you will see the result see okay now obviously this is not our logo so I will remove this logo so let's go here and this is the logo code so I will remove this SVG file and simply I will add the image source and over here we Define SL logo. SVG I will give width of 300 and height of 300 alt tag as a logo let's save this one and let's see how it looks so right now okay so something it's need to a PNG and if you see the grocery store is looking beautiful let's give the 200 and now that's perfect and if you see it's in the center and our uh home screen is almost ready okay if you think that it's touching I will just give some margin from the top for this footer so here I'm going to give margin out to to seven perfect okay obviously on the smaller screen as well it will change the layout of the home screen depends on your requirement see so beautiful right so guys that's how we simply add the footer and this beautiful banner uh for our uh home screen okay now next thing obviously there are a lot of things that we are going to uh learn in this particular course okay the another one which we are going to see that once user add on this add to card we going to show the popup message where user can add into the card actual one okay he can increase the quantity if you want to he can add to into our card and he can see the details in that popup so everything we want to see uh in maybe a next section and obviously there are lot of things because we need to add authentication we need to add the card functionality and lot of more guys guys if you did not subscribe to my Channel please do subscribe and we'll see you in the next section now let's implement the product detail uh popup screen where user click on this any of the product from the home screen or from the any of the products right we are going to show the dialogue where on the dialog we going to show the product image the ti on the right hand side we have title description the price of that particular product then he can have ability to um increase the product items uh quantity and all and then at the last we have the button to add a card okay obviously this is just a u rough idea about the dialog L which we are going to implement on the click of this any of the product so for that one we are going to use Shad CN a dialog component so if I go to the dialogue okay and if I click on this example right this is how the dialogue will work so similar kind of dialogue we are going to add in our application so first thing let's copy this command in order to install the dialogue go to your project so I will close all of these tabs and over here I will paste it so that it will install the uh dialog component then copy this import statement and in this case we need to add that dialogue inside the product item page because that's where we have this add to card button on on that one we need to open the dialogue so first thing let's import this uh import statement and then we'll copy this dialogue and we'll paste it here okay now if You observe here this is the dialog trigger the dialog trigger is nothing but it enable or it open the actual dialog box okay so obviously on the button click we want it so I will put it over here and make sure to make this as a as child otherwise you will get a warning error inside the console now if I save this one and let's go back to our application if I click on this any of the Let me refresh once and on the button click of this particular if you see we got this beautiful dialogue right now we don't don't have much information but now this dialog width is uh too small right you can increase this width so for that one let's go to the actual component of the dialogue okay over here if you scroll down if you see right now they give the width to be full but the maximum width uh of that dialogue is just an uh large okay which is a 512 pixel so here I'm going to change it this to 3 XEL and then save it now if I go back and click on this card now you will see the width of the dialog is increased right now obviously there are a lot of things you can customize from this Shad CS dialog component but I will now only that change I will keep as it is now over here I don't want dialog I will remove it and obviously inside the description we going to show all all of our information so for that one I'm going to create a new component and here I will say product item detail. jsx and I will add a default template and make sure to import inside this product uh sorry dialog description okay so right now in the dialog we just have the product item detail text which is which is inside this product item detail component now whatever the product we want to pass we can pass it here so we'll say product is equal to product okay so this particular uh each of the product which we are getting from inside the product item we are we are that passing to this product item detail component save this one and let's accept it here as a prop and save it now obviously if you see uh our structure right we are dividing that dialogue into two section one for the image and another is for the all the information right so same thing we going to do we'll add a class name We'll add a grid and when the screen size is smaller we'll keep the column one and when the screen size is medium or larger we'll put grid columns 2 now first thing we need to add is the image okay so over here I will add a image from the next SL image here we need to provide the source so in this case is product do attributes dot images do data of zero do add attributes. URL okay obviously here we need to uh connect with the base URL so process do EnV Dot and then the actual environment this variable name okay plus the actual URL over here we'll give the alt tag as a image for now the width you can give like 300 height you can give 300 and let's save this one now if I go back to our application and boom you'll see this beautiful uh product image now for this particular de I'm going to give some uh padding of seven then I will make sure the background is white okay and all the text is in the black color and let's save this one okay perfect uh also let's add a class name here we'll say background of slate 200 100 okay because many of the products don't have background okay and that's the reason we adding this background then we'll add a padding of five and let's make height of 320 pixel and width just to make sure it's a 300 pixel again and uh we'll make object with contain so it will not get stretch and if I save this one this is how beautifully it looks I will also add the rounded corner so rounded to be large okay now after this on the right hand side we need to add the information so here over here I I'm going to add a du the first is the product name so product. attributes. name second is the description so let's let's style this first so class name here we'll say a text of 2 Xcel then font bold and let's save it perfect let me decrease this size okay so this is how it looks obviously it cames down because uh we on the smaller screen right that's the why I want to show it but right now that's fine now next is oh let me increase the size the product description okay so let me close this tab and here we just say description obviously for this one I'm going to add a small and the text is of gray 500 okay and this is how it looks obviously we don't I want I want don't want to add a font bold okay and if you open any other for example let's open this one see how beautiful it's looking right for this particular de right I'm going to add a class name make it Flex Flex uh column and we'll do gap of three after that I'm going to add another du okay uh this du is for the product pricing and all okay so if you remember inside the product item we have added this conditional pricing right same thing I'm going to copy this particular de and I will paste it over here okay so inside that one if I save this one obviously only thing we need to change is this font size so let's try to give a a text of maybe let's say 3 XEL and I don't know whether from the de it will work or not yeah it's not working so obviously you need to give a text of 3 Xcel and over here as well a 3XL and boom okay now obviously if I open this one you will see the change so cool right over here you'll see that change perfect that's what we wanted right next we need to add a text uh and for that one I will add S2 tag and here we'll say the quantity so we'll say Quantity and inside that okay I'm going to add brackets the circuit brackets and I don't I want to add the price the product do attributes dot item quantity type okay so this particular field I already add added inside our uh content okay this is item quent type it will give you what is the quantity it's one piece or is 500 G okay what are you selling at a single product so that type we are going to show so let's save this one and only thing that I'm going to add a class name make font to be bold let's save this one and this is how it looks okay let's increase the font little bit uh here we'll save medium and we say textt large like this perfect next thing we need to add the button like plus minus if you want to increase the size or something like that right let me show you how so over here this after this quantity right here we need to add a one button for example let's consider this one here we'll say plus we'll say one sorry uh let's say one quantity and minus okay so this button will help us whether to increase or decrease this quantity correct so that's what we wanted so it's very easy uh what you need to do you need to wrap One D inside again I will add one more de and here first thing I will add a button okay one button is for minus then one button is for plus to increase the quantity and then text so by default I will add as a one okay and let save this one and then for this do I will add a class name I will add padding of two border uh we'll make it Flex okay so it will be in one horizontal line then we'll give gap of 10 and we have to make sure that it's vertically Center so we'll say item to be in the center and now if I go back this is how it looks right but if you see this particular withd going at the endend so what you can do for this do we'll say class name we'll make it Flex Flex column and here we'll just say item to be the Baseline okay and save it and now if you see the magic right if you think uh you want to give padding X to maybe three can try and boom let's give five okay perfect and this is the button to increase and decrease the value next is to add a button so after this do we'll simply add a button inside that button I will add a shopping uh icon actually so we'll say shopping bag of basket and after that one I'm going to add add to card text here we'll make a class name uh to be Flex so it will all both the icon and text will be in the horizontal line gap of three let's save this one and okay so obviously saying that button is not defined make sure to import this button and then save it now if I open any of this card and if you see the button is there now perfect obviously we'll give some Gap so G of three perfect and how beautifully it's looking right now the last thing only that I want to add the category on which category it's belongs to so outside of the I'm going to add H2 tag here I will say inside the span category and then outside of this one we have to say uh product because we need to get the category information so product do attributes dot categories do data of zero do attributes do okay now as I say you will you can get this information like this right if I enter this API // populate and if you see we have the category inside that we have data and ID because this is the relationship we connected with the category that's the reason it will come in that format okay let's save this one go back to your application and if you see the category is showing Let's uh make this class name as a font bold and that's all perfect okay if you think you want to give Gap you can just add a gap like this okay and your this particular uh product detail page is ready now the most important part over here that when user click on this plus or minus we want to uh increase this value and after this one we will show a total number okay so let's go here and first thing what we'll do we'll Define one two step so one is constant we'll say product uh total price comma set product total price here if you think that I'm giving a state uh the the name of the variable is bigger the because it's more meaningful right and that's the reason make sure that whenever you give the uh any name okay it should be a meaningful here then use State and inside this use State the two things I'm going to check First Take we'll check the product. attribute do selling price if the selling price is there then I'm going to set the selling price otherwise I'm going to set the MRP only okay next thing we need to Define constant and we'll say a quantity just need to seeq quantity comma set quantity is equal to use State and initially it should be one okay let's save this one and go back to your application and you will see the error it's saying that used state is only used as a uh client side and not on the server side so for that one you need to make mark this particular component as a client so use client and then save it now if you go back and you'll see that error is gone now if I go here okay and now if if you see the nothing get changed because we did not update anything yet but now instead of one we'll actually use the quantity and I will wrap this du inside another du okay and over here I'm going to Define h2 tag it will say is equal to and then product total price okay so obviously this product total price depends on the number of quantity if us just increase the quantity we need to change the product total price so simply I will multiply it by quantity okay so it will give If the product if you added two product then obviously two in two product total price will be added inside our card on the Press of this button right we have to add a condition so on click we have to add over here we'll set the quantity value okay and every time uh when you click on minus side we need to REM remove uh one from this total quantity but also we have to make sure if the um uh the quantity is one right then obviously user will not do the minus okay so we'll disable the button when the quantity is equal equal to one okay next thing for this plus button We'll add on click but in this case we'll set the quantity with which is equal to quantity + 1 and here minus one okay and and obviously quantity value get changed let's save this one and let tested this out so right now if you see this is equal to 5 is coming down so let's bring in one line so we'll say class name Flex gap of two maybe let's say three and here I'm going to add a class name text of 3XL font board and just for the purpose I'm going to add item to be in the center okay and one more thing we need to define a dollar sign and perfect now if I increase the quantity see the magic the value also get changed the quantity also get changed and it multiplying by the exact number see okay perfect but if I go here okay and if I try to add and boom everything get mess up right because the floating point is not we did not fix the floating fight it's at some similar we have to Define that one right so what we can do uh where we have multiplying here right we'll put in circular bracket and here we'll say two fix to two decimal only and boom now even though you increase as much as you want it will increase in two decimal only and if you see the change so cool right and depends on the number of quantity and the total uh price in that range you will see the change inside for the total price of the product so cool right so this is how we can uh implement this logic to add and decrease the total quantity of the product and obviously depends on that one we can change the pricing as well I hope you understand if you have any question let me know in the comment section now it's time to add a new screen uh and a new route so that when user click on any of this category we going to navigate to the new screen so obviously we are going to add this product by category screen and inside that we have header category which we are going to show and the product by category okay so on the top we already have the header then we going to show uh the list of category on the product by category page okay and whatever the category we selected obviously we'll mark that category as a selected one and then uh all the products which comes under that category then that we are going to show okay so first thing we need to do is to add a route so over here we need new route okay and this need to R like like to be like product Dash category okay and after that whatever the category we pass we want to show it for example let's go to the fruits if I enter this one right now if you see we are getting the 404 error but if you see we have the header as it is but the question is how we can achieve this kind of thing because obviously this is a new uh uh route which will be a constant but the route after that one okay U will be a changing whether it's a vegetable whether it's a may we say chicken it's a whatever the value you will pass it's it's a dynamic one okay obviously we need a dynamic route so let's create that route so let me go to our application and over here inside the project folder inside the app folder we going to create a new folder okay this folder name we will start with the bracket like this and we'll add routes so whatever the routes the new route we are going to add We'll add in inside this particular folder okay because uh once we Define this kind of route right U nextjs will ignore that particular folder uh not a folder but the path of that particular folder okay so obviously this is not actual route only for the organization purpose we added this structure now inside that one I'm going to create a new route called Product category okay and this is the folder name we gave and inside that folder name we want a dynamic route okay so for that one we'll add inside the brackets We'll add the name so category name like this okay and okay this need to have a folder so make sure it's a folder inside this product category like this okay now whenever we Define the folder name inside this uh I don't know why it's not showing let me increase this size whenever we Define the folder name inside the bracket so that it the value of this category name can a changeable it's it's a dynamic one okay and now inside that I'm going to add a paste. jsx file okay now add the default template and then save it obviously I will change this to product category something like this okay and save it now whatever the value you pass doesn't matter okay Let's test this out so over here uh I will pass something like ABC okay consider this is a category name so it need to be products I think products category see and now product category text is showing you can pass fruits doesn't matter it's jumping on the product category only okay so this is how you can generate a dynamic route perfect now let's go back to our application and first thing we need to do is to get the whatever the category uh we are on right for example right now we are on the fruits category right that particular name we need to get so for that one you need to add a param like this okay this parameter contains the field called category name okay if you want to display let's display it over here we'll just display parents dot category name okay so whatever the name you give to this particular folder that is will that will be your field name and now if you see the fruits is showing if I type vegie tables enter you'll see the veget taes okay now with this help of category obviously we are going to pH data but before that let's go back to our uh home screen and inside this home screen obviously we need to add onclick event on this category so whenever user click on this one it should navigate to the new screen so let's go back to our underscore component where we have this category list right and over here we have our category so here instead of du I will change this to link and this link is importing from the next SL link make sure to uh add the um exit tag sorry closing tag and over here I will add the H reference okay now here we'll say products category okay so it will navate to product category and then we need to attach the name of category on which user click so in this case I will just add category do attributes do name okay so/ product category SL whatever the category name now taste this out now let me refresh once and if I go to this vegetables right boom it jump to the product/ vegetables if I go back and click on fruits it will jump to the fruits so cool right so this is how you can navigate from one screen to other screen and we added the beautifully route as well next thing if I go back here to our product category right now we need to fix the only products which belong to that particular category right so let me show you the example so this is our 1337 API SL products right so right now we uh with this particular end point we are getting all the products correct oh let me close this one but if you want to get the products something like filters uh categories name okay so we have to with the categories by name and dollar it in in means uh the array contains kind of thing okay if array has these fruits then you can fetch it right it has a lot of D you have equal you have not equal and lot of things you can uh go here and you just type R API filters strapping and you will see this documentation okay inside the documentation you see the dollar equal you have different different operator over here okay so right now we uh we have the category array that's the reason I'm using the dollar in operator okay and once I dollar add Dollar in and we'll say fruits if I enter it now if you see I I'm getting only fruits uh list of products okay perfect so now let's go back to our application and obviously we are going to use this endpoint so I will just copy this endpoint as it is okay or yeah and let's go back to our Global API here we're going to add that one so constant get products by category we'll say okay here will be the exos client. gate and then we'll paste this products filter category name in and here we'll add obviously and category so whatever category we are going to pass to this method it will we will add that one okay and last obviously we need and populate is equal to Star okay so we get all the data make sure to export this one so that we can use it and let's go back to our product category page so over here we need to face that data so we'll say constant product list is equal to and here we'll say await Global api. getet products by category and as we have the category name so which is nothing but parameters do category name as we are using a and we are on the server side let's make this a sync and then we'll get the product list but before that let me clean this out we need to add the h2 tag We'll add h2 tag and we'll say the category name so here we'll simply display param do category name let's save this one and this is how it looks here okay then uh we need to give some styling so we'll add a class name We'll add padding of four background primary text white font to be bold and then text 3 XEL and this is how it looks okay then we'll make text aligning to be Center okay on larger screen this is how it looks perfect after that one I want to show the category list okay so so for that one I'm going to create a new component inside this uh product category uh folder so here I'm going to add components folder and inside that we'll say category top category list we say Okay top category list. jsx it's little different than what we have okay that's the reason I'm creating new one and not using the existing one so what I will do I will uh go to the category list the previous category list and I will copy everything as it is okay from this de okay and let's copy this inside our new top category list and obviously I will going to uh pass the category list over here so we say category list and from the page the API call which we have I will use that one one so this is the category list API call I will use the existing one uh inside this page.js perfect okay and obviously this category list we going to pass to our method sorry to our component called category top category list like this okay now we added this top category list method and only thing we need to do make sure to import these all the links the image and I think that's all right and one more thing I I'm going to remove this grid options from all we okay and we'll just make the flex let's save everything and let's see and now if you see we got this category but it's not structured well right so for that one let's go to the top category list for this image not image for this particular de I'm going to add a width of 150 pixel okay and also we'll Define minimum width of 100 pixel okay now if I save this one this is how it looks see okay but it's not scrollable yet so you can also add uh overflow AO for this du we say overflow AO okay and we give margin X to 7 and when the screen size is medium or larger we give margin X to 20 okay also we'll make justify Center and let's teste this out and now if you see this is how beautiful it looks on the smaller screen uh you can even navigate see okay if I increase the size and go to this inspect panel in a mobile view right you can even scroll this one see okay so cool so that's how we can add the category now even though you can click on any of this category from here right it will CH you will see the change see immediately you will see the update in uh in into the category page only okay without refreshing the screen it will jump on the same page next thing we need to add the uh sorry we need to display the list of products right so let's go to our page. jsx file where we added this top category list under that one we going to use the ex existing product list component which we already Define in a previous home screen right so here we'll just add product list and as we've already faced this product list we'll just pass it here like this a product list and that's all let's save this one and make sure that you are getting data so right now is saying product list map is not function okay so it means we are not getting the product list maybe so this error cames because um we did not return uh make the promise here so let's make that one return response. data. data okay inside the global API oh sorry let's make let's save this one and boom we got the result okay let's do one more thing uh we'll wrap this product list in one VI like this okay and we'll just just add a class name padding of 10 okay and the when the let's make on medium screen padding 10 and otherwise padding five and let's save this one and boom right if I click fruits uh we'll get the fruits if I click vegetables we got the vegetables and everything as it is see because we use the existing component for the product list for the product item and even the detail automatically get added over here so cool right so right now over here I did not added a lot of data okay for example Breaky don't have anything grein okay but you can add more data so it will look much more beautiful and uh that's all for this particular section that we beautifully uh implemented a new route a new screen and on the click of that uh category we are uh navigating to this particular screen now one more thing we forgot that on the on this category because we we have this category right on here as well we need to add uh the navigation right so let's go here and obviously that we implemented inside the header and over here right so this is the image and the icon so here I will just wrap this inside a link or maybe let's wrap this inside the link and let's see H reference like this okay and over here we'll just say products category slash and then category. attributes. name and then save it now if I click on maybe let's say fruits okay I don't know yeah perfect it's work okay now obviously you don't know which one is get selected right here we need to mark it as a okay the selected one so what we can do let's go back to our uh page. jsx and over here we have this top category list here we pass one more parameter we'll say selected category is equal to and here we're going to pass parameters. category name so whatever the category name we got it we'll pass to this top Cate uh list and then here we'll see get that parameter as a selected category okay now only thing we need to do is dynamically apply apply The Styling okay so for this uh particular tag I will WB this inside the curly braces then this tag and then over here I'm going to just write dollar sign and inside that I'm going to write condition I will check if selected category matches with the current category so we'll say attributes do name then uh I'm going to add a background of green 600 and also I will make text of white and save it let's save this one as well and let's go back and boom so if you see uh the text is still in black color let's see why okay so because we added the text over here so let's add that condition because for the text we added a different style right so over here I will just say similar condition only I will remove the background something like this and save it and boom if I select fruits right this fruit is selected if I select vegetabl the vegetable gets selected okay if I select the bakery obviously B don't have anything but that's how we can add the or Mark the selected category okay so guys if you have any question any doubt until this point let me know in the comment section because there are a lot of things we need to do it now next what we are going to look uh is add to card functionality okay that's also we are um very important and very important concept actually inside the e-commerce application now we have to add a functionality to add the item into the card right so if I open this one and and want to add a to card we have to make sure that user is logging to our application okay so once uh we as we know that we already built this product by category screen right and when user click on add to card we going to check is user is authenticated to our application or not if he is not authenticated then we should redirect it to a new screen for the sign in or to create a new account okay obviously if our user is authenticated then we will add it into the card obviously for that one we are going to create a new collection where we will store that inside our database and obviously once user is authenticated then he can access to my order page or check out page okay but if user is not authenticated then he should um create an new account or sign into to our application okay so that is very important in order to add it uh create an account so over here we already have the button to login from there as well we can navigate to the uh sign in or sign up page or whenever user add click on add to card and we'll check whether user is already sign in or not and if he he's already sign in then we will add that into the card otherwise we will again redirect it to a new screen so let's go back to our application and first thing we need to do is to create an two new routes one for create account and another is for the sign in so inside the app directory I'm going to create a new folder and uh I will call it as a o so we say o oop o okay and all the authentication related uh screen we keep inside this folder so inside this one again I'm going to create new folder and we can call it as a create account and let's add page. jsx file in into that one add the default template and here we'll say create account okay and save it now another route for the sign in okay so let's create a new uh folder let me go back to O Let's create a new folder and we can call it as a sign we say sign in and in that we'll add page. jsx Okay add the default template and here we'll just call sign in let's save this one okay and then let's check this out so first if I go to this create account if user don't have account right then it should navigate to the create account page that's working fine and same for the sign in see perfect now the thing is we need to add the UI for that one okay so let's go back to our application and let's add for the create account first so inside this du I'm going to add another du and first I will add a logo so image source here it will be a logo so we'll just say logo.png We'll add a width of 200 height of 200 and Al tag as a logo let's save this one I will just open side by side after that let's save this one and we are adding inside the create account so I will open the create account page so it's saying fail to pass Source logo.png make it slash like this okay the logo is showing on the screen now after that one I'm going to add S2 tag so this h2 tag for uh let say create account say create an account your class name here we'll say font bold and text of three Excel maybe say 3 XL see now for this particular de we'll add a class name we'll make it Flex we'll make Flex column and then uh we'll make item to be in the center justify into the center let's save this one and if you see now it is in the center uh let's add a padding of 10 and we'll add a background uh slate maybe 200 maybe let's add add 100 only okay and uh for now let's add a border border gray 200 okay then after this create account text I'm going to add another text we'll say S2 for this sake we'll say enter your email and password to create an account it's save this one perfect see if you think let's give the class name we'll say text of gray let's say 500 then we need to add a du and inside that we'll add the three inputs one for the username one for email and password so I think we did not add the input component so from the shat CN We'll add the input component so go to the input and it's very easy let's first copy the this uh CLI command go to your project and paste it inside the terminal it will get install so once it install let me open our application and here you just WR input this input is inputting from the/ component slui we have to make a placeholder you need to add placeholder and we'll say username as simple as that see next obviously I will add a class name we'll say uh with to be full Flex then Flex column and I'm going to give gap of five margin top to seven seven only okay after that one I'm going to add two more input so another input uh I want to add for the user email so placeholder I will say name at example.com and here I'm going to add password now for the password if I save this one right if if you see the password is visible right so you have to give the type is equal to password okay and and now if you see this is how it looks and the last I want to add a button so we'll say button from the component and we'll say uh create an account see beautiful right and one more text over here say P tag only and here you will say already and already have an account and we'll say uh here I will add a link okay because we want to navigate to the signin page here I will add a h reference and we give sign in and after that inside this link I'm going to write uh click here to sign in okay now if I increase the size this is how weird it's looking so for this text I'm going to add a class name and we'll make text blue 500 okay let use some space I don't know why I don't know what the issue but okay that's will fine we'll do that later on now for this particular de okay we add a class name we'll make it Flex item to be Baseline justify Center and we we'll add margin y of 20 and boom see the magic we add mag of 10 yeah and if I increase the size this is how beautifully it look our uh signin page right and now user can add username email and the password so let's uh add some three states for for this uh to accept or to hold this value so we'll add constant usern name comma set usern name is equal to use State I will copy for three times and one for email we'll say set email then password say password and boom okay now uh we add this uh use State okay this is the react hook so we have to make this particular component as a client s so we'll make use client and save it okay and whenever user type here obviously we need to write on change method okay inside this on change method it will uh uh emit the event okay and we'll just set the username in this case and we have to get the value using e do means event. Target do value okay okay so in that whatever user type we'll get that value same thing I'm going to copy for the remaining one so in this case is user set email and here for the password I'm going to add set password okay perfect let's save this one and on the click of this create account so we'll add on click method and we'll call oncreate account this particular method we'll create so here I will constant on create account and whatever will be entered right obviously uh here we will make a call to save the data in our database okay now the question is how to save the data okay so if I go back to our application and obviously everything is almost ready but inside the strappy if I go to strappy right and content manager you will see there is a default collection type called user okay and obviously if you go to this content type Builder the user you will find it here and it has a user name email password and all of these things correct if I go to this content manager obviously I added couple of them but if you try to add entry you will see the username email and password these are some mandatory fill okay and it automatically add a role of authentication you will get to know once uh we add some information now uh strapy if you go to the stpy documentation uh they give a a very good uh documentation for how to add uh the a register new user and how to uh get the um register user okay so here is thing right when user try to create a try to create an account or sign into the account right it will return two most important things okay so first is the user information okay so whatever the user information we say and another is a JWT token okay this JWT token is very important in order to fetch the data from the API okay now if you know that this my order page or add to card page or check out page this page are protected okay means only if the user is login then only we can able to uh call this API correct but in that case we have to pass this JWT token to get this information okay so when whenever uh user is login and we want to F some data from this particular uh apis we need to pass jwd Tok on otherwise the API will not work okay it means only if user is authenticated to our application then only uh he will able to get that uh get that data so whenever user create account or sign into our application this two information it will return back on our application and then these two information we want to save in our local storage or session storage so now let's go back to our application first thing if you see if you go here right and this is very uh what you say reach documentation okay so this is the code to get the information and this is the uh code to register the user and this is for the uh get the users okay so if you see uh this is Lally different the um the API right it's saying that all local register obviously here you need to pass/ API SL or local register then it will add the username email password and then it will return the data so simple right but if you see this is a post request so now let's go back to our application and first thing we need to do is to add a global API to register the user for our account right now I'm in global api. jsx file here we'll add a new me uh new endpoint we say get constant register user here obviously three parameter you need to pass first is username then email and then password we'll say exos client and then uh we need to add the post method sorry post here obviously we already have the API we have to write this slash o/ local slash register like this and inside that we have to pass this three parameter one is username we say username then email as a email and then password as password like this okay and as this is a promise we will call that prom we will call that promise inside our create account now make sure to uh register this one or sorry to export this one so it will be available uh anyway here now inside the oncreate account we'll just call Global API dot uh register user and inside that if you see these three parameter you need to provide the one is username so we already have state for that one another is email and then password okay do then response and then from the response we'll consult two important thing one is response do data do user and other is JWT token okay now obviously we are just testing so we'll just uh um console this uh two important things okay and now another important thing we need to add we have to disable this button if this three parameter is not um entered okay so here we'll add disabled if if the we'll say username or our email or our password is not there so we have to write exclamatory Mark not okay now let's go back if you see right now it's disabled but if you type something now it's enabled perfect and one more important thing before um create an account right if you go to the setting okay and inside the setting uh you have option over here for authentication somewhere let me check so inside the provider you have to make sure that email login is enabled okay now let's go back here go back to our application we'll open the console now let's clean everything and over here I'm going to type some information so here we'll say uh test user here I'm going to add Accounts at tub Guru g.com and I'm going to add some password okay now if I click create account so right now we got an error so if I go back here he saying email username already taken let me check oh so if you see the email is already there right so let me delete this one okay and let me clean the console and let's try to create account and now if you see as as I create account the two information which we console one is the user information if you see user information as email provider username everything and then we have this JWT token now if you copy this JWT token and if you go to this jw. i.com sorry IO just and if I scroll down and if I paste that uh jw2 token over here you will find the information so first is the header okay which is this uh algorithm hs256 then we have the payload or data which is just rning ID and we need going to expire this JW token and the last is the signature okay is verified or not so this is how we got this um uh information okay now what we need to do uh we need to store this information uh maybe in local storage or session storage and then uh obviously whenever we create an account we need to redirect back to a new screen sorry the home screen maybe okay so first thing let's uh let's go here and let's store that information so we'll add session storage dot set item and here we'll just say response. data let me remove this one we'll say user first and then value so in this case the user is in the form of object okay so we'll change this to string using json. stringify and then we'll pass the user say thing uh we'll add SE storage set item for the JWT token and here I'm going to add value as response. data. JWT something like this okay and one more important thing whenever I got the error so here I'm going to write the error message as well now once we add the we setting the storage and obviously if there's any error we will show some toast message as well but before for that let me add one router so we will add router is equal to use router and make sure to import it from the next SCE navigation this is this is I'm using because once user has created account successfully we will just navigate to new screen so here we'll say um router dot we'll say maybe push to new screen something like this see okay perfect and when uh they successfully create account or if there is any error we going to show a toast message so for that one I'm going to use a Shad UI component which is called sonar okay so if I click on this one to my see again if I you can you can see the previous three toast message as well if it's coming fast or you can use this actual toast uh component as well okay but this is the new sonar so I'm going to use that one it's very easy first thing you need to import this one so let's add inside your application and then uh you have to uh add this particular component inside the layout. TSX file so let's go to this parent layout. TSX file so if I go to this parent layout and here we're going to add that one make sure to import it from the component /ui sonar and then you can directly use like this see okay so if I go to create account here I put this ER and will say error while creating account and here I will say account created successfully account created successfully something like this save okay now let's save everything and now taste this all of these things together so let me clean all of this thing I'm going to delete this particular user because if you see this new user get added I will delete this user okay and we'll create a new one so we'll say tube guruji I'm going to add accounts dot sorry add the tube guru.com and here we'll say or let me add simple password now if I click create account oh wow so we got one error that user is not defined let me check so here we directly use user obviously we need to refer it like this something like this okay so that's the reason we got that error again let's let's create a with a different um email okay so let's create account oh so it's again saying toast message not defined wow we did not import the toast let's add a toast let me delete this account now because it might be get created only one that's fine let's clean this out we have the tube grp G we.com and password I will change this one uh so let me create the account and if you see the account created successfully and then it navigate to the new screen as well so cool right perfect and if you see now user is log to our application if I go to this um application tab inside this uh developer console and if I go to this session storage right if you see we have this session storage local 3,000 you will see that this user and jwd token is getting saved inside our session obviously if the session is expired this user and JWT token will get expired as well okay perfect now uh we have to add a signin page as well okay so let's go to the signin page let me close or not close but I'm going to copy existing UI from here here and I will paste it inside this sign in okay except that I'm going to remove this username input make sure to add this image and this input and the button okay um button the link as well and here I'm going to change this message as sign in sign in here I will say already have an account okay we'll say don't have an account don't have an account click here to create new account create new account and obviously I'm navigating to create account page let's save this one here I'm going to change do sign in sign in to account yeah pass s in an accounts and I think uh we need to add this uh two State as well so let me copy from here so these two State we need to add make sure to import this use State and make sure to mark this as a use client okay let's save it and let's go back to sign in page so it's saying okay so we don't have the password defin wow so okay we copied this one let's change this to password and the password sorry set password okay and from the bottom I'm going to remove username because we don't have username here we'll say on sign in so we'll create this signin method as well and save it now if I go back and if you see the sign-in page is ready obviously if I type something and some password and if I try to sign in obviously we did not Implement anything so we will implement the sign in functionality as well okay and obviously don't worry because we did not checking anywhere whether user is sign in or not yet okay so we will do that but first Let's uh implement the logic for this one so for that one we have to create an uh endpoint API endpoint so if I scroll a little bit up over here this is the this is the API endpoint okay we need to pass identifier which is the email and the password so let's go back to Global API and here we'll say constant sign in we'll pass email and password and here we'll ask exos client. post make sure it's post okay otherwise you you will get error here we'll simply add au/ local and then we need to pass identifier identifier okay uh guys don't make the spelling mistake otherwise it's very hard to find where is the actual error okay and the password so here we pass the email and password and then make sure to export this one now if I go to the sign in here I'm going to Simply uh call signin method okay so here we'll say Global API do signin and here we'll pass email comma password do then and response so here as well we'll console the response. dat. user same thing you going to return okay so in jwd token and obviously we write a catch block so we'll say error if there is any error okay we'll say console. log E Event okay and save it so let's test this out only first so let me check which user we have currently so right now if you see we have this admin at theate Tu guruji so we'll check admin at tub guru.com and password okay and let me go to the console obviously this is different error so let clean this out so now if I put enter this admin and password let's click sign in and boom if you see we have the user and then we have the uh session as well okay now only thing we need to do over here whenever the user sign in as well we need to store this session as well okay so let's go to this create account I will copy this exam all this information obviously we need to Route it I'll copy this this one as well sorry inside the page right so page and paste it because user might create a sign in or he can might create and create a new account right so that's the reason we have to paste all of this code in both the things here we need to add a toast obviously uh for routing I'm going to add a hook called use router and then obviously once it's uh successfully login it will navigate here will say login login successful and if there is any error we're going to add a to message uh server error something like this okay and now save it so I think everything's look good to me I will remove this console okay and save it and if I go back let's clean this out let's add add g.com and password click sign in and if you see login successfully and boom it navigate to the new screen means the default home screen right now even though here we need to uh uh things uh in consider we have to consider one thing right if user is uh go to the signin page right we need to make sure that user is all if he's already login we need to redirect to the home screen back because we don't want to sign in even though user sign in right so for that one I'm going to add use effect inside the signin page and same thing we need to add in create account page as well right and inside the user effect right here we will just check if user is signning or not okay so for that one we'll add a constant user is equal to or we just add JW token is equal to session storage. getet item and here we'll just check jw2 token we'll get the JW WT token if the JWT token is there then you say if JWT token is available then we'll redirect to the login screen or sorry router. push something like this okay so obviously even though user is trying to sign in he will redirect back to this uh home screen okay let's save this one and let's test this out okay and boom even though if I try to sign in and it will redirect to the home home screen see automatically correct same thing I will copy and paste it inside the create account as well okay make sure to import this use effect over here save this one and then let's try this out so let's go to this slash create account and boom see okay now one more important thing obviously when user click on login we need to redirect to the signin page okay because we did not Implement that functionality so let's go to this header first where we have this sign in button right so let me check this okay this is our okay let me go down this is our button right here I'm going to wrap this button inside the link We'll add a h reference make sure to import the link okay we already have and here we'll just add slash sign in something like this okay then let's save this one okay uh we have this login okay that's good if I click on login okay if you if you try it's going to sign in but already login that's why it's not jumping okay but here as well we need to check if you user is already sign in or not so here let's try to Define over here so constant we'll say uh is login and we can just just check by using uh session storage. get item if jwd token is there we'll say true otherwi we say false and over here we just say is login so let's see is not login then only show the login button okay let's save this one let's go back to our application and boom if you see we already signed into our application and that's the reason the button is not showing now this is the error if you think okay why this is error is coming because it's saying each child in the list should have a unique key prop because I think we are using this uh list over here right and it don't have the key properties so let's what we can do let's go to this header okay we already in header and where we iterate this right over here I'm going to add a key as a index let's save this one and boom if you see the error is not showing anymore perfect now once user is sign in right we we need to show some kind of icon of for the user okay and for that one we will show some option like my orders or log out button kind of thing okay so let's go here and here we are checking if is login uh then don't show the login button and if user is not login we showing the button here I'm going to add a condition the ternary operator and here we'll just simply add the second second option where if you is login then we'll add a circle round user round icon okay let's save this one and this is a lucid icon as simple as that see like this I'm going to change this uh class name you height height of seven width of seven let's see how it looks I think that's okay let me let me add much bigger so n uh I think that's I don't know or maybe we can replace it with the actual image okay but let's make it seven only that's matching the uh this icon as well okay for this one I'm going to add some background as well so let's give the class name and here we'll say background green green 100 and we'll say text green maybe we'll add primary text primary something like this oh we already have class name let me paste it here I forgot and I will remove this class name let's save this one let's see how it looks okay let's give some padding and we'll make a rounded Corner padding of two rounded full something like this but it's very small let me make it 12 12 and now this is good okay now once you the click on this one we want to show the option right so for that one if you see we have this kind of drop down right same thing we want to add for over here as well so let's go here for the drop down right so drop down menu see this kind of thing right so I'm going to uh import this statement inside this okay we already imported okay that's cool just import this menu only let me decrease this size so we can check side by side and for this icon okay so here I'm put like this and then I will just put this trigger because on the circle we want to trigger it right and make sure it's a child save it let's click on this one wow see okay so here we will sa my my account we'll say profile we'll say my orders and here I don't know what to say uh we'll keep we'll remove one and we another we say log out okay and save it see now we have this beautiful option only thing here I'm going to add cursor pointer perfect now on the click of log out because obviously we going to implement this functionality later on but on the click of log out we need to log out from the screen and again we have to make sure that we will clear the session as well as uh uh we will refresh the screen or we will send it back to the signin page that will be good I think okay so here we add on click event and we'll add on sign out method okay so we'll create this method on sign out and add a constant and in inside this on sign out method we'll just say session storage do clear okay along with that one we'll add router dot I don't think so we import the router let's import that router so router hook we inut so constant router is equal to use router so this we are using to navigate programmatically okay because otherwise we use the link to navigate from one screen to another screen but if you navigate from the programmatical way use router is the hook okay now here we will say router dot uh push and then simply we'll navigate to signin page okay save this one Let's test this out so if I click on here click log out and boom if you go if you see this sign in pair and now it's not navigating to the new screen because we clear the session okay now let me refresh once and if you see we have this login button before it was showing the um the button which we don't need okay now another thing over here we don't want to show this uh header right because on login screen it doesn't make sense to show the header because it has a this category and all okay so what we can do let's go to this layout uh where we added the header right so let's go to this layout. JS file and over here I'm going to use one uh hook which called constant params say params is equal to use path name okay this use path name is importing from the next SL navigation so what it will do it will return the current path of the application okay so in this case it will just return sign in okay inside this params and now what I'm going to do I'm going to check constant we'll say show header and we'll check if the parents is equal to equal to uh sign in okay it will if it's a sign in then return true otherwise return false okay and then here I'm going to add a condition if show heer is of uh okay U here I'm going to just reward this and here we make true okay if sign in is there obviously shower we have to make false otherwise true and here if the shower is there then only show this header like this now if I save this one and okay so obviously we are using using this use path name hook we have to make this layout as use client and then we cannot use this metad dat anymore if you use use client okay now let me refresh the screen so this need to be a slash sign actually okay and boom if you see now we don't have that um header anymore same thing we have to do it for uh so here I'm going to add r r parents is equal to for create account well right create account and make sure it's a slash save this one and if I go to this create account there as well you don't see the header okay only thing that I want to do here to give a padding so here I will add a padding of a margin y of 20 and for the create account page as well I'm going to add margin y to 20 and now yeah that's good okay perfect now let's sign in and make sure everything's working fine and let's add a password let's sign in and if I go if you see login successful and boom you add done this particular page okay now everything is there if I see we have log out if I click log out boom it's going back to signin page perfect now even though if I go to this Lo local 3,000 right obviously we are allowing user to access this page but if you see it's it's it's saying login right and obviously uh on the add to card it will check whether you sign sign in or not obviously that will see later on uh in this particular course but until this point I hope you understand this complete authentication part I know it's bigger it's a little bit lendy chapter but it's very important for any application right and that's what you learn uh the huge U the authentication using a jwd token is very important part in any IT company okay because if you go for the interview and if they ask about the JWT token how you use and how to store the data how to sign in and everything that's you learn just now so guys see you in the next section so there is one quick fix we are doing so if I go to this login screen and if I type something okay some random information right let me open the inspect panel side by side go to the console let's clean everything and if I try to sign in right right now if you get we are get just showing server error okay and we are not showing actual message what happened or what is the issue right even if I type something like this okay let me add something and sign in right see it's saying server error right and us don't know what the actual issue so if I go to this error right and here inside the response we have data and inside the error we have that it's saying that invalid identifier or password okay so that toast message oh sorry this particular message we want to show inside the toast okay so that you get to know what's the issue so in order to show that message we have to write e Dot and then we have to follow the structure so inside that we have the response so e do response okay then inside again uh we have the error do message okay and let's save this one and let's test this out and if I try to sign in and now oh uh it's not correct let me check it in the response and data okay let me and data and then error okay okay so inside this again we have the data and then we have error okay inside the data we have the error so let's check this out and boom if you see invalid identifier and password okay same thing I'm going to copy for the create account as well and create account and over here as well we will paste it here and save it okay also uh when we user fetching the information right we're going to show some kind of loader so here I'm going to add a loader set loader is equal to use State okay obviously we will put the value true and false so when you click on sign in here we going to set the loader as a true and once user sign in in corre successfully we'll set the loader false and same thing over here if there is any error we'll set the loader as a false okay and save it now here obviously there are two way we can do it okay we can show the some kind of loading or we can disable the button so um inside this button text right here only thing I'm going to do we'll add a uh let's add S2 tag and inside that let's say sign in okay we don't need that one actually let add icon first okay if the loaded is present then we going to show uh the loader icon I don't know what yeah loader icon from the Lucid icon otherwise show the text called sign in something like this okay if I save this one just for the example purpose I'm going to make this as a true if I save this one see this is how loader will display okay but it's not spinning or something like that so what we can do uh we can add a class name and here we have one tell me say class called animate Spin and now if you see it's beautifully spinning correct perfect let me R this to and I will remove this one and now let's test this out so here I will say admin at tub Guru g.com I'm going to say some password let's sign in and boom see correct now if I enter correct password I don't don't know but let's see obviously it's seeing login successful and boom you redirect it okay same thing I'm going to add in a create account as well so we have set loader over here and on the create we'll set the loader as a true and here we set the loader as a false and over here as well set loader as a false okay and for that oncreate button I will copy this existing code and inside this button where we have this button yeah over here I will paste it and I will remove this one and here we will say create an account save it okay perfect so this is the Quick Fix just to make our application much better and flow much better that's the reason we added this uh quick fix so as you know that once user click on add to card item right we need to check whether user is authenticated or not and then it will redirect to the uh signin page if he is not authenticated otherwise we can able to add the data inside the um our database okay so let's uh go through how it going to work right so if I click on add to card right obviously right now we did not add any functionality but but on the click of this add to card we have to check whether the user is loging or not now uh inside the strappy right I create a new uh collection called user card inside that I added the quantity the amount okay so total amount and number of quantity also the products so in inside this prod product it I connected with the Rel is connected with the relationship as of with the product okay and same with user permission users okay so it connected with this user collection and one is for product okay so you just need to push the or add the ID and automatically get connect with each other one more important thing if I go to the setting right as we are sending the jww token for those these kind of uh API right so inside the authenticated you have to make sure you will select the product uh select everything okay and same thing you have to do it for the user card as well okay and then user permission then only uh so inside the user permission here you have to select this uh users otherwise it will not get connected uh with our uh record okay so make sure to add that inside this authenticated now let's go back to our application so I will open here like this and now on the click of this add to card right here we have the add to card button correct let me the size that will be good actually and now here I'm going to create one method inside the product item detail here we call constant add to card right so this is the add to card method obviously we'll connect it with this button so unclick say add sorry add to cut something like this okay now over here we need to check if user is already loging or not so we need to check our if the jwd token is there or not here we'll check with the session storage dot get item and just simply jwd token now here it will check if jwd token is not there then we will navigate to the signin page so here we're going to add the router constant router is equal to use router from this next SL name ation and here simply I will add router dot uh push slash signin page okay and I will return empty something like this okay and if uh the jwd token is there then we have to write a logic over here okay now over here let's go to this our Global API sorry Global API file and here we going to create a new uh method endpoint so call add to card here we going to pass data along with JWT token then exus client dot post method because we want to save the data right in this case so/ users card then we have to pass data and along with that obviously we will pass the header with the authorization token because as I say this is the protected API endpoint right so here we need to pass header inside that we have to pass authorization token so we have to pass a bearer token okay so this is how you need to pass oh sorry and then the jwd token make sure the here comma okay so Bearer and then jwd token and that's all okay obviously uh let's save this one and make sure to export this like this and add to card okay now this add to card method we going to call it here so we say Global API do add to card here we need to pass data and jwd token which we already have do then response okay and we'll console the response here but obviously we need to define the data okay so let's define the data so whenever oh sorry uh constant data is equal to here now whenever you want to create a new entry right there is some specific format that you need to follow so so if you search here uh strappy API okay and the rest API reference documentation here you have option uh or documentation for the create entry if I go to this create entry you will find how they actually add the body Okay so here inside the bracket we have the data and inside that you have to provide the field which you want to save so in this case if I go to this content type Builder and inside the user card let's create a entry these are the four thing we need to pass okay so let's go here and inside the data we will say um first is quantity and what is total quantity there we need to pass okay so if you see this is the uh let me check I don't know whether we have yeah this quantity then we need to pass let me get back here and amount okay so second is amount so we'll pass the amount as well now amount is the is the uh is quantity multi multiply by total amount I don't know whether we sa our product total price here okay and then we'll fix to two digit so something like this then next is we need to pass the products okay so if you see right as we already related with this products Cate product collection so we just need to pass the product ID okay so here I will pass the products and the products ID will get it from this product because we already have product information so just we need to do product. ID okay and then next we need to add the users information okay so let's copy this text as well comma and that obviously we need to get the user information from the session so here I will write constant user is equal to json. pass because it is in the string format we have to convert it into uh Json so that that's right that's the reason I write json. pass then session storage. get item user and from the user we'll get the ID so here we say user. ID okay now if you think you want to make sure that data is right I will just consol it here and that data we pass over here okay also if everything is good we'll say toast message and we'll say uh added to cut okay and if there is any error we'll also write for toast message error while adding into card perfect okay now let's save this and let's go back to our application if you see currently in the user card we don't have anything okay also just now I realize that U here we Define this constant data right here obviously the format is like data and inside that we have to Define this information okay and then save it now let's go back and open any of this uh particular item for example if I want to add two item okay and the price is 10 let's click on add to card okay so if you see we got this beautiful to message saying added to cart let's check our cart here so let's I don't know where it is oh I think we close it somehow and if I go to this content manager user card and boom we got that card if you see we have two quantity we selected the total amount is 10 the product which we added and the who added that particular product so that username also showing over here so cool right it means our add to card is working let's add another item let's add for example this this one okay let's click on add to card and if you see it's showing but right now if you just observe that right it's taking some time to update it obviously we are sending it to the server obviously it will take some time right so here we need to show some kind of loading effect okay so that uh we it's uh the cart is getting updated or something like that okay we'll do that in a moment but right now let's see whether the second item is added or not and boom here it get added see perfect right now only thing as I say with we'll add some kind of loading effect so we here we'll say constant loading comma set loading is equal to use State and we'll initially make it false okay so when user click on the uh this J uh sorry add to card button we set the loading as a true first thing obviously here if the uh it navigate will set the loading as a false and once we added into the card here we will set the loading as a false again and on the error as well we set the loading false okay and then whenever we have the loading We'll add a condition here so we'll say if loading is there correct then we'll we'll add a loading icon I don't know we yeah loading loader loader icon loader Circle let's add loader Circle and if it's not let display the card add to card text okay obviously we don't need this anymore now and over here for the animation purpose I'm want to add class name we'll say animate spin okay so it will actually spin it and also we have to make sure I will disable this button when the load is true let's save this one let's go back to our application let's try to add this item We'll add a two item and click on add to card and boom see it's getting loaded and now we got the beautiful added to card message perfect right and now if you see in the card okay let me refresh this card boom we have the three item now perfect right now the thing is we need to update our basket number over here okay now let's update this number as well so little bit I'm going to uh style this number okay so if I go to this header because that card item is in the header so if you see right right now we just added this zero right here I will put in this pan tag and we'll put zero over here and then in the class name I will add a background of primary t T white padding of one padding X to two and rounded Corner around it to be full let's save this one make sure how it looks so this is how it looks that's weird um let add padding X to2 only perfect okay now we have this beautiful number only thing that I want to change this basket to some other here we'll say shoping basket instead of shopping bag see something like this okay only thing I'm going to change this size so class name height of seven width of seven little bigger okay now we have the item number here as well now the next thing what we need to do uh is to show the actual number okay so uh I'm going to Define one state here we'll Define constant and we'll say user sorry not user uh total card item comma set total cart item is equal to use State and initially I will pass it as zero and this total card item I'm going to replace with the hardcoded zero so instead of zero we'll replace with this total card item let's save this one let's go back to our application and and let's make sure everything's working fine okay now what what we need to do we need to call one method over here and we'll say constant get card items and this method will call one API which is which will get the total card item for this user who added that uh item into the card right and then count we will show it for inside this uh total card item uh State okay here I will just write uh use to get total card item now in order to get the card item right we have to make sure that we'll pass the user ID to face the card information right so what I'm going to do I'm going to little bit do some change inside the user card here obviously we are saving this user permission users but it is related with the user right and in instead of that one right obviously we will keep that one as well but here I'm going to add a user ID as well okay so let add a number here we'll say user ID okay and the number format is integer let's finish it and then save it so what it will do we when we add into the cart right we will store the users ID only the ID right whether it's a five six whatever the ID of the user is there we will store that one and that will very easy to fit the user card uh all the items belong to user card so now let me go to this content manager and for the user card right let me refresh once here I will clean everything for now and just make sure that we have the user ID perfect and whenever we add the card we'll also add new field here called user ID and then over here we just set user. ID as it is okay let's save this one and just make sure once that it's working fine so let's add this item add to card it's saying added to card make sure it showing so let go to user card perfect and perfect now if you see we have the user ID six now in order to write API right right now if you see I have just user card if I enter it obviously I have only one okay but along with that we have to write a filters option inside that we have to write user ID equal to if you see already there but equal to and the number which is belong to user ID and the popul is equal to Star if I enter this one okay let me add add populate is equal to Star okay and now if you see we got all the information perfect right so let's copy this endpoint go back to your application inside the the global API and obviously here we need to write constant get card items here we need to pass user ID comma JWT token exos client. gate method and here we'll just paste it okay and obviously instead of this one I'm going to add the user ID okay and then we have to add the header so let me copy as it is and we already have JWT make sure to export this get cart item let's save this one and now inside the header okay so what we can do we can directly call it here only so just return the response. data do data okay and once we have that one let's go back to header and over here we'll just C constant here we'll say uh cart item list we can say await and here we'll call Global API dot get card item that's it obviously we need to pass here we'll make this function a sync and here we need to pass user ID I don't know whether we have the user information okay we don't have user information let's get the user information over here is equal to json. pass and over here we'll need to write session storage. get item user and then once we have the user we'll say user ID comma JWT which we already have now here I'm going to write console get card item oh sorry cart item list cart item list okay now obviously this particular method we call in use effect okay but we'll call in different use effect okay another use effect I'm going to tell you why we are calling another use effect in a moment but here just call like this let's save this one go back to your application wow we got one error so let's see the error what's the issue so it's saying JWT is not defined make sure it's there okay wow it's not there it's actually not there we just have this condition so I will add that one so we'll say constant JWT is equal to B and let's see and if you see line number 48 we have that one count and we have the amount user ID and everything okay and inside that one obviously we don't need that one but we just need a length of this particular list right so obviously we have this particular state so we'll just write it here set total cart item and here we need to set cart item list dot length Okay and as soon as Define like this you will see the total card and now is one okay now for example if I add another item into the card right and go back if you still it's still showing one right but if I refresh it then it will show a two okay see because we are not telling uh to this header method which is a get card item that okay the new card item is get added now you have to get the new updated data correct so for that one we have to create a context right so the context is very helpful when you want to share the information across multiple component okay and obviously you can share it and you can update it from anywhere and once you update it it will reflect it in all the components okay so let's define the context so here I will create a new folder called context and all the context we will store inside this underscore context inside that we'll create a new folder we call update cut. jsx here we say export here I want to just rename to card context okay so export update card Contex text export constant actually then here we'll say create context and this create context we are inputting from the react okay and initially we'll pass the null value and save it now once you define this context you have to wrap your all the component uh inside that one so for example inside body I will Define um update create context see is importing from the context. provider okay because we are providing some value so this that is nothing but the provider okay and then here we need to define a default value okay so let's define state so we'll call constant we'll say update cut comma set update cut is equal to use State and initially I'll make it false and this two value we have to pass to this as a default value for this context provider and and save it okay now whenever we update or added into the cart we have to update or change the value of the update card context right so first inside this product item detail where we are adding into the cart here I will Define the context so here we'll say so whenever you want to use the context right you have to Define in curly places here you have to Define update same name you have to give set update card so whatever the name uh sorry state name name or variable name you give here same name you have to give it here but inside the curly braces because you you are using the context here you have to write use context and then you have to write the which context you want to use so in this case we'll say update card context okay now I will whenever we update the cart right so here we are adding into the card here we say set update card and I will just reward the value of the update card because it just trigger right to false false to two kind of thing correct now save this one I will copy this context and let's add into the header as well okay make sure to import this use context and update context right now whenever the update card get changed obviously I will push it sorry add it into use effect right so what will happen whenever the update card value get changed this use effect will get execute automatically anywhere if you update this uh update card context value from any component okay this will affect the user effect and it will execute and it will uh this us F will get execute and then our get item card also get execute let's save this one and test this out now let's like now if you see we have the two items right and let me close this one now and I will add this one item okay even though you added two item doesn't matter right and click and add to cut and and boom if you see it added to card we did not refresh the screen yet and if you if you see the magic now it changed from two to three automatically without refreshing the screen right and that's the why we can share or we can trigger the any method with the help of context just to inform that okay now you have to update the context and once you update the context add it in inside the US effect and then use effect will get executed okay if I added one more item see it's changed to four so cool right so this is how you can add an item okay um and uh you can also update the card number as well now as you know that uh on the header we have this card uh icon right and on the click of that we need to show all the list of item which is added into the card okay so if I go to this application and if you see over here once us click on this one we need to show the card so for that one we need the product information along with the product image as well so currently with this particular API right uh which is a user card we are getting quantity amount and user ID who added that into the card but we are not getting the products obviously if you uh do the populate let's say cards question mark populate is equal to Star you will get a product information but not the image because image is a a nested uh element right so the question is how to do it so for that one if I paste this right this is the way that you can populate so you have to write populate then what you need to populate which is the products again you have to populate in that we have to populate images and populate zero which is and obviously what we need from there we need the image URL right if I enter this one now you will see we got the image data as well okay so this is very important uh this is called a nested uh if you if uh nested if you want to F any nested Fields information right which is reference to other uh collection type then this is the way that you can f it so obviously uh you can refer the source code anytime okay so the all the code which we are I'm showing is in the uh in the source code right so I will copy this particular uh populate command and inside the user card right after this maybe and we will add it here like this okay and in the response right here uh we going to map the response in some specific format right so we'll do constant here we'll say uh result is equal to response. data do data okay and then not here we'll say um data only and here we'll say constant result or we say card item list is equal to you say data do map and in that we have map item comma index and then Arrow function like this okay let me do like this okay because we want to map it so first thing if you want to map a name of the product we will say item do add do data sorry do attributes do products uh in that we have data of zero because we will only get a first element then attributes dot name okay and obviously anytime you can check this so in once we have the attributes we have the products inside that we have the first element which is the first product from the data and then inside the attribute we have the name of the product okay let me go back then we need to get a quantity quantity which is quite simple we we have to wrate item do attributes do quantity then amount we have to write item do attributes do amount then we have to write image of the product so here we'll say item dot attributes and here we'll need to again okay so I will just copy all of these things as it is and then after the attributes we'll say images in that we have the data of zero do attributes. URL okay so obviously you can just uh check the way that mean you have to get the data by fill by field okay the another one is actual price of the item which is again uh uh the we'll get it from the product so attributes. MRP and the last is the ID of the product so ID sorry ID of the record so item do ID something like this okay and then once we have this card item list which is a maap uh list we will return it back to our header okay because we are fetching inside this header here uh if I go back to this yeah get card item over here okay so on this one I'm going to store this data so we say constant we'll say card item list comma set cart item list is equal to use State and then we do set cartam item list over here oh so name is similar so I will just put underscore something like this okay and then save it just make sure that uh everything is working fine and if you see we have this three product is coming if I go to the inspect panel and let's go to the console and if I if you see we have the three items and three item is showing and if you see that is format in simple way right so each of the strappy response you can format according to your need now it's very simple to add the product list okay but for that now we are going to use a shadan uh sheet component if I go here there is a sheet component and if I click on this one see this is how the sheet will open from the left hand side obviously you can uh you can map on the top from the bottom from the left it's up to you how you want okay so in order to install it you have to copy this CLI command go to your project and paste it here next if you scroll down you have to import this statement now on the click of this uh basket icon right or this icon we need to open that particular sheet so obviously we need to add that inside the header only so I will import the statements inside the header and then let me go to shatan I will add the exit Sheet example okay so where you want to open the sorry on the click of that button we want to open right so that's this this is the one right shopping basket and this is the S2 tag right yeah bring this down so I'll paste it here and obviously we need to bring this h2 tag inside this sheet trigger because on that one we need to open the sheet right let's save this one let's T Test this out now on the click of this one see the sheet is opening perfect now uh I'm going to replace this sheet header and I will say my card uh for this one I'm going to also add some styling to this one so let's add a styling so here I'm going to say class name we say background primary oh God background primary then text white text we say font bold and text of and we'll also give padding of two okay let's save this one and let's test this out how it looks so if I click on this one this is how it looks that's good next uh here we need to display the list of items which we added okay so what we can do we will add a new components under this underscore component we can call it as a card item list. jsx add the default template and I will add that cart item list over here now okay for this cart item list I'm going to pass cart item list as a cart item list and inside here whatever data we received we'll accept it as a props let's save this one both the files cart item list is showing over here that's good now here we need to iterate that cart item list okay so let's add a du inside this du I'm going to add card item list do map here we'll say cart comma index and that function like this then we'll add a du and inside this du first thing we'll add a image let's add image cart. image okay here we're going to give width let's say width of 70 height of 70 and for ear tag I'm going to give the card do product name let's save this one let's check it out whether we are getting that image or not so right now the image is broken because we did not added the base URL this particular base URL right so here simply I'm going to add process. EnV base URL plus C item list let's save this one and just check it out see perfect after that I'm going to add a class name and for this one let's add a border and padding of two after this let's add a One D and for this particular de uh we'll add a title for the product so we'll say card. name then we'll say Quantity at card dot quantity and the last is price so it's in the dollar so here we'll say amount obviously here we got we going to give some styling so class name here we got we will add a font bold for this one right now we'll keep as it is and for this class name we'll add a text of large and font Bard let's save this one let's see how it looks see obviously we'll bring in one line so for this let's wrap this in one de again and for this du let me close this tag for this du We'll add a class name make it FX get gap of six and also we'll make item to in the center okay now if I open this side navigation bar see how beautiful it looking right also after this du I'm going to add a trash icon so trash icon okay if user want to delete uh let's add outside of this one I think okay so obviously it's it is in the down but we want in one line so let's bring that one so we'll say class name make it flex and say justify between item to in the center and let's see how it looks see Perfect Right obviously we give some uh margin so here we'll give some not here but let's give some padding of two and we'll say margin bottom to five perfect I just change this height and width as well and this is how it looks beautiful right at the bottom we need to add the button okay so let's add outside of this D here we going to add h2 tag for sub total and in the span tag we'll write total amount okay for example let's say $90 for now and then after that we're going to add a button and it will say uh view card let's save everything Let's test this out see obviously we will give some uh padding and margin so here we going to add class name we'll say absolute position and we'll put width of 90% send okay we'll put it on the bottom six we'll make Flex Flex column for this subtotal I'm going to add a class name we'll add a text large font bold we'll make flex and justify between and let's see how it looks perfect at the bottom see perfect right now this is how our card is is ready now the thing is uh we need to calculate the sub total Okay so let's do that so here I'm going to Define constant you say sub total s with capital comma set sub total is equal to use State initially I will put zero now inside the use effect I'm going to calculate that uh subtotal okay so let's say let total is equal to zero and then I will iterate the card item list do for each something like this and we'll say total is equal to Total plus element sorry element plus sorry dot amount okay and whatever total value we'll get we'll set that total value so sub total is equal to set sub tootal is equal to total okay and we'll make sure that whenever the card item list is there uh then only execute this and sub total will update the value and obviously over here whatever the hardcode value we added here we'll replace it with the sub total let's take this out as well so go here and if you see the sub total okay so 5 + 5.96 + 3.29 which is equal to 14.25 that's perfect next if you just delete on any of this particular cart item right we need to make sure that it will remove from the cart so for that one we need to add inpoint okay which is a delete endpoint so let's go to This Global API and here we're going to add new endpoint called constant delete card item it will take the ID of the particular record and jwd token then exuse client dot delete here you need to make sure that you'll put the delete operation and then the API end point so in this case it's just user cards okay and then you have to provide the ID which is Slash and then plus ID okay after this one you need to add let me yeah this particular header so I will just copy paste comma and this particular header we added okay make sure to export this delete cart item uh Endo so that we can use it so when user click on this delete item right so this is the delete icon so here I'm going to add on click method and here we'll say on delete item and here we'll pass the It Card ID so card. ID okay so this method we are going to pass back to the header okay mean it means the p component so we pass back so we use this um card item list inside the header so we'll accept it here and here we simply Define this on delete item method and in that obviously we are passing ID so we'll get the ID and here I don't know with okay we have the jwd token as well that's good so here we'll just say Global API do delete card item here we need to pass ID and jwd token dot then we'll write the response and here we just say toast message that uh item remove let's climit mark and then save it let's test this out so if I go to the card let's delete this third number if I delete this one so if you see the item is remove mode right but it's still showing here right because we did not refresh data but if I refresh here now you will see the count is two now so what you need to do whenever the item is removed we have to make sure that we will refresh this get cut we'll call this method called get card item that what it will do it will get the latest uh cart data and then it will update our cart item list around um along with the this uh count as well okay now if I go here and delete this one it will say item removed and boom it's gone okay only thing that I want to add for that trash icon is a cursor pointer perfect okay now let's add some card so let's going go to the fruits and here I'm going to add card item three then I'm going to add pineapple as well perfect okay now if I go here now we have three item let's delete this mango it will say item removed and boom perfect right now the sub total right now uh sometimes is getting longer so make sure to do it to fix so let's go to this card item list and over here we set to fix to two perfect and our card item is beautifully ready okay so guys uh that's all for this particular section that I hope you understand how beautifully we added that sheet uh for our uh cart item so whenever user click on this basket or cart item user will see all the data okay now one last important thing here if there more than uh seven eight cost let's add some more items okay let's go to this vegetables I will add some more item let's add this one let's add this one as well and I don't know let's add I don't milk and Juice let's add this one as well now if I go here you will see the distruption right it's not perfectly fine so what you need to do you need to uh give the I mean this these are this subtotal is fixed right so let's go back and fix this issue so inside the card item list for this particular du you have to Define some height so we'll say height of 80% of the screen okay because the remaining one we are giving to the button and sub tootal right so if I go here still nothing get reflected but here we'll say overflow Auto and just check it out so here instead of 80% let's go 500 pixel okay because sometimes scroll pixel will work and check it yeah if you see now you can even scroll this one okay if you think okay this item is not required delete this one and boom perfect right so that's all for this particular section I hope you understand uh how beautifully we implemented the uh card section so there is one quick fix okay so what I did I create a new uh page called checkout so I added this uh checkout folder okay so I created a new route called checkout and inside that I just added the page. jsx file okay now when I click on this checkout button right right now obviously we did not add anything correct but on that checkout button I want to make sure that um this particular dialogue will get closed okay so what we can do uh let's go to the header and over here obviously on the click of check out we we want to navigate it right but before that we have to make sure that checkout button is getting uh close it closes our uh side sheet okay so from the card item list I'm going to remove this D from here and inside the header after this uh sheet header I'm going to add one component called sheet close okay inside that sheet close I'm going to add our de okay let me format this and then here I'm going to mark it as ad child obviously we are calculating sub tootal so that subtotal logic we will cut it from here I will cut it from here and then inside the header I will paste like this okay now here obviously we have everything uh which we needed and we are good okay so let's save all both the files go back to our application now if I click check out see now the header is get sorry the side navigation bar is getting closed perfect right now only thing we need to do uh let's go to this header and we will add on click method over here right and we want to navigate to the checkout page so for that one let's define the router so obviously we already have the router defined that's good so here I will just add on click say router. push slash slash checkout and save it now if I go back to our application let's check it out if I click check out see boom it's open the checkout page and the side navigation bar also get closed okay but one more thing here we need to do uh we'll write one condition we because we want to make sure that checkout page is uh protected okay so if I go to this application right and this checkout page if you see it comes after the authentication only if user has authentic authenticated then only we going to show this checkout page that is very important so here we need to check if uh let's check whether session storage or not session storage because we already have the JWT token so JWT is present then go to the checkout otherwise go to the signin page okay let's test this out let's go back and uh let me refresh yeah now if you click on check out it's going to check out page because we have the jwd token right but if I go here and click on log out and if I try to go to checkout page it will not allow me but if user manually go to the checkout page then only also we have to check whether you is login or not okay so obviously next we want to implement the checkout page now first for the checkout page right we going to add uh we will divide actually the screen into two part okay one part is uh for the product sorry uh the billing details which contain user name address and all and other contain card total along with the taxes delivery charges and then uh it calculate the total and all okay and on obviously we going to give the payment method option and once you click on payment method it will naate to the payment method okay so this is how simply uh the checkout page will be so what I'm uh going to do uh we know we already have this checkout page. jsx file which we created inside the route folder I already have the code it's quite simple I will just paste this code over here okay so let me explain that quickly so I divide the screen into two part one for the billing and one for the card information okay and right now if you see I just hardcoded the value obviously we want Implement all the logic okay only the UI part I added if I save this one okay right now obviously let's import this input and Button as well and the arobic right okay and I think we are good now if I go to checkout page and this is how simply it is right on the checkout user will fill the information and then uh here we have the total and everything okay obviously we we are going to calculate all of these things now let's go back to our application here uh one more important thing we need to do because uh when the screen size is smaller right we need to change the layout so here I'm going to add when the screen size is smaller we have to G column one and when is medium then we'll show GRE column 3 and here as well I'm going to add for the medium now this is okay I think uh we going to add for this now if I de is the screen size okay see this is how it looks okay if you want this at the top you can give the order last and order first okay so maybe um you can do that one you can check the T CSS documentation and then you can update that but for now we'll keep as it is and now here first thing we need to get the to users uh card details right so as you know uh if I go to this header right because we already have the lot of code ready I will just use that one so first thing we need to do is users and jwd token we need it so I will paste here and uh then we need the get category not get get card items okay so I will copy this code as well make sure to import This Global API this code is just to uh F the um what you say all the cards which belong to that particular user okay and we have to Define this total card and all oop sorry we added this ug State let's make add that one and for the total card item and they set come item list so that this one as well we need to use it okay make sure to import and I think we are good now this G card item we need to call so get use effect inside the use effect we're going to call this method like this okay now we have the total cart item so from here we going to replace this with the total cart item we say total cart item let's save it and make sure it's working so right now we use use effect so we have to make this page as a use client and right now if you see the total C item is showing six that's good okay now we have to calculate the sub tootal as you know that for the calculating the subtotal we have this particular method right which is because we just copied that one so we'll use use effect as it is along with the subtotal logic and then we'll paste it here okay I will just for a sa purpose I will keep this over here and this us effect we'll calculate the subtotal and instead of subtotal section I'm going to put actual total so here we'll say sub total let's save this one let's see now if you see we have the sub total if you go here and we'll check the subtotal is matching right the delivery charge which is hardcoded value so I will keep as it is right and the tax obviously uh we'll calculate on the subtotal uh amount right and then will show the total so let's do that one as well so here I'm going to uh add one method called constant calculate total amount now here we going to calculate this total amount right so here we say constant and simply okay just write constant for now we'll say total amount is equal to so as I say we have to get the uh 9% of this one so we'll say subtotal into 0.9 then we have to add this $15 into that one we'll say plus 15 and I think that's all okay and then we'll simply return return total amount okay and let's try to call this calculate total amount over here and save it now if I go back so right now if you see the total amount is G here we just make uh two fix so to two digit only fix to two and save it and if you see now the amount is changed and which is 53 okay also as I say if user is log out we have to make sure that check it will redirect to the signin page right so on the use effect we'll check if uh JWT token is not there then obviously uh we'll add a router constant router is equal to use router and then it will router Dot push and we'll say slash sign in let's save this one okay and that's all now only thing that's remaining is uh to uh get that users entered value right so for that one you can use a formic or form okay or you can just simply you use state to F this all of this value so you can try on your own obviously we want to implement this one but I hope you can try it and let me know if you are facing any issue or not now we store all of this value so let's go back to our application inside the checkout page and over here with the help of use state only we going to store that value so here I'm going to Define username comma State user is equal to use State okay and same thing I'm going to do for a couple of more so this is email set email then phone set phone zip set jip and the last is uh address okay so all of these parameter or value we we want to store along with obviously we going to store the total amount okay now uh this is very important in the uh strapy CMS to create a proper collection for this one okay so inside the uh contact content type Builder inside the component section right I created one component which is a order item inside this I added the quantity the price and the product so this product I connected uh to one to one Rel with the one to one relationship okay and obviously here we only store the product ID okay and this is the component this is very important this is a component okay so this component can be uh used inside the collection to reuse this compon from multiple times okay so let's create a order uh collection okay let me and inside that first thing we for example let's add username then we'll add email the phone then we'll add a zip code ZIP code should be a number but sometimes zip code will be a different for example in Canada it's not number so let's add a text only the address will be a long text and we'll add address okay then the total amount right it should be a number in the format of decimal and we'll say total uh order amount order amount okay after that we want to add the user ID who added that so it's be number user ID then we want to add order or payment ID okay so we'll say payment ID as well and then as I say we need to add this component field now obviously we already have the component so select this use existing component then click on select component and here you can give the component name here we'll say order or we'll say just item list order item list okay here you have to select the component because right now we already we already have one component so select that one and you have to click on the repeatable component okay so that you can add a multiple list of the item okay so when I say the list list of the item it means this particular list this is 1 2 3 4 okay these item we will add one by one so I think this is good let's click finish and if you see now order item list is get added okay let's save this one obviously it will save and restart our um strap CMS so we'll wait and if you see now it's ready now if I go to the content manager inside the order section and now try to create a new entry here you can give the some name here you can add the some email ID okay the order email ID uh the phone number if you want to add some J code right the address you can add it here the total amount whatever the amount is there user ID you can add the payment ID and the main important part which I want to show the order item list so here you can say for example there are three quantity total price is 45 and here you can see you have the product list okay now you can create another entry and same thing you can do it here as well so cool right so this is how uh we can add the order item list and obviously uh while uh sending this data from our application to this particular stri icms that part or that logic is very important now once you have everything is ready go to the setting and inside the roles authentication sorry authenticated role you have for the order make sure you'll select all of these things click save and boom okay now it's available uh only for the authenticated user now let's go back to our application and inside here product right we uh let me check so this is check out page right here we added all of these things obviously let's connect that one to this all the input so we'll say on change event e set it's a username right so username and E do Target do value copy this one paste it here for zip for address as as well here I'm going to replace do set email then set phone set zip and set address okay now all of this information is ready okay and obviously uh these are the value oh I don't think so we need to change this one right because we forgot that tax amount over here so we'll calculate directly this need to be like this so total cart item into 0.9 and then I will make it to fixed to fix to two decimal okay perfect now save everything let's go back to our application and as soon as you enter this value we going to already setting it into our state something like this okay now over here the next thing is our add the payment Gateway okay and once we have the payment Gateway is ready and on the com uh successful payment then we going to store the order detail in our database okay this is very important guys the only after the making the payment we're going to store the detail so for that one we going to use a payal Paypal payment Gateway so that one we'll see you in the next section now we are going to integ create the payment Gateway so if you see once user on the checkout page and once everything is filled out and user click on the for the payment right uh it will go to this payment gway method and once user uh successfully do did the payment right uh successfully payment ID generated and everything is done then we are going to store the order details inside our database if the payments is not successful then again it will redirect to the checkout page only only okay until unless user is uh uh did do the successful payment then only we can store the users order detail so for the payment right we are going to use a Paypal payment Gateway so let just go to this developer. pay.com and uh you can create an free account okay for it's a Sandbox account if you want to go to the live you just need to uh submit some documents okay otherwise you can uh uh use it for the development purpose so over here if you scroll right you have option over here called API credential open that one and inside this API credential documents you will find that a client ID okay so this client ID this this one we needed for our application but before that uh we are going to use this PayPal / react PayPal JS Library okay so let's go to this GitHub repo and if you see this is very easy to install and easy to use as well so first thing you need to do is to install this dependency so go to your project and inside the terminal I will just add it here so it will install the Paypal payment sorry this particular library after that uh in order to use this PayPal button right because it automatically add the button and everything the UI and everything is ready first thing you need to add the PayPal script provider okay so I will just copy this one and then you have to go to the layout. JS which is our parent layout okay so this one and outside of this I will wrap this complete application like this and make sure to import this PayPal script provider uh using this p/ react provider and instead of this client ID here we're going to replace it with the client ID from this actual dashboard okay so if you don't have you can create one okay and if you want to get it again just click edit and from here you can copy and then inside the file We'll add that uh client ID we'll say public underscore PayPal client ID is equal to and then we'll paste that client ID now we'll copy this one and over here I will just use it process. env. next public p client ID and save it now only thing that we need to use is the button okay so obviously this button we can use it uh let me go here inside the cart item where we have this uh checkout page right sorry and inside the checkout page we have this button called payment so instead of this button I will paste this button and make sure to import this PayPal buttons let's save this one and if I go back to our application you will see this two button get added okay now obviously if you obviously we don't need this button so I will remove this one and if I click on this button right see it will open the payment Gateway you can log to the account and everything is there if I want to go with or want to log with the pay with debit card you have option over here so cool right now over here if you see if I go to this PayPal right and uh obviously you can log in but uh let's go to this pay with debit card and you'll see the amount is 0.01 right which is not correct because right now the amount uh the amount which we want to uh pass to this PayPal is 53.2 in this case right so for that one you have to create an order okay so this is the particular code to create an order so here if you see the we we are getting two parameters called data and action in action we are uh we have we are creating the order and inside the purchase unit we are passing the amount and the currency so in this case the amount is the our total amount right so we'll just add this total amount or we can just call this calculate total amount method okay so here we want to call this method and let's save it and let's test this out now so if I go to this PayPal and if I go to this pay with debit and credit card now you'll see $15 which is not correct with we show only showing delivery one let me check again so it's better to store this value in some variable okay so we'll say constant total amount comma set total amount is equal to use State and over here we will set the total amount value which is equal to this one and this total amount value we're going to send over here okay something like this now let's save it and let's try this out so it's saying too many reenders react limit of numbers okay let's see what the issue so this is look correct okay so over here we'll setting this amount we are getting this error because maybe because of this one okay so let me calculate manually okay because we have the subtotal and uh this subtotal we are getting from here so over here only I will calculate okay so we have the uh sub total so I will use this logic it's little bit complicated but yeah that's what we need to do okay now let's save this one and and okay make make sure the total amount is rendering over here so let's test this out we say PayPal say debit and credit and it's still showing $15 I don't know why okay let me refresh this once okay so the issue is over here we need to change this total because we don't have sub total and then this value okay let's say this one and now let's take this out so if I go to this PayPal and go to this pay pay with debit and credit card and if you see now the value is correct perfect right now you can fill this detail and then you can t this out so this is the uh developer PayPal testing card okay so here what I will do I will copy this testing card okay this is just a random testing cards it's not a valid one it's just for testing so I don't know why okay let's close this one Let's test this out I don't know whether it will work or not so let's go to this deit and credit here I'm going to add a card number let's remove this one add a card number let's add some expiration date so 627 and 790 as a CVB 790 as CVB here I will say tube guruji YouTube street address TR Street I don't know whether we need this or not and we'll say pay now okay here you're asking mobile number wow let me add my mobile number so I added my mobile number and let's add a city let's click pay now maybe it's saying okay that's fine click continue and it's saying thanks for using PayPal and boom it's going back to our application obviously I just switched that the reason okay but it's come back it means our payment is successful okay but over here uh we need to write one method okay so if I go here and there is one method similar like create order here we have called on approve okay once uh user successfully approved mean did some payment and everything right then it will return the result okay so what we will do we'll search just right we'll call this on approve method we'll create a new method called on approve and it will rece the data okay we'll just console the data so you'll get to know what are is in the data okay so let's test it out again so I will add the PayPal and let me add all the details I will pause this video and I will add all the details now I fill all the details and let's say continue okay so it's now it's saying again thanks for using PayPal let's go back to our application and I want to see the inspect panel let's go to the console so if you see we have the object and inside this object we have have this data okay ignore this thing this is different one okay so because I used popup two times so that's the different issue but if you see the line number page 64 which is this one okay and in that one this is the information that we got it okay it has order ID the payer ID the payment ID which we are going to store it okay and it means our payment is successful correct now I hope you understand how beautifully and easily this is one of the most easiest PayPal integration you will see on the YouTube or on the internet right so this is how you can add the pay PayPal integration now as I say once the payment is approved then we are going to store all our all of our data inside our database okay and then obviously once everything is said everything is stored then we going to redirect to the um uh completion or ordered completion page where we show the uh that some kind of M message that okay your order is successfully placed and that's all okay so this is how we are going to do it now but I hope uh in this particular section you understand how easily we integrated the pay Paypal payment Gateway now once the payment is successful we need to create an order into our database okay as we already have this uh collection call name order where we are going to store all of this our data okay once the payment is successful so let me go back to our application and over here okay so this is admin panel okay this is the store and inside this one right we need to add um let's open the route which is a checkout route okay in in the page. jsx file here on the approve we need to add the data correct so here I'm going to create a constant and inside that we'll say payload inside the payload we'll create a data field data object and inside that we have to create all of this uh we need to add all of this field right so one more important is I want okay payment ID right so that we'll add so we'll say payment ID okay so this payment ID will get it from the once the payment is successful using this data. payment ID then the order total value okay so let me check is is correct okay see it is called total order amount okay so so total order amount is nothing but this total amount okay we already storing so total amount then the user uh username which is the username we are already have state for that one right just make sure that everything's there yeah next is email so we'll add email as a email then we need to show phone as a phone then zip code as a zip code and the address as address okay now most important thing is to add this order item list and if you if you remember right here we have quantity amount and the product right so same thing we want to do so inside the global API right because uh if you remember we did not add the product ID here so here with the name just I will add a product okay and here I want to add the ID okay product ID so I will copy this one do ID okay so it will give me the product ID and I I store it as a product only okay make sure that name is correct okay and uh I think that's all let's save this one and now I will just copy this name called order item list and I will pass the array of the all the cart item list okay because what it will do it will just check with this quantity product amount because I Ren name this to amount and it will check this three product inside this or card item list uh which is the list of object right and it will contain this this all the fields and it will only pick quantity amount and the product which is the idea of the product okay and then save it now once you have the payload obviously we need to create an end point so after this one I will create a constant you'll say create order which will take a data which is our payload okay and JWT token so exos client. poost and then we have to add uh orders I think okay so that is the end point I hope so yeah orders only and then uh we have to add the data comma and then we have to add this header so I will copy this existing Bearer header over here okay now make sure to export this create order so that we can use it now over here we'll say constant not constant sorry the global API do create order here we need to pass the data which is our payload in this case then jw2 token which we already have dot then we'll say response and then we'll console the response over here okay also we'll tost the message that order place successfully okay something like this and then save it now once you create the order okay obviously once the order is successful we have to clean out okay let me go to this content manager we have to delete all the uh items from the users card okay because obviously the order is place we need to empty the card right so for that one we need to uh add the delete operation okay so if I go to the setting make sure inside the role authenticated and let's go to the user card here we have the delete is enabled okay and for that one this is the API endpoint so I will call that one so obviously uh there are lot of things we need to delete right obviously we'll call multiple delete apis okay but that's fine we'll do it that later on but for now if you see we once you create the order let's save this one and let's go back to our application and over here right uh what I will do instead of now going through the all the payment I will add some dummy button over here and uh I don't know yeah let's add a d button we say this particular button I will add okay and here I will call on click method just for the testing purpose okay and here I'm going to add on approve method and in in the data I will pass the payment ID as 1 2 3 okay because this data is getting and this from the data we have the payment ID so that's the reason I added the me information okay let's save it and let's test this out so let me open this Bank panel open the console and then clean everything let's click payment so right now we got error that okay this message request fail let's see what's the issue so if you see this error it's saying the payment ID must be a string type okay and we added the payment ID is of I don't know uh let me open that one so inside the global API and oh not here sorry over here we'll convert it into a string okay do to string and save it now let's add some information as well let me close this one because initially we forgot to add this one let's add this some address and then I will open the inspect panel for the testing close this one and click payment and uh oh wow if you see it's saying that order place successful and now we got the response as well let's see in our stripy database or stripy CMS whether we got the order or not and if I go to the order and if you see we have the order with the name email Jeep address total number that's good the payment ID we forgot to add a user ID okay that is important and boom if you see we have the order item list as well and each order has a quantity the amount and the product which is attached to that one that's perfectly uh uh that's what we wanted and that's perfectly good right only thing we miss is user ID so let's go here and add the user ID so that we'll add it from the user. ID let's check that we are fing the users information see yeah okay so from here we have the user ID now okay and obviously next time if I create order right let's if I go here let's refresh once and add ABC ABC gmail.com com 1 2 3 4 because I did not add any validation you can go ahead and add the all the valid validation right and make a payment and now if you wait and if you see the order plays successful let's check the order with the name 3 ABC c and now in this case we have the user ID as well okay perfect now only thing that we need to do obviously uh I will remove this um this button okay and on this page payment method it will execute our order and it will once the payment is successful then uh we will get the we'll create the order in the database okay so that's how you can create an order and uh if you have any question of on this point let me know in the comment section so now once we are on the checkout page right and once we fill the details then only I enable this uh button okay so for that one you just need to add a disabled property to the button and here I added that if I have to check username email address and zip okay because that is a mandatory field if everything is okay then obviously it will enable uh the data okay so you I will put something and if you see now it's enal one more thing I added here is uh once user made the confirmation and create the order okay then over here I make sure that I'm deleting the each of the item from the card right so I use the card item I iterate that card item and then I'm deleting uh the record one by one okay so for that one uh we have this delete card item um API endpoint and only I'm passing the ID along with the JWT and with the help of this for each it will delete the each item okay and once everything is deleted the order is also get created then I'm going to route out to a new page which is the order confirmation page okay so I created a new route called order confirmation it's very simple I added some of the um like this is icon the order successful text and thank you so much take with the button okay so let me show you how so here I just go to this order confirmation page and if you see this is simple page I added but only thing that uh we made it here right here instead of router push I use the router replace so user when you try to go back it will go back to home screen and not the previous or this checkout page okay so this this one one of the change I added uh in our application and I think uh uh this is how uh we create the order we will make sure to delete the card items and not only that but we also make sure that um it will redirect to the order confirmation page okay so I hope you understand this one because this is the very small part and I don't want to waste a Time uh by explaining all of these things okay because this is just a um quick and easy things that you can also do it on your own obviously if you face any issue any doubts you have um you can access or you can refer my source code the link is in the description so now we are going to implement the my order page let me show you where it going to be located so once user click on this particular fun um uh this icon right and then we have this drop down and once user click my order user can see the all order he already placed before okay and obviously it will show completed order as well as um in progress order or it's the history of the orders and also when the user has order confirmation page right there also we give one button to jump on the my order page so first thing let's go back to our application let's close all of this window and then I will go to the um router where we will create a new routes okay so inside the route folder we create a new routes and we'll call it call it as a my order inside that let's create one page called page. jsx add the default template and here we'll say order or we will say my order my order my order and here as well we say my order for now okay let's save this one let's go back to your application and here we'll say slash my order okay and here you will see the my order page now obviously this particular my order page we have to restrict from the user access so for that one we'll get the user jwd toen we'll say constant jw2 and from the session storage we'll get that one okay and here inside the use effect We'll add the use effect and also we'll Define the router because we want to navigate if user is trying to access this page so use router like this and here we simply Define if router dot sorry not router but if JWT token is not there then redirect it right so router dot replace we say the homepage which is slash means uh back to the homepage then uh after this one uh we need to get the user um order list okay so for that one we need to create API end point so let's go back to our application and here as you know that we have order and for each of the order we have the user ID right from the user ID we can just F the only order which belong to this particular user ID now obviously from uh populate we'll get this information along with this order item list and quantity and amount but we also need to get the products all the products name and everything along with the product image right the query will be a little bit complicated for that one so let me show you so this is the if you search on the um Google like strappy um populate select something like this right this is a documentation I will put in uh in the description as well so this one and one more yeah this one only so over here they carefully explain how you can populate the nest query okay so if there's one level deep or there are several level deep okay some relationship which is quite in the deeper right everything they explain uh properly and same thing same technique you can apply so this is the query will look like so first thing this is our API end point then uh with the filter option okay on user ID I I'm checking if user ID is equal to the actual user ID right now in this case is six I give because the uh this is the US which we are going to pass okay then we are populating the order item list okay so this is the order item list we are populating in that we are populating the product okay so in that we are populating this product again in that one we are populating the images okay and this is how it looks so inside the order item list we are populating the product and inside the product again we have to populate images okay and obviously if you try to access the URL obviously all of these thing also come along with that one okay see now obviously for this particular user we have only one order okay and everything it comes up say okay so same thing uh we are going to do so let's copy this query so I will copy this uh up to this point only orders and then let's go to Global API so here let me save this one and let's go to the global API where we are creating new endpoint so over here we get constant and here we'll say um my get my orders get my order inpo Point okay here we want to pass user ID along with jwd token then ex client dot we say uh get request and then paste the query which you copied okay like this obviously with this is the hardcoded number so we'll replace it with the actual one here we'll just say user ID and I think everything will be as it is okay we as this is a promise we'll make the end response and then we'll return the response okay but right now if you remember we created or we map the cart item list in a proper format right same thing we are going to do here as well because it's it's then it's very easy uh for us to display the result as well right so here I'm going to add constant here we will say response and is equal to response. data. data right and then we use constant here we'll going to add order list is equal to response dot map okay and then we'll say item and the arrow function like this okay now first thing we'll add ID okay so the ID will be simple item. ID after that we want to get the uh uh the total order amount okay so I will copy this one and and I will just use that one so total order amount is equal to item do attributes do total order amount okay after this one uh we want the payment ID okay so let's get that one as well so we'll get the payment ID as item do attributes do payment ID okay like this and after that again we have the order item list now for this one we'll keep as it is okay so here I'm going to add item do attributes dot uh I think order item list okay obviously we'll uh uh map it while we want to display it on the screen now this order list I will just return return it okay and make sure to export this get my order and save it now let's go to the page. jsx file and I will make this as a use client okay and uh obviously uh in the header right we we have this menu option for the my orders corre so let me browse okay so let me go back I think it's said down only yeah over here right so on this one I will just wrap uh this my order or maybe let's wrap this in a link oops link and here I'm going to add H reference to my order okay we'll end the tag and then I will just wrap this inside this link and save it now let's go back to your application and so right now we got error that session storage G is not a function so it's supposed to be G items so let me go to the page and this need to be a g item and now we are good okay let's go to the 3,000 okay the homepage if I click on my order it will jump to the my order perfect now once you are in the my order here we call create a method called constant get my order and over here obviously we need a users information so we'll get that user information is equal to json. pass and inside that we'll get the uh session storage dog item and inside that we'll use user that's all right and then here we'll call Global API obviously before that I'm going to add a constant order list maybe because we are already it then await we say Global API do get my order we need to pass user ID so from the user. ID the JW token which we already have and as we are using async sorry await let's use a Sync here here okay and let's print out the order list and then call this get my order over here okay and save it now if I go back to our application let's go to the inspect panel go to the console and right now if you see for page 20 we got the order um with the ID number the payment ID the payment total because as I say there only one order belong to this particular user and then all of this uh order item list and if you see inside that we have the product inside that the data attributes and the image as well okay perfect now everything we have now let's implement or display that on the UI so first thing on my order here I'm going to add the h2 tag and here I will say my order I'm going to add a class name so let's let's do one thing because I already have the page from the check out that heading I will copy it from here to over here and I will change this to my order and save it perfect like this see perfect okay then over here I'm going to use the Shaden component called collapsible okay so if you see this is how it looks and if I go here okay so this is how our my order page will look like so here first thing I'm going to show order date the total amount and the status and once user click on this one it will expand it along with all the each of the product with the original price the quantity and the total price as well okay so um let's go back over here and then as we have the order list right so we want to iterate it over here uh so I will just say h2 tag and we'll say order hisory okay let's add a new tag first inside that we'll add order history I'm going to add a class name padding y to8 margin X to let's add seven for smaller screen and for larger screen We'll add margin X to maybe 20 okay let's save this one and for this S2 tag We'll add a class name text 3 Xcel then font bold text primary perfect like this and then as I say uh this is the collapsable will look like okay so once you click on it it will get expand and it's very easy to use so first copy this collapsable and component so I will install this component first and then we'll use this import statement go here import it and then this collapsible content I will paste it so after is2 tag we paste it here and save it if I go back here if I click on this one see okay obviously we will uh uh design it according to our need but for now I think that's look good to me so over here right uh let me get this something like this and here obviously we need to show the date which when it ordered right so I will add a du inside we add H to tag here we'll say order date okay and the date when user order right so here we got the order list Let's uh save in one state so we say constant order list comma set order list is equal to use State and here we'll just set order list and Order list here I will use that like this just for differen purpose okay and now we'll iterate that order list okay so obviously we need to iterate this all of these things right along with the content all or oh sorry we want to the collapsible as well so let's wrap it in One D and then we'll add over here as order list. map inside that we'll add item comma index something like this and inside that I will add this collapsable okay and save it now if I go back so this is how it looks see nothing right now obviously we don't have any data so let's add that data so as we have order date so add the order date which is item comma and if I go here for the order date okay so if I go over here if you see we have the I don't know whether we have the date or not so okay for that one we did not added the created add date because if you see this API end point we have this created at but we map the data so that's the reason we did not have that one so let's add in a global API so over here if I scroll down We'll add created at and then item do attributes do created at okay and now we'll use item do created at okay if I save this one and let's check this out see the created ad right now if you want to format this in a specific format okay so for that one I'm going to use moment.js Library okay as I use in many of my project this library is used to uh format the date according to your need so it's very easy to install just type npm install moment and then it will get installed and very easy to use as well so if you see it's get installed now in order to use it right you have to write moment see this moment is importing from the moment and then the date which you want to format do format in which type you want to format so in this case we'll say date uh let's say date SL mmm SL y okay if I save this one let's see whether it's get format or not and boom see perfect now for this one uh for this particular du I'm going to add a class name We'll add a border okay we'll add a padding of two and I'm going to add a background little slate color of 100 maybe now if I go back this is how it looks okay obviously we will format that one later on after this one uh I'm going to add another h2 tag uh for the total amount right so total amount and in that we have to write item dot let me check what we use for the total amount which is the total order amount okay and now we have the total order amount as well that's good let's let's do one thing let's wrap this in a span tag okay or not this one maybe let's we D this in a span tag and he will say class name font bold margin right to two and same thing I'm going to do for this total amount as well just to look a little better right if I save this one this is how it looks okay it's where right now but don't worry we'll change this one and then we're going to add a status as well status column okay but St we don't have the status yet okay so we going to add the status as well so here I'm I'm going to say for example let's say pending okay and save it now let's save this one and for now for this du we'll make it flex and we'll say justify evenly let's see how it looks so if I let me okay so this particular error is came because we have to add index key index so for this one we just add key as a index then let's try to add the width full I don't know whether this will work or not okay so it's better to add a gap as well so let's add a gap of 15 not 15 the 14 I don't know Gap 14 is not working okay so gap of 16 and Let me refresh this one something is not correct and now once this is done okay I give this gap of 24 little larger and this is how it looks okay now once user click on this see we got the data okay now over here as we have this array right and uh we already show the payment total order amount okay the status and the order date now we need to iterate this order item list to show each of the order along with the amount the quantity and the product image along with the name okay so that we are going to show inside this collapsable content so over here we need to iterate the item dot order item list okay so this one okay so this we need to iterate because right now if you see there are six item right and then obviously we need to iterate that one by one let me bring this like this and here we'll say map okay inside that one we'll say order comma index as we already have the one index I will put index underscore and then the arrow function to display the data so for this one I'm going to create a component folder and inside that we'll create a different component sorry here I will addore component folder and here I will say uh my order item. jsx add the default template save it and then use that my order item and for each of that we pass the order item is equal to order okay now this order item I will accept it here and like this and here we'll display one by one so first thing the image okay so let's add the image tag and here we going add source so inside the source we have the order item that dot sorry then if you see we have the order item list in that we have the uh product inside that again data attributes and lot of different things right let's do that order item do product dot at sorry dot data okay make sure it's correct so data right dot attributes do images do data of zero do attributes. URL okay hopefully this is right then we'll go width of maybe 80 height of 80 alt tag I will give for now as a image let's say both the files let's go back to our application if I expand this one right now if you see this image is broken that's correct because we did not add the base URL so we say process. EnV Dot and our base URL I will copy this one oh sorry and plus sign okay let's save this one let's go back if I expain this one wow see how beautifully it comes right obviously saying that error that you need to use key index over here as well so we'll add a key as a index uncore after this once we have the image right we will uh what you say format it later on here I'm going to add one de for the users sorry order product name okay so for the product name again the product do until this point it will be similar do name and then we want to add the actual price okay so here we'll say item price and here we'll say MRP okay I think this is correct okay yeah let's save this one and if I expand this one see we got the this one item price as well let's bring everything in one line so for this one we say class name make it Flex okay we go Gap of 10 for now next thing I'm going to add one more deal and here we're going to add the total quantity okay so let's add only S2 tag and we'll see quantity and then for this one we have to add order item dot I don't think so we need order item over here uh let me check yeah so okay yeah inside that we have Al item do quantity okay so this quantity we need to add do quantity and the third is total not total but uh I don't know what it's called sub total or Price okay and for this one we'll say amount let's save this one let's go back to our application if I expand this one see we have quantity price and I think everything is good right only thing that we need to now um uh equally we have to divide right let's try to give space between and I don't know whether this will work or not yeah that's good but I don't know why it is not in one line but for this image as well let me check yeah for this image as well I'm going to add a class name we'll say a background gray then padding of six and border so rounded corner we'll add a medium okay and we add a border and let's see how it looks expand this one and this is how it looks that's good so here if this is look weird let let's do one thing let's remove all of these things and here I'm going to add a grid and we'll make a grid column four okay in that one I'm going to give a uh class name we'll say column span and two let's save this one let's see how it looks okay okay that's Weir but let's add column five so out of that I give the two column to this one and then here as well I say column span to let's say 3 1 4 5 yeah let's save this one let's see how it looks I think that's now good enough but the column is too large let's try to give a width of maybe uh 60% I don't know yeah I think this is good okay so if you see obviously U it's not perfect but right now let's not modify a lot but okay and here I I'm also giving margin top to let's say three okay something like this and if you think you can add uh item to be in the center and and here I'm going to add HR tag I'm sorry so horizontal line it will come horizontal line if I increases see this is how it looks but I don't know why it doesn't come fully because we want to add outside of this one let's add here let's com cut it from here and paste it save this one and boom I don't know why it sces along obviously here we need to give a WID so obviously I will make this de I will add a class name give width let's add do let's save it let's T this out perfect okay now we have the order list and all obviously if you have lot it will come one after another but this is how it will look okay only thing for this do I'm going to class name margin top 2 three perfect okay so this is how uh the simple um order history page uh we created okay where we user can see all the orders about about this one okay now if you talk about the status right if I go here and inside the order right uh we can add one status uh column we'll say status so here we'll add status or just do one thing let's go back and here uh you can add the enumeration as well okay so that will be a good but let's add a simple status over here and we'll say finish let's save this one and we'll wait in meantime I'm going to add that inside the global API so let's go to This Global API and here we'll add a status as item do attributes do status make sure that's correct right yeah let's save this one and now obviously I will also update inside the my order item instead of that hardcoded status right so which is in the page.js over here say item do status and make it optional because it's not mandat that status will be there every time only thing okay so for this status I'm going to make it as a default value okay as a pending okay and finish so and let let's save this one so whatever will happen when user create an order right the status automatically will be in the pending status and you don't need to manually or whoever is admin he don't need to manually update the pending status obviously once the order is confirmed or order is uh completed he can update that status as well now uh if I go here let's refresh this my order page obviously status is not showing because this part this particular one the status is not updated let's go to this order Let me refresh this once and if I into the order let's go to this order and here we have this new status c order here we will say pending okay as this is the existing order that's the reason that default value is not set okay but for the new order it will get set now if I refresh this one you will see the status oh wow the status is did not came okay the status is start with this capital s let's update that inside the global API and now if the stat is pending and all the order details perfect that's good right so guys I hope you understand how beautifully we designed this my order page okay and if you remember we also need to update inside our confirmation page let me close this one and go to this confirmation pleas and for this button right uh let's wrap this button in a link let add H reference and just give my order right so that user click on this track your order it will jump to this my order page let's save this one go back to our application everything's look good to me and this is a quick fix I want to tell you inside the header for the logo right when user click on the logo you want to go to the home page so I will wrap this logo inside the link okay I will add H reference say slash only in the tag and wrap this like this save it for this class name I make cursor pointer and if you click on this one uh why it's not going yeah it's go to this homepage okay so that's all for this section guys I hope you understand and you learn how we beautifully track the users order using this my order page so guys that's all for this particular uh course that we learn and we develop the beautiful uh online grocery store application from the scratch with the help of strappy and the nextjs react okay so from the starting to beginning right I as I you as I told you in the beginning that if you don't know anything as we learn everything from the basic okay we learn how we set up the strappy how we uh use the r API how we create the collection and with the help of R API how we Face the data how we update the data how we um create the new record inside the strappy and everything we learn okay so for the any small businesses the strappy CMS I will say one of the best CMS in the market and you have the full control on your own data on your own um collection I will say okay so guys uh as you know that this application will not only build for the desktop or laptop or web but this application is also for the mobile or small devices because this application is completely responsive every page every element in this application is completely responsive as you know that right so guys if you have any question any doubt let me know in the comment section if you really enjoy this video and really like this video pleas please please please uh press like button if you uh also press the notification Bell icon so you will not miss any update and if you still did not subscribe to my Channel please do subscribe share this video with your friends and please let me know about this video how you uh or do you really like this video what you like really like this about this video what you think about the stripy CMS let me know everything in the comment section so guys see you in the next video

Channel: TubeGuruji

Views: 34,843

Keywords: Build & Deploy Full Stack Next.Js Online Grocery React App Store, tailwind css tutorial react, Grocery Store App, Online Grocery Store NextJs

Id: 7NN56jsaj6w

Length: 316min 11sec (18971 seconds)

Published: Sun Mar 17 2024