Transcript for:
Building an e-commerce website using MERN stack

hi everyone I hope you all you are doing great so welcome to gigs for gigs YouTube channel so in today's video we are going to build a awesome e-commerce website using monack technology so we will be having all the stuffs like adding your product and then selling that one then add to card then favorite and all the stuff right so this website is going to be a really uh awesome if you want you can also add this in your resume and the text tack would be monack as I said so in monack we will be using react GS for our front end we will be using mongodb for our database and we will be using Express and nodejs for our backend server so I hope that you will be enjoying the today's video and don't forget to give it a thumbs up and share it with your friends those who are learning monack and uh yeah let's get started with the video right so as you can see like in this website we will be having a pretty much e-commerce thing related to clothing branding so we will be having different categories and we will be having our best sellers and we will be having different products as you can see so also we have a products Details page where you can uh check out and add to your cart we have a shop page where you have different filter options you have size filter options and price filter option and all those stuffs and uh you can see like for bags it will show bags and mens and then pricing all the stuffs are working and it looks pretty cool then you have a sign in sign up page where you can sign into your account and you can create your new account or you can log in so let us log in and just see if is it working or not so I will uh provide my email address and password so and once we click on signing you can see my uh images there at the top there's a logout button you can see my favorites and the shopping cart is also present right so this website is going to be really pretty much awesome you will be learning the full stag development of this website and uh using node and react and mon stack basically right so give it a thumbs up and you can see like there is a card option also where you can add items you can delete items and you can buy those items right so I hope you will be learning a lot of new things through this video so don't forget to give it a like and share it with your friends those who are learning new text and also you can follow me on my GitHub account and my uh LinkedIn or my YouTube channel right so yeah so those who don't don't know me I have already given an introduction in the beginning so yeah I am Risha so I am today your host so that's how you can order and you can like um add the products in your cart and all those stuffs right so yeah that's pretty much about this website so let's just start with building this one right so this is also respon responsive so as you can see like for smaller screen or in mobile device this is uh looking pretty much awesome right so it will be like looking this only so let's get started with building this one so first thing is I will be providing you a drive folder where you will be getting this utils buttons read me and error so if you open your readme there will be the steps written so first step is to npx create react app this is the basic command to create your react starter application right and uh create another folder name server in your uh root directory so my root directory is e-commerce website right so go into the server WR npm in it so to start the uh server initialization and then go for the basic after that copy the command for installing the dependencies for the server and then paste that one right so that will be installed all the thing that are basically nodemon express. EnV and all those stuffs so once this will be done we will be like uh checking the client so this is the client will be like the basic react starter application and after that we will be building with style components and the mui themes and all those stuffs okay so now you can see our client is ready so do NCD client and then npm start so it will be start on port number 3001 or 3,000 so you can see basic default react application so after that copy the utils folder from the drive and then paste that in your uh SRC before that clean the SRC so I don't need this things this file so I have deleted them and after that I will remove from app.js the default uh things that are present and I will write High gfg okay and Report vital is also not required done after that what we will do here is we will copy the utils and then we will come in the client uh then I will open the SRC and then I will simply paste the utils and I will copy buttons and then text input these are basically the text input field and the buttons I have already made that one and I will create a new folder components and inside that I will paste that so it is inside SRC only right and then I will open the index. CSS I will copy the index. CSS file and I will paste the contents in my index. CSS of this react application so it consist of basic things like the uh page in uh font size and the scroll bar okay and then I will create another folder don't no Pages where all the pages will be present of our application now let's get started with the application so first thing in the app.js I will import the style components now you can see style components style components we haven't installed so you can go in the step one so the client dependencies that are there I will simply paste that one and it will install all the dependencies of the client that are required like style components material UI uh then react out of the exos and all the stuffs right Redux right so you guys are also going to learn Redux in this video so yeah so you can see the dependencies are being installed the next thing that I would do here is I will rerun this one again and after that so after that what we will do here is we will get started with the application so first thing uh in the utils you can see the theme so the themes we have different colors that are already predefined you can Define your own themes so now let us get started with the app so first thing we will do here is we will wrap the whole thing in a theme provider okay so theme provider is being imported from style components and in the theme I will pass light theme which will be imported from our util that I have just now showed you okay so light theme from utils dot dot do/ utils SL themes perfect okay after that uh what we will do here is we will go inside our theme then after that we will be having a browser router so browser router is a root because we will be having react router Dom for our navigation of pages this is a single page application right so we have browser router so in browser router what we will do here is we will after in browser router we will have a container so what is a container container would be a style component so we have to Define that one okay so I am writing cons container equals to style. div so in this style. div you can write your custom CS SS as we do basically for styling so I will give withd 100% and height 100 VH and display flex and flex direction would be column so you can also go through the documentation of style components you can learn more about it so I will give a background of theme B so this is how we import our theme and use in our style components right so this is how we can use your theme. BG and also in color I will get give text primary okay and then I will get give overflow x hidden overflow y hidden and transition all 0.2 second e perfect and then inside this container the first thing that we are going to have here is a Navar right so let us create a nav bar in the components I will create nav bar. jsx and then a default react export component then let us import this nav bar in the app.js so now a nav bar is also imported so let's get started with the nav bar so as you can see in the nav bar we have a logo and different things so first of all let us create some Pages like home pages so in the pages I will write home. jsx and uh I will create uh let us see the other pages that are available so orders are there so I will write uh let us write new arrivals so new arrivals do JX then I will write uh let's say favorite Pages favorite. GSX and uh you can write orders also so also the shop listing page shop listing. jsx and uh what else cart shopping cart. j6 and uh and we will be having an authentication page basically where the sign in and sign up will be there so authentication JS perfect for of now let us go with this Pages only and uh in the go we will create other Pages if required right so yeah first thing let us Define the routes so I will wrap the whole thing inside a routes where our main pages will be rendered according to the route so first one I will give the route path slash and exact element would be home okay so home is already defined so it is imported right and now there is some error so yeah now the ER is gone so it will be the closing tag perfect now let us go with the nav bar first thing you can see in the screen there is nav bar and home right so let us go with the nav bar so nav bar first I will wrap the whole thing in a nav uh all these things will be a style components itself so I will import the style from style components and yeah then we will be having inside this nav bar we will be having a nav bar container and inside this nav bar container we will be having uh you can say in nav uh items where the links would be there so nav items is there and the other things like uh you can see the button container the sign up and sign in button with there so I will write button container and uh what else do we need okay we need a nav logo also so for starting we have a Navigation logo right so we will be needing a Navigation logo so Navigation logo the first cons nav equals to style. div and in this style. div uh I will copy the rest and I will change the name there so nav bar container nav logo nav items then we will have button container right and yeah so now you can see that home is coming but nothing else so in the nav logo let us do one thing uh let's get started with the nav logo so in the nav logo what we will have here is a logo whose SRC would be coming from the utils images so let us import logo image from utils do/ utils do/ u/ image logo right and then I will pass the SRC and if you reload there are some errors logo is not defined let us see where the error is okay so we have to define the logo as a style component so logo it would be a uh style. image so you can see CH is coming right the logo that we have perfect now let's get started with design so inside this uh nav items we will be having nav links so nav links are basically the home and all the stuff that you can see so nav links first one would be to home so I will write nav link to/ home and after that uh let us UNC commmand this one and let us write nav link and it would be a nav link which is from react router Dom right so yeah so make sure to check the spelling the L would be in small letter and I will then paste the other links also that we have shop orders new arrivals contacts right then we have a button container so in button container we will be having a text equals to uh sign in and then we will be pass the prop small because this text we need small so I will first import the button from uh do/ button and uh what else yeah so you can say sign in button is there right so so after that we will be having our search icon and then other icons so for that also they will be also Ena link so I will import search link from mui icons and after that [Music] uh we have the favorite icons and after that we have the cart icon right so all this are coming from the uh me icons right so in these are basically navel Lings only so as you can see there is a log out button and the Avatar and if you log out then there is a signin button right so let us start uh styling this one so it would be visualizable right so first I will give a background color of theme. PG it's height would be 80 pixel and display would be Flex align item Center justify content Center font size one R Position will be sticky top zero Z index 10 right and uh let us see color would be white then bar container what I will do here is I will give it a Max width of, 1400 pixel and WID would be 100% perfect then I will give padding 0 by 24 pixel display Flex g 14 pixel align item Center and uh just w SP between so it will be like distributed throughout and then font size would be one Rim perfect then I will have a nav logo so na logo would be a style. div withd would be 100% display Flex align itm Center padding would be 0x 6 pixel font WD 500 and font size 18 text decoration none color would be inherited and Logo height would be 34 Pixel then for nav link we uh let us do with nav items so so with 100% nav items would be unordered list so style. with would be 100% display would be Flex align item Center and uh justify cond Center Gap 32 padding 0 by6 list style would be none and for smaller screen it won't be showed so display would be none for smaller screen below the 768 pixel right and uh nav link uh would be a naving so align items so first thing would be display Flex align item Center color would be text primary font 5 and uh let us give it a h effect of theme. primary TT decoration none csor would be pointer [Music] okay so and for active like when it is active what we have to do is we have to show the color as primary and we will give it a border bottom of theme primary done and the button container height withd 100% display Flex justify content flex and GAP would be 28 pixel align item Center padding 0 by 6 and color would be primary so now you can see all the things are looking exactly the same that we had right so yeah that's about the navigation uh but we will be having other things there was a hamburger where the menu would be dropped down so we will Define that one so mobile icon I will write I will Define a mobile icon which will be having a menu rounded which is imported from style components right so what is mobile icon so menu rounded will have a color of inherit which will inherit from the parent mobile icon so mobile icon is a style div which will be uh having say the color would be color would be themed or text primary and display would be none generally but for smaller screen which is below 768 it display would be flex and align itm Center so you can see that it is visible now perfect and uh what else do we need here is uh we need to define the this nav links we have to Define right for smaller screen there should be a menu should be coming right so what I will do here is I will write mobile icons and inside that I will paste uh all these things search favorite cart and uh this mobile icons uh uh I will write the mobile icons it would be color text primary and display would be non normally but for smaller screen display would be Flex align itm Center so now you can see the things are looking exactly the same we have for small screen this also with the button and for bigger screen it is not visible perfect and uh uh we will Define the mobile menu so in the mobile menu we will be having all the nav links so let us do with go with the home first and let us Define the mobile menu so I will Define mobile menu equals to styled unordered list UL display Flex Direction column position would be align atom Center G 16 pixel it's uh position should be uh position I will give it later so padding 0 by 16 uh list St none with 80% padding then background I have given card light then position would be absolute top would be 80 pixel right would be zero transition all uh 0.6 second and transform when it is open I will translate y with 100% and zero and Border radius 20 pixel box Shadow would be given and opacity and Z index just copy and paste it so that would create the animation of opening and closing of this one so now I will Define a hook US state hook of is open or set is open which is basically used to control the menu bar so when someone clicks on the hamburger icon so it should be displayed and if not then it shouldn't be displayed so e open I have wrapped the mobile menu in E open and I will pass e open there right and use state would be true false by default and if it is clicked the if the hamburger is being clicked uh so let us see so yeah if the hamburger is clicked or the say any of the navigation link is been clicked I will set the on click of set is open not is open right so you can see if I click on home it is closing down right so that is how it will be functional now I will add the other nav links also in the same and uh that's it so if you open this one now uh we will having the buttons also in this one that is sign up and sign in button so I will Define a div and a sign up sign in button whose style would be display Flex Gap 12 pixel now you can see it is looking absolutely the same that we have now it is looking pretty much cool right so after that we will be having [Music] uh what else do we need uh so in this uh so yeah we are pretty much done with this one because we don't need anything else in the navigation so so the structure I think it is clear pretty much how it is been working for bigger screen it is visible and for smaller screen some of the navigation not visible but it is visible through our menu bar right so the next thing after the navigation is uh going to the sign in and sign up page so this one right this page we have to create uh so let's get started with the sign in and sign up page so what we will do here is we will create a new component sign in. jsx and uh sign up. jsx so let's get started with the sign in. jsx so for sign in. jsx we have a page authentication right so in this authentication page let us do one thing let us wrap the whole thing in a model so this whole thing would be coming in a model mui model right so I will wrap the whole thing in a model so you can see and then we have a container inside that and we have two section left and right basically right and in the left section we will be having our image and for the right section we will be having our form so left and right so after that uh let us take a prop that is open o and set open o and uh in this model open equals to open o and on close set open false perfect and I will Define the container con container equals to style. div then we will be having uh style. dev then we will be having our uh right container and left container we will uh right and left we will Define them also and uh we will uh Define the authentication page now so first of all let us Define the open o and a set open o so this is again a use state so I will Define by default it is false then if it is true then after the routes if I will check if open o is true then I will show the Authentication open equal to open not perfect and set open not equals to set open not perfect so this is how we can pass the props to our components and we will also need to pass this props to our nav bar right because on click of the nav bar only we can go there or uh open it right so I will pass in nav bar then I will open my na then I will take the prop open set open not and then I will do uh in the sign in button like on click function whenever it will be click I will set the set open not as not of open not so I will also take open not so open not is done and uh I will paste for the other buttons also that we have so for everything you can see L and R is coming right if you reload you can see lard is coming in the model format so now let's just Define the container first so first thing in the container that we have is flex one and height would be 100% then I will give a background of theme BG and display Flex so now you can see full white with the left and right so left would be having Flex one position would be relative and right would be have a position relative and flex of 9.0 you can give it 9.0 then I will let us give it a background color of red for left and the background color of blue and you can see the both the sections are now divided it and uh it is looking good right so display would be Flex for right and flex direction would be colum padding would be 40 pixel and GAP would be 16 pixel alignm Center just by cont Center for right okay and uh let us now go with the left now so in the left we will be having [Music] uh so basically in button container let us do one thing I will copy for left and for smaller screen size I will make its display as none and uh let us do one thing it Flex would be one for smaller screen perfect so for smaller screen it will take the full space and for bigger screen there it will be two halves so I think the design methodology is pretty much Clear sorry for the same so now in the left I will have a logo and a all image so I will add the logo SRC equals to logo image and in my image I will pass SRC equals to or image and after that what we will do here is for uh after this left I will write logo equals to style. image and uh I will add uh con image equals to style. image okay so now you can see the image and all the stuffs are visible uh so let us write and Define this one so image position would be relative height would be 100% with 100 vers and object fit cover for logo position would be absolute because it is at the top so I will give top 40 then 60 and it is perfect right and it is looking awesome now so let us get started with the sign up before that we have a cross button and the form and then there are some text at the below so let's get started with the right section so the first thing that we have here is a close button so I will write close button and inside that we will have the close icon of the from mui I will write close so let's define this uh on click of this close so on the on click of this close um close button is being defined so cons close button equals to style. div uh now in this close button we will be having our position as absolute top would be 20 pixel right would be 20 pixel and a border radius of 50% right and there would be a padding of 2 pixel which would be 32 pixel border would be 1 pixel solid theme theme. primary and display would be flex and justify content Center align item Center and hover effect we will add background would be theme. primary perfect and then for uh left also we will remove the stuff so now you can see it is looking pretty much similar to what we are having right so after that we will be defining a u State again that is a login and set login so it will be by default uh true you can give it true by default so say if it is login then what we will show here is a login component or you can say signin component and if not then I will show the signup component right so if you I will create the sign up component as well I will write sign up. jsx in the component and I will do the default import let us import this one so yeah now it is imported right so the next thing is uh the sign up is imported so now you can see sign in is present and if I make it by default false you can see sign up is present so that is how we can manipulate or using a Turner operator with a uh variable we can check which is open or which is not and that's how we rendered it right so we will do the sign in and sign up and after that we will be having a text right so I will write text um where I will for sign in we will write already have an uh don't have an account and in text button we will be having sign up so there would be a text button also so let us Define the text and text button so text would be style. div and I will write text button so for text what we will be having here is font size 16 text align Center color would be text margin top would be 16 pixel uh Max 400 pixel for size would be 14 pixel for text button color would be theme. primary and cursor poter transition all 0 3 second is for we 600 right and for text Gap would be uh 16 pixel and now after this one for sign up we have a text that is already have an account I will write on click sign in set login through and on that one I will write set login false for the sign up and if you click on this button so you can see you can navigate through sign in and sign up pages right so that's uh our authentication page is done now let us get started with the signin page this is very simple the sign in and sign up page are very simple so first we will again wrap the whole thing in a container and after that if you have noticed we have a title and a description so I will write in the div title and welcome to CH so I will copy that one and paste here with the Emoji and we have another one that is uh please log in with your details that is a span and in another D we will Define the text input Fields so the text input fields that we have here are so button and then I will import style components then I will import uh sty text input from do/ text input then I will import button from uh buttons con container equals to style div and then I will write uh title and then we have the and then we have the span so I will write the span perfect uh so the next thing that we have here is you can see that we are having our text and we are text button and these things so I will give it a label of email address and a placeholder enter your email address we will be having another uh thing that is password and enter your password right so this is done so the next thing that we will be having here is the uh so after this we will be giving a style in this of display Flex gap of 20 pixel and then I will write the container style so container will be 100% Max with 500 pixel display Flex Flex Direction column and gap of 36 Pixel Perfect right so after this one uh we will be having our signin part completed so text there would be a button so there would be also a text button for forgot password so I will Define a con text button equals to so con text button equals to style. div and with 100% text align and color would be text primary cursor poter 1 64 pixel transition all 0.3 is and H effect right and font W 500 and hover effect would have a primary color so you can see it is now looking absolutely fine and our login page is pretty much awesome right so if you liked it give it a thumbs up so after that we have the sign up page we will paste it simply the same thing I will change the name and we have to change the title and the span so I will just change them create a new account and then we will add new field that is name field we have to enter your full name so that one we have given and uh what else do we have we don't have the text button I guess uh so we don't have the text button and we will change this to sign up perfect so now it is looking pretty much cool right so yeah so if you click on sign in and sign up the things are coming right so our authentication page are done now let's get started with the homepage so homepage is pretty much interesting so the same thing I will wrap the whole thing with the container first of all so after the container what we have in the homep page is there is a uh header section right so first we will write a section uh then we will give image where the header will have a image so I will import uh style from style components and then I will uh Define the container equals to style. div and the section uh would be again a style. div and image would be there at last which will be a image style. image so section I will give uh align Center and uh I will import the image first of all so let us see okay so first I will import the header image from the utils uh Slash images / header image. jpg and then we can use this image in our image so header.png sorry so I can use this as SRC equals to header.png or header image right uh so if you reload let us change it to image so if you reload you can see so this is coming right but we have to Center this thing right so let us get started with the styling so first in the container we will be having a padding of 20 by 30 pixel padding bottom would be 200 pixel height would be 100 pixel and overflow wise scroll display Flex align itm Center Flex Direction column gap of 30 pixel and for smaller screen the max padding is 20 x 12 pixel and background would be theme. BG perfect so now it is looking pretty much perfect for of now from my side so I will keep this one only for the section I will give it a we of 100% Max with 1400 pixel padding would be 32x 16 pixel display would be Flex Direction column Gap would be 28 Pixel Perfect yeah and uh at last for uh image what we will have here is with of 100% so I will give it with of 100% then I will give it a uh you can say height of uh I will give it a height of say 800 Pixel Perfect and then I will give it object uh fit cover object fit would be Center crop or you can give it cover also oh it is not working so I will give object fit uh cover let's see yeah so object fit scale or cover is okay height would be 700 now it is looking fine now it is looking fine right so we have a broader image and for smaller screen we have this Central image right so that is how we can design this thing so our header section is almost done almost done I guess let us uh give it 800 only the height or you can change to 900 also you can just play with this uh this one the height so I will keep it uh 800 uh for of now and let's go with that 700 would be a good let's go with 700 right so yeah the next thing after this section uh that is the header section what we have here is uh let us see what we have next so yeah I have removed the section with 100% so now it is not scrollable right perfect so we will copy and paste the section again and in the next section we have the categories so I will give it a title shop by categories so title we have to Define and uh rather than title uh let us write first the title so I will Define cons Title St D and I will just give it a font size 28 pixel font weight will be 500 okay and uh I would give it a justify content Center and a display Flex okay and after that uh you can see shop by categories are there and after that we have the cards right basically we have different cards right so let us just Define the cards so first thing after this one what we will do here is uh let us find a another section that we have or you can also say I will remove this one and then I will copy and paste this one and in this we will be having a title of our best sellers right and in this title we will be providing Center as a prop and uh let us just see it is now looking good okay so after this title for the first section we will be doing a wrapping in the card wrapper so there would be a card ER where categories are there which is be which will be coming from util so I will write category. map categories and I will map for of now a div normal div and say hi and first let's import or Define the card wrapper so card rapper is a style. d and uh display would be Flex Flex W would be R and GAP would be 24 pixel justify content would be Center and our import uh we can import the category from uh util SL data/ u/ data right so we have different categories so you can see there are five categories for of now there are five high message that you can see so now I will write the card so I will write product category card and in category equal to I will pass the category as a props which I will be using in the card right so let us Define a new folder cards where I will write a product category card. jjx perfect and let us import this one in the home. jsx perfect it is done and then we will take the props category after that if you open in the data there are category we have three different things image name and the off percentage so these are the three basic things that we will be having so the first thing that would be a card so in the card inside that card we will be having a top section where there will be image and a menu option and uh there will be a button so button we will be having category do name which category it is and then we will be having a sales percentage that is a category. off and uh image at image I will pass SRC equals to category. image so let us Define this style component so this would be our structure and then let's define the style components and if you click on this it will navigate you to the shop with the category quy so let us Define the use navigate so cons navigate equals to use navigate and it is imported from D router Dom okay I will Define style components also and then let's get started with the style components right so const car equals to style. div and then I will copy paste this one and then I will change the names uh of all the components that we have defined so done after this one uh we will be starting with the card first thing that is card so you can see the cards are coming images are coming but not in a proper manner so card I will give it a ma with of 250 pixel display would be Flex Flex direction is column Gap would be 16 pixel transition would be all 0.3 e cursor would be pointer then for the image with is 100% height 320 border radius 6 pixel object fit cover transition all 0.3 is out then for the top I will write display Flex align itm Center and other stuffs like transition border radius and position relative right and if you hover this one so there should be effect of the primary color right so in Hover I have given a primary color background so in the menu there would be the WID of 90% position would be absolute Z index would be 10 and then color text primary margin bottom would be 20 pixel right 50 left 50 display Flex Gap 12 pixel so you can see casual W formal W these are coming and if you H the black color is there at the background right and on sales I will give it a position of absolute Z index would be 10 pixel color would be like theme. XEX primary top would be 10 pixel right would be 10 pixel and the T thing font size 12 and Border radius 4 pixel padding 3x 6 background would be green so that is pretty much it for this one and for the image but now what I want is if you h on the image then opacity should be 0.8 so I have taken the image on top of the top Define the top and then on H and image I will give it opacity so our uh product category card is now completed right so that pretty much about the product category card after this card the next thing that we have here is let us see for smaller screen let us do one thing let us map it into two okay so I will give it a medium Max with 750 pixel I will give it a with of say 150 yeah 150 looks good but uh we need to do some changes also so for smaller with crapper Gap let us give it a gap of say 14 Pixel Perfect and it should be 200 yeah now it is looking pretty much good right so yeah let us give it a 200 let's see not working for smaller screens 180 would be 150 150 is good but [Music] uh some is let us see let us reload this one okay 150 is looks good 180 also looks good so one uh finalizing with 180 I will finalize with 180 only okay so 180 is finalized but uh just not it's showed in two only but now it is not coming so let us do one thing for image it's height would be given to for smaller screen it height would be given to 200 pixel let us see yeah 240 is good I guess yes 240 can be good option or for 600 pixel only I will change this to 600 then the image is done after that image uh what else do we have we have the button so in the button I will change the padding to 6x4 14 pixel then I will give uh sales uh I will change the font size to say 8 Pixel Perfect or 10 pixel would look good so now our category card are done for bigger screen it is coming in a horizontal Manner and for smaller screen it is wrapped right so after this thing the same card rapper I will be using in the next section and we will be having our products card right so the different products that we have so for that we have to create the card so I will write products card and uh let us just create this products card okay it won't be product category card it will be only product card I will copy and the card I will create a product card. jsx RFC let us import it here in the home product card perfect so you can see product cards right so now we have to style this product cards basically so as you can see in the product cards we have image then a name then description then amount and all the stuffs right so first thing let us grab the whole thing in a card and after this card we will be having a top [Music] uh in the top we will be having an image and after that we will be having another thing that is menu that is ADD two card and the favorite option we will Define that trater and we have a rating at the bottom we'll have a rate and then we have after the top we have a details so in the details we have a title for of now let us give it title then we have a description I will change it to description and at the end we have the price I will Define price 1 120 0 say for of now and it will be having a span where it could be original MRP which will be sliced off and then we have a percentage and say 20% off okay so now let's uh Define the style components so first thing I will copy from product category card itself the top menu and the till menu I will copy and I will paste it here and then I will Define the other things that are say the what are the other things so rate then details title description price all these things we will be doing from here right so span is there and percentage is there perfect so let us pass the SRC for of now I will open this imag in and new T I will copy the link and pass this for of now for the design purpose so yeah so if you can see the imag is there title description and all the stuffs are present right so let us get started with uh styling the card the rate so first is details display would be Flex Gap would be six flux Direction column padding would be 4 pixel by 10 pixel font size 16 pixel for title then font 700 color would be text primary for description the font size is 16 pixel font weight 400 color is uh text primary overflow hidden text overflow would be eclipse and white space would be no W no W right for Price display flexem centers so this a basic CSS what you can give you can visualize them or you can also check out my GitHub if you don't want to add the CSS you can see my GitHub there would be the link for this application and you can go and check the CSS from there also perfect then percentage we have font size 14 and font weight 500 perfect right so it is looking the pretty much same that we have but the menu and the rating we have to provide the rating would be firstly imported from mui rating so let us import this rating we have to add a value and the for size so I will give font size 14 pixel so let us just import this rating for of now so I will import this rating and if we Del load you can see the rating is there right but we need to fix the position of this rating basically so before the position of this rating what else do we have in the menu we have the favorite rounded icon which font size 20 and color would be red so let us import this favorite and another menu item I will wrap this icons in the menu item so that it will be having a white border Perfect Right let us uh import or Define the menu items uh so I will write menu items border radius 50% with would be 18 pixel height 18 pixel background white padding 8 pixel display would be Flex align item Center justify cond Center that index would be 100 and uh yeah that is uh for this and then let us import the icons I have imported the icons from the style components okay and color would be inhered so you can see the icons are now coming but not the correct POS it is not in the correct position right so let us make it correct so for rating let's give it a position absolute that index 10 color would be T primary bottom 8 by 8 pixel left would be 8 pixel padding 4 pixel by 8 pixel border radius 4 pixel background would be white opacity 0.9 you can give right now it is looking pretty much perfect but the menu items we have to fix that right for the menu uh let us go to the menu and let's see it's position okay so it display would be none and uh when we hovered it then we should show that one right so so let us do one thing on Hover I will add uh before after this one menu so on Hover of this menu I will show that one and with would be say 50% so let us see if we hover it so it's with is 18 border would be border radius would be 15% with 18 pixel height 18 pixel background would be white ping 8 pixel display oh sorry it is a wrong CSS so Z index would be 10 color would be text primary top 14 right 14 display n Flex Direction column so now it is you can see it is coming absolutely fine that we have so we are pretty much completed with designing our home page our signing an authentication page right so yeah give it a thumbs up if you're liking it so the next thing is uh what we have to do is we have to build the uh shop listing page basically so if you a shop listing page we have to Define that one so the shop listing page is there so first thing I will wrap the whole thing in a container then after that we will having a filter option so there is a filters so in this filter we will be having our products so products we will be having a card wrapper I will wrap the I will wrap it inside a card wrapper and then we will pass products product card and uh other thing what we need here is so there will be two section one is filter and the products side by side and I have wrapped it so first let's define the container the same thing height would be 100 Flex align itm Center the same pretty much stuff so you can see like once you start building one page you will get the concept like how to design basically right uh yeah so let us Define the other style components also and uh what else is left so let us write menu so in the filter inside filter we will be having menu so yeah so product card let us import the product card from cards component SLC card SL product card so yeah so if you come back okay so this one is not visible right so in the shop listing it is not visible because we have to define the routes also for the shop listing so I will copy and paste and I will write shop and it would be shop listing right so now in the shop listing you can see a single product is coming right so yes let's get started with designing this one so in the filters I will give it a width of 230 pixel and height would be 90% And overflow why it will be having a scroll effect and pading 20 pixel by 16 pixel and in the container for smaller screen I will give it a flex direction of column because uh I don't want it side by side because of the small screen so in filters also uh for filters in menu I will add display Flex Flex Direction column Gap would be 4 pixel mhm so now inside this menu we will be having different filters so if you go in the data so there are filters I have listed down so you can use that one so I will write filters. map so I will map the filters first then I will inside this filters we will be calling a filter section which will be having a title say filter do name and it will be having the items so I will Define that later first let's import this one so I will import uh filter from do/ u/ data and then we have the filter section and the title right so I will write filter section uh import uh import cons filter section equals to styled. Dev and then I will write uh filter title equals to style. div perfect done okay so filters. name so you can see product categories filter by Price filter by size right so these are the filters that we have now for the filter section we will make it this Flex Direction column Gap would be 16 padding would be 12 pixel title would be font size 20 font fit 500 right uh done but for okay but for smaller screen we need to change this one mhm so I will do it later let's see the other items that we have so I will write filters. value equal to equal to price so if it is price then what we will show here is a uh slider right where we can select the price so if it is price then I will show a slider if if it is uh say filters. value equal to equal to say price then we have items item and after that we will be having uh if it is size then we have different items say filter I will WR filters do items do map and then I will map the item it will be a selectable item right so yeah so item and then it is a selectable item so selectable item and item is there present it is done and then we have the next uh so I will Define the item first uh that we have used so and there is a selectable item also so I will write the const selectable item equals to style. div and uh let us write the style inside that it would have a cursor pointer dis reflex you can see and then we will give it a border and a color and then border radius and then a padding and then I will give it a with of fit content so now it is looking pretty much good right so as we want it and then we will give it a Styles if selected so done and then I will come back and then for filters. Value if it is category then I will do uh I will do null and if it is filter category I will simp paste the thing item right and then I will use that one so you can see now all the three filters are coming absolutely fine okay so let us modify some of the CSS for filters I have modified so for smaller screen let us make it with as 100% perfect and uh what else we can modify so in the slider let us Define the slider minimum and maximum value display would be Auto perfect and I have given a label also for 0 to100 ,000 perfect right and I will pass it key also for each of the selectable item because we have mapped this one right so this is done then we will be having our price range and set price range it will be a use State 0 to, you can say I will use this one in the selector price selector then we will be having selected size we have selected categories so these are the default categor and the size that are being selected then in the default value I will pass the price range corect and I will set on change also when it will be changed then I will change the price range as a set new value to new value So Perfect Right perfect now this is perfectly working I should it should work perfectly and then also for the selectable items there is a uh props called selected so I will pass selected equals to selected sizes do includes items this means if in the selected sizes array if the item is included that means it is selected right so we will pass true and false and according to that we have made our color prop so you can see uh the selected items that are by default that are selected right and the same thing on click I will do uh set selected categories then I will say previous or or you can say that previous category I will take Arrow function and I will check that previous categories includes uh the category that we have the item if yes then what we will do here is I will remove that one from the uh I will do previous categories filter category I will write category not equal to item right not equal to go to item and I will pass the previous items and item if it is not selected then I will make it selected so I will pass the previous item along with the current item so you can see if you click on any of them it is getting selected right so that is how we will be setting the same for the selectable items of the size or the categories also right the same thing I will give previous sizes in itate and selected size I will change it to selected size to set selected size perfect so you can see it is working all the things are working now right for filters so the next thing that we have after this filters is the products part right so the different products that we have so so for the products card let us write multiple products card and uh first thing we have to define a card rapper also and a filter so I will copy the card wrapper from home so let us just copy the one thing there is the issue with the scroll part let us copy and paste the container from the home and let's just see so now it is scroll level I have copied the card wrapper I have pasted that one the same thing same card rapper and uh now you can see that both the things are coming in the call order of two but uh there is a problem that for products height would be 70% pading BM 200 pixel height would be 70% let us do one thing overflow y would be scroll padding would be none or Y none hidden let us make some changes in the style fle direction is column let us give it a padding of 12 pixel now it is looking perfect I guess right so but product categories are not perfect so I will change it to [Music] minimum mhm still not [Music] talking I have given overflow why hidden you walk so I will what I have decided is I will give it a whole scrollable part the both the filters and the products will be scrollable right so in that case let us see what happens if it gets fixed or not for filters also I will give it a height of 100% and uh for smaller screen it is not working mhm there is some issue in the filters basically but [Music] uh if you give overflow hidden both if I remove the height let us give it the height of [Music] minimum fit [Music] content okay so for from let us go with this only so for smaller screen size we will be having the selection of product categories and the products right basically so let's go with this only I will change this one the design part later so let us now uh have the other pages that we have so in new arrivals you can do the same thing that we have in the homage only just you have to apply some filters but uh rather than that if you see if I log in so let me log in so if you see the cart and the favorite page so there are two pages that are cart and favorite so that we should design now so let us first Define the card and the favorite page so in the favorite uh we will be having favorite in the routes so if we go for favorite if we go for favorite yeah the favorite is coming and we will Define the same as a card where the path would be card simple card so card is coming right so we have linked that one so now let's get started with the favorite page but basically right so in the favorite page I will import the style components from style the thing that we do style components then we will Define the comp style components that are route sorry that are container and all so I will copy paste the same from the container section from the favorites I will paste it here then we have title and a card wrapper I will paste it again so let us now write the thing so container inside that we will be having section in that we will be having the title that is your favorite your favorites and after that we will be having say card wrapper and then inside that we will be having our products card basically so I will write products card done perfect right so products card so there will Multi products card so you can see it is looking pretty much good if I open in bigger screen so you would be able to see that uh for favorites it is looking perfectly fine right so now next is a card page so it is a it is a little bit complex but we will do it right so first thing is style components then in the style components we will be having uh let us get started with the container only so I have pasted the container and all the stuffs that we have been using the same for all so I have container inside that we have section then we have the title and I will give it a title of your cart shopping card and you can see it is coming perfectly fine then we will be having a wrapper then in the wrapper we will be having two section one is left one is right on the left section you will be having uh the thing for your cart items that we have and then on the right we will be having the address and payment Details page details section so I will Define the wrapper and then we will Define left then we will Define right and rest of the things are not needed for of now we can comment them also so for left let us give it a background color of red and for right let us give it a background color of blue and uh for wrapper let us give the style display Flex Gap 32 pixel width will be 100% and uh left Flex would be one and right Flex would be one and uh for D padding would be 12 pixel and for smaller screen the direction would be Flex direction would be column perfect then for smaller screen Flex would be 1.2 okay and for um right it would be Flex would be 0.8 now let us Define the left so first thing there would be a table so in this table we will be having table items so uh table items are basically the headers so first one is product then we have price then we have the quantity and then we have the uh subtotal of the thing right and then we have the option of delete so for that we don't have any heading right so all this items would be bold so right for I will pass the props of bold for table items so let us not Define the table and the table item so table would be a style. div and then we will write the table item also that is also a style. div so let us write the table so for table font size 16 pixel then display would be Flex align item Center then head margin bottom of 22 pixel hhm and then we have the table items also so for table items if flex and bold are there then we will do Flex one and bold is there font WID 600 font size 18 pixel so you can see that our table is now coming right and uh then I will copy and paste this table again for having different items so for of now we will be removing the bold and in the price we will add price quantity I will add quantity subtotal I will add subtotal perfect so now for items stable items for of two it is showing like that but we don't uh we can't use that we have we should have a plus and minus to add or more or reduce that one right so I will write a div and minus and div and plus right so counter let us div Define the counter so const counter equals to to style def I will Define say giving display Flex Gap 12 pixel and item Center border I have given border radius I have given and a padding I have given right so now it looks perfectly fine that with through which you can add or remove the items and after that what we have here is a products basically right so before that in the table what you can do here is uh if you notice it uh okay so for the product basically we will be having a product item right so where the image is there so I will write product then I will Define image and then we have the details of the product so I will write details so in this details so details inside this details we have the project title so product title sorry and the title and the product description and the uh product size basically you can say right so these things we are taking so I will Define the product description and the product size so let us refine the style components products equals to style. div then we have the products like uh image so it will be image Sil image then we have the details that would be stive then we have the product title right so product details would be the description and then we have the product size so yeah all the things are defined so now if you de load you can see the things are coming but we have to uh Define them uh with Styles right so first thing image height would be 80 pixel then project title would be font 66 font 500 primary color then product description would be text primary and hidden eclipse and all this things product size would be 14 pixel 4 500 okay so I have copied this image SRC and I will pass through the image in this one so it will be like visible to us how it is looking right so it is looking good now right so as we have done so the next thing after this that we have here is the uh right section where the payment details are being present right so I will write subtotal of say subtotal colon 1 to 120 .0 and then we have the delivery details that is delivery details and then I will Define the sub total con subtotal equals style. div and we have the delivery details so I WR delivery details mhm and then we have the uh first let us remove the color blue yeah now for uh sub total we have font size 22 pixel font bet 600 display flex and deliv font size 18 pixel font bit 500 IND thisx and all the stuffs right so yeah now in this delivery details we will be having a form kind of structure right so I will Define div and then inside that I will write another div where we will be having text input side by side right so there would be text input so I will text input and then I will first let us import this text input I will import text input from do SL do/ component SL text inputs right and then I will write uh button perfect so yeah text input and buttons are there right done so I will pass a placeholder uh first name and uh last name and style would be display Flex perfect and GAP would be 6 pixel right this is now uh coming perfectly aligned then we have the phone number so email address then we have uh email address after that we have the phone number so I will write phone number and then at the last what we have here is uh text area we will pass the text area that will be our address so I will simply give complete address State country PIN code and it will be having a row of five okay so yeah that's it so delivery details are done I will paste this one and and I will write this one change this to payment details right so I will change the inputs and I will change first one with the card number then we have the expiry date expiry date and CVV and at last we have the card holder name and the last one I will remove don't need of text field and at the end uh uh of this delivery we will be having a button whose text would be place order and that's it so you can see now the thing is looking pretty much cool it is responsive fully you can see right so our card page our favorite page and our shop page all the things are done right so yeah the only thing that we are left with is the product Details page so if you click on any of the product there would be Details page that should be open right so that part is left right so first let's link that one so in routes I will Define product Details page and I will write shop / ID that is the routes so do/ ID is basically the uh thing that we can take from ID that is that would be coming from the params of the URL right so if you open and give any ID it will take us to the product Details page basically perfect then let us go one thing let us import the style components and um style components from Style from style components then after that we have our okay so style components is important so as you can see in this page what we have the product details is the left side we have our image and on the right side we have our details right so I will Define the container first then the other things that we have is a wrapper and after this wrapper we have a left uh sorry the image wrapper and the details you can say so image rapper is there and then we have the details so image rapper on the left and details on the right so after that we will be having other things so I will do that later so first let's get started with container right so first is container then inside that is wrapper and inside that wrapper we have the image wrapper and we have the details right so in image rapper let us give it I and details D so let us now get started with the style so first container would be flex and align It Center just center with 100 height 90 wrapper would be Flex One Max with 1400 this Flex Gap and just Von and Center image wrapper would also have Flex one details would also have Flex one so you can see I and D are present background color I have given Red and background color blue to identify which one is present where uh so this is done okay now after this what else do we need here is uh if you open your cart so I will copy this wrapper and I will paste this wrapper thing here same thing as we have right the flex Direction and this one so I will give it a justify condent Center okay so let us open yeah so now I can see like for briger screen it is like distributed and for smaller screen they are coming uh in the flex Direction column wise right then we will give it a gap of 32 pixel and let's get started with the image and the details right so first is image so I will write image and it is asrc I will part of now provide any URL of the t-shirt and uh let us Define the image so image con image equals to style do uh con to St image right [Music] so what I will do here is I will give it a height of 600 pixel and a water radius of 12 pixel and uh display would be Flex for image rapper and uh align items would be centered and justify content would be Center so now you can see it is looking pretty much good not bad and I will give the image as uh for smaller screen size less than 750 pixel I will give it height on height of Auto and it's uh height of 300 pixel you can give height of 300 pixel and for okay there was a mistake for smaller screen height of 300 and for bigger height of 600 right so yeah that was done and uh what else we need here for the image height let us give it 400 this looks nice right so yeah that was it so let us go with the details display Flex cap 18 pixel Flex Direction column and padding 4 by 10 pixel and flex one then in the details what we have here is a div and in this div I will have the title and then after the title uh we will be having our name so I will write name then we have the rating also and uh I will change this one rating uh this rating would be up from uh mui basically mui rating Mei then we will be having our price so I will WR price equals to 1 2 0 then we have a span where it will be sliced off whose original price was 200 and then we have a percentage of say 40% off perfect price is done then we have a description description of product so I will write a product description done and at the end that we have here is a I will say that one before that let us Define the St title and all the component that we have written so I will Define all of them one by one so yeah I have defined all of the container now if you reload you can see the stuffs are coming right so now let's style them font size 28 font we 600 for title color be them primary for description would be 16 pixel font 400 and color would be text primary again for name you can price you can give display Flex item Center Gap 8 pixel font size font color color you can give for span you can give it s off with the text decoration of theme. text secondary and text recordation line through right and a percentage is also there with green color right so that was uh this one and product description you can do some modifications though but let us before the product description let us go with the sizes that we have for our uh items right so I will get sizes and in the sizes I have item say items and we have Excel so inside sizes we have items in that we have item Excel L right so let us Define first the sizes on sizes I have defined with some Styles and then we have cons uh size and then we have cons items One sizes was extra yeah so con items and con item so items would be the wrapper and item is the item so display Flex cap 12 pixel and Border for item would be primary and P size 14 then with height I have given then border radius thisx align item Center justify content center right so yeah and I can pass selected also for each of the items that would be selected and then it would be black color and at the end we have a button container where the add to bag or go to cart or favorite button would be present right so in a button container let us Define the button container would be a style. div and it is very much simple for the button container I will import the button from do/ component SL button and I will write uh uh text at to got full and it would be outline and then we have another button full but not outline that would be why now and we have a button but it won't have any text it would have a left icon and that is the favorite outlined favorite out rounded right so I will import favorite rounder from mui from come at mui icons done so yeah that's it I guess the buttons are now good but give the style display Flex G 16 pixel and that one so now the buttons are looking absolutely fine right so for the button of the icon button it would also be outlined and full perfect yeah now it is looking fine um rest what we can add here is height is 100% let us give it a height of 90% if you open the home I will copy this one and uh I will paste it here overflow would be scroll now it is perfect right so now you can see it is coming perfect it is scrollable also so I guess all the pages have been completed that we will be uh having for this uh e-commerce website so if if you go in the bigger screen it is responsive right so yeah so I think like the front content you have learned a lot from this so that's itth for the product Details page I don't think there would be any modifications if you give it height 80% okay so yeah I think like the pretty much things are now stable I think it's looking good H it's looking good now so all our pages are completed so now we will be having our homepage shop page signin card favorite right so now we will get started with the back end so I will close the this one our client and we will get started with the backend so we will now get started with the server part right so our client is done so now in the server part as you can see we have already installed the dependencies earlier right so we will be using mongodb as a back end basically so you can go in the mongodb and create your account you can do Google login or any email login right so we will be requiring a mongodb URL that is your database URL so create a EnV file where we will be having our mongodb URL and after that we will be also needing index.js file which will be our entry point as you can see I have opened mongodb so you can do Google login I have done Google login so it will take me to my account once you open your account you can create your new project so click on the button new project and you can create I have already created so I will simply click on connect and then I will get a mongod URL where you have to add your password for the cluster right and then it will be ready to go and then uh in the index in the package.json so add a type module so it will be like uh we can use Import in that case right and add a script start that is nodon index.js so when you write npm start it will be uh this command will be run right so now coming to the index.js file so this is our main entry point so first thing we will Define our app so const app equals to express now what is Express we have to import Express right so I will write import Express from Express then I will uh write app.use then we will be using course for our back end so I will write app.use course and after that we will be write app. use express and then we need to set a Json liit Li MIT so I will write limit of 50 mb maximum right and we have to use also like express. URL encoder and I will add uh extended true okay so yeah this is the basic setup we do for every server and then we will write our app method that is app.get so whenever we open our app so there should be a response that should be coming to us so I will simply pass the response stus as 200 and I will pass a message in the form of a Json which will be containing message as uh hello from gfg developers right so yeah so this is our basic uh starter file and now we have to create the uh to start the uh server we need to create a function right so I will write asynchronous uh Arrow function inside the triy block I will write app. listen to our port 8080 and once it is listened so it will simply print console.log that is server started on Port 8080 okay so after that uh in a cat I will simply call the error if there is any error it will print in the console.log right so yeah that's it and now we will call this start server function so now if you open your uh if you open your uh server do CD server from your root directory you can write CD server and then you can write npm start so you will see Server started on port 8080 and if you open your Local Host 8 080 you will see the message hello gfg developers right so our server is now live but now we haven't connected our database right so we have to connect our database so I will again create AR function con connect DV in which we will call mongos dostrict mongos Doc connect and then we will pass our URL mongodb database URL so it is coming from the EnV file that we have added right so it will be like Mongo's process. env. mongodb and um let us import the en EnV first else it won't be accessible so I will import start as EnV from EnV and then we have to uh then after this calling the connect function then we will call it then function where in response I will write console.log as connected to the mongod DV okay so we will get to know that it is connected and if any error comes I will catch it and simply print in the console okay console.log you can do it error fail to connect with mongod and error and before this connect function we will set a strict query mode so I will write strict query and it is true okay so and we will call this mongodb connect function before our app. listen and also you need to configure your EnV so you can see we have to write env. config okay so then only we can access our EnV file so you can see our it is showing connected to the mongodb right so that is how you connect okay and after that uh we will create our folder structure so in server we have three main structure first is model then is controller and then is routes okay so we will create all the three folders as we have created so models are basically your schemas and the structures that we will be using and uh controllers are the function and routes are your url path API URL path and we also need to create a error function so that you can copy and paste from the video okay so that will be required for errors so we will be using a error Handler so I will simply uh write this error Handler app.use and then we will pass error and request and response and the next function and when this error Handler is used so it will write const status equals to error. status and or it should have a status of 500 if not provided then message we will be providing error. message or or you can write something went wrong and the last one that is we have to return this one so I will return res. status status I will pass the status and Json form of a message success would be false and Status would be status and message okay so that is how we can handle our errors basically so this eror Handler is also done now we will get started with our model so our models would be some first would be the products model and user model so I will create the two files products. JS and order. JS and error JS our three files so let's get started with the user first right so first is I will import mongos so I will import from so then I will write const user schema equals to user schema equals to new mongus and then we will write a schema where we have to Define our schema so first thing would be usern name so these are the attributes basically so first one is name and it's type string and it is is required true okay and it is uh done then I will copy and paste this one and we have other things like email then email should be always unique for each and every user so I have written unique true then we have password so password it is required true then we have the image that is also a string URL and it is by default null if user gives then it's full and good if not then it's good to go okay so we are having these things for the US user currently and we need the time stamp also so I will write Tim stamp true okay so this is how we have defined our schema basically then we need to export the schema in form of model so I will write export default do model and it is user and uh I will pass user schema okay so this is how you create your models basically done then we have orders so I have copy I will copy and paste the same for orders and now I will change the name so it's orders uh then instead of a user there will be shopping order would be the model and then we will be changing the things that we have so let us change the first thing to our in orders we will be having uh total amount so I will write total amount it type will be you can do number or you can do do dives. decimal and then there is a address you can do it type string or you can do default as null okay and then we don't have password we will be having a status and by default you could place it payment done then you have image you don't have image sorry so this is a basic uh order schema then I will copy that to product and in product we will be having product schema and I will change this to product then okay so this is our models basically now in product schuma we have the product title then it it will be string then we have the uh product name it will be string again then we have uh description and uh what else do we have we have a image of the product then we have uh price of the product and its type would be a complex type so in type we will be having an OB object so in object we will be having first original price whose type is number and default would be 0.0 MRP is also a uh number so it default would be 0.0 and at the last we have a off that is type number and it's default 0.0 zero sorry off is zero and uh the whole price default can be or original 0.0 MRP 0.0 and default Z of Zer sorry done and then we have the size of the products so it is it will be a type of string and by default it would be empty of array so the string would be an array of string so it would be in the third bracket so yeah size would be an array of string so that was our product model and we have the categories at last so it will be the same default empty array and types array of string so there would be a comma I have made a mistake by dot so replace all with the commas in the do model and and after that we need to make a relation right of the database so for orders we need to relate the products also so I will Define products in the order schema and products we will be having type of array so there are multiple products so there is array and in this each array we have object of product which is type of do schema. types. object ID and its reference would be products products model okay and after that we will be having quantity of each of the product so it will be type number and default would be one okay and after that we will be having requir true so this is our products how we relateded the products and the last we will be having user who have placed order so user will be like type again the same mongus do schema I will paste that one and uh we will be having its reference as user capital u and uh required will will be true so yeah and uh in user also we will be having user cart and favorites right so for cart it is a type of uh array of products right and its quantity so the same thing the product would be type of mongos project ID and reference would be product and uh quantity would be the same so we will be having the type of number the same thing and after that we will be having default as uh empty so cut by default should be empty and we have a favorites that is very simple we have array of object ID of the products okay so the type would be ARR of Mongo's object ID and reference would be products okay so this is how we make our relation in our database and default is empty right so yeah that's it and at last uh what we can have our orders so each uh user will have orders so it will be a reference of shopping orders right so that is how we make our relation to our database okay so this is done so all the schemas have been uh finished right so now we will get started with our controllers okay so before controllers we have our routes so in routes we will be having three routes users products and user and products sorry so yeah user and products and in controllers also we have two types of controllers products and uh users so I write users. yes okay done so we have two controllers and two types of routes so let's get started with the user controller right so first thing is authentication so before that we will import all the stuffs that are required so I will have imported the bcrypt and the JWT Json web token andv created user and orders OKAY model so now I will config the EnV so I will WR env. config so now this is done first is user register so I will write the user register controller right so first is I will export the const user register user register Arrow function basically as synchronous Arrow function and we will take request and response and then Arrow function where we will be wrapping it with the try and catch and also like for user uh sign login can do user login and uh yeah now inside this we will be having a try and catch block uh try and catch block uh where if any error comes we will pass it so in the try first we will take email password name and image as a prop uh from the body uh not a prop from the body request body and then we will check that if the user already exist or not so I will check from the user model that I will do find one where I will pass the email and I will execute that one if it is found then I will pass so I will give it a check if existing user is true then I will pass the return uh next create error and I will pass that 409 con uh basically the email is already in use 409 status is for conflict okay email is already in use and after that I will do if user doesn't exist so first thing that we have to do is we have to Salt the password what is salt so we using BP we hash the password that user provided into some different uh encoded uh password right so that it is uh untrackable or unreadable by any of the user okay so we have hashed the password after that we will create a new user where name email password would be hash password and image I have provided okay so user is been created then I will do const created user equals to user. save now once you do user. save your user will be saved and uh it is stored in created user and then I will create a new token from JWT using JWT and its ID would be created user uh do ID so I am taking the ID of the created user current created user and I will be using that and process. env. JWT I have to pass so it will be expiring in 9999 years you can give anything one day also okay so after this one what you have to do is you have to pass the jwd token and the uh created user so I will do return requ response. status Json token and user then and I will catch the error if there is an error and if there is an error I will pass in the next error okay so it will be automatically handled so now let us uh add the JW in our EnV file so I will add JW anything any string you can give right so yeah after that one what we have to do here is we have we have to add our routes so as we have created this one so let us create the routes for the user also so I will do import Express so Express then I will Define our route so on router equals to express. router and then we will write router. post to sign up where I will call the controller user register right and uh uh in index.js we have to define the routes so I will import user router from slash router SL user.js so user router is important and then what we will do here is we will uh be able to use that one so you can see there is some error it is showing so let us see where the is so it will be user router and let's see uh okay okay so we have to call the user router so I will write app.use API user user router so with this URL you can access your controller okay and uh let us reload you can see the error is coming let me check okay okay okay so in the controllers it will be controller / user.js okay [Music] so do do/ controller SL user.js okay so our input was there was some I guess no but still there are some errors [Music] [Music] import user router from okay we have to export the router right export default router now you can see the error has been gone right so I will open my Postman basically so Postman is basically used to test your apis and build the apis right so I'm using Postman you can download it from uh any of the app store or thing so first thing is sign up right we have made the sign up so I have my email address password name and image so I will simply call this uh API and you can see some internal server data is there okay hashed pass okay hash password would be hashed password and user find one so find one o would be capital and find one right so let us test now okay there is some error again okay so it is user not users so let us change this one and see if it works okay let us see now [Music] password e okay so it is showing 409 conflict so let us change our email address yeah so now you can see that a new user is been created right with the different email address that we wanted so user register is completed so now we'll copy and paste that in our user sign up or user login also but now we only need email and password and now instead of existing user we will check if the user exist or not right so I will change the status code I will write user already exist or a user not found uh sorry not already exist user not found and I will remove the salting part and all and then I will write const is password correct which is basically check of the password is correct or not so I will call the bcrypt and then I will do compare sync and then I will pass the password and the user. password so we have to define the user so let us remove this one first created user user and uh instead of created user I will write here user in the token and instead of existing user I will change this to simple user instead of existing user I will change that to I will change all to existing user okay so yeah so now you can call your login also so basically sign in and instead of user register it will be user login so now if you call the login function uh signin function so let us check error is user not found if you give uh if you give some different email let us see I will copy the email that I have just created now and I will paste here and I will do so it is showing user not found again the same thing let us debug where the error is coming actually let us see now if the comes but the same error is coming okay I got it there would be a nod basically right if existing user is not present then only we should F yeah now it is working perfectly fine so you can see our token is coming and our user is also coming right so yeah so our login function is also done user login and user register both are completed so now the next thing that comes into part here is our products so I will Define our products controller so first one is I will import the things that are required for products then I will write const export con add products and it is asynchronous request response and next I will add a try block and a catch block if any error is there I will pass as a next error and in the tri block I will pass con products data equals to request. body and I will check it should be an array so I have written that one in the condition and if it is not an array format then we will return return 400 invalid format or invalid request and uh expected an are of products right so in we need AR of products if there are five products then I will push five products in our database right so yeah so aray of products after that we will create uh a variable con created products which is an array empty array then I will run a for Loop of the products data and then in the fall Loop we will be getting the product title name description size category and all the stuffs from the product info and then I will create a new product from this product info and I will pass title name description and all the stuffs that are required and once a new and once a product is been created what we will do here is we will pass cons created products equals to Aid product. save I will save the product and then I will uh push this product in my Mt of created products right so and that's how we will be getting all the products that are been created and in the response I will pass the response that status with successful message that our products has been added or created products and then we we will be having another function that is to get the product so I will write conate products equals to asynchronous request response and next and then we will have a same try catch block we will be having inside the try so first is a catch block and then again the same thing in the try we will be taking some of the query that are categories prices minimum prices maximum prices sizes and searches and according to that first I will split the sizes as there will be multiple sizes we will be splitting that one and creating an AR and then I will create a empty object of filter and then if I will check if the categories and AR categories and array format then in the filter do category I will pass the category right and then minimum price I will add in the filter do price minimum price original and then I will add if minimum price then I will add filter price.org greater than par float minimum price and maximum price like that and then in the sizes I will check that if are sizes is an AR or not and if it is an AR then I will add the sizes are in the filter. sizes then I will add a search bar then for the search functionality we will check the title and description and match it with the regx and once it is done I will simply write cons products equals to AIT products. getet right and like that find and we will pass the filter and we will send in the response now let's uh create the routes for the products so first one is the post add and then first the next one is the get so add is for adding products and get products is for getting the products right so we have created the routes now after this one we will be having the other controllers also so in other controllers what we will be having here is uh in the products we will be exporting a get product by ID for getting a single product so we will be creating this controller so again the same thing the try and Cat block with the arrow function with request response and next and uh in this try block we will be getting the ID first of all from the pams and I will check that if it is a valid object ID or not if not valid then I will say invalid product ID inv response and then if it is a valid then I will do is I will try to find in my products if not then I will write product not found okay so if product is found then I will simply return the product right so this is a very simple like how we create our controllers and how we access them right so I hope it is clear so the next thing that we are going to do here is in the routes we will be adding uh ID as the prop so colon ID and get product by [Music] ID so now this is done so after this the products controller is pretty much done so we will be having our uh Let's test with the product so I have a default product in my uh read me so I will paste that one in my body so you can see and after that I will create the URL that is API SL product slash product out that is product Js and then I will Define my routes for the products that is API SL products and if I now do product/ uh so if I do now product slash add there is an error created product is okay so products we are not using that one it will be small P products. save right and that would be created products so now you can see product are successful and I am passing the uh area of created products right so now it is working absolutely fine and if you get for simple get method then you will see multiple products that are coming right and if you pass the ID you will get the products with the ID okay if you give a ID you will get that particular product itself right so that is basically how you have cre the routes for the products now coming to the user so for user what you will be having here is other controllers first one is export con add to fa add to card that would be asynchronous function with having request and next and uh then I will add a try block and a catch block then I will say next error if there is an areer and for tri block what we will do here is we will take the product and the quantity from our request. body and after that we will be taking the JWT user user request. user const aate user find by ID JWT and then we will be doing const existing card items is equals to user card finding the product and then I will check if the existing is already present the product is already in the card then I will upgrate the quantity by decreasing it and if the product is not in the card then I will simply add it so this is the basic logic of uh doing that thing and after that we will save the user and then in response we will be sending post added to card successfully post added to card successfully so that is how we do and then I will create another function remove card from remove from card where again it will be a TR catch block and inside the TR catch block inside the tri block not in the catch block so in the try block I will paste that one product ID and quantity from request body and after that we will be doing the the user JWT and uh after that we will be checking say if uh user not found if not user user not found and then we will be doing con product index equals to user. card. find one find index uh and item do product equal to product ID and I will check that if product ID is equal to not equal to minus one then quantity and quantity is z and quantity greater than zero what I will do here is I will simply [Music] I will simply say if a condition and then check the product index and if quantity is less than Zer what I will do is I will remove the whole thing and if the quantity is greater than zero I will reduce by minus one okay so and then I will create await save user. save so that is how we basically do the thing and then in response I will send it to the user right so then in the else uh request. uh so yeah so done so remove from cart and add to cart are now done and now we are left with the get cart items so I will let con to get all cart items and then it is a same asynchronous function with the next and uh try catch block same thing and again in the TR catch block we will be checking the user JWT const user await user find by user JWT I will check the user is present or not and if you get that one we have to pop the cart item so I will write populate where path will be cart. products and model is products right so this is how you if you have relational that one you can bate one so con card items equals to user. cart and then in response I will send the cart items okay in just format so now get all card items are done then the next thing is export place order so this is the place order API controller so request response next the same thing the try and Cat block the same thing we will be doing then we have the error the next error and desire function inside this Tri block uh what we will do here is we will take the product address and total amount the three things we are taking and then again we are taking the user JWT and then I am finding the user the same thing we are doing then I will create a new order of with product user ID total amount and address and once it is done so I will save that one so I will write wait order. save and then I will do user. card Dove so and then I will write user. card equal to Mt so I have removed the card and then again I will do user. card user. save and then I will return that one as a status of 200 with a message that order placed successfully and then what we need to do here is I will pass the order right so that is how you have defined a place order okay so then I will Define export con getting all orders so a simple function to get all the orders of the current user so the same thing again the try and Cat block would be present and then uh the next function of error and after that uh we will be having const user equals to request. user order equals to wait order. find and then user user equals to user. ID and then in return I will pass the response of the orders from the user okay and then in the export con add to favorite we have the next controller add to favorite which is the asynchronous function again then try and catch block the same thing again and then after that we will be having our uh product ID that is request. body and after that we will be taking the same thing user then we will check the user and after that uh once it is checked we will see that if the favorite is already included or not if favorite is already included then I will not already included then I will push that one the product ID and then I will save it and else if it is included then I have to remove that one right so you can give it in the remove products so I will just copy paste this one and I will paste this one if uh remove from favorites and let us uh remove this one and I will write user do favorites equal to user do favorites. filter where favorite not equal to favorite do equals the product ID the current favorite right and so it will filter out rest keeping the product ID same it will remove that one so and I will then do user. save it will save the user okay and after that we will be having other function controller that is get user favorites where we will be getting all the users favorite right so const get user favorite it is as synchronous function request response next and then a cash block with the next error so con user ID equals to request. user ID and then we will be having a user a find by ID populate then I will populate the favorites and then I will execute that one right and after that we will check if user exist then I will return this one and if user does not exist then I won't be returning this one so if not user next is next created a pher phone user not phone okay and in J I will pass the user favorites in form of add so this is done so all the things are done so first one is orders then favorites then cart right so in the manner we have created so this is done so all the controllers are done basically so the next thing that we have to do here is we have to define the user routes so I will write the card for first that is cart then I will write the first one would be get then patch and then delete so post and then patch so first one is a card then post would be you add to cart and the pat would be remove from cart right so for same that would be for the favorites also so I will write first orders and then favorites so orders would be the same order get and post only the two things uh place order and get all get all orders and the last we will be having favorites so it would be like uh the same thing I will copy and paste so it will be get favorite and then get all favorite then add uh to this one favorites then remove from favorites done and now this is done right so then we will be having a middle we which we will be verifying our user jwd right so I will create a new folder JW middleware and inside that create a new file verify token. JS right so there would be a same asynchronous function where it is a verify uh verify token function it is as synchron function with request response and next and it will try and catch block having the same try clatch block and then in the try block we will see that if the user header is not present then we will pass the request or but you are not authenticated then we will take the token cons token equals to request head authorization split by one so we will take the be token and we will check if not token then not authenticator then we need to decode that one right so verify then token and decode so yeah so in the decode function we will check if decode is true then we will pass and save it as user and to use this middleware in the controllers before the original controller call this middleware controller right so in user uh request. user it will be saved the user data so let us now do one thing let us uh change this one to favorites so you are not authenticated is coming so I will just simply copy the token and I will use that BR token and I will send it so you can see empty that means how it is working perfectly fine if you post some product also in your favorite for say product ID that is this one and if you send you can it is added to product added to favorite successfully and if you do a get then you can see you can see it is coming right so that is how basically we create our apis then delete also works functionally patch is also working functionality right so yeah that's it for the apis I guess all the apis are done you can test them individually so now it's the time for integrating it with the front end right so in the SRC create a new folder called API and inside API called index. J and once index.js is done so it will be containing all our API right first we have to import the exos from xos and then we will Define our base URL for the exos right so I will write con API equal to xos base URL that is local 080 API then we will create export const uh user sign up function that is a synchronous function taking data and we will pass a. poost so/ user SL uh sign up right and and then I will paste this one then I will do con user sign in then I will change it to sign in okay so user sign up and user sign in our functions are done then we have the get all products and so for that we will be having a filter option that would should have a products and then would have filters so I will simply write uh filter product/ filters if there are filters present it will be reflected right and then after that we have the get uh products we have the get products detail so and then we have the cart also so for the cart we will be having the same as the login so const get product details and it would be a synchronous await api. user / card it would be a uh we have to pass the token also in this format after the headers authorization we a token and we have to take the token from props and then get to card is also done and then remove from cart is also done get add to card and delete from cart so request uh so sorry post and Patch right then favorites also we have the same thing we will copy and paste this thing again and again so use our favorites authorization we token and all the stuffs perfect right then we have our orders also so placed orders and get orders we have the two functions that I have already shown you so export orders right so our API are now done now we have to call them right so for State Management to centralized State manage the state we need a state management library that is Redux for our react JS it would be helpful right so I will you can go through the Redux documentation it is very easy and very simple to go for and uh yeah so we will now set up our redex and if you have liked give it a thumbs up so in the redex we will be creating new folder that is reducer and inside that reducer we will be uh having something slices and in the root of the Redux we will be having store.js so in the reducer we have user slice. JS right so I will import the create St slice from uh at the rate Redux tool kit and then we will con initial State equals to current user null so current user is null initial State then we will be creating creting a user slice so that is you create user slice create slice name would be user initial state is initial reducer equals to read updated user and state action state from action that would be form of uh function add function so update password login success and log out these are the three function that we should need so update user current user equals to action. payload do user then login success we will be taking the same login success state. current user equals to action. pay. user total local storage. site items have token so we will be saving the token in our local storage and in log out we will do State current user equals to null and in local storage I will remove that one the CH token right so that is how basically we have defined our user slice and then we need to export this one so I will write export con of Creed user login success and log out uh equal to user slice. actions then I will export default user slice do reducer and uh then we have inside the reducer we also have a snack bar slice so the same thing same way I will I have pasted and then I will change the initial state with the open then message and a cvrt okay so this is the initial state of the snack bar slice and then we will update with the snack bar name and then I will change the functions as open snag bar and close snag bar close snag bar and then I will change the state as state do open equals to true then state. message equals to action. payload do message and uh cvrt the same and then in the close I will set open as false okay so that is our basic uh functionality of the snag bar slice then I will change it to snag bar actions snack bar slice actions and change it to open snack bar close snack bar and then we will be having exporting this reducer right and then in the store we have some basic default things that we have to write so I have pasted all the Imports that we need and after that I have uh I have used the persist persist config that is root Keys root and then version one storage and then root reducer I have so user is user reducer and snag bar as snag bar reducer then I will write con persisted reducer equals to persist reducer and then we have the persist config and root reducer then we have export that is Con store equals to uh config store then reducer we will be passing the pist reducer and middleware in the middleware we have the get default middleware where we have the serializable check that are ignorable actions we will pass the flush and all those stuffs that are IGN notable right so this is a basic setup and rest of the things are constant right so you can just check my code from my GitHub and you can use that one and then I will uh export this one so con export persist config persist equals to persister store and I will pass the store so it would be export con yeah persist reducer persistent reducer it will be like there reducer would be forist reducer yeah now it is correct right so we have created our Redux structure but the thing is left that is in the index we have to add the persist and the store at the root so I have imported all the stuff that are provider persisted gate store and persistent so first I will write provider and where store is the store and then I have wrapped that inside persist gate where I will wrap the app app right and then in purchase G we have to pass a persist as persist right and then we are going to go to use our Redux right so now let us check our client so I will write CD client and npm start so this will be started after this uh this has started so you can see your react application has started successfully but there might be some error let us inspect it one so in the console you can see that uh in the store there are some issues okay let us see okay so there would be comma instead of semicolons so yeah now it is coming perfectly fine right so yeah that is it for our Redux so we have implemented Redux also now to use the user and the cvrt means the that one so we will need we will be using use selector and then we will be passing the state as the state. user for user we have current user right and then we have to UT the use selector also so let us import the use selector and dispatch uh so if you reload now and we need the open message and the cvrt okay and after that we will be uh passing in nav the current user so if current user is there we will be having a check and we will be not showing the sign up button so coming to the nav bar or you can create a new toast message. jsx where a basic uh toast aler would be created you will be getting this in the drive file okay so you can use a snack bar right so I will use that snack bar here so I will write open when it is open then I will show the toast message and I will pass open equals to open message equals to message and cvrt equals to cvrt right so that is how you can use the react for the whole state of your application and I will import the toast message from do do SL do/ component toast toast message right so yeah that is done so the next thing that comes out here is the Navar so in the Navar if you have the current user right so I will check if the user is present currently so I will simply uh do one thing so I will come to the sign in and let us call the things so first is const email and then set email equals to user State uh US state that is a h and we have the password that is also a hook so password and set password this is how you define Your Hooks right and then whenever this text inputs and this are changed so you need to change the value also so the value would be email and handle change we will take e and then we will set the value of the email as e. target. value this is how it will be updated right and the same thing goes for the password also so the same thing just change the name to password and set password right so that is done and uh we are good to go with the input so pass a prop password so that the I icon would be there in the password right so yeah that is good to go then we will validate this one so I will write a function validate inputs where we will check if both of them are null then we will create a alert and then we need other things like button loading so whenever we click on the but button it should be loading right so we will Define other states as button loading uh so now we will create a function for calling the uh sign up API you can call so validation again we need don't need validation we have done so I will change it to handle signin and in this handle signin we will check first of all it is as synchronous function we will check that set button loading is true I will change the state of set button loading to true then I will uh add another state that is simple button disabled or not so set but button disabled I will check and I will give it true and uh I will check if validate inputs is true then only I will uh call the function await user sign in this is the API that we are going to call and we will be passing the email and password as data so let's import that one user sign in from uh dot do/ API API SL index or simple API after that we will call it then function and then in the response we will check that if uh we will do a dispatch of simple dispatch that is a dispatch of login success we will do a dispatch and then first of all let us Define the dispatch dispatch equals to use dispatch from react uh from Redux react Redux done and then we will be calling the login success or you can say open snag bar and then we will pass them message as login successful cvrt would be success right so that is how you can use your snack bar basically and again we need another dispatch that is basically for login success okay and in login success what we will be having here is response. data and uh rest would be same and then I will create a catch eror function where we will be like uh passing some error function where the loading and button disabled would be removed so set button loading would be there and we are checking the response and creating an alert or the uh dispatching the snack bar right so you can just copy and paste from my GitHub this one so handle signin function is done and at the end also we will be disabling all the uh things okay so in on click handle sign in should be called and is loading is the button loading and is disabled is the button disabled right so by default uh these are done and uh let's see let us reload and check so in the postman we have the email as this one and password I will simply pass that one and password I will provide and I will do sign up sign in so some it is coming let us reload and see okay mhm okay sign in is happening okay okay so sign in is happening perfectly but uh it is not visible because we haven't implemented that stuff right so sign is is happening perfectly fine as you can see it is response is coming right from the network tab then we will be moving to our nav bar now in the nav bar we will check that current user and if current user is present uh then we need to make some changes like for if current user is present mhm I will write current user if is present then I will simply I will simply call the button sign in if current user is not present and if current user is present you can see there is nothing right so that was our logic so after that if current user is same thing I will write in the nav link inside mobile icons also but uh if current is are present then we need to show Avatar so I will import avatar from mui and then SRC is current US . image done and ax would be like say color would be inherited and font size would be 28 pixel would look good okay then other stuffs uh that we can show out here is uh we will like showing the we won't be showing the stuffs like uh cart and the stuffs if current user is not present so if I do the log out let us add the log out also the text button would be log out text button log out I will pass on click of dispatch log out and dispatch we have to set that dispatch cons dispatch equals to use dispatch import it from react Redux so text button would be a style. div and it would be having some you can say like text alignment and color primary secondary Etc use dispatch would be imported from react Redux right and now if you reload you can see that uh a log out button is also present now and uh a over primary color is has been changed right so yeah that's it so now you can see that uh current user if current user is present uh then we have to show the sign in and sign up in the mobile bar and if not then we will be passing log out button and dispatch log out right so that's a different so you can now do log out also okay so that is done for current user check and the next thing is if you do sign up you can simply sign up with your account and if you do login and or sign in you can see that your account will be opened right so the next thing that comes out here is the homepage right so in the homepage we will be having a different products first of all right so we will be creating a loading state so that is loading and set loading and we will be having our products that is a use state so then we will be defining the function get products which will be a synchronous function where the first thing we will do is set loading through and then we will call the API that is get all products and in response what we will get we will set that to our products so I will write set products to response. data right so that's done and after that I will import the API from the API and then I will stop the set loading also right and then we will in the use effect we have to call this function because whenever our page loads they should be called called once so we will be passing a empty dependency at right so now it would be working fine but loading and products are not being used so in the index let us see if the things are perfect or not so in G all products we have a filter option also so this Filter part we have to make some changes so okay so it would be API doget right so it would be API doget so now let us map the products if the products are available I will map it so products. map product and there will be product card right so you can see there are multiple cards coming now so I will change I will pass the product and through product card and then in the product card we can access that one and we will be simply using that one that is product so first one is image so that would be product. image then next would be mhm so after that we will be implementing some stuffs like uh uh you can do like the title so product. title then we will be having our description then you can write product description or product. name anything that you want and then we have the price so price would be 1 120 then we have the uh span of price. MRP and original and then we have the off right so that is how we can Define and you can see now it is coming for perfectly our best sellers all the products are coming perfectly right so in our home all the products are now coming perfectly that we already had so congratulations your homage is done so don't forget to give it a thumbs up so in the details of the product card so I will click on a navigate so it will it should navigate us to the products so I will write a navigate products ID and on click of that navigate to use navigate and it will take us to the product product page right so if you click on any of them so you can see it is not clickable so yeah in the details if you click any of the details that is taken to the details page right so that is what we wanted actually so the next thing that we want here is so the next thing that we want here is uh check for favorite so it is a asynchronous function where we will be passing that uh the same thing used State and loading function then set favorite loading is true and uh after that we will be passing the to we will be getting the token from local storage and then we will call the API add to favorite where we will pass the token and the product ID and once the product ID we will pass the product ID from the product. ID and they should be add favored right so yeah product ID we would be taking and we would be passing that one and after that uh we will pass the same catch function and then the same thing then we will be using calling the dispatch use dispatch okay and after that uh what else do we need add to favorite is done and then we will copy and paste this one and then we will write uh delete from favorite so that would be a function for deleting the favorite and after that uh we will do check favorite so that is asynchronous uh check favorite so check favorite get favorite and check favorite is done then we will be having our check favor is done and after that we will be doing the same thing the stuffs the same only change the API and the loading part and the set favorite right that part are different rest of the things are similar okay so I will check if the response data is uh is favorite then I will set the favorite ID with the product ID equal to equal to the product ID then I will do the same thing so if I I am checking that in favorite if our product ID is similar in the list then I will set the favorite as is favorite and if not then I will set it not right so that is how you can do it and now we will simply call the use effect which will be uh checking the favorites basically so I will call Favorites whenever we change click on favorites then it should be called and uh rest of the things are same and then we have a favorite loading so whenever a favorite loading is there we would be showing a circular progress bar and if not then what do we need to show here is favorite loading so we will be showing a circular progress bar uh instead of that and it size would be 20 pixel so yeah and after that we will be having the favorite if it is favorite then we will show it the red uh fullfield favorite and if it is not then we will show outline or you can say bordered right and it's for and it's uh font size would be 20 rest would be the same right so that is how we have defined our uh card so now you can see the loading is there and you can see the items that are favorite that are coming red and that are not that are showing normally right so that's done so next thing that we have here is if you click on the favorite item then the remove Favorite and add to favorite are being called based on the favorite so if it is favorite then it will be remove Favorite and if it is not then it will call the add favorite right so that is how the main thing is called and after this this the next thing that comes out here is the so yeah after this the next thing that comes out here is uh let us see in the product card we will be defining add to card okay so the next thing is the card so I will write add to card the same thing I will take the ID and then the token and then I will call the same function at to cart from the that we have defined in the index of the API then I will pass the product ID and the quantity and then in then I will pass the the navigate it will take us to the cart page right so whenever we click on add to cart it will take us to the cart page when it has been successfully added to the cart and in the catch it will take the error and if error is there it will dispatch in the snack bar it can dispatch in the snack bar also so after that we have a menu item on click so in this on click add to card is there so whenever you click on the add to shopping cart uh it would be that to cut so let us click and see it is taking us right so yeah now let's go to The Details page right so in the details page it is very simple we will be calling only a single API that is get product by ID so first we need to get the ID from the padams so I will write uh const ID equals to use padams and then I will call it dispatch so const dispatch from yeah and then a navigation is also Al there right so we are getting the ID and then now we will Define the use that are basic use loading and the product so I will now Define a function that is get product as synchronous function get product which will be having again uh the same thing set loading would be true and then await get product would be you can do it details product rate product details and then uh we will be having a set product that is response. data and then catch it and after that uh you can do one thing that is uh get the product details from the API I have imported that one right and uh rest of the things are pretty similar call a use effect and we will call that function whenever the page is being loaded right so simply empty dependency add so now I will check if it is loading then I will show a circular progress bar and if not I will be showing the wrapper right so yeah now you can see it is loading and uh once it is been done I will set the loading to false right and then change the SRC as product. image title as product. image product title and then name as product. name you can see the things are changing how right so price I have done and then for the product description uh you can do product desp description and then for selected size so I will map the sizes all the sizes I will be mapping and then I will pass the size and for selected we will be checking that if it is being included then it is selected and if not then it is not selected right so you can see all the sizes are present and uh let us create a use state of selected State and favorite state and uh favorite items and all so now if uh item uh that is selected equals to selected equals to equals to size uh then on click I will set the selected size as size right so now it is functional you can see right so that is how you can make the things functional and now your uh this Details page is almost done right and in the products card page I will copy the same thing add to card remove from card add to favor all the API call that we have made we will simply copy and paste it here and just import the apis in this page and then we will be simply doing the same that we have did for the cards for the product card right so whenever we click on the uh what to say the favorite we will doing the we will be doing the same thing favorite Bard and favorite round we will check a favorite and the same thing and is loading is favorite loading and on click is uh I will WR call the if favorite is there then I will remove from favorite and if not then I will add to favorite right so that's how we will be doing the same process the same thing right and after that uh what else are left is add to card right uh the same thing I will do here also and uh also in the get products I will call the check favorite also uh in the use State and after that uh what else do we need add to cut we need so on click of add to cut I will simply C do call the add add card function okay and rest we don't need anything else in this page I guess okay so I will call a card loading true and when it is done I will say card loading false card loading false done and uh dispatch also card loading false before dispatch right so Set Card loading false so now you can see when you click on add to card uh you click on add to card it is load but there might be some errors okay so this ID remove this ID and we will be taking that from uh we will be taking this one from let us inspect and see once if the problem is here only so you can see canot property of uh entered that one right okay so in this case what we have to do here is uh in the index.js check if the cart things are correct or not so we have a data and cart and product ID we are taking the body mhm and rest of the things are pretty similar so there shouldn't be any error but uh the token product ID uh okay I have removed that one I guess now the error should be uh solved most probably let us P this one only productor ID if you click on product ID the error is coming again let us see where the error is actually coming from uh so rest of the things are good I can see that one where the error is coming then the controller let us check if the thing is correct or not so I had two card we are taking the product ID and quantity from the request body and item do product equals to so let us give it a question mark here and uh existing card item find index okay okay [Music] so well let us check where the error is coming actually from okay so for let us do go and go for the card first so in the card I will call all the default Hooks and the function that is get product function so I have called the default thing so from the page only of the fave it and then after that we will be having our uh get products where we will be calling the get cart function and then we have the add to cart and other functions also and remove from cart functions that we have already used basically right so I have just simply pasted them and then we need a function that is calculate sub tootal it will calculate the subtotal so you can use your own logic also instead of seeing this one or you can uh check my G and you will you will be like getting this code right so after that we will be having a loading so if the whole is loading we will be calling a circular progress bar and if not then we will be showing the details then we have to uh do a mapping that if products. length equal to equal to zero so the that means no product is in our card so I will so show empty cart is empty and uh if not then I will show the products so I have to map the products here so I will write products. map then item then I will map the table so I will copy and paste a table inside this one and then I will map the things so first one would be the let us add to cart so now you can see that in use effect we have to call this one that get cart items dependency mty dependency so there is some error get products okay so get products should be there right so now you can see that the list of items are present now let us change the things so first one the image would be items uh dot not image items. product. image right so yeah and then we have the details and in the details we have the uh items. product. title then we have item. product. name and then we have the size right so let us do a sign up to another account to this account and let's just see okay now we have logged in and if you add items the items are having empty image I means the ID there is some problem with the ID right okay let us see where the problem is actually so in the card uh product card uh we need to pass the ID right so I have to pass the product ID in the card function right and now if you uh yeah now we also have a delete outline so the delete outline is there so if you click on delete outline it is not functional Cu uh the ID is not present actually of the product right so you need to create a new account this is not useful I guess so let us change the things then we will be doing that one so the original price I have shown and then we have the quantity and in this we will be having a cursor pointer and then on click we will be removing the product and uh in plus we will be adding the product right so that's how we can work and then we will be calculating the total amount by multiplying that and in the subtotal we have a function called calculat sub total to two fixed right so yeah that's how you can add to your card but still the items are not coming I am not getting it so if you are going from The Details page then it is coming but uh some issue is there let us see so the adding multiple items are working and removing them are also working fine but if you are adding from the card then it is not not working let me see that thing but [Music] uh before that let us go with the delivery option so the means the placing the order so we have the delivery State default and then we will create a as synchronous function for placing the order I will call the set button loading as true then try and catch and inside this try I will paste that catch that if failed and in the try what I will do here is I will call check the delivery things are being filled correctly or not and if the things are being filled correctly then in that case we will be returning the total amount and the token and then we will be calling the same type of function what we did but we will be having a function that it will be converting the whole address into a single string right so complete address phone number into a single string address object okay and it will be returning that one right first name last name and all the things it will be combining and then returning and that only I will pass as address and and user right and then I will call the function API as synchronous API and then I will do a Reload so now on the button click I will do a on click of say uh I will do a on click of place order and disabled I will do button disabled right and loading is button loading and in text area and all this stuff we have to create the handle change and the value so you can just simply follow this one and just paste this one uh handle change value and all delivery details and all and after that uh we will be having first name last name email address we will be having all the stuffs the name last name first name and the rest of the stuff right done so now if you uh try to place your order let us see it is loading uh let us see in the insect what it comes for our [Music] network uh I guess some error is coming because of the IDS are not present and we unable to delete that one so that might be causing some error let us create a new account okay so for sign up we haven't uh been added the API yet right so let us do that for the sign up also so in the sign up we will be having the same as the sign in and uh I will having the same dispatch and all the stuff so let us import them I will simply import the API would be simply changed to sign up instead of sign in and rest of the things would be same and let us put this values also of handle change then value perfect and uh button would be sign up button okay so set open o is not defined let us Define the set open o and uh rest of the things are defined right set open we have to pass from app.js set openo then in the authentication we have to okay so in the authentication we have to pass in sign in also set open not and sign up also set open not so now this is done now let us create a new account test gmail.com that will be email address and test user and password we have created our account shopping cart has been 500 okay okay let us do one thing uh let us see in the network tab what theor is actually so basically in the shopping cart it is showing can't read property of null okay so let us see why the eror is coming here at actually so okay there would be a question mark basically let us see if the error is being now resolved but still not resolved okay uh let us uh check the thing so in card it is working fine so let us add a product to card okay some error is occurring but uh let us do a login and see okay yeah now once you have logged in it is coming perfectly fine so let us do one thing let us uh okay so in sign up the things are perfect working perfectly fine and in the favorite part let us add the favorite uh functionality now so in the favorite we will be having the loading and the products and then the reload function and then the get product function and this get product we will having the same thing calling the get favorite uh API and then we will set the get products and we have a mty dependency are the same thing the same stuff that we are doing right and after that we will be having a loader and the circular progress bar and I will Implement that so currently no products found but if you add something and let us see let us add something okay so in the product card add to favorite some error is there again yeah now it is perfect so if we reload so it is empty only okay so let us do a login again to my different account yeah so now you can see the favorites are coming right if you come to my account uh there might be some glitch in creating a new account so for that reason so if you can see that favorites are also coming perfectly fine uh and the loading is also working fine right so the circular progress bar let us make this one at the top so yeah now it is perfect so if you see some of the products the product listing page is not done right so we will be going with the product shopping listing page basically so in the shop listing page the first thing that we will be having here is uh so the first thing that we will be having here is the get filter products data so set loading is true then API calling and then I have selected a filter and then I will check I have set the set products and set loading false and then I have called a use effect and then I have passed that one and then we will be wrapping the whole thing again with the product card with the key as a product ID and the stuff should be same and the same loading thing would be there the circular progress bar would be there if it is in the loading state right so rest of the things are pretty much similar what we have done so you can see now that if you add any filters the things are coming perfectly fine with the size and all the stuffs right so all the things are now working perfectly fine and the cart is also there so you can add multiple items and you can delete them and you can place any orders also right so if you log out and if you just log in so you can see that your cart is now empty you can add to cart and uh let us create a new user test gmail.com and let's just test with that and password would be a password and uh I have signed up then in the shopping cart it is empty then I will click on add to card and yeah you can see the items are being added but from card it is not working so there might be some error in add to card in the card let us see where the error is coming I will copy this function from product details and paste it here and change the Set Card loading and rest of the things would be same and now let's just reload and see now you can see the things are perfect right the there might be some errors but now it is perfect right so I will give a new email address to check that all the things are perfect or not uh let us do a sign up and then I will go to sign in test 3@gmail.com then a password then I will do sign in done then I will add to card it is now adding we can remove that and now we can place our order we will be filling the details and if you click on uh Place uh order so there might be some error the card is not sa is not defined okay so there might be some issue issue in the back end I guess so let us see that in the server user card uh placing order controller okay so let us just do a initial commit and let's just publish this to get up because the rest of the things are perfectly working fine so let's just see like uh if it we can hold this one right and let's just test there the whole stuff so I have created a new Branch uh a new uh repository and I have post that one and uh now I will open netlify to deplo this one and I will open uh I will open up the GitHub where I have pushed this one so in the repository you can see e-commerce and then there is a folders so in the settings you can see so you can login in your netlify account and you can U open your dashboard of the render for deploying the server so I will connect my GitHub account so I will give my password and then I will connect it simply and after that I will open the e-commerce application and and then I will uh connect that one and then I will set the root directory as server and then I will set the free plan then I will add a secret of EnV place your EnV file contains here and the rest of the things are good to go click on create server and on netlify deploy with GitHub and now open the e-commerce and the site name would be e-commerce gfg okay now it is uh present then base directory would be client build command you can give npm run build build command is npm run build and then key you give CLI as false and then click on create so okay so something is missing in this one okay some error is there I guess okay so in GitHub I haven't pushed the server only so first thing let us do is uh open your e-commerce rout directory and after that from client remove the G ignore and get and take back to the root folder paste it here right and then uh remove the dependencies of node modules in the G IGN node play that one what I am doing client SL node modules server SL node modules server /. EnV and like that right and then initialize that one this repository and create a new uh and then create a new uh reposited in your GitHub and delete this one the previous one that we have right because this is not of any use so delete this one and also in netlify there would be a problem I guess so once it is done uh create a new web server again and in the same process try to connect the GitHub repository e-commerce website and then delete the previous one and then create a new one then click on connect then uh add your start command npm start then add build command npm install your root directory would be server free Advance EnV file P your EnV and after that create the web service once it is done in the nlii also create a new one so you can search [Music] your repository and then give a new site name e-commerce website gfg then build settings client build command npm run build npm run build then CIS false perfect and then click on deploy website so you can see that in render it is been deploying and meanwhile netlify also uh okay so in render you can see that there is some q but it will be like fixed no issues in that let us redeploy and Meanwhile your netlify account your netlify website will be hosting soon so let us check this one so yeah your nety is now being hosted so simply click but page not found is coming so let us do some changes there might be some error so see the build commands Okay so our build uh directory build directory publish directory is not given it will be slash build now if you reload uh rly the whole thing once again I will check my other configuration the things are same the server is live and uh let's see if the netlify gets hosted I hope it will be hosted right so if you have liked the video till now just give it a thumbs up and uh all the uh things uh you will be getting that in my GitHub depository you can get the code from the right and you can uh pull uh issues and stuffs I will be like fixing that thing and I will push that right so yeah all the things are working perfectly fine as you can see in our hosted website itself right so you can do sign in and you can like add to your cart and all the stuffs right so yeah that's it for today's video I hope you have liked it don't forget to subscribe the channel bye-bye have a great day