Build a COMPLETE Fullstack ecommerce Responsive MERN App | React, Redux, Nodejs, MongoDB, Express

today we are going to build the e-commerce website completely scratch using the television CSS and mongodb node.js express and react for the UI and here you can see we have added there are some type attacks and here we have added by some delivery partner like delivery and here you can see this card after that here I will added the slide also and here you can filter a product by your own which you want to this and this will be the responsive also like that you can see let me just show here you can see when I was go on the mobile version it will look like this like this you can see it will be here and you have ability to slide this images and here you can also the here you can filter also like that and here in the card section if you have ability to add item to your card here see this number is increases and here you can see you want to increase the any product you can increase the quantities and you want to delete any product here you can delete this yeah this one and here I was also added the login you click on the login see here display the login if you have already registered you can log in with your email ID and password if you not just click on the sign up here I was also added the upload your profile image click here and here you can give the name after that your last name and here you you ability to enter your email ID like here I will enter the one two three and at the red gmail.com after that here I will give the password one two three four five six seven eight nine one two three four five six seven eight nine and click on the sign up this email address already registered also so here you can just change this here I will give the 4 and click on the sign up yeah now it will be redirect to the your login page and after that here enter the email ID one two three four gmail.com after that your password and click on the login and here login is successfully and which image you have uploaded on the sign up section here display also now let's start to build this let's go on our vs code editor and please like this video And subscribe the channel and let's start to build this and one more things I was forwarded to show you that when you click on the any of this product like here it will redirect here and here you can see this name of the product category price and here you can see this cake any of this product you can click it will redirect here and it will be so the some animation see when I was click it will be slow motion scroll on the top section like these types of a let's start this and like this video let's go on the vs code editor in vs coordinator go on the terminal section new terminal after that here type npx create react app and up give the name of the folder I use the front end and press enter now this react tab installation is started it should take some time approximately one minute or 30 seconds depend on the internet connectivity and your PC configuration it will be installed I will be back again foreign is completed after that here go on the folder front end and right right type npm start press enter now our react tab is started you can see here and our app is yeah now our app is also done now open this front-end folder and let me little bit down this and go on the SRC folder and app.js delete all these things and here I can give the just fragment tag and delete this part here right right react f for now and go on the app.js file CSS file just select this and press delete and let me show you again here you can see our all things will be gone now for styling purpose I use the Telvin CSS let me just install the Telvin first of all we go on the Telvin documentation here just type Telvin CSS and click on the start get a start and go on the framework guidelines for your referencing purpose go on the create react tab after that we have already learned this part this NPI create react app and project name and open this folder now I want to do this this one just copy this command I want to stop our react app for stopping purpose press the Ctrl C okay here I want to give and press c y this will be stop our react tab if you want to check stop or not just go on this browser and refresh this now here you can see our react app is not shown and this icon will be changing the phone Gray and now let me just paste this okay I was not copy just copy this and here I can use the paste here and second command yeah now this will be done when you uh this command will be run then here create a talvin.config.js file and in that file you want to change something like in the content section uh let me just go on the documentation here you can see you want to paste this much code just copy this here and paste inside this after that let's see what I want to do go on the index.css file and just paste these things copy this here and go on the index.css here and in the top section I will paste this now this much done now again I want to start our react app go on the command here just write npm start now in the this previous one I will close this and here let me just drag and now see our reactive is done let me just see CSS working or not go on the app.js file uh here I can just give the convert this in the form of a due tag here I give the background color class name BG red and it will be the 500 set will be 500 let me just see yeah see now uh Telvin is working here go on the SRC folder and create one folder inside this SRC component inside component folder create another file which will be the name will be the header dot JS and I here I just Type R afce rafc e and this is a vs code extension iOS uses go if you want to use go on the extension section and here just type es7 and it will be give the varies yeah I use it es7 react Redux and reactive spinning this extension iOS uses you want to use it you can install this and now uh I want to this header component I want to import this in app.js file here let me just import this header now let me just see in the browser yeah here you can see header will be displayed and now let's I want to make our first part and here go on the header here I want to give the let me just here and opt out CSS let me remove this background color first of all yeah no nothing will be displayed go here header.js first of all I want to make this will be the for the desktop version and tablet version here I just type desktop and after that mobile version here let me just give the comment and here use the header or I can directly give this due tag in the form of a header after that here I can give due class name I will add later and inside this first of all uh in the left panel I give the logo let me just give this do class name and here I will add a letter inside this IMG SRC and inside SRC Center SRC we give the path of the our logo and yeah and let me just import our logo uh first of all I want to add the one file or all the images let me just go on the my desktop here you can see in the assist and all this folder will be available and Logo also this logo I was using and let me just add this file in our vs code and let me just collapse this here let me just drag this in the SRC now here you can see in the SRC folder one folder is assist and inside the multiple images will be available for your referencing purpose for now at the last moment we will delete much more images for your referencing I was added this all the data is fetched from the mongodb don't worry now here in the SS folder let me just find a logo yeah here this logo let me just import this logo in header import logo from let me just go on the SC folder inside this logo dot PNG and let me just give this path here and now see here you can see our logo will do display and now I want to give our header and let me just give the first of all our header will be fixed fix and after that I want to give the shadow AMD Shadow little bit more and it's width will be full yeah now see it taking full width and its height will be approximately 60 uh one six let me just see how much yeah it will be perfect and let's make our logo a little bit small and for now here I want to go here I give the class name width will be full and yeah and after that it's parent I will give the its width will be approximately or I give the this height for not width now it will be full and its width will be uh Max height will be approximately I give the H dot full or I can give the H will be approximately 1 4. and yeah it will be little bit more 12 pixel yeah now it will be fine and in the left side and right side both side I want to give the little bit padding for that here in this I give the Ori I can give the in the header section here will be PX from the padding from the left and right it will be approximately uh IQ for the mobile version 2 and in the desktop version I give the p x will be 4 see here little bit space and now I want to make this a logo in the center for that here I can give the uh here let me just give the flex item Center and height will be full yeah now see our logo will look Center this left panel is done and I want to add one more things when I was click on this logo it will be go on this URL for that I want to set a react router and also changing the page for that let me just do this also go on the here terminal section in here I want to open new terminal first of all I want to go on the front end folder after that here npm I or you can write an install react router Dom and press enter now this installation is done let me just go on the in index.js file here and here I want to import port create browser router after that create routes from elements after that routes and router provider this four things want to import from the react router Dom after that here I want to create one variable const router and here create browser router after that inside this create routes from element and inside this I create a routes and it will be the path will be for now home page and root folder will be the f app component now this will be done and let me just close this inside this I will give the another route first of all I want to set this for that let me remove this sticky mode all this and here I can give the router provider and pass a props router and inside this router props I want to give this variable name router if you want to give the another name you can give by your own but here I give the four most uses that's why and this path will be set and in the our react app nothing will be reflected no change will be reflected now go on the header section here I use the let me just cut this again and here I use the link and here give the two it will be the our home page inside this I paste this one and why this will be giving the error okay I want to import this for that icon in the vs code editor yeah now see it will be imported a link from the react router Dom and let me just see again okay now see now let me just go uh create our Left Right panel for in the right manner I want to display the profile and add to cart for this let me just go on the browser in here react icons after that here go on the just copy this section go here here I want to paste this now this will return and let me just search user and which icon is perfect let me just see I think this one or any other yeah this one is perfect let me just copy and after this link tag I want to go here here I will give the due class name after edit inside this first of all we give the now bar navigation bar and here I will create a another due tag and inside this first will be the icon profile icon let me just paste this and I this icon I want to import also let me just copy this and here come import user Alt from react icons and give the Slash and this icon first two letter represent the which Library you want to import this icons uh this EFA let me just give the fa and this error will be gone and let me just go on the browser and here see this user icon is display and I want to add one more which will be the display that you card I think this one perfect let me just go here and I can just copy this one or here do class name I will add later yeah now I want to import this you can if you are using the vs code editor you can do just here click and delete one of the letter after that press and or you can do the Ctrl shift then also the suggestion will be done and click here okay here click okay this will be not uh I think for Now not working then I can import from here let me just copy this again from react icons slash BS now let me see yeah these two icon add to card and use it this both are displayed and now I want to give the this whole thing in the left Center for that here are you the justify content will be space between now see our logo will be here and icon will be here and this logo is little bit big let me just little bit give the small height will be 10. yeah now see our logo is perfect for now and this part let me just add the link and this here I use the link and this 2 will be the first one will be the direct home page and and second one will be the menu and here I can give the menu and third one will be the about here I can give the about and last one will be the contact here I give the contact here you can see all this menu will display and I want to all this menu and this icon in the single Row for here I can give the flags item Center yeah now see it's in between that I want to give the like this navigation and this icon between the gap for here I use the Gap it will be two let me just see I think I want to give that three four yeah it will be fine for now and in the this way by default for the mobile version let me just see mobile everything it will be okay Gap will be perfect in the mobile version now I will give the desktop version for that EMD it will be approximately I think I give the Gap will be seven yeah now this icon is small let me just make the big I want to click here press alt click here and here first of all I want to increase this stacks size 2XL uh yeah this will be done and this part I want to change the color Okay BG select and this color will be 600 okay I was given the BG I want to give the text yeah now it will be perfect as I am like and in I also I want to give the in between this menu uh for that this navigation I will give you the first of all Flags and after that I give the Gap will be approximately four and in the mobile version it Gap will be the proxles 7 plus 7. and this stat size is also I will increase for the desktop mobile version it will be based but in the desktop version text size will be little bit more I give the about this CLG yeah now see our this menu will be done and I was not created all these Pages that's why this error is coming and let me just create these pages first of all this home page for that I will go on the here create a one folder in the SRC page and inside the these pages create one file first of all home dot JS and rafce and second one will be the menu dot Js and third one will be the about dot JS and fourth one will be the contact dot JS and rafce in the all the pages and yeah here are afce okay and here rafc e this part will be done and I want to also make this all route for that index.js here first of all I want to give the routes index element first of all with the home page yeah and close this and second one will be the I will this path will be menu an element here I import the menu component let me just give yeah now I have to close this after that I want to give the next one which he will be about element and it will be the component about and again here Chris last one will be the last route path here I give the contact element and it will be the contact close this one why this error is coming okay here I was not given let me just go okay here you can see in the top side all things will be changing but our data will be not be displayed uh let me just give the in the app.js file and here below I will create another tag Main and inside this I use the outlet which is from the react router Dom here you can see now let me just see here you can see when I click all this menu here you can see this display the menu all this will be displayed here our page will be here because I was given the this header will be static and for now here in the main section I will add padding from the top side it will be approximately 16 pixels now see and one things more in the header component there is uh header component here I will give the J index will be approximately 50. now see when I click home it will display home page and here you can see this route is also changing and about us context all these pages are changing now let's go on first of all here in the car section display the number of the item will be added for that here I will go in the card here I will create due class name and here absolute and let me just see how here uh it's parent tag uh I will give the position relative and inside this absolute tag I will give the top will be 0 right will be zero now let me see again here you can see our zero value display here let me first of all change this text color will be white okay it will be display here and its background color will be I will give the red 500 and it's height will be approximately 16 pixel or let me give the H4 yeah this will be perfect and text size will be very small access a little bit more I give the SM yeah and in between that give the padding will be one and padding one will be not be perfect yeah now I I want to view the base let me just see yeah base will be perfect and text will be centered uh Center and I also give the width let me just add this width will be H4 W4 sorry and now it will be our text will be not be in the center let me give the rounded full and what is happening M will be zero M will be 0 and our is outside this let me know why it is happening padding is also zero and now I will give the text size really SM yeah now see it will display inside this and I will do this will be a little bit above and from the top and right one for that I want to go where is this top I will give the uh 3 minus the minus top three and no no I will give two yeah two will perfect and little be right I want to give the minus right also right minus right one and two will be more yeah now I think one will perfect and little bit down yeah now it will be perfect look like this and let's go on the make our login page when I just click on this icon and this icon is not looking good I want to give the little bit border for that here uh this class name here so let me just make a one parent tag it's due last name and inside this I will add this icon yeah and this first of all I will get the Border let me see how it will be looking border will be two border solid border color will be I will use the slit nine hundred seven hundred yes see it will be more I think I want to give 600 yeah and in between that I want to get the padding will be one yeah and this border will be rounded full and I will give padding little bit more too no one will be perfect our tax size will be little bit small and now I want to increase padding one will be perfect yeah now our this icon is I think not look good let me just change user I think this will be perfect for me just click here and just copy and here I want to paste this here and now I want to import this icon here I can paste and here I will give the h i now I want to remove this border this border and this border this border this border now let me see again yeah this icon is small I will give the 2XL cut this here here I will paste this 3XL yeah now it will be perfectly our icon will be displayed here and yeah now when I was go on the this icon oh let me just see anything is missing I was no nothing when I was go on this icon our mouse cursor will be changing for that here uh this icon I will give the cursor will be pointer now our mouse cursor will be changed and when I use hover then here display the uh this add one product and login one and for that here I will come here give the due class name I will add a letter inside this I want to display two section first one will be the new product and second one will be the log out lock sorry I will use P tag lock in log out like this types of a yeah login yeah it will be no display whenever click here then it will be display and for that I want to give this position will be absolute yeah now uh one things I want to add in this both class name white space non-wrap and here I will add write will be zero and here and right will be 2 to 0 yeah after that I want to make one card this background color let me just give the BG White yeah and it will be py will be 2 3 2 where is to yeah and p x will be two yeah and give the shadow and also drop shadow MD and this will be perfect and when I just click here then this will be display and when our mouse cursor is from here and here uh our cursor will be changed for that cursor pointer see it will be Now display and I want to when I was click on this profile section then this will be display uh for that here in the header I will make a one use State and so so menu set so menu use state after that this will be the Boolean by default I don't want to display for that just copy this and where is here I will come and make a curly bracket inside I want to paste this and use the this end operator just cut this here and here paste this uh let me just see one more and let's format also this press the shift alt EF follow the formatting purpose I use a prettier for the extension for formatting purpose you can use it on the extension session here just type prettier why this will be taking some time yeah here this print here you can install this extension and you can directly press shift altf automatically it will be formatting so see it will be not display but I when I was click on this icon then it will be I want to display for that just go on this here I will make on function so handle handles so menu and it will be the after that I use the set so State menu and give the previous value will be inverse of this now here see if this will be the uh false then this function will call it will be done in this value into the true and the if this will be the true this uses uh it means this use instead will be true then it will be turn this function into false like that I want to copy this function name and go where is icon here when I just click this icon on click then it will be gone see when I just click it will display and again click it will be gone like that one more section when I was click on the any of this menu also I want to not to display this menu for that I can add this copy this here or I can add here and let me remove first this here refresh this page click here and when I just click this login see it will be automatically gone and our page will be changing like that this type of will be working properly and now this will be done let's make our login page and here I want to go and where is Pages section go little bit top okay this too much file is opening let me just close all this file uh yeah and this will be the bottom section and various Pages here I want to create one page for the login dot Js rafc e and I want to add this in the route where is Route index.js here I will give this route will be the login and here I want to import this component why this will be I think I was missed something yeah I was given the small letter if that's why let me just change this capital here I will give the login and now I want to go index.js here I will import this login and close this yeah and go on the header component and this I was I did this here I want to convert this in the form of a Now link and just select this and press I can use the link to will be the login and here I want to also close this link this one also and now let me just see this click here okay what this it will go on the contact y and when I just click link let me go back refresh this page and when I just click this login it will be you go on the above okay the path will be not be changing for that okay new product uh I will edit this in in the login section undergo on the desk.js here I was added the login yeah then why it will not be working when I just click then it will be why these are happening okay this one handle so menu link okay here I was not added the two I will add this new product copy this and make this route also go here let's copy this and this now product page also I will go on the projects page folder and inside this I create a new will be like a new product new product dot Js after that yeah index.js I will import this new product component new product component and now let me just see when I just click this okay it will be new product okay okay this new product and login will be in the single line I want to make in the two for that here I will give in not given Flex Flex call yeah now see when I click login it will display the login page and again new product yeah see our here page also changing and here out also saying now first of all I want to make a sign up page after the login page let me just go here create a sign in oh sorry sign up dot KS rafc e and I want to go where where index dot JS file here I want to set the route sign up and here I want to give the component name sign up now I will change here because I uh anywhere I was not given the sign in link let me just see here sign up now see here display the pages now in the first of all we Design This go on the sign up Pages here let me just do create a one do tag given the class name and it will be inside this it's a this background color I want to give this some color let me just go on the index.varies app.js this Outlet I will give the its background color will be BG select it will be the 100 by default I want to give the okay here you can see it will be also taking this background color let me just change this for that I will go on the header component and here I will give this background color blue BG White okay we just see yeah now see our background color will be black and here you can see uh this I was even the background color but it will be not taking the full width of the screen uh for that I want to do uh go on the where where I want to go where in the menu section and sorry app.js section and here I will give the minimum width will be approximately I want to give the calc and here I give you the 100 VH and yeah minimum width will be 100 VH okay it will be not be taking and why it will be not taking I want to give the height not a VH yeah now see our body will be taking full uh width but it's minimum minimum taking for now let's go on here let's go on the making the our sign up page let me just queue sign up yeah here and go on the sign up comp Pages this one here I will give the its Max width first of all I want to give the width will be full and its Max width will be I want to give you approximately EMD yeah this one and this background color I want to give the white and here I will get the margin will be Auto now let me just see where okay here I will add the sign up heading will be H1 and give the sign up now let me just see where it will display here and I want to little bit small uh for that I want to change this in the form of ASM yeah it will be perfect and I want to give a little bit space from the top uh this is here for that I can give the padding will be by default two in the mobile version and in the desktop version I think three will be perfect and in the desktop version it will be the approximately four EMD m a padding for yeah now it will be perfect and let me just make this sign up in the center here I will give this text will align will be Center class name text align will be Center you see and text size text will be to excel yeah sign up and this font will be bold or we can do instead of using this sign up tax name we can do one things here let me just comment this for now I will add here one images do tag and here inside IMG SRC and here yeah like that and let me just import the one images from the SS folder which will be the uh where we let me just see login animation here uh where is login animation here and this uh gfgifa I want to add here let me just import this import sign up or we can get sign login sign up image from I want to go assist folder inside this let me yes which name there is login login here and I want to copy the this file name copy this here and go on the sign up page and here I want to paste this and add gif and just copy this path here I want to paste this and why this error is coming okay I was here given the slash I want to be the DOT now let me just see here you see this gfg is display but it will be too much big I will give this Max class W will be with okay and W full width and its parent I want to give approximately 16 pixel let me just see IR 16 pixel is perfect little bit more 20. and the all this content will be in the center for that it's parent I will give the Flex justify content Center and flex Direction column then I want to change here items centers yeah now our it will be Center and here I want to add by default uh it will be padding will be four let me just see and now I want to make this will be then the rounded Circle uh first of all I want to give the overflow will be hidden and rounded full yeah and yeah yeah this rounded full and give the shadow drop shadow MD yeah this will be drop shadow if I give the shadow it will be taking little bit more yeah it will perfect and let me just create another field like I want to create a form inside this I give the label in this HTML first of all first name name and input tag input type is equal to text after that I will give the ID will be first name and also I want to add the name this name for the huge State when I was make don't worry and here uh any things I will give the class name and it's filled with full width and it's basic background color will be slide T6 500 let me just see okay I want to first of all close this let me just see it will be more I will give the 200 yeah 200g is perfect and inside this I will give you the padding it will be one one not two one will be perfect in the uh x axis it will be 2 in the y-axis I will give the two sorry in the y axis I will give the one in the x axis it will be 1. now yeah and I was given um much more padding let me reduce this here I want to give them only two and it will be not taking full width let me let me just give you the full yeah and now here I want to give the four yeah it will be perfect and this input box little bit rounded now I want to give the rounded and this label and this input box little bit Gap and for that in this label I will add the class margin from the bottom side it will be one okay it will not be taking I want to add in the input tag here I will add the input margin from the top side sorry margin from the top side it will be one yeah now see little bit Gap is coming and this first name and this icon little bit Gap in between them also uh for that in the form tag I will give the py padding from the y-axis it will be 2. all little bit three yeah now it will be perfect and now I will go next section next field which will be the our go here label HTML for last name here I will give the last name all things are same let me just copy this input one copy this here and here I want to paste I want to change like ID here and this name and everything is by default all things are same and here you can see it will display but in the this input bottom side in between them little bit space for that I will add one more margin from the bottom side it will be two see and now I want to view this when will be here yeah and now again I want to add email label html4 email give the email after that input type is equal to email and I will give the ID will be email name will be email and class name will be exactly same just copy this here and paste here and close this input now see email field will be display here now again confirm password and confirm password this both things first of all we create a label and html4 and this will be the password here I want to give the password and below this input type equal to password and ID will be password and after that give the name will be password and I want to add this same class name just copy this here here I want to paste this in between little bit space just close this one and now let me just see here see this password is coming one more things I want to add in that here I was type and see our password is not I am able to see if user want to see the this password for that here I want to add one button when I was user will click then this password will will be so for that uh I want to add here Hide And so icons for that here react icon let me just search uh first of all I want to so just copy this one this icon and I will create a year uh where we are in the below section splend tag and inside this I will paste this and make sure that you want to also import this icon let me just go on the top section here I will give the import biso from react icons slash bi now here you can see this I icon will display and for the ID purpose here this icon just copy this and after that I will add this icon also I want to import this icon this is the same library then I can paste here and let me just see here see this icon but I want to like not here inside this input for that I will make here another due tag yeah this new tag and wrap this all this com content inside this and here this span is not I want to make a span tag yeah span tag and let me just see now I will do this new tech class name Flex yeah this will be coming in a single and here I will uh what I want to do here this PX and py just cut here and paste inside this due tag where is here and yeah it will be coming now and after that I will do um what this background color it is also cut copy this here and paste inside this here it will be like that and this rounded also just cut here and paste inside this and this margin from the top and bottom side cut here paste inside this okay width will be perfect and this will be perfect and now this border will be displayed I want to give the none in the input border none outline none when I was click see it will be okay but here all this display the this outline but here it will not be display outline then it will be not looking good uh we can change everywhere I think I want to change this outline for that let me just go on the first this first name and here I will do this here give the Focus what will be the focus within its outline or I can give the outline will be outline color outline color will be outside color will be red and we five let me just see see when I just click this first name it will outline color will be changed but I think this reality will be not I want to give you the blue yeah see when I was click here it will color change but if I do this fourth three yeah now it will be perfect like that and I can do one things just copy this class name and paste here and this one also and in the forget password in this due tag let's face it okay it will be here here here here but here is not displaying see Focus within outline color Okay outline is not display I want to change this in the form of a border okay it will be not be display give the outline and by default I was not given the outline let me just give the outline yeah now see it will be displaying but this outline is too much [Music] big I want to give it a little bit small yeah it will be perfectly see and this outline is too much don't don't worry it will be gone first of all I want to make our this so and hide icon and I will give this so high and height icon will be here giving the class name it will be changing to flex and giving the text size will be Excel yeah Excel will be perfect and why this will be I want to display only one for that here I will make a one another huge state const so password PWD or I can directly write so password set so password after that here I will give the huge state it will be the uh by default I want to not to be display and here I will make the one function const handle so password and it will be the arrow function here I will give inside this I will change this set so password previous value will be reverse of this return and just copy this handle so password and I will paste this C in this span tag here on click paste inside this and here I will use this so password I want to go here here I want make a curly bracket and here also after that here just give the ternary operator in between there I will use the this dot now let me just so see when I was click it will be like that but here our password will be not be changing not be so for that this show password I want to go where in this input type type is equal to here I will paste this and use the ternary operator here I will give the text when this will be so password will be false then it will be in the form of a password type will be will be equal to the password when this password so password will be the true then it will be converted in the form of a text like that let me just show you again here see when I see when I click it will be so and this I icon when I mouse cursor also changing for this span tag here I will add the cursor will be pointer and see when I just click it will be changing like that and yeah it will be done this part and also confirm password like that and for that I want to copy from here to here and paste here here I will change the let me just copy select this and here or I can do here before that confirm password just copy this here and where is ID input type is equal to ID here I will change this and this name also and also I would make another this same like this huge State just drag and drop here I will give the just select this and confirm password and like that it will be done because because I was make here you can see here I was type and click here one time it will be uh reflected in the both section both this input act that's why I will I always make this and here I want to create another function handle confirm handle so confirm password and use the arrow function let's copy this here here I want to paste this preview previous value copy this function and go in the below section in this confirm here I want to also change this confirm and the very very this function and now I will just copy this part here and one more things this is Pentax and yeah okay this outline is also display but this outline display when I was click in this for that where I was edit the class outline will be directly but I want to when I was Focus then focus with thin yeah like that let me just see yeah it will be gone just copy this here here I will paste this okay it will not be gone why I space some wrong way yeah I was not deleted this one and when I just click ok now this part will be done and below this I want to make Command button submit button and this form tag here I will give the button and this will be the sign up and this sign up but um let me just create this sign up giving the class name uh this Max width will be approximately 100 120 pixel and width will be full let me just see and first of all I want to give the background color it's red 500 yeah 500 yeah 500 is perfect or six five days perfect and when I guess hover in this button then it color will be also changed 600 said see when I elaborate color will you change and now mouse cursor will be also changed cursor will be in the form of a pointer yeah and this will be in the center okay here I will see in the max why this will be not taking width will be here and it will be why this not taking the width will be 150 pixel and I want to make this in the center for that I will give the margin em will be Auto why it will be not coming in the center okay here I was given the virtually full padding will be this and I want to add one more Flags and flex column Flex column yeah now it will be coming in the center and now I will give this button text I uh text color will be white and text size will be Excel and this font will be font will be medium you see and text will be Center and the padding from the y axis will be one and rounded and rounded I think full yeah rounded full and from the top side this in between them little bit space for that margin from the top side it will be approximately for mt4 yeah it will be done and below this I want to add one more if user has already registered then it will be go on the login page and I will add this here at this form tag I will get this here uh already have account and I will use this here link tag link and this will be like that and I will give this go on the login here I will give the page will be the login yeah here it will display in this this part but I want to display in the left panel for that I will give this text will be giving the class name text will be left side white will be coming in the center let me just see I was given the flags now okay its parent I was given the gestive items will be Center and it will be for that I will give this remove the item Center it will be coming here and this icon will be in the left final then I can do this Center for here I will get the flex item will be Center okay I will add margin Auto yeah now it will be done and this stack size is too much let me just reduce the size I will give this text will be SM SM yeah and it will be the same and this login I want to change the color I think it will be not be looking good yeah this base one yes and in the top side little bit space margin from the top or I can do margin from the top you will be three yeah like that and three is one more we can do two and this login text I want to change this color for that here I will come at the class name and this will be the text color will be the red 600 or I will give the 500 yeah and underline also underline see it will be our sign up page will be done this front-end part and here when user will be typed then also this value will be stored somewhere for getting this value for that just go here where where here here I will make a uh not here here const and it will be give giving the data and set data after that here I will give this uh use state and inside this I will create a object this will be the first name and after that I will give the last name and email and what is next password and the last one with the confirm password yeah our all this field is done and let me just add all this value uh uh here let me just go here first of all in this input I will add a uh this one I will add a value will be data DOT first name or we can just follow first of all format this for the formatting person press the shift alt AF and it will be automatically formatted and okay here I will add the this first name data DOT first name name is already added here first name this and this first name is similar and one more things on change method I will add on on change this method will be handle on change let me just create this method also because every time it error error will be coming that's why here I will give the const paste this year and here okay yeah now it will be done and let me add uh other input also for that this last name I will go here first of all add the value will be data dot last name these are happening last name and on change method it will be handle on change make sure that your value name and this value property name this data property last name which will be similar because when I was calling this handle on change this name and this value will be this name will be key name and this value will be this data that's why this name will be similar to this prop uh property last name and now let me just go on the next part this will be the email here I will create a value data dot email why are these are happening email on change and handle on change method let me just go on the next part this will password here I will give the value data dot password what happening password and on now here uh on change try that I killed a handle on change and then last one will be here where where this confirm password input one first of all available data Dot confirm password confirm password and this prop key name and this name will be similar that's why I will paste this here and here on change and data dot sorry here I want to give the handle handle on change and let me just see this here this one and this one is similar here this one will be similar yeah now let me just see over here all this data is inserted or not before that I want to console this data here I will console Dot Lock data now let's go on the browser and open the inspect here I will why this area coming first of all I will refresh this okay button tag and recognize browser okay let me just see remove this error uh here but um it will be type equal to submit let me remove this and recognize if you render this Pro here start it name uh per case okay here I was not right button properly that's why let me just give Double T yeah and no need of this type you can by default when you write button inside the form tag automatically here I did the type equal to equal to submit let me remove this and refresh this page yeah and here I just type first name will be the Amit okay I am not able to type this let me just see why this will okay here I was make the handle on chain but in this function is this handle on change I was not given the value let me just give this here e and const I will extract this name and value from E dot Target and I will insert it in the all this field inside this set data just copy this here and here I will paste this here I will give the please and return in the form of a object first of all I want to store the previous value also for that here I use the spread operator and after that I will give the name key name will be name and value yeah now it will be done let me just see refresh this page and here I will type Amit see this here I was type the name and inside this uh data first name will be equal to the Amit and when I just type last name see this last name and email and one to gmail.com and also this password I will give the one two three four five six any things and here also one two three four five six seven eight like that and here I can see the password also now see our data will be done and when I just click on the sign up see our page will be refreshed but I don't want to like that let me make another function for that that here I created a function const handle submit and here I will pass the arrow function and this function will be on the form this form I will give the on submit and inside this page this and here handle Summit I will pass a parameter e and here is the prevent free print default yeah now let me see again when I was refresh this page see when I was typed something and click on this sign up button see our page okay this will be mandatory when I was clicks this sign up sign up button see our page will be in this time not reference because here I was given the prevent default it means that our page will be not be refreshed and yeah this will be done and I want to check [Music] all this data I want to check if this password this password and confirm password will be uh similar or not and this field is mandatory also for that here I will create a if Loop and here uh before that I want to extract const here I will give the first name first name is mandatory last name is not and after that email is definitely mandatory after that I will give the password and confirm password and after that I will give this data let's try to take from this data and I will just copy this here here I will paste this and in between this comma I will insert it okay where is gone here in the place of this comma I will insert it and operator here I will give the curly bracket [Music] inside this curly bracket after that I will check uh here I was given the because this password and confirm password is not empty that's why I was given like that now I will check this password and Conference password is equal or not for that I will give the password will be equal to the confirm password like that then also I will all these data I want to send from the send to the server here I will give the alert uh successfully for now I will just write a success if in here this password and this confirm password will be required then here give the for now I was just giving the alert uh when I was make the backend then this data will be sent to the backend don't worry and if this password is not equal then here I will give the alert alert will be like I give the check okay password and confirm password not equal like that if this one like any first name email password confirm password any of this empty then here I will give you the in the use condition I will get the alert will be please enter please enter require field if it's now let me just see Let me refresh first this page and see uh all these are empty when I click on the sign up button see it will give the alert please enter require field and when I was just enter this and this this and this our confirm password and the password and confirm password is not equal then when I was click on this sign up okay this email I was click this now see password and confirm password is not equal like that you can see click here and here you can see these both are actually not equal when these both are equal like a one two three and here also one two three and when I just click on the sign up see successful like this types of a message will be generated uh find our sign up page front-end part is done now let's go on the login page and when I just click on the login okay it will be okay here I was not given the absolute routing let me just change this first where I was to go on the sign up very sign up here and I will change this sphere below this sign link to here I want to add a slash now let me check again first of all I want to refresh this and when I click this login see it will be go on the login page and I here when I click also go on the login page now let's Design This login page here login page and sign up page actually all these are similar only one things is missing uh one things I want to delete in the login page like it is first name last name and this confirm password I can do one things uh just copy the this sign up page this return statement all these just copy from return and go on the login page in the recent section I will just paste this and also I want to copy the all this function from here to here where where here just copy this in the login section here I will paste this and I want to import all this icon also for that I will copy from here all this here copy this and go on the login and paste here now let me just see here see I will let me just go on the login page see our login page is exactly similar but I will delete this which things I want to delete first of all this first name and this input label let me just delete this first name and this last name also email is remaining and one more things which one this password is remaining and this confirm password let me just delete this confirm password also yeah and this sign up okay this label also and I want to change this button name will be login and here I want to change the uh here already instant of I will give the don't have don't have account then it will be go on the sign up page yeah sign up page and here I will give the sign up and let me just see here here you can see our sign up login like look like this here I will enter okay here email here password Here sign up okay now this will be done and I want to make this login and I want to delete some field also first of all I want to delete this confirm syncs let me just delete this confirm use state and this can handle so confirm password also this handle on change is remaining and this will be here I will change this first name only email and password and here also I want to delete this here and this password your email here no need of this use statement we will delete this and yeah please enter require field okay now everything is done and let me just see when I was click successfully when this will be empty okay for now it will be done and this part will be completed and when I was click on the sign up button let me just enter some field like that and sign up okay this will be no then it will be click here and here please okay password is not equal here successfully then it will go on the login page for that here I will use the Navigator Hook from the reactor router let me just import first of all this the sign up page where where sign up page here I will here use import use Navigator or I can directly inside this huge Navigator and here I will make a const navigate use equal to use navigate like that and just copy this and this will be when it will be successfully then it will be go on the login page and let me just see again when I just click on the login sign up page when I was enter and gmail.com after that password one two three four one two three four and sign up successfully when I click see it will go on the our login page now this front-end part is done now let's go on the build our backend part and one more things I was forwarded to add this uh in the sign up page you uh user have ability to upload its image also for that let me also do this part also after that we go on the backend part and for the upload the image this sign up page here and this will be here I will go here here create another new tag let me just create this new class name I will add later inside this uh no problem I will just write P tag it will be the upload and here you can see upload will be display here but I want to in the about this for that here it's parent I will give the position will be relative it means relative after that here I will give the absolute yeah and yeah it will be go above and giving the bottom will be zero for now and after that I will give the height will be 1 by 2 and giving the background color BG slat 500 and its width will be full and yeah it's written text will be Center and yeah it will be coming and I think it will be one third it will be coming like that now this text is too much upload class I will give this text size will be uh SM yeah and here I will give the padding will be one yeah padding will be one after that I will give the text color will be White now when a user click on this it will be uh able to upload its profile image and for that I will make here wherever here I can do outside I can do this or here this image yeah or I can do here also here I will make a label it will be the label HTML HTML or profile image and here I will close this label and just cut this label here and paste below this inside this I will create a input type is equal to file and I will just wrap this and here I will give the ID same ID name which I was given to this label because when I was click on click on this upload then it will be reopen the file things that's why and where where and this file just copy copy this and paste here and I can do one things when I use click see it will open this file when I click see it will be open but it will be go on the above why and this class name I will add hidden okay now see when I was click it will be open and one things I want to make one more when I was our cursor will be from this image our cursor pointer will be changed for that here I will give the cursor pointer see okay okay here also not here cursor pointer this upload one cursor pointer see when I just go here click here it will open and user have ability to upload its image first of all like that here I will upload this random image see but here I am not able to see this image for that let me just create here one more function before this or before this handle submit here I will create a const handle upload profile image and let me just give this here I will pass a parameter uh files now let me just see console Dot Lock files this handle upload profile image this function I will call when I was click on this input for that here I will give the on change and paste this let me just see and I was console log this yeah open the inspect console and refresh this page when I was click this and upload this image see it will be giving me this all this but I will want to this file here where here I will give the instead of file I will give a and here I will give the E dot Target Dot file I want to file not a value file will be zero uh I think here I want to give the files and now let me just see one more go on here refresh this page when I just click upload this image see here I've given the file name and date of modification and type name of the file and size of the file and which format I think this I was uploaded there video format that's why this will be display you have want to change this then I can change this here where is input here I will give the here you can give the accept image slash only you want to accept the image not a video for that let me just go again and refresh this page when I was click this and here automatically here filter by images when I was click this see now it will be giving the type will image.png like that now I want to also display this image here in this box which image user have uploaded for that we want to convert this image into base64 let's here I will create let me first of all create close all this file uh this is too much and yeah here now this will be go bottom side and here let me just collapse this this component page only I want for now need a sign up page and here in this component section I will reset component and here I will create a here one folder in the SRC utility yeah inside this I will create one uh file image image to base 64. dot JS like this here I will give the first of all function to give the same image to base 64. and inside this I will accept the file and here I will perform a and first of all we create a one const ant data name variable image reader after that we can use the new file readers and after that we can convert reader dot read as a data URL and inside this we can pass our file after that here I will check this file will be converted in the form of a not converted or not for that we can use the promise here I will queue the data and new promise and promise take it to parameter resolve or reject and this will be the call by function here I use the reader dot onload will be done or not if done then it will be give the result resolve dot result sorry reader dot result this reader this reader will be converted this our image into the base64 non-not if converted then return it if not converted any error then we can use the reader dot on error and here I pass a parameter parameter error and we can give the reject dot error and now I will return this base64 images conversion and here I will give the const sorry here I will return this data and now I will export this function export image base64 and just copy this here go on the my pages sign up and top section let's import this function and here I will paste this yeah this function is imported now just copy this function and go on the upload hand upload profile image here I will this for pro this is a promise that's why I will use the asynchronous this function and here create another variable data and cost data and wait and just use this function inside this I will pass this file P dot Target dot file and now let me just delete this for now and let me just format this one and after that I will give const dot data here I will check which output is coming here just console log this now let me just see refresh this page and here I will click and here see I will select this images and click see uh this too much string format this data will be displayed now I uh you can just copy this and you can paste on the image SRC section automatically this will be display and for now I will do this where is data here this data I will set this in the uh here uh no image field is not available let me add this image yeah like that now I can set this set data where I want to go handle upload handle upload handle here set data and inside this I pass a parameter previous value and return this data with previous value here new keyword image property will be added and this image Pro property hold the this image just copy this here and here I will paste this and now uh I will do this here I will display this image which has uploaded for that here I will give the this images here I will give uh let me just give the data dot image if not available then it will be display the this by default this image login sign up image if available then it will be displayed this image here I will give this yeah like that now let me just see what's the output is coming for that here it may refresh this page now here I will when I was click here and select these images okay here you can see image is display and whenever select another image like this untouched design okay here you can see our image will be like this types of a not a proper Circle let me just see here I was even the only width note height let me also give the height will be full and here I want to add one more height will be full sorry height will be 20. and let me just see now see it will be displaying the form of a circle Let me refresh when I select my images my image see it will do display and this upload will be not looking a little bit transparent for that uh this busy slide I was given here I will add BG opacity it will be approximately I think 20 let me just see a little bit more C50 yeah now see it will be a little bit transparent and when I just refresh see when I just click here and select my images profile image see it will be display now image uploaded upload your image uploaded upload part is done now let's go on the backend side to make a our data and all this data will be stored on the mongodb for that here I will just collapse all this here and here this one now after that I will uh here uh first of all I want to create a new folder before that I want to close this time here and here create a new folder outside this front end here root folder here I will give the of folder name we will backend and yeah now here I will add open new terminal first of all I want to go on the backhand side and here I will give the npm init and this here ask me package name uh by default this package name will be back in as like this one only I want to place enter enter yeah now see in the backend folder packet.json file it created now here packet.json is a has a file name in index.js our main file file and here let me just create this index .js yeah and in this back end uh we want to install the our making the like a server for the express mongodb and course let me just install this npm I and here I give the first of all Express and course and for the connecting to the mongodb we use the Mongoose or you can use any things you want to which here I use the Mongoose let me just press enter now this installation is started it takes some time uh yeah it will be done then I will back let's wait some time yeah now this uh install all this installed here in in the packet.json you can go and here you can in the dependency section you can see uh course Express and mongoose and I want to one more things for the continuous uh this file uh I will change then again I want to run this like node index.js like this type so for that if any changes will be done in the node.js for for that automatically it will be reflected for that I use the node mon here I want to also install this if you have not installed in your browser then you can directly install this npm I node Mon and press enter and in the packet.json in the dependency here you can see this known one and in the script tag I will done like I will give the Dev and here I will give index.js and here I will give the comma after that if this will be go on the production then it will be give the start and here node index dot JS and here I will give you the comma and for the running this backend here I will only write npm run Dev see automatically our server will be done and here if any changes will be like here I will give the console Dot Lock and our backend directly here automatically reflected like that now let me first of all here I will um const Express after that I will give the require Express in the string form after that I went to const course required I give the course after that I want to also mongodb Mongoose incense let me give the required and inside this I give the Mongoose yeah all things are done and let me just make a API and for now I will give app Dot let me just create a const an app it will be the express call this Express and after that app dot huge first of all I want to give the course because when I was using a some different Daw URL from other that's why this error is coming that's why I was uses after that app dot get our route will be displayed here here slash and here pass a call by function and in this call Voice function take it to necessary to request and response after that like that and here I will send the response will be uh server is running and this is API which get API with by default localhost and now I want to make a port before that here I will queue the uh const and port equal to process dot EnV dot port and here I will give this logic 8080 because I was uses if you deploy this our your server then sometime what happened in your where you are deploying this port number will be different that's why give this some error your server is not running that's why I was given this process Dot env.port because in the EnV folder there is already present port number then it will be capture and here I will give the app Dot listen where my server is running uh here first argument is a port number here I give the port and second will be the callway function I pass just this console Dot Lock and here this server server is running I add port I give the port and it will be the here plus string and Port variable this port variable now let me just go on the browser open new tab here I just write localhost 8080 now see our This Server is running now our API section this get API section is dead now let's make another API and it will be the app dot post and this will be the user dot I will give this slash user DOT sign in or I can directly with the sign sign up not assignee first of all we make a sign up after that we can make a sign in now here callback function and here I will give the two parameter first one is your request and another will be will be the response and let me just see from the front end which data is coming request dot body and for this this URL is a let me just go on the front hand side and SRC folder Pages this is a sign up for that I want to go on the sign up page and where I was sending here this one and this handle submit function inside this this handle submit I want to convert in this will be asynchronous and here I use is this foreign data equal to the weight after that here I will give the Fetch and inside this I will give the URL of the server uh Force here when I was deployed then sometime much more time our server URL will be changed for that backends server URL will be changed for that I will do one things in the this front-end folder in the root I will create one file dot dot e and V and after that here I will give the react this is a convention in the react you you use the EnV file with prefix any string you want to use is react underscore app equal to I give the server underscore domain and here I will give this server domain name is for now it will be the localhost which will be this copy this here here I will paste this now let me just see this server server donor domain name I will get from the SRC pages here let me just console log this first of all check outside this function here console console Dot Lock and here process dot EnV Dot sir what is this let me just copy this from the EnV folder file just copy this and go on the sign up here I will paste this and let's go on the browser section here open the inspect and when I was go on the sign up see here giving the undefined not giving the URL uh okay I think I want to run this our react app again and press the Ctrl C in this terminal and press yes automatically a react tab is installed now again start this npm start now here you can see in the browser a new react page will be open new tab will be open will you take some time why it will be taking yeah now it will be done and go under this profile login sign up open this inspect and go on the console here you can see this HTTP localhost 8000 here will be display and this what is this slash is coming I'm going to remove this slash I don't want to do this or for now it's okay because our I can remove this because when I was to refresh this it will be no again I want to restart the server react tab power stop this and again I want to npm start now again I want to go on the here login sign up page and here let me just see here see now HTTP localhost 880 now this will be done and let me just close our this one and here I will drop and close this one here it will be coming now I can use this go on the sign up page and here we are this will be a little bit down and here I will use this process.en video server name for using here I use the template string and just paste this here before that I want to give the dollar and curly bracket inside this space this after that I will use the what is the server endpoint let me just see this will be the sign up just copy this here and here I will paste the sign up and second parameter of this fetch this fetch will be the object let me just give this and here uh here I want to Define this method will be the post and headers and header will be giving the content type will be the oblique location slats Json after that here body in this body uh it will contain the data which data is coming from the all this uh okay here let me just so I all these data coming from this first name last name email password like this type software which is stored on the this huge state which is this one this used State this data and let me just go here where is handle submit here I will go this data uh first of all I will convert this in the stringify inside this I can directly give the data and after that I will give the const and data it will be wait fetch data and convert this data in the form of a Json yeah now let me just console DOT log data and here uh response will be printed for now I will just comment this site and this things the navigation only successfully is not only for navigation and here response is also coming for that uh in the server side I will give in the response will be first of all we see which data is coming let me just go on the browser refresh this page here I will give the Amid and last name will be the after that email ID gmail.com and password will be one two three four five six one two three four five six and sign up click sign up okay what is it cannot accept Data before initialization uh where is giving the error sign up page okay this data is giving the before initialization okay this data and this data is same thing as collapse then I can change this data like I can do the response data res now let me just see again yeah now sign up again Let me refresh this first again I want to enter all detail omit project name email ID and password one two three four five six one two three one two three four five six and press sign up and it will be take go on the browser here you can see this will be coming undefined and why this will be coming undefined in server okay when some data is coming from the API then I want to convert this data in the form of a Json uh for that here app dot use inside this Express dot Json and now let me just check again when I just click here and again go here you can see all this data is coming like a first name last name email ID password and confirm password only image is not coming okay let's close this now for now and here first of all I will upload the image see image and here first name last name email ID and password one two three four five six one two three four five six and click on the sign up and let me just go on the here here give the error the error uh let me just see here giving the request entity too large it's mean that which I was sending the data this data is approximately more than 1 MB or 2 MB for that here here where I was given the Json yeah express.json here I will just give the limit and inside this we give the limit approximately 10 MB we can send the data approximately 10 MB let me just see one again and all these are done and just sign up again go on the here and let me see now see here uh we got data like I made first name last name and email ID password and this image also now we are getting this data from server now this data I want to store in the mongodb for that let's go on the browser and here uh just type mongodb and okay mongodb.com iOS type much more things mongodb.com now go on the sign in uh if you have already created this account then directly you can enter your email address if you do not have this mongodb account just go on the sign up here and just enter your email ID name last name and password and company name uh this is optional and click here accept this this one agreement and after that sign up uh yeah but here I have already account my mongodb Atlas now just go on the login section here I will enter the email ID here I enter the my email ID and yeah after that click on the next and after that it will be asked the password here I will enter my password and this and click on the login please provide a valid email ID okay or password okay I think some mistake let me just see yeah I was written before that I was given the wrong password that's why this were happening yeah let me just see yeah I was coming the mongodb atlas this dashboard now after that first of all I want to create my own database uh here I was created multiple things but you can create by your own by default I think in your project this no one will be created yeah and if you want to new organization just click here view all organization and here create a new organization here I will give the amid store e-commerce our name of this organization and click next after that here give the member this create organization like that here I will give the uh I will give and I think by default which email IDs have that's one okay and now click on the create organization this is the optional field yeah now here you can see this here display the Amit store e-commerce now after that we create our database for that here create a new project here click on the new project after that give the project name Will here I give the e-commerce after that here give the nest and here by default he displayed your email ID and now let's create this project yeah now our project is created now let's build our database here click on the build a database and here I use the this free version click this free version and click create after that here is choice this free one and here uh no choice anything if you want to uh Choice your area you can Choice it and here make sure that you select the AWS and after that this uh here my location in Mumbai that's why I was selected after that go and this cluster by default all things okay in the last section I will change here name will be amid store e-commerce and create a cluster click on the mixture here check the this is a free version and create this and here are some Authentication motorbike cycle now this is done and yeah now here ask me the username and password make sure that which username you are entering uh you are remember because in our project uh this username and password will be huge here I give the Amit and password will be there amid one two three like that if you want to see and then here click see I was given that this submit at the rate one two three but I will not give the at the rate one two three only Amit one two three and we want to restore this part to us yeah where we are in the backend side here I was created the EnV file now let's create this backend folder uh on dot e and V file and inside this pnv file we give the all this will be in the capital mongodb username yeah and let me just copy this username will be amid let me just paste this and this password will be there just copy this here and here I will give the uh DB password it will be equal to this yeah yeah this one here I was installed now let's click on the create user and he usually created here you can see a name a username and this password and after that go next part and here just write 0 0 comma zero comma because I want to apply everywhere I can use this mongodb 8 plus and create entity after that click on the finish and close this yeah congratulations on setting up access Rule and click on the go to dashboard database it's uh take some time to create your database yeah now see here our database will be created and in the browse collection you can see let me just click this and here click uh because in this time no data is available there that's why here not seeing let me just go back and this database I will connect with our node.js server for that click here connect and connect with the application after that here this URL will display like here display the this URL and he username password will be which I will save in my node.js server this one password I want to enter and here by default this will be the test collection and just copy this here and go on the This node.js Server here I will paste this DB and here I will give the uh URL and here I will paste this or I can give the in the form of pasting then also okay but by default this EnV file in the string format now after that we want to connect our this node.js server with mongodb for that just go on here and here let me just add some comment here I add the API and here among mongodb connection yeah now a little bit of this yeah now first of all I want to connect this which I'm going to be here I was uh required this Mongoose let me just use this mongoose Mongoose dot connect and inside this we give the uh what is the name of this my this EnV this URL this mongodb URL for using this in here I will give the let me just see first this will be printing or not for that uh what is this process dot EnV dot let me just copy this this mongodb URL and come in the index.js here I will paste this and make sure that here in the EnV file here a password Here I want to change this password with this just omit123 and after that here where is here this exclamatory map before this I will add the collection name collection name will be the users users here here or I will give the user like this now let me just go on the where where in the index.js and after that let me just see this will be printing or not okay here mongodb crash while let me just see Mongoose stingy defecated okay oh then we can copy this and why this error is coming sticky query okay uh let me just just copy this here and I will paste this in the Google why this error is coming if some error is coming from your code you can directly Google and here I will give the okay mongodb set query will be false let me just copy this here and here I will paste this now see this error yeah mongodb URL then we can for now just copy this and paste here okay why this is coming okay here undefined coming because uh I think this EnV file is not a uh access this I want to run again server let me just close this server again and here give the npm Run Dev yeah now let me just see again it will be giving the undefined wire it will be giving for now let's say comment this and let me just see here it will begin the undefined and here I was not install the in the backend side EnV config okay here I was not install the dot EnV let me just install this first here close the server and here just type npm install dot EnV press enter after that in the packet.json you can see dot en will be added and let's go on the index.js and here in the top section here I will give the const Dot EnV equal to require dot EnV dot config this file and let me run again server npm run Dev and press enter and now see here giving the mongodb URL yeah now it will find let me just give this here and after that this connection I will pass yeah after that given there then promise if this will be connected then print the console.log connected to data base if some error is coming then let me watching another line if some error is coming then I will catch here if some error is coming then here will be printed for that here console Dot Lock and error here I will pass the parameter after that this data will be connected to the mongodb after that let's make the schema and here I will give the schema and for that const user schema and it will be the Mongoose dot schema and here pass a parameter is schema inside in the user first will be the uh first name and I can copy from this sign up page and here where I was given in the top section just copy this section in the sign up page and go on the backend file index.js and here I will paste this and let me just uh change this this will be the string and this will be the also string email ID will be the string but it will be also unique for that here I will give the type equal to string and here all this yes will be capital yeah and here I will give the unique also here I will give the true and and let me just see yeah this will be done and here also I will give the password will be there in the form of a string and confirm password will be will be also string an image also in the form of pastry yeah our schema is done let's create a model uh here give the model model const user model after that here we give the equal to and mongos Dot model after that first parameter name of the collection I give the users user automatically here yes and after that I will give the this schema let's copy this here and here I will paste this now let's go on the this mongodb let me just say refresh this and here by default this collection section here see this user sees by default is created and this user database is the name of the database let me change this database name for that I want to go here and in the dot EnV file here I was here the database name is the users let me change this I will change this omit or amid e-commerce yeah this amid e-commerce now let me just refresh once again and okay it will be not be done uh I think I want to run again my Pro This Server let me close this Ctrl C and Y and PM run Dev now this will be run again and Let me refresh yeah here you can see Amit e-commerce this will be greater inside this user is is available and now I will delete this users here I want to write user yeah now here see Amit e-commerce inside this we have a user inside the users uh there are multiple users that's why by default this mongodb at plus here give the yes now this model is created user model now I will I want to insert a data inside this for that this sign up here I will come and this uh first of all I want to check this email ID is available for in database or not for that I will extract the email from request dot body after that I will give the uh first of all I want to check this for that user model dot find one find one is a method in Mongoose and here this fire parameter is the name of the email let me just give the email and this email yeah if this email is available here error and result if the this email is available then inside the result we'll give this and let me just give the call by function console.log result if not available then here also give the some error console.log dot address let me just check this go on the here the here where is sign up again sign up I will give the name [e-mail] password one two three and confirm password one two three now sign up okay let me just go here okay see here giving the null value is printed because this email ID is not available uh if this email ID is not available then we want to insert a uh this email ID to our database for that here if Loop and inside this result and it is here if this here email ID is available then this if Loop will be run and here I will give the response uh it responds inside this one and here I will give the response to send in the form of a object we can give the message and this message will be the email ID is already register and now this will be done and if this email ID is not available then we want to save this email ID and here I will use the asynchronous for that here I give the sync and here I will use the data equal to this model name yeah where is model user model and user model inside this we can directly use the this request request dot body because in the front-end side key name and key name is exactly same like this first name last name password all these are exactly same as in the front end let me show you when I I want to go on the sign up says here you can see all these are key name is exactly similar that's why I can directly give in the backend side request.body and now I want to save this const save for that data dot save and now here I will give the uh what will be the message dot send and inside this message uh register register is successful or we can give this fully sign up yeah like that and here yeah this will be done now let me just check this go on the frontal let me just open this console and refresh this page now I will first of all upload the images and name name email ID one two three gmail.com after that here give the password one two three and here also one two three now let me just click on the sign up I will click see successfully giving the message but here you in the console section see successfully sign up and I was this message is coming from the backend side here you can see successfully sign up uh this uh okay this will be done and when I was again click see sign up again click then sometime let me just see successfully this is a by default I I was given in the front inside and here you can see in from the backhand side it will be coming email ID is already registered uh let me just change this from here very very in the front end part sign up page uh here I will give varies data data dot response is coming like that and here I will give the uh in the alert you see this data dot res Dot message now let me just check again and when I was refresh this page and again I will upload the images name um last name after the email ID one two three at the gmail.com and password one two three confirm password one two three now click on the sign up and it will be giving the here see email ID is already registered because before that I was using the same ID same email ID that's why and go on the this mongodb and here I will refresh this then you can see uh in the users uh it takes some time for loading the data here you can see uh this first name amitab as last name email ID here you can see this email ID and your password and this image is saved in the mongodb atlas database now let's this part will be done Save Part will be done and we want to like this type when I was click then here top section this types of alert is coming uh but we want to some animation type for that we can use the uh hot toast npm let me just see react hot toast and after that just copy this dependency and I will open the new terminal here and first of all I want to go on the front end folder this front-end folder for the SCD front end and after that here I will paste this npm I react hot toast and now uh yeah this dependency installed if you want to check this dependencies done or not directly go on in the front end folder direct click on the packet.json file and in the dependency section there is yeah here dependencies section here you can see react hot toast and 2.4 this is a version is installed in you this package.json now let me just go on the sign up and I will also I want to set up this for that I want to watch things here this toaster I want to set up and after that we can use this let me just copy this one and go on the index.js or we can do on the app.js also in this due outside the we can give here no no we can import first here after that here we can make a fragment tag and inside the fragment tag let me just cut this here and here I will paste this after that let's format this shift RTF and just copy this toaster and in the top section I will paste this and now this rosary done and after that I will go on the sign up page and here I will use this how to use here you can see first of all I want to import toast from the react hot toast for that let me just go on the top section and here import from react here you can first of all check this is a small letter T is a small by default some mistake is coming that's why every time you can check this dish is small in the toast and after that I will go and here where is my response is coming uh handle submit and here here I will give the toast Dot and inside this I can directly use the data res Dot message and let me just comment this alert one and now I will go on here and here you can see let me just upload this my image and name gmail.com password one two three one two three and when I was click on the sign up yeah here you can see in the top section email ID is already register if I use some different email ID here you can see I will give the uh like one one one and click sign up see successfully sign up this uh these types of alert is coming and if I will go on the my this mongodb Atlas and here I will refresh this one data more inserted uh it takes some time yeah here you can see uh there is a two item and this is a first one uh this email ID is amit123 and this email ID is amit11 which I was recently used this one and when I was again click then here you can see this email ID is already reached now uh this part will be done and if this resistance is done and then uh this will be redirect to the our login page uh for that in the backhand side we want to also send a successful or not successful for that here I will give the one more key uh this will be the alert and this will be the false and here I will add in the here also I will give the true yeah because this false means that email ID is already register and this true means that this data inserted is successfully if this data inserted is successfully then you want to redirect to user to the our login page for that uh go on the front end side in the sign up page and here let me hear this I will give this if data say dot alert here I will give this this navigation which I was commented let me just uncomment this and cut this here and paste inside this if Loop and now I will again go on here and again click here take some time to display yeah email ID is already registered then it will be not be redirect to the our login page if some different email ID I use let me just use 222 and click sign up success successfully sign up and now it will be redirect to the our login page and here I will once write 222 and here it will be giving me the password one two three and click on the login uh let me just go on the login page yeah here I was not sending this data to the server for that let me just create a our signup page is done now let's go on the login section here I will go on the API section uh this is our sign up API sign up and now let's create a login API here API login and here we can give app dot post and this will be the login and after that request dot response and this will be the Callback function here I will give the Quest Dot dot body which data is coming from the front-end side that will be console log here let me just close this terminal here it will be display now let me just go on the our front-end side in the login page and here I will go and this year when email and password is not empty then this will display I will done just come here and I will just copy the this top one or I can just copy from uh this one and this one from here to here just copy this and I will come in the login page and inside this if loop I will paste this and here you can see this error is coming I want to also make this asynchronous function and yeah this will be done and I want to change this in point in point is login like here I was given this login and after that I will hear this data and which data I was stored inside this what is the name of this I use state in this data variable and and this will be done this will be done login I want to also remove the this which one this first name remove this one and I want to remove this one and also password okay yeah now let me just check this data is coming from server here printed or not for that come here and click here and let me just go here you can see uh email is coming and password is coming like that these are coming and we want to in the server side let me just close all this file first and this EnV login app and we yeah we working on this index.js which is here from the backend side and this login page from the front-end side and here I will come in the backend side uh first of all I want to again check this email ID available in our database or not for that if first of all I want to extract the email from the request dot body if or we can use the user model Dot find one and inside this we can search email is available email here this will be the callback function and here I will pass a two parameter first one is the error second one will be the result if this the email ID is already registered then here it will be given that the data and here I will give the if this will be if Loop result if this email if Loop email ID is already registered then here send the response here message and here I will give the What is the login is successfully and also I want to send the data here I will give the alert will be the true and also we want to send this result one and we in the result one also contain the password let me just show you first like here I will give the result just log in login again here I will use the 111 and here I will give the password one two three as login go here here you can see it will be giving the this image base64 and here you can see it will be coming like a ID first name last name email and this also give me the password but we don't want to send the password to the user again for that here we want to um we want to like here we can give make a one data send it equal to the one object and here I will just copy this all this section now once I want to copy this come in the top copy from here to here and let me just below this and I will paste inside this and let me just format yeah now here this is a ID by default ID no need of this here I will give the result dot underscore ID and here this first name is coming okay result DOT first name and this will be the last name result dot last name and this email ID also we want to send result dot uh email and we don't want to send the password and and just delete this after that we want to send the image for that result dot image and let me just check again and here go bottom section yeah this part will be done now let me just see this email ID already in the database if you want to check this here this see uh amit11 gmail.com and password is one two three and now let me just log in this here and go on the backhand side yeah here you can see it will be giving the okay why this again printed uh password and confirm password okay I was here console of the result but I want to log the data sent let me just console DOT log data sent now let me just check again on the back end and click here go on the here you can see let me just check now here uh data is coming like ID and first name last name email ID and this images now this will be done I want to send this data to the user also directly I will give this data equal to this data set when user will be login then this data set also printed let me just show you in the console here when I just log in see when I was click login here in the console it will begin the alert will be true and data key name and inside the data key name see this email first name and this profile images and last name and this ID and in the message section login is successful if here some other email ID I was entered which is not available in our database then it will be show the some error let me just click this login and here okay nothing is coming why let me just see okay inside the if loop I was not created the use let me just create this is if this data is not available then we want to just copy this response here uh I will check this here I will give the message email each not or we can give this email ID is not available here or we can send another please email or we can give the email is not available and here give the comma please sign up now it will be done and here this will be let me just go on the here and check this again when I just click this it see email is not available please sign up yeah and this will be given the alert will be the false and now I want to in the frontal side there is login six uh the login section I will also use the toast okay I want to first of all import this toast port from react hot toast after this just copy this here and I will give here and this will be the data send Dot message yeah and here if login is successful then data dot send dot alert login is successful then it will be navigate to the navigate okay I was not imported let me see okay I want to use the use navigator from the react router import use navigator from the react router Dom just copy this and I will do this one here cost Navy gate equal to use navigate and this navigate will be if login is successful then it will be redirect to the home page directly I will give you this if not and then it will be redirect to the navigate or we can give the sum some set of time or we can for now it will be okay now let me just check this and go on the browser and when I click on the login see here giving the email is not available please sign up and let me just which email ID is available that will be used here you can see Amit 111 and password will be there one two three and login and it will be giving the response yeah login is successfully and it will be go on the our home page like that home page redrive but it takes some time for that directly it will be go on the this home page uh for that here I will give the set time how out and inside this this timeout will be approximately one second and inside this we paste this navigate will be approximately a delay in one second now let me just check go on the login section and here I will give the path email ID one one one and password will be the one two three and log click on the login and it will login is successfully and it will redirect to the our home page now this login page will be done all the setup will be done and in the console you can check uh here we got this data we want to also display our image in this icon for that we can use the uh we want to send this data to the global state for that we can use the Redux for the State Management let's let me just go on the browser here I will open the new terminal just click here and go on the front-end folder CD front end after that here I want to install the Redux for that let me just go on the browser let me just close all these things which are not needed for now and here I will just close them this mongodb for now and here I will give the Redux so let's go on the official website and here this Redux is official but we can use the Redux toolkit which is easier for the to use it and let me just click on the start and when I was click see here give me this both are done and I want to just copy this one go on the terminal real I will paste this and press enter now this will be done and for the checking go on the packet.json here you can see where is read Redux JS toolkits and one things I want to one more uh npm I read X also press enter and where is Redux here you can see Redux is coming and one more things npm I react Redux and press enter react redex for the here to attach our data to the to provide a data to all this component that's why I use the react Redux and yeah now this all things are done here you can see Redux and react Redux and Redux toolkits now this part will be done and let's here let me just close all this folder first of all here I will create a another folder for that let me just click this folder name will be the Redux and inside the Redux folder we create the index dot Js and inside this first of all I want to import config uh store config let me just see I was also forget it and go on the start section and here here you can see uh npm okay where yeah config configure store I want to import this from the Redux toolkits just copy this here and I will paste on the here and one more things we can just copy this one also yeah this one and here I will paste this yeah this part will be done and one more things this will be done then we want to this store one we want to use this for that just go on the index.js and here import first of all we import the store which I was created in the index.js file in the Redux folder this Redux and by default this index.js now after that we can import what is the provider Provider from react Redux yeah now I will go on the here and wrap this dot provider okay Pro wider and here passive props and store this inside this provider wrap this react router and just press shift alt here for the formatting purpose and why this error is coming okay here just copy this here I will paste this oh let me just see I think this is on the Redux yeah here this yes will be this small I was used Capital well I think just go on the index.js yeah this here I will give the small yes and here also I will give small why this error is coming do not use the which era is coming let me just go on the browser and here you can see store store app.store react reduction perfectly like this error is coming okay I was imported this store from the Redux but I want to import this from a our folder and let me just go on the Redux and inside this index.js yeah now it will be done that's why this error is coming and yeah now this is coming everything is fine in our section and now we want to insert our data to here for Global for that here I will create another user slice dot JS and here I will import create slice from the toolkits and after that here we can give the cost initial state this will be the empty object for now I was given this and after that we can give the cost export or we can do the export cost it will be the user slice and it will be the create slice it will be the object and inside that first of all we can give the name user after that we can give the initial state and enter here give the reducer and we want to here create a login and this will be the login and here State DOT action this will be the Callback function yeah like that and yeah this console.log action dot yeah just console log this and we want to insert this data inside this and after that we want to come in the index.js file and here we can import iOS not yeah here I was in exported but I can do here export default user slice dot reducer reducer and after that I will go on the index.js file this retex folder and here I will give the import user slice user slice or we can give the user reducer user slice I think is perfect name we can add one more we can change the name also because here I was given the by default then if this anything is exported from this directly it will be the users this user dots reducer that's why and here I will give this user slice reducer just copy this here and here I will paste this things this is a reducer we can do like that inside the user and here I will give the data now this part will be done and here this login also I want to export this export login from or we can give the from from user slice dot xn we will like that and here I will add the const yeah now this login is exported or we can change the login method is a perfect name let's copy this here or we can give the login Redux copy this here here I will paste this and this will be the exported and let me just go on the login page here I will first of all this will be all the setup and here we can give the cost user data equal to the user use selector we can use the use selector which is coming from the react Redux and inside this we can use the state and state let me just console log this first of all I want to show you user data and here you can see yeah let me just open this console and go on the login section here you can see this user data you will giving these types of a Sim in this time uh simply empty uh when I was login then inside this this all this data is coming and let me just use another one one one and here I will give you the password will be the one two three like that in this time this I was not set the data and this response which is coming from the server side this data will be set to the this redo this user for that here I will give the dot user dot user and for the setting to send this data to reduce Redux for that we can use the const dispatch huge dispatch from the same react Redux make sure that you're imported and after that we can when I just log in then this response I want to send to the our this video uh Redux for that on this dispatch I will just copy this and I will send to the this response varies yeah if this will be login successfully then we can send the data to uh dispatch and it will be the with the data res and in the this user slice dot JS here I was console.this and first of all I want to also import this method just copy this and here go on the login page in the top section import login Redux from the user slice and just copy this method and I will give this here inside this and it will be the inside the method like this type software and after that let me just log in this go on the here and here I will give the one one one and giving the password one two three and when I just click on the login okay yeah here you can see this payload is user dot slice line number 10 which I was console uses dot slice and here this console I was given this action and inside action you can see this payload will be contained the all this data which are coming from the server side and inside the payload this data keyword will be contained the detail of the login section and for that we can do xn Dot what is the name of payload and payload dot data yeah like that and we want to set to this data to the in this initial state for that here I will give the state uh directly we can give the state it equal to the action dot payload dot data and here I was also getting the data where I was uses yeah user dot this you you selector this data is printed and we will want to just show the name to the our this alert which are hot toaster is coming for that here and this will be the I will show before this here I will paste the yeah like that user data dot user Dot I will give the first name yeah like that now let me just see go under here and here I will give the 111 and here I will give the password one two three and click on the login and it will take some time yeah here undefined is coming why and all this okay okay this first name I think some mistake let me just console log this first which data is coming we can for now I will remove this here console Dot Lock that user data this user data is coming from this reducer method this is from the Redux and this will like us console log let me remove from here we'll come here where where yeah here I was console log this user data and now let me just check again and log in again here I will do the email id111 and here password will be the one two three and click on the login and your login is successfully here giving the uh this log console log line number 55 login.js yeah this one and and here let me expand this okay here no data is inside this and why I will check this let me just go on the user dot slice and I was giving the okay here I was not created anything let me just give the user and this will be the object simply simple object and here I will give the state DOT user like this type software and now let me just see again I will login this one one one and here I will give the one two three and login yeah now let me just ex this one and here you can see now our data is also is not set inside this and why these are coming let me just console yeah this data is coming here but not stored inside the our this initial listed this one and for that [Music] thing here I was not said the all this name that's why is not coming then we can do just remove this here I will give the just same all this scheme name is similar to which coming from the user side from the backhand side for that let me just log in this and here I will just copy this all this key name let's copy this here here I will paste this and let me just delete this one and this one here I will give the comma here also comma here also comma here also comma and here I will give this by default this will be the string and yeah like that let me just format this okay here I will give this will be the empty string here also I will give the empty string here also here also here I was not given this colon yeah like that now I I think I want to set you just comment for now here we can give the state DOT ID first of all we said ID and action dot payload dot data dot underscore ID state DOT first name it will be equal to the action dot payload dot data and after that first name date dot last name xn dot payload dot data dot last name and state DOT email ID will can action dot payload dot data dot email ID and any things yeah image also date dot image equal to the action dot payload dot data dot image now let me just check this again and refresh this page go on the login page and here I will give the email ID will be the one one and password will be the one two three and click on the login and here this user data is now here is you can see uh all this data is empty uh because here all this data is empty let me just go on the login dot dot JS line number 55 and where is login.js okay before data will be sent to the Redux I was console log this that's why uh this data is giving me the here empty and let me just cut this here and I will when the data will be set to the Redux then I will print this here I will print this yeah now let me just check again login and here I will give the one and password will be the one two three and click on the login and now here this user here you can see in the login.js line number 65 yeah line number 65 this one this which is data is coming from the Redux yeah here you can see inside this email ID and a first name and this image last name yeah now this data is coming first of all we if some user are already logging then here display the images and for that let me just go on the various component and inside the header here we want to set the user image for that uh this is a login and yeah here this is here display the users images and let me just comment this and see yeah this is your user icon now here I want to display the user Ike uh users for image for that first of all here I will use use selector for get the data from the Redux here I will give the user data equal to use selector dot state dot user and Dot let me just console log this and here I will give the user data let me just see why these are coming okay this is inside this I want to pass a callback function inside the parameter is a state and state DOT user now let me just click here login section and here I will give the one two three and and password will be the one two three okay here email ID will be the one one one and click login login is successfully it will redirect it here right click go on the inspect and console here you can see our data is now coming here see error.js line number 11. here line number this one header dot js1 now I want to set this image to here for that where is this icon I want to check okay this one just close this first and comment this and check yeah this one icon here I will be giving uh first of all I want to create inside this curly bracket after that here uh this user data and here I will give the user data dot image ternary operator if available then image SRC and inside this we can give the directory to this one just copy this and here I will paste this after that here give the colon and it will be the single line here and it will be also and why these are coming okay here I was not close the image tag yeah now let me just see you see this image is coming but it will be too much big for that I will give this class name and here I will give the H will be full and width will be full yeah now here I will give the width will be 10 and height also 10. now let me just see yeah it will look like this and it will be rounded full and overflow hidden yeah like that and below this I will give the shadow you see the we can give the drop shadow yeah look a little bit like this yeah it will be coming and here this login is coming no problem let me just refresh this and again login first of all go on the login and here I will be enter email ID and at the red gmail.com and here password one two three and click on the login now see login is successfully here image is coming and he here when the user will be login then here not coming this login instead of this login coming log out for that here I will give this here I will use the uh and here I will give just cut this here or we can use here ternary operator directly and here I use the P tag or we can use directly this copy this one and here I will paste this and if this is coming then here display the log out and here ternary this navigation one just cut here here I will paste this yeah now see Let me refresh this and again login here see login is coming I will log in one two three gmail.com after that password one two three and click on the login here see login is successfully it will be redirect to home page and here image is coming and see this log out and we want to also make this log out uh cursor pointer now let me just see yeah cursory pointer and hover effect also we can give our effect or we can change the text color uh text will be white and BG will be red now let me just see okay um instead of outside this we can give here I was given the padding this uh left and right side let me remove here and see yeah instead of giving here I can give here and here px2 now see it will look like this and here top bottom is also coming for that for now it's okay no problem and we this log out when I just click the user will log out for that here I make one on click on click handle log out and just copy this and here I will go top section const handle log out yeah when we login then our data will be set to the Redux now we want to remove the data from the Redux for that let me show you where I was set to go on the login section and just close this here when the user will be login then here this dispatch and login Redux data will be set here go login Redux for that log out I will go on the icon directly a very very slow about um where is here I will give the first of all import cost dispatch equal to the huge selector sorry use dispatch from the reacted Redux after that I will make in the Redux where is user slice and inside this I was only making the login Redux here I will make another function uh log out Redux and here is state action like that here I was setting all this data now I will empty all this data just copy this here and here I will paste this again and here I will give the ID will be empty here I will be empty and this one will be and this one will be and this one will be now this one done and just export this log out to Redux here and just copy this here I will import on the header uh here I will directly import log out redacts from the you Redux user slice after that I will go use this dispatch and here log out section I will give the log out first of all dispatch inside this log out redacts and inside this I can directly give the nothing for now it will be okay and just let me just first of all refresh this and click on the login section okay here padding is gone let me settle this also and just copy this padding here PX and I will paste on the this login also yeah now it will be coming you press again click here okay it will be see this image will go over uh let me just click see this image will go little bit top side not in the center uh let me just see why these are happening and it will be happening here I was given the absolute and right side zero PG Flex item call and here I was given the justify content D5 plus device enter items instead of here I can you here this one and here I was given the overflow hidden here I was even the height with the blacks item Center justify and so Center what is happening okay it will go above let me log in first and check one two three one one one and here I will give the one two three and log in now see here image is coming okay and when I just click on this image here log out when I was click on this logout see logout this will this image will go on the top because here I was given the this height height and width let me reduce this I will give the approximately 8 and here I will give the 8. now see it will be coming Center and when I just click here login here I will enter the our email ID and at the rate gmail.com after that password one two three and log click on the login see our user login is successfully and here and here we can log out when I was click see log already done but no message is coming for that message we can do here we can use the toast from RE react hot toast import from the react hot toast after that here I will get the log out successfully and see when I click login enter the email ID 111 gmail.com after that one two three and click on the login yeah login is successfully and it will be redirect to home page and when I just click again log out see logout is successfully like that our login section and sign up part will be done now let's go on our home page make this home page for that let me just go on the home page here we want to also import some images for that in the new upload first of all we upload the images after that we Fetch and display on the home page for the uploading section let's first do upload image let me go on the this new product Warehouse the new product I was make here and here I will give first of all make form tag and inside this first of all label we can give the HTML for name of the product here we can give the name and input type equal to paste and here give the name name equal to name product name and second one will be the our let me just see here it will do display name and second we want to category for the select and the select tag inside this we can give the option and inside option first one is the fruit and second one will be the vegetable and third one will be the ice cream and fourth one will be the let me fruit vegetable ice cream and Nest will be the dosa either video you can add by your own which image you are uploading which category also and here this one one two three total five let me just see yeah these are display like a cake chicken not available yeah that much done and we will add later also and now let's go on the next part and after that we want to upload our images for that here I will make a oh here I will give the Duo last name I will write later here first of all I give the H1 tag and here it will be the height will be approximately I think 28 pixel and width will be full and give the BG background color will be slate like that and now first of all we make all this content in the center for that here I will with the class and it will be the what will be marching margin Auto and its width will be approximately I give the width will be full and its Max width will be approximately um Max dot w dot approxley 384 and let me just see okay a little bit more we can go empty yeah and here I will give you the um m y equal to or I will give you the padding equal to like that and reach perfect yeah four is perfect now I will give this form tag and or we can give the just cut drop shadow or shadow we can use shadow is look like it's not good for that just cut here uh all this cut here and I will give this form tag class name and inside this now let me just see okay it will be fine and here I will give you the padding let me remove this padding here and I will paste here now see little bit space is coming and in this form tag I will give the flags and flex call yeah it will be perfectly and inside the form little bit padding it will be approximately three okay it will be fine and here I was given the due tag height will be 7 but white height will be not taking H will be 8 let me just give them more we give approximately 40 yeah 40 is perfect and this color is too high we can reduce this 300 yeah like that and after that we can give the m y will be 2 3 and round it yeah like that and inside this we display the icon for uploading react icons load and where is upload now let me just see this one just copy and here I will paste this and here I will import from react icons slash BS and here I will see okay this size is too much small for that let me just cut here and use the span tag and inside this this is span tag I will give the class and this stack size will be the 3XL yeah now let me little bit more 4XL and now this icon will be coming in the center a little bit more five yeah this icon is for the center here I will give the Flags and items Center justify Center this icon icon is coming in the center side for the upload image and after that let me also design the our input box name this input and here this one here I will give the class first of all giving the background color little bit approximately 100 and also this form background color BG White yeah BG white will be perfect and it will be the 200 and this here I will give the little bit padding it will be approximately two not one is perfect and like that just copy this class name and I will give that the select also and in between that margin one here also here little bit space in between them and here I will give the label I was not given let me just give this label HTML for category here I will give the category here I will give the ID equal to category yeah like that and this image any J Price let me just go below this and here I will here I will give the um label and HTML price and after below this I will give the here I will price input type equal to test when after that here just give the same style which I was given the before this both of them for that let me just copy here and I will paste inside this here yeah now see it will be coming here and here I was not given the label let me just give this this one here I will give the label and HTML for image and here I will do the ID image okay this will be coming and why these are here I was here in the Martin only let me remove this here and yeah now I will add the margin from this price here I will give the class name I'm giving the margin equal to one and also yeah now it will be done and this image here you can see this background color I was using this three let me just give the 200 yeah now all this similar and this price and this name category on images price and last one will be the description and let me just see and here I will use the test area first of all give the label html4 description of the product description for that here q that is script Sun and import type equal to test or we can use the another tag which will be the text area text area equal to call calls I've known you know because Q the only rows rows will be approximately three and just close this uh this will be done like that let me see here it will be display and I will give the same design which I was given the this input let me paste here and here this will be the resizable but I will of this for that resize will be none and here it will be gone and yeah now all this part will be done and here I will make it will be approximately 2 um yeah it will be small and here I will make a submit button let me just give this button uh save yeah and this button design class first of all I give the this button will be proxy BG slate which will be the 500 and however I will use the BG red what will be the 500 um I will give this red color it will be 500 it will be 600. and this bottom attached color will be white that size will be LG let me just see and font will be bold and drop shadow won't much more volt we can give the medium on yeah after that I give the margin from the top and bottom it will be two yeah like that it will be done we have but all this part will be done now uh grab all this value and first of all uh user will upload the image here when user will click then it will be able to upload the image and here display also for that first of all we do uploading section after that we get this value and for that let me just go here you have remembered that in the sign up section we have created like that to upload a user profile image let me just show you oh where is a handle some meat yeah handle upload profile image like this we have created one function image to base64 here where is input type is equal to file in the top section here see like that we have a created input is equal to files and we are like that when I was click on this section it automatically click here this image one and able to upload the images for that like that I will do this first of all let me just go on the again in new product and here I was given that this label and after it below this I will create the input or we can create a inside this here also input type equal to file yeah like that and here I will give the on change method will be the upload image and just copy this here and come here I will make a one minute third const upload image like that and here I will pass e and let me see here see it will be display here but it I will give this class will be height and here I will give the hidden okay hidden now it will be gone but when I was click on in this box then this input will be working for that I was here created this label and here I will give the ID will be image and we don't need of a here give the ID this one just delete this delete and here when I was click okay it will be when I was click on this you may see then it will be opening uh for that we just cut here and we paste here now let's face this again and when I just click here see it will be opening like that it will be working for now and our mouse cursor will also not change for that here I will give this cursor pointer see yeah when I was click OK I am able to uh upload the images like that where is my image okay it will not be display just random image this one where is this one but here not able to display this image and no here one object okay not this one let me just console lock this one console DOT log e e dot files that let me just click here and upload image okay it will be giving the undefined like that we have given in the sign up page and where we sign up handle upload profile I will just copy from this one just copy it to because this method will be convert image into base64 just copy this from here to here and I will go on the new product section here I will paste this and I will import the this image base64 and from the utility where is pH sign up and utility from the utility folder image based 64. I was written this all this code let me import this new product and I will give the base64 directly see here it will be imported this is vs code it that's why and this is a synchronous function yeah now let me just see go here and click when I just click here select image and upload see this image is coming now I want to also display okay this is a video not a images and when I just click again let me just see only uh we will make user we upload image for that here I will change this in the input here I will give the accept image slash hashtag only user able to select the images now let me refresh this and click here again see now only image is displaying now I am able to select any images click here and see here images is only display now I will also able to display this image here for that let me just create a here image image tag image SRC and inside this I will insert the path of this and before that I will I want to create a used it for restoring all this section for that here I will create a const data is equal to set data from huge state and it will be content object first will be the name of the product second will be the category and third will be the image and fourth will be the price after the last one will be the description um description yeah now this part will done and first of all just go below this and here I will make another method for on change and const handle on change and it will be the call Arrow function yeah like that I will here give the this just copy this here and I will paste on the this input uh first of all on click on change sorry on change and I will paste this method here and just copy this here I will also paste on the this select one and also I will on the where where this input this price one and description where this text area attack and now after that I will give the all this in the input I was already given the name is equal to name and in the category section also I will give the name name is necessary for that it will be created a key name that's why category and after that here I will give the price name equal to price and last one will be here I will give the name equal to description like that and after that this on chain method here I will give the E password parameter e after that inside this I will extract the value uh like uh name and value equal to e dot Target and after that I will this set data and here I will give you the set data callback function and first of all I will restore the previous value and here I will pass a return and object just split the previous value after that we can give the name inside the this square bracket if you use it like that it will not be happening give the error that's why I show you and after that you can directly here give the value and now let me just see and I will print this data value when I was click on the uh on submit also for that in the form tag I will give here on submit yeah uh here I will make one method const handle submit callback function and just copy this handle submit here I will paste this and here Dot data now let me see refresh this page and this will be also printing for that let me comment this for now like that here I will I give the name product here I view the product name will be like a ice cream ice cream here silk ice cream and price like if 53 and description ice cream and when I just click on the save okay this page is a refresh but in the URL you can see this name is called to ice cream category is equal to ice cream and price is equal to 53 description like that these are happening for stop this and in the handle submit here I will give the e dot prevent default to give the prevent default like that now let me refresh again and here I will insert ice cream ice cream here I will able to select any images for now I will select an image and here not able to display and here price description and click on the save see here in the category ice cream discretion and image is not coming because I was not saved don't worry I will give an name also and price these are coming let's make the image for that where is upload here and here I will give the set data inside this callback function and I will first of all pass a one parameter previous value and after that return one object spread this previous value and after this I will give the image equal to the this data and now yeah like that let me just show you again Let me refresh this page and here I will give the again ice cream click here upload the image here price one two three description and click on the save and see here category description image name and price all these are coming and we want to also display our image here for that now data will be stored inside this image will be stored inside this use instead object and now I will go uh here I will give the data dot image and now see here it will be displaying because I was you uploaded the my profile image that's why no problem for now I will give the class equal to full height equal to full it will be perfect and what is happening okay image will be uh yeah yeah now see image usually like that and image will not be in the center for that here I was given the flex item just Shiva content Center yeah everything is perfect and now I will when our image is uploaded then this icon will not be able to display let me upload the original icon which I was uses here I will go on the restaurant and front end part SRC and in that SS folder let me upload this apple image see it will be coming here apple and this icon is also able to display but we can do here's give the 10 some condition like if data dot image is available then also display the this image otherwise it will display the this icon just cut here and here I will paste this now let me just go here and refresh this page here I will type Apple and here I Choice a category will be fruit and upload the image see here it will display the Apple image and here I will give the price and description and click on the save it will be coming yeah now this part will be done upload section will be done and one things more uh if we upload this image and we are want to change this image then again we can click here and just click this image automatically it will be done now our this part will be done and now the all this section will be done now we are make a one API for uh save all this data to the database for that let me just go on here and go on the backend section index.js and here I will first of all we want to make our schema for the uh upload a product yeah image for that for that here is the schema of the user and this part will be all this user and here below this I will make a what will be there product section in the single file I will I will creating all this but you can separate all this as you need now here this product section first of all I will give the Mega Money schema for that cost schema product equal to Mongoose dot schema inside this we can give the let me just copy the all this key name which I was using in the front end section first of all let me just collapse this and go on the new product section and in the top section like this image category and sorry name cat in category image price and description just copy this and go on the backend section index.js and here I will paste this and here I will Define the data type this will be the string and this category will be the also we will give the string and here also we can give the image will be in the form of pasting and price also here I was given the in the form of a string you can also give the in the form of a number depend on the which data type you are sending from the front end part and last one will be the description and now here I will make a model and for that const product model equal to Mongoose dot model and first parameter is a name of the product like here I will give the product and second will be the schema just copy this here and come here here I will paste this now let's go on the browser and check this collection is created in the Mongoose database or not for that let me just go here here open this and here I will go open the mongodb and let me just click on the sign in after that here I will enter the my email ID my email ID which I was created account in the mongodb you can enter your and click next after that here I will give the password and after that give the login now after that I will go on the my Amit store e-commerce which I was created the organization after that I will go on the e-commerce and this database and go on the browser section yeah here you can see which I was lit this product I was create here giving the model name is a product this is a actually collection name uh here I was given the product by default Mongoose give this name will be the products and here uh I was given the the user's user here by default giving the users and here you say inside the user UFC we have a multiple data let me just show you yeah total we have a three data like amit123 and one one and this image and in the product section uh in this time no data is coming because I was not inserted any data now let me just go here and product yeah product section here now first of all we create a upload a product for that upload or we can give the sale product in database for this API here give the API for that app Dot we can give the post method and it will be the upload product after that second here I will pass a callback function in this callback function it will be the two parameter request and response and here I will first of all here request let me just console DOT log and request dot body like that let me just copy this one and go on the front end part and where where in the new product uh where is handle submit uh one thing more I want to know yeah here in the EnV file where is here EnV file I was given the our server domain name like here I was given the local rows if we deploy then we will change this directly automatically reflected everywhere now let's go on the a new product and here this CJ asynchronous function I will make this after that here and now here I will give the uh first of all const user fetch data equal to weight dot weight equal to fetch after the inside this we will give the URL for that let me just use the template string and dollar curly bracket process dot EnV dot what is the name of this let me see dot EnV just copy this react app server domain and after that I will go on the new product here I will paste this after that here let me just see I was given the slash or not okay here I was not given for that here I will come and give the Slash and our API endpoint will be the index.js upload product just copy this and come in the new product and here I will give the end point name after that second parameter will be the object it will be the first of all method method name will be the post and second will be the header headers and it will be the content type first will be the content type will be the Json format application and after that I will give the body inside body we will send our data this one which data I was stored in this huge state and just copy this data and here I will paste this first of all I will convert this JS data in the form of a stringify and after that this will be done and const fetch response will be equal to the weight fetch data dot Json we will convert which data is coming from the server side in the form of adjacent after that here just console log fetch res okay just copy this here here I will paste this and everything is done yeah now let me just check this and in the database currently in the our product section no data is available let me just show you refresh and see currently no data is available for now let me just refresh this and here I will give the let me just first of all select like this one image I was selected Apple and here I will give the name will be the product name will be apple category will be the fruits and price will be approximately few of ah 52 and description will be there fresh Apple and click on the save okay here for here this error is coming just go here and check on the backend section okay here I was not given the slash let me just give this slash and now check again and click on the select sale and yeah all this data is coming let me just go on the back end here is see all this data is printed here in inside this console now uh let me just see all this data is coming or not and here see category empty okay let me see okay I have selected the fruit but it will be not silky for that here I will change in the front end section where is front end new product and here I will give the uh one more option this will be the uh what will be the first will be the select uh category and for that here I will give the value and it will be the category and here I will give the or here I will give the other category other and here I will give a value will be the fruit in the form of a string and after that here I will give the value will be vegetable and here value will be the ice cream and here it will be dosa and last one will be the picture and one more I will add will be the rice and here I will add rice like that now let me just go again and refresh this page and one more things in the backhand side nothing data is coming for that we will send the data huh here response dot send it will be the uh first of all we send the message upload here successfully yeah now it will be done and responsibly coming successfully now let's check again refresh this page and here I will upload the Apple and click on the select it will be fruit and this image will be like that here I will give the price will be the approximately 30 60 and in the description I give the fresh apple and click on the save and see response is coming message uploaded successfully and let me just go on the backend side here you can see our response is coming uh let me just go down down a little bit up and here see apple fruits and image now in this time category is also coming and below this price is 60 and description is now we are getting this data and one more things if let me just refresh and when I just click on the uh by default here see upload it successfully by default and when we go on the backend side here see we got this empty data but in this time for that we make a validation in the front end part and for that I will go on the front end new product and here I will add one condition for condition will be there like if uh what will be the first of all we make extract all this data from first of all name image and category and price and discretion in the optional no need of this and in name image category and it will be extract from the data and here I will give the condition if name image and it will be category and price is not a empty this is a falsy value and now I will just cop cut from here and here I will give this if this will be anyone like a name image and category anyone is empty then he here give the error toast from the react hot toast and make sure that in the top section it will be imported toast from react hot toast and here I will give the uh um what will we take you enter required field f-i-e-l-d like that fields we can give or like that when I just click on the save see it will be the enter require field and now and one more things here I will give the toast Dot fetch here it will give you the message now see yeah this will be done and let me just one more upload images price will be 80 description will be the apple fresh or fresh apple and click on the save and see upload successfully and go on the backend side here see now we are getting this data now in the backend side now we want to save this data to the our database in this time you can see in our this product one Let me refresh first in the product this product collection no data is available for that uh we want to upload the data and this model let me just come here and here I will give the product Dot what will be there um directly we can get this product model but it will be the asynchronous function for that here I will use the async and give the data equal to product model inside this we can directly give the request Dot body and after that data dot save this method is called and it will be the here I will use the weight here also I will give the data save and here I give the weight Dot data dot save now again let me just go on the front-end side refresh this page and in this rhyme you can see no data is available let me show you once again yeah see Zero now let me just go here I will give you the name of the product will be the apple and category will be fruit let me just select this apple and here I will give the price will be the 50. and it will be description phrase apples and click on the save here responses upload successfully now let's go on the backend side here it will be printed now let's go on the our database and refresh this and yeah here you can see in the product section one item is added this apple fruits and our images and this price and description like that we want to add a much more image let me just add one by one here I will just make this big screen and now when we upload then all this value again make empty uh for that it will be see when I was upload successfully then it will be not be empty for that ah we are in the front end side front end part where is new product and here I will give the set data will be all filled will be yeah blank directly for that I will just copy from the top section here I will just paste it and in the form of a return yeah like that and I will do here this input I will add a value also here I give the value equal to giving the data dot what will be the name and after that this select one here also I want to add the value props and here will be the data dot what will be the category and below this uh here I will add no need of here and here I will go where is DC price also and here I will give the price will be value equal to data dot price after that we can add on the description description for this text area value equal to and it will be the data dot description now let me refresh and now again we upload the next product let me first select the image here I will select the like this vegetable just cop yeah copy this yeah this image now here I will give the name of this one bunch and select a category will be the vegetable price will be or 20 and description will be fresh vegetables and click on the save our upload product uploaded successfully and all this field will be empty and let's go on again refresh this mongodb database and now here you can see we had added the second our product this one and vegetable category and this image now like that we can add a much all this product let's start adding second product will be the this apple will be done now this kiwi let's copy this or upload a kiwi and here IQ the name will be there kiwi and category will be the fruits and price it will be approxys 65 and discrete description you can write by your own or you can I think just Google it little bit to add this and yeah just now this product is done now let's go on the next one this year basmati rice okay let me select the rice category and here I was copy the name for here I will give the basmati rice will be like that and rice category and his price will be the one zero two and here I use the press button three rice and Save now next product will be the what is this beetroot and click save and here I will give the name of this root and after that category will be the vegetable and price will be 50 and here I will give the just copy this here here I will paste this and save this product now next product will be the uh cake birthday cake let's give this name here I use the birthday cake only that much name will be the birthday cake and category will be the okay here I was not given the category cake okay let me just add the category cake let me just go here and here I will add the category cake cake and here I will give the cake yeah now let me just go here and here see kit category is coming and this birthday cake and here price will be the 400 and here I give the birthday cake yeah like that and just save this and next product will be the this cake here I give the flower and select category will be cake its price will be actually one thousand 50 and it's cake like that save this and next will be the uh this biryani I think not brinjal just this one the vegetable category it will be the vegetable price will be the 40 and here I will give the directly just now let's next one will be there after the brinjal uh this burger oh why these are happening and selected Burger is not have here let me add this category also here I give the Burger here I will hear you here also yours Miss now let me just see yeah burger burger Burger King with hope of cheese okay no problem yeah like that and here I give the price will be the 98 or 99 and here just paste this save this yeah uploaded now next one will be the this burger will be done now this cauliflower just click here and vegetable category vegetable here its price will be the 60 and this is so now next one will be the cake here I give the cake category will be cake and price will be 900 and it will be the uh cake and save this and after that this cake one cake only cake and yeah like that you can upload a much more product which you want to and upload it done now let's see vegetable like that you can upload by your own images also will be I will give the this category after that vegetable price will be the 10 and carrot and yeah done now next we will be after the carrot this cauliflower uh category will be vegetable price will be and save this uploaded successfully now next one will be the this one uh chocolate cake ice cream okay category with will be ice cream and here I will give the ice cream that chocolate ice cream and inside the price will be the approximately 500 and here I will give the some description it will be you can also if you want to a little bit skip you can skip yeah now save this and next one will be there this classic burger okay burger here and price will be this and it's a classic burger on this name will be too much big we can small this and here inside the description I will give this like that I hear this one done I'll save this now next one will be the burger and this coriander okay you see a vegetable inside this I give the vegetable coriander and yeah price will be there 20 inside this space this and so now next will be the this copy and category will be vegetable and here price will be 30 here I paste this some simple and uploaded successfully now next part will be this ice cream here I give the ice cream category and spray will be the 60. and it will be uploaded successfully now next part this pizza here I give the category will be Pidgey and gradient that Pizza gradient like that and here inside the description I give the little bit more described and its price will be the approx leave with the 4.99 and save this please require Fields okay which field okay category I was not selected uh where is pizza foreign we can also give this like that picture and picture like that I will let me just go on here and refresh this and if I delete this data and again or we can just also customize this let me just see it takes some time here let's just go on here at a time only one is display let me just go on the total document is 20 here you can see let me just go on the 20. you take some time let me just do this first we can have also option to filter also for that here I am and just click on next here we can filter like that I show you if you want like that here I can give the uh what will be there category category and after that I can give directly picture like that and after that I apply then here you can see this only one ingredient is added available and this one and here you can see this is pairing a mistake we can correct also here edit click on and here I can give one jet yeah after that here save is updated is and click update yeah now see it will be updated and here I can just give the picture and apply see now it category is updated this one done now let's upload more product and this picture will be and this picture will be done and let's go on the on this dosa and here I can do the dosa and category will be the Dosa where is here price will be the approximate 99 and here I can directly give the dosa just you can write any description which you want here I was right just randomly and after that we want to upload this to USA masala and uh Masala category will be the Dosa and price will be the 59 and description will be the Dosa masala and click save update now let's go on the next part and also is done and this dragon fruit and here I can give and here give the name dragon fruit and category will be uh where is fruit fruits here after that give the price will be the either it's 199 and here I can directly give the roots and see you now next will be and this banana and after that here I can give this fresh yellow banana okay and here I can Choice the category will be the fruits after that uh what will be the price your price will be 40. and here I can just directly random and now save this now next one will be the uh it will be fried rice just click this and here I can Choice rice where is here it will be the price will be there 89 and here I can directly paste this save this next will be fruits and here category will be the fruits and its price will be the 199 and here I can give the mix of fruits and save this now next will be the uh where is mixed fruit and this garlic and here save this here I will give the name will be the garlic and category will be the fruit vegetable and price will be the approximately I can 79 and here I can directly randomly after that This Ginger and here I will give this Ginger category vegetable and its price will be the 19 let's save this now next one will be the after the ginger this capsicum green capsicum and after that category will be vegetable price will be the 49 46 and green Capricorn after save this now next one will be the uh green capsicum after that's this green pea and save this here I will go and category will be the vegetable and price will be there seven zero and just save this after the p uh this ice cream and here I will give the ice cream category will be ice cream where is where is here and here its price will be the 69 and yeah save this now next one will be the ice cream and here I can paste this yeah and here I will give the ice cream where is and here inside the price it price will be the 99 and here I will give the random and Save now after that this part will this cup ice cream and here I can give here it will be the category and price will be the approximately 500 and here just save this now next product like that you can do by your own which you want to and here I will save this here I will get the ice cream and category will be the okay category ice cream price will be the 4.99 and save this now after that this one Indian garlic it is come in the category vegetable and hey its price will be anything you can write and after that say this now next will be the uh after that this one is done and this mango here I will save this mango we can give the repelling of mango any in this time I also just write randomly you can try write your own after that he here I give the price and randomly and save this now next will be the go mango and category will be the vegetable fruits and here I will just give the price will be 80. and here's a fresh mango and save it after that just go next and this one is a mango okay and I will just give in the this one and category will be category will be fruit and its price will be one two one two three just randomly I was given and after that next will be where this mango part will be done and this mask melon just copy this name and here I will go it's come in the category of the fruits and here is a fruits its price will be the we can give the 80 and this save this now let's Choice another uh noodles is not onion let me just see and click here here I will give this and its category will be the vegetable and here its price will be the 80 and save this after that we can go next part and this Orange and its price will category will the orange and sorry category with the fruit and its price will be the 91 and here I just write randomly with orange vegetable sorry orange fruits and save this now here let's next one where is the orange paneer category you can add or yeah paneer you just add this paneer and here I will save this here select the category uh paneer is available okay not available then we can let me just go on the here and where is new product inside the option we can add paneer and here also we can add and after that in the here we can select okay take some time yeah coming and now here I will give the price will be the Andy randomly I was given the price you can give by your own paneer and just save this now next product will be the um where is paneer panitika just copy this here I will come paneer Tikka and it will be the in the paneer and category will be the paneer and in between them little bit space I give the and yeah save this now next one will be the on this pizza here I will give and I will remove all this in the disk category it will be the picture and 1799 let's save this now next will be the and this page here and this pineapple so pineapple it's come in the fruits and each price will be 60 pineapple save this next one and this one and Foods its price will be like that we can do randomly and after that we can delete this here give and save next one okay this one done and this picture okay I have to upload this video category with the pizza and its price will be the 199 here I will give paste and next picture heart Mania sorry Pizza Hut like that and I will just and now let's select the category picture here I will give the price 79 and here randomly okay now this what is this Noodle No need this potato I will add mm-hmm select category will be the vegetable its price will be 20. and here I will give the description just save after the photo where is potato okay red capsicum we can just open this and here I will give the Red Cap see come and it's a vegetable here I will get the price 50 and yeah save this now next will be the this rice ball and category will be the rice and surprise will be the 599 here just save this next and after this side image we can add and here I will give this sandwich and category sandwich is available not let me just add the category go on the vs code here I will add category it's CS will be small now let's go here and see sandwich is coming its price will be the 299 and yeah sandwich just save this and next will be the this sandwich 5.99 and save this now next will be the this one and is category will be with root price will be the 299 and here I will just save this and next one will be there spring onion branch and here I will just give this vegetable here price will be 5.99 and it's randomly and last this strawberry ice cream yeah here I will give uh here ice cream Paris ice cream yeah and here price will be there 299 and save this now next one will be the discover and yeah and category fruits its price will be the 63 and save this and this last one is the watermelon and here I will give the watermelon it's category with the fruits and price will be the 50 and save this yeah now see all the product we have uploaded now we want to also get all this product for that just go on the backhand side index.js and here we make a one API for getting all this this mongodb data which I was saved and for the and one more things we want to add here uh Mali admin will be able to upload the uh this new product and and no one can upload new product for that first of all we do this for that I want to go on the EnV file here we can make a react in the capital letter react underscore app and after that underscore admin underscore email here I will give the I give the dynamic coding with omit at Trail gmail.aut.com and now I go on the header and inside this where I was given the email uh yeah this new product and here I will give the first of all check DC I am able to getting this email ID or not for that this EnV let me just copy this and in the header section uh here I will just console Dot Lock and process dot EnV dot paste this now let me just go on the browser inspect and here okay it will be giving the error okay here it will be empty plating let I think I want to run the front end part again just here Ctrl C and terminate this and let me little bit up here I can give npm start yeah it will be started again and now I will close this file and this one and this one also and now again I go on the inspect console any AC recorded this email ID uh Dynamic coding with Amit address gmail.com now just copy this and here I will go where is here I will make a curly bracket inside this process.in Dot my email ID is equal to the uh first of all I want to also check which email ID is coming from the our this Redux for that this will be an user dot email ID let me just see user Dot let me just see refresh this user dot email yeah user dot email user dot email like that yeah it will be now okay and just copy this here I will go below and here I will give this and it email ID is equal to the which I was given just copy this and here I will paste this if it it will be equal to this then our this new uh new product link will be appear now let me just go on here and refresh this page and when I was click on this icon see only display login now display the log uh new product uh first of all we login and go on the sign up here I will here first of all we upload our profile image yeah this one and here I give the Dynamic and here here I give the dynamic coating with Amid and email ID will be the dynamic coding with Amit and here password and here also confirm password and sign up see I successfully sign up after that here again I want to login and dynamic coding with a myth here I will give the password and login see login is successfully and here see our I logo like our profile image will be display here and here see this logout section is display and one more things this new product also display because this one I was assigned to the admin this email ID that's why and here we want to also display the name of the user below for that we come here and here uh this will be here and we can display a name will be here after this login we will display the first letter of this or we can display all user let me first check go on here and where is data is coming from user data after that I will go where is here I will give to user data Dot first name now let me just see here I will go Dynamic coding okay here display the dynamic coding and give the curly bracket the curly bracket is not displayed here outside it will be display here I will remove this curly bracket here yeah now see here the display the new product and name of the user have login yeah this one done and uh we go on the network if uh just log out and when I just go on the login section in here I write any another email ID then like a one two three and log in since C here it will login and here not display the add to new product like that now this one that let's go on the build make our own API for fetching all this data for that come here and here we can make a app Dot here we make a get API we can give the product here first of all I want to be the slash product and here I will give the callway function and inside this request dot response and yeah and let me just check send server is running data like that for the checking this API I want to go on the browser here just type localhost 8080 slash product see here coming the data now I want to the our this product all this product data for that the first of all I want to grab all this data from the this mongodb for that I will use the const data equal to product model dot find equal to this curly bracket yeah now this will return and two array yeah this one done now just copy this data and I want to send to the for that in the form of Education Dot stringify and inside this I just press this and now let me just go on the browser here refresh this see here giving the data modeling to array is not a function let me just see why these are happening um one by one okay here I use in that this will be the weird and here I will give the asynchronous function after that yeah now see it all this data is coming and one more things this data is not a formatted uh for that see this is a too much data very high amount of data because of we have saved image in the form of a base64 that's why like that is coming and total in the mongodb we have how much total we have a documentation approximately 58. that's why all these are coming it takes some time to load all this data now for that let me just go on the app.js file and here we can grab all this value here first of all we make a huge effect and after that inside use if a callback function yeah like that after that this if use effect run once okay here I want to T after that here we can give the instant immediate call function and here we can give the like that and here we can give the cost uh res is equal to response data like that after that we can give the Fetch and it will be the server for that we can give the process in the form of a template string dollar process Dot EnV slash what is the name of this let me just go server name just copy this and here I will go paste here after this is giving the Slash and it will be the product and it will be asynchronous function for that here I will give the async and here I will give the weight and after that I will give now I want to convert this in the form of a Json for that response data and here it will be the and res DOT first of all we give the weight after the res and Json format let me just console log this res ource data and here all this data is coming and let me just go here refresh this page right click inspect console and here yeah see all this data is coming 58 total data in the coming and now like that is coming first of all I want to convert data in the form of a Json stingify for that I can give the Json Dot stringify and inside we can send the data now again I will refresh this or we can just copy this here I can go here here I will paste this and close this take some time yeah server is running no problem yeah now see all this data is coming now uh this data is coming I want to set this data uh in the app.js where is this data I was getting now I want to set this data to to the Redux to manage all this data in every component for that go on the Redux folder and here I will create another file which will be the name will be the product slice dot Js and here first of all we import create slice from Redux toolkits that I will create uh export product export const product slice equal to create slice and it will be the in the firmware object and here I will give the name will be the product and slash after that we can give the initial value here top section we can give the initial date it will be array like that and after that I will go and here uh just give the initial State comma and reducers it will be object and here we can give the get set data equal to callback function here I will pass it to parameter State and action and here if some data is coming from the payload for that first of all we check data is coming or not console.log action and now I will give the export const uh set data equal to product slice dot actions and export default what is the name product slice dot produce reducer and after that I will go on the index.js here I will give the comma and product comma and I will first of all I want to import here I will give import and what is the name of this product slice enter here I will add the reducer because I was exported in the form of a here I was exported in the formula default then I can use here any name which you want to and just copy this here here I will go product equal to like that and now I will go on the home where is app.js where is here and first of all I want to import this function which I was here make just for that set data product I will give the name properly just copy this here I will paste and go on the app.js file here I will import and after that inside this here I give the const dispatch equal to use dispatch and here but the below I will give the dispatch and set data and inside this we can directly give the this response is coming from the server side just copy this here and here I will paste this and now let me just go on the here and refresh this page and once again yeah it will be coming little bit delay yeah now see in the product dot slice or here we got it this in the payload section all this data is coming uh for that payload section we can go you want to set data uh to our this initial state for that here I will give state Dot or we can give the state [Music] directly to this we can give array I spread action dot payload and after that we go on the App dot JS file where is here I will uh checking purpose const product data equal to use selector from react Redux after that in this pass a callback function state and state equal Dot and what is the name of this I was given in the Redux dot product yeah here I will give the state DOT product now just console log this product data now let me just go refresh this page and again take some time yeah data is coming this one and this one oh and yeah okay this app.js here I have printed the empty but I want to just cut this here and paste below this and now think in this time data is not set inside this for that Let me refresh again okay here data inside this is not set let me just go on the product slice and here I will create one object inside this we can give the product list and this will be the array and after that here state DOT product list yeah like that after that just go here and check yeah here now see where is header here also in this time this will be empty but why this app dot JS line number 23 let me just see app.js line number 23c this one is printed now and it will be contained this product list 50th now all this data we are getting now just [Music] first of all we are going on the making the home page our this home page for that all this data we getting where is home page here here uh let me just come and here first of all I will give the this class padding will be approximately to in the mobile version and in the desktop version it will be the uh fighting will be the four after that here I will create it due tag class name these two section this left and right and it will be the and this one here this left panel I will give the H2 and the fire state delivery in your home and in this home I will give the some different color for that your home I will give this color will be text color will be the oh red 500 let me just see yeah here it will be displayed like that or we can give some other color let me just see blue it will be not looking good we can go nine yeah like that and we can give the text uh size will be the Excel let me just see and not Excel we can give the here text size last name X will be the 2XL or we can give the 4XL and after that we can give the font will be bold and its size for the mobile version here and here I was at the class will be the fact Flex and here I want to add like a due tag for the images image one image two image three like that we have ADD in this this is our right section and this is our left section and after that this Flex yeah this will be done and I want to divide all this in the equal part for that here I will give the width will be 50 percent 1 by 2 and here also we can give the width one by two and it will be the one by two only when in the desktop version but in the mobile version that here I will give one by two yeah in the desktop version it will be one by two and if I go on the mobile version then it will simply for that correctly here I can do the empty and let me just check see in the day mobile version it will look like this and this yellow is uh blue color is not looking good we can change this color red and little bit seven yeah seven is okay or we can go with the six yeah this will okay now here I will little bit more for this is a desktop version phone uh mobile version font here you can see in the mobile version it will look like this yeah and in the top and bottom in the top section I think I want to include something let me just go here here I will include some card let me see in the our uh here we can go where is folder front end and SRC and assist some logo is may be available we have not for that we can just go on the Google and here we can just type like a delivery for the bike we can go bike yeah like that and you want to images bike icons and we choice this one right click copy image we go here here I will give the uh simple Duty I was even and inside this we can add a P tag and here give the bike delivery and after that I will add IMG SRC inside this we can give the image okay I was not copy the URL copy image address and here I will paste this after that self closing and this class name I will give the width will be approximately 5 height or we can give the height will be five now let me just see uh here you can see it will be coming a little bit more we can go seven yeah and both are in the single column for that here I will give you the flags and GAP will be three and after that I will give the this class name text will be esm little bit small and I get the BG select or VG red 400 and I will give this uh this is a very much I will also Define its width width will be 96 let me just see little bit more we can go 32 yeah 32 is perfect and after that this red color is not look good we can go some other color let me just go with the blue no no blue is also not looking we go to yeah now it will be we can give the padding from the X Direction to okay and I will give this 36 and item Center now so rounded full yeah like that and here I was this tax bike delivery I will share make this font bold and let me just see okay much more volt we can give the medium yeah and this text color will be also White or we can give the some other color like we can give the Slate nine and here I was given the background color H4 we can give the three hundred yeah like that it will be done and now I will increase this in the desktop version font for that here I will give the empty and text size will be 7 XL and yeah it will be 7xl in the desktop version and here see all these are uh not in between that no Gap is available for that this is left and right here I was in the empty here I will give the gap will be approximately four yeah like that and in top and bottom little bit space for that I will give the padding from y direction it will be three not here here I want to add but here also here I will give the two and here I will give the py 4 very soon heading yeah here py three yeah in between that space is coming yeah now this one done and here below this I will give the random text some description about this company for that I will give the P tag and use the random or that random paragraph for that I use the lorem here I think business is perfect I will paste this here and for for this and let me just go here and see here it will be display and yeah and in between them little bit space from the top and bottom for that padding it will be three and yeah this tax is very much big uh very much small little bit we can give the big for that I use the text will be base yeah text will be based and no problem and this will be covering a full width for that we can make like here for that I will give the this Max with Max equal to what is this w dot Max width equal to yes same MD a little bit more we can go LG yeah now it will be fine uh but it will not look good yeah this will be fine and below this I will add one button will be order now and this bottom design giving the first of all this text color text will be bold and BG background color will be I was given the same color to this or I will give the red 500 it will not look good we can go slit [Music] thing we read yeah and I will give the text will be white then and painting not a fully white little bit for that we can give a slit and 200 and padding will be two or we can give the padding from the X direction will be this and padding from y direction will be one yeah it can give four yeah now I will give the rounded EMD yeah like that and order now and yeah this part will done let's go on this right one here we will display the our card for that uh for that go on the component section and here I create a file home card dot JS and here rafc e and let me just import this home card to here let me just delete this and here I give the home card we just check here refresh here home card will display now I will go here and let me go on the home card or I can go here in the home here first of all I want to get the data const product data equal to use selector date state DOT product dot product okay let me just see here console.log product data let me just see right click inspect and go on the console here Let me refresh again in this time see if product uh yeah it will take some time for loading this data here see we got it all this data home.js here here and here we got this product let me just copy this here I will add this here now let me check again yeah boom.js and here we got it all this 58 data now in this we want to only display the four for that here const home product card and list equal to we can give the product dot slice 0 comma four just copy this here and here I will come here I will perform a map operation and here here and return this home card and one more things it takes some time to load this data for that it will give me error let me show you currently it will be see like that it will be currently not going but sometime it will give that's why I will here I will add like that if one data is available then it will be displayed like that now yeah see total four card is display and in this card we pass a image real dot image and we want to pass a name product name El dot name and price let me just see in the key name here we got it and we have a image name price equal to Eagle dot price and also we can add a category also here I will do the category El Dot category yeah this part will be done and and now I will go on the home card here will first of all this uh name image category and price here first of all we make one card this will be the first will be the due class name inside this we will first of all insert image here image and here I will give the class name its class will be here close this now let me just see image is coming yeah here you see this image is very much big and yeah these are coming we can just go here here we can give width will be approximately see I think I want to give 160. yeah 160 is perfect and after that I I think this apple is background color is not looking good for that weekend go home dot JS and here we can slice from one and after that we can go five now let me just see yeah all this vegetable and this one fruit rice and yeah all this unique value now we get I want to make all this in here for that in the home.js here I will make this one and here I will get the flex Flex wrap yeah and after that we can give Gap in between three and it will be not be similar for that we can give legs for Gap will be 4 or we can increase also home card and here I will give you the background color first of all this BG is late equal to 300 after that I will give the little bit padding padding will be two yeah a little bit more width here I will give the what will be this here W will be full and or I can give the height will be full here I will come here give the height 96 foreign here I give the width will be approximately 32. we can give 40 uh yeah for TV is perfect and yeah 40 is perfect no problem then we can go on the home here I give the fighting will be approximately 4 and it will be not coming in the center for that we can do the justify item Center it will be coming in the center and after that here this home card I will make all this background color will be border mounted for that rounded yeah and we can give this background color will be white and see okay and after that we can give the shadow because our some product background color is white that's why I was given and yeah it will be done and below this I will display the name three and here I will display the name will be little bit designed we give the font um semi Bolt it's a font color will be the phone X will be select 600 and tax will be Center tax alignment center and it's capitalized that yeah see now it will look good and I will below this I will give the category also and here little bit tax will be increase I will give the font will be LG and below this I will give the category it will be the category and this also class will be Center tax will be Center and it's text color will be a little bit similar and I will give this font or we can give the five yeah and it will be the medium font will be medium yeah uh okay it will be looking good and here see this bathroom is right this one will be uh in between that space is coming for that this image I can give the minimum height will be approximately it's I will give the 40. and it will be 100 pixel you can give the 200 150 yeah now see it will be all these attacks will be in a single row and yeah and below this I will display the price for that here p and here I use the price or I display the rupees symbol and price symbol rupees symbols copy this here here I will paste this and here I will use the span tag and here I will display the price yeah price will be also in the center for that I will give the last name text will be centered and it will be also bold and we can give the our this Rupee symbol in the red for that here I will use the fan tag and this Rupee symbol will be cut here I will paste here and here I will give the class name text will be we can give the red 500 and yeah it will be coming see now it will look good and yeah this one will be perfectly this part will be done now let's go on the next part this home section will be done here now below this I will display distribute tag very suppose here New View tag class name and one things I was not added here key name equal to PL dot ID let me just see el.id or something other underscore dot ID underscore Dash ID and see let me just check in the mobile version how it will be looking in the desktop version it will look like this and in the mobile version it will be look like this okay no problem it will be done and this tax is I think much more for that I will reduce this tax here I will go and reduce here let me just go on the mobile version yeah it will look like this now I will make a slider for that first of all here display the name here I will display the fresh vegetables where is vegetable is displayed here okay I want to just cut here and oh this will be I was given the flags outside this here see here it will display for x and I will just class name font will be bold and it's a text size will be to excel and text color will be the test slit 900 or we can give the seven eight and after that below this I will give the underline underline and it's or no need of handle and for now and below this I will display the card here tube last name inside this I will display the all this vegetable for that here I will in the components folder I will create another file which will be the card s card feature dot Js r a f c e and let me just import this card feature in home dot JS here uh card feature and let me just see yeah here it will do display and its height will be uh I will do later first of all here I will display the multiple all the feature product which has a category vegetable for that here I will filter first of all um home product card list vegetable after that here I will use the product dot filter and El equal to the El dot category will be equal to the vegetable vegetables and it will be coming in the form of a array let me just see console.log and home product card list right click inspect console okay here line number 11 it will give me the zero I think I was missed something let me just see uh okay I this is a widget table okay I was given the vegetables that's why Let me refresh again and yeah now it will reset and here we got a total 17 vegetables product then I can just copy this here here I will go this and this one dot map here and return of returning this one card feature just cut here here I will give this yeah now in this first of all we give the key El dot underscore ID after that we can give the name uh El dot name category El dot category and we can display the price El dot price yeah now one more things I was forwarded image real dot image now let me just go on the feature card and here I will extract this image name price category and here first of all I will display the image IMG due class name inside this I will add the image SRC like that here I will give the image and class name will be width will be full so here I will give the height height will be full and yeah after that here I will give the close this stack and here I will Define the height how much this card hide it will be a tip so let me just see how it will display here okay here it will be see it will be display here and it takes some time to load the data for that here we will display the some loading section for that uh if data is not load then here we will display where is corn home here it will take some time and for that I will display the here just random data for that const loading array it will be equal to the new array and it will be contained approximately I will give the 20 for now I will give the 4 and it will fill with the null and just copy this here here I will display and here I will use the ternary operator let me just change this okay if here data is not present then we can do if data is present then it will display this part otherwise play loading card for that here where is here I will go and loading card dot map El return home card let me see how it will display Let me refresh see it will display the okay price is also displaying for that um here where is phone card here I will display nothing if some data is available then also this will display otherwise not for that let me cut this here and make a curly bracket and name dollar Ampersand and paste this okay I will make a fragment tag inside this I will paste this and format this now see when I use refresh it will display like that but here here you can see when I use refresh see this width will be small for that with some fix some minimum width for that uh here I was fixed but uh let me just I think I want to just cut here this one and I will paste outside this and remove this tube which one Sim is okay I use this is your image one this one is a for the images for that here I will make another due tag last name or I can add here also minimum width will be approximately 150 pixel BSC yeah like that it will display and even between the text it will display the loading for that here I will give the loading and just copy this in the home here I will pass the props key El dot underscore ID is not present then no need of this only I directly I give the one more parameter I want to pass because it will be give the key error that's why index and here I will give the key index and loading equal to uh loading like that yeah let me refresh okay here not display the text okay let me just go on here and this loading here I will use the alternative operator instead of this and this name where is end this here here I will give the 1080 operator and it will be the P tag and this is between the loading Let me refresh see this loading is displayed but I want to make this text in the center for that uh here I was not given let me just queue here also until you can add any icon also for the loading here I will give the Flex Flex justify content Center item Center let me just see okay it will not be in the center for that I will give the height will be full Let me refresh again see it will be coming loading yeah now it will be perfectly done this one and now let's go here this card feature here where is card yeah here inside this here I will give the flags let me just see and here it will display now in the card feature I will first of all give the minimum width or that with only full and minimum width will be approximately I give the 280 pixel and 280 yeah 280 perfect and little bit this image ID more for that we can do the 24 and this background color also I give BG slate it will be 300 or I can give the white color and add a shadow yeah this PG white and it will be shadow uh in between them no Gap is available for that we can add a gap here here I will give the gap five yeah it will be perfect and Shadow is a little bit small we can increase this here I will give the shadow 2XL the height will be 28 yeah and its card will be fighting will be approximately four three little bit more we can give the four we can give p y equal to five p x will be 4. yeah now this Shadow is LG crop shadow yeah drop side is now good and let me remove the this shadow both are done yeah now it will be perfect and when I use however then this Shadow will be more for that we can give the hour effect see and our Point mouse cursor will be also change pointer yeah it will be done and here I will display the name for that here let me just copy from here I was make all this and just copy cut here and paste inside this here I will paste this let me just see okay it will display like that what I want to display here for that or we can display here also no problem and only one things I want to change this text alignment center I want to remove here also I want to remove and this name text alignment and yeah and this product will be in the center for that here I will give the Flex justify content Center items yeah just if I can items let me just see I was given the flags then I want to change the flex call and this item will be coming in the center for that here this image I will give the Flex Flex call justify contain Center item Center yeah see now every product is coming in the center and this card width will be much more I will reduce this it will be approximately 200 yeah and here yeah it will be perfectly fine now I will give this here I will add margin from top side it will be four margin from the top after that here I will add add to card button for that there is come here I will give the button and add card and it will be the giving the class name first of all background color I will give you the BG its background color is red 500. I want to give the yellow yeah yellow is perfect after that I will give the it will be two and yeah Emy will be one two yeah this smart because I was given somewhere yeah I will give them only top side and why this margin is coming little bit more let me reduce this margin then this is because I was given the padding that's why it will be coming uh I was where I was given the padding on this 200 minimum width and top side and here I was at the fourth margin from the top let me see why this space is coming here and now here you it will be gone only display in the desktop version check again here yeah here it will be coming yeah it will be also look good only little bit space from here I will give the margin from the top side it will be two yeah like that and it will be rounded from rounded yeah now see our product will be able but one thing is here remaining we have not able to slide this product like this types of a knot for that let me just here also little bit space for that home hashtags I will give the margin from the top bottom side will be two four yeah and here first of all I will add one more things here where is this one I will give the Overflow scroll yeah now see it will be coming now I want to make here two button for the sliding this here I will make here top section for that here I will just wrap this in another do here I will create new class name and inside this I will make a two button here I will add the icon for that let me just close all this tab and I will go on the react icons and previous I will I think this one just copy this here I paste this and next where is and this one is to just copy here here I will paste this make sure that you want to import this both from here I will come import this from react icons slash CR and there is one more next yeah now let me see okay very display here display but I want to display here for that here I will give the this one one class name Flex and here I will its width will be full and after that here I will give the margin from the left side will be Auto yeah it will be automatic learning and after that here one things I want to mention this item Center yeah it will be fully like that and now let me Design This here I give the class and uh first of all I will add the background color Maybe to 200 or 300 and however it will be BG slate will be 400 yeah like that and after that I will give the text size will be LG and in between that I want to give the space for that I give the gap for Gap will be not coming because I was not given the flats yeah now see after that I will give add in both of them padding will be two not two two one yeah and in the form of a rounded yeah now see it will be this button will done and when I was click then this will be slide for that uh here I use the Telvin plugin Telvin CSS scroll and here I will give the npm yeah this one and just copy this I will go here first of all I can go on the front end folder after that here I just install this plugin and here in the packet.json you can see uh Telvin scroll bar is done and now I want to this plugin I want to add the in the talvin dot config here I will tell me not config inside this I will paste this and now home here I will give the uh scroll bar none this is scrollable it not be displayed and we can just go on the here see we are in the mobile Legend we are able to slide this like that and now when I was click there then this will be slide for making this and see one thing I was forwarded I was this one is a loading is done and here below is not for that just copy this here I will paste again and I will here give the zero and if your data is coming then also this will be done here I will review the this one again I will give the card feature Let me refresh this okay it will display this one and this one we'll just copy this one and here I will give the feature and it will be that 10 just copy this and here I will perform a dot map El I will close this here I will cut this here here I will paste this let me just see if you press this okay it will display but here this is also display for that here I will pass one props loading loading just copy this loading and I will go on the card feature here I will give the comma and paste here and after that just given this and here let me here I will make a layer and this loading or I can view this loading if name is not it's mean that image is not available then we can perform this one let me just cut from here to here paste here like that and here I will give the P tag p and here I will pass the props loading see here loading is display but this height is not for that let me just cut here and here it make a due and here I will close this inside this I will paste this and after that here I will give the its minimum height will be 200 pixel let me just see again yeah it will be coming and 200 ish very much big we can give 150 and this tax will be displayed in the center for that here I will give the flags justify content center items Center Let me refresh and see here display the loading yeah now this part will be done and this is scrolling things is in remaining and I will do this first of all here top section I will make a two function uh nest product and this will be the Callback function and second one will be the previous product this will be the Callback function and let me just copy this function and I will give the first one will be the uh where I was given this button this one on click here and previous one product will be here on click on click here let me just come here and first of all this next one also I want to make here const slide product ref uge ref this one just copy this because I want to slide this element for that I want to targeting this container for that I use this user if I will give this user app to this container card feature here I will give them ref this one and after that here just copy this and give the current element and we can use the scroll left equal to Plus equal to approximately I give the 200 let me see it will be working or not uh yeah now when I just click OK it will not be scrolling why this will be not be scrolling let me just see here I was given product current scroll left let me see scroll left just copy this scroll left yeah let me just now check here you can see I will write like that scroll left plus and 20. like that I was given and after that see when I just click here see it will be scroll but it will be direct I want to make some little bit animation for that uh here I will come here this one and here I will give the uh what will be the smooth scroll is smooth yeah see it will be like that and transition I will also add transition all refresh this here see now it will be scrolling and this one done and one more things our left one also for that just copy this here iOS plus increment here I will do decrement Let me refresh again okay it will be scrolling and here it will be scrolling okay now this will be done and here see some protocol uh this name is very much big that's why it will be coming in there's two lines for that but we don't want to come any product in the two lines for that where in the card feature I will add this name here I will give the white space non-wrap and it will be now see this text will be overflow for stop this overflowing flowing for that here I will give the overflow hidden and if you go on the outside and for that I will go overflow on the this tax element or flow hidden yeah like that it will be done and we are able to slide this and also this one will be the mobile response you also like that see we are able to slide this we also slide like that also in the mode mobile version also it will be display no problem and yeah our this now bar is not a responsive let me also make this uh for that I will do this this part will this part will be done now let's make that this now was responsive header and here I will come this now bar will be not be displayed in the Mobile in the mobile version for that hidden and display in the desktop version for that I will give the flex and remove this Gap Flex now let me right click and here you can see now it will be not to be displaying yeah like that it will be done and here it will be not be displaying now inside this when I was click on this our menu then here display the all this menu for that just cut copy this here and I will I can copy this one all the stack here and I want to add where is here uh this one paste here and I will give here I will change the Flex and flex call now here let's check this see all this will be displayed here now I will make this why this will be happening in between then I want to add this padding character here I will give here I will add the class name and it will be padding from the X direction will be two and hiding from the y direction will be one and any other more no and this Gap is coming let me remove this Gap yeah now it will be fine we I will give the this minimum it's a little bit width for that I will give here here I will give the minimum width will be 120 pixel yeah like that and all these texts will be in the center for that I will give the text Center yeah but it will not be display all this in the desktop version for that here I will give the MD hidden like that and when I was go on the mobile version and here I will click see it will display all this menu login and home product yeah like that it will be done and now below this let me just do also disc below this display the all the product for that this is for this I will go below and here I will make a do and here I will give you the div tag last name after that here H1 let me just copy this H1 tag same and here I will display the that match Plus your product it will display here and here I want to add margin from the top and bottom five yeah it will be here and below this I want to display the all this product and for that here I will give the here uh user we have ability to filter their product for that do class name here I will do the display all this category and for that I will give this due last name here I will add icon filter icon for that I can give the filter here we can use the knife yeah I think yeah this one okay this product is okay for now let's go on the here I will add this and then let's I want to import this icon also for that here import from react icon slash CI this will be display here first of all I will do that this text will be LG 3XL yeah and yeah this will be done and I will give the padding will be three BG uh yellow five and after that I will give the adding little bit more we can give the five and after that I will give the rounded full and now I will just cut all this here and cut here and make a one component filter product dot Js okay dot JS I was not given GS and rafce here inside this I will paste this and format this and one more things I want to again import this icon further directly cut here and I will paste here and after that in the home here I was home and here I will give the filter product let me just see how it will display it will display like that but I want to add much more for that like this I will give the flex and after that I will give the gap two or I can give the Gap will be four yeah this four and below this I will display the name for that here we pass a name or we can pass a category like this will be the fruit I like that and I will go on here filter product and below this cut this here use the fragment tag and here I will give the P tag and here extract the category and here I will display this category and let me just see see okay here display uh for that I will convert this due in fragment tag in the video and now it will display here and I will give this uh what will be the class name text will be Center and the font will be bold say medium I think and after that this margin from the top and bottom it will be one and capitalize yeah like that and all this content will be in the center for that this home and this cap justify content will be Center yeah for that it will be done and here I will be category all this category list for that here const ant category list equal to the where is this product data and inside this I will first of all grab the all this category for that I will give the new uh and again I will use the set or I can give the set and here I will spread operator product data after that I will give the map here I will return the El equal to El dot category and let me just console log this which data is coming category list and right click on the inspect ERC total six item is coming but it will be f okay it will be fruits no yeah it will be printing the only fruits for that okay here I will give like that first of all I want to convert in the form of a array and yeah this one and now let me just see how about the output here now see here display the total uh list of the category now after that I will just copy this category and display below this category here I will come and here I will paste this Dot because it will take some time to display that's why and map El and here I will display the disc category just cut here here I will paste this return here will be the elf and now let me just delete all these things yeah now this will be deleted now let me just check on this my refresh this and data will be loading yeah now see here display the fruits vegetable rice cake Burger ice cream Dosa all these are now displaying and one things more I want to make this will be scrollable for that I want to give this overflow scroll overflow scroll and scroll bar will be hidden not be display like that when I was go on the mobile version see it will be coming but now here user will be able to scroll this one like that yeah now this one will be done and now below this I want to display the data according to that uh here this one and here I will display the data this will be container to display this here I will make a same exactly same card as this one for that I can directly use this feature card uh sorry I card feature for that first of all here I make one huge state uh I will make a here also filter data filter data display for that this play const ant filter by set filter by equal to is here I give the used state this will be the string inside this we insert the string I want to filter and for that inside this or when a user will click on the uh this icon then it will be filtered by this icon name and one things I want to make by default it will display the all this all the product for that I will you know need of this and again I want to make data data filter and set data filter which are a filter from this and display in all the data inside this and this will be the array and now I will here I will make a huge effect and here this and this will be set data here I will give the const data equal to or I can directly use the set data filter inside this call by function and it will be written array and inside this all this product will be coming this product is coming from here filter and here I will give the where is product data equal to dot filter here equal to El dot category is equal to the uh this filter by just copy this here here I will paste this and here I will make this to lower case because maybe some case it will be give the error lowercase this one also and this one also here I will give the DOT and this data I want to insert in this yeah here okay speed operator is here and when this filter by data will be changed then it will be run again this huge effect for that here I will give the added dependency and just copy this here and I will come here below this one here I will come okay from this and here I will use the map here yeah now here I will return this card feature where is card feature let me just give the card feature and first of all here here I will give the key name key will be the El dot underscore ID and image and image will be El dot image after that name of the product here I use the name El dot name and category El Dot what will be the category category category now let me just see okay here no product is displayed for now and it takes some time and here below this you see no product is displayed why I want to check because of it in the field data filter is no data is available and for that I will make a filter this category is not 40 and for the first time I want to directly insert all this data here for that first time we want to display all this data for that here display all this data and for that here we can make one here I will make one function const filter by and it will be the filter by hand or we can give the name handle filter product equal to like that and here inside this here in the parameter we got a category which we I want to filter this and after that I will just cut this here I will paste inside this and yeah this one and we can remove now this no need of this filter by this one and I will delete this one okay one things I want to yeah delete this and here filter by I will remove this category here I will give the category and after that this set data which I was where we set data okay I was also deleted let me back this here and this category again I will copy this here here I will paste this and yeah now when the this function is called with category name then this data will be filtered and for the first time I want to display all this data for that just copy this here here I will paste this and now let me see Let me refresh and check yeah for the first time all this data is not coming why yes data filter and go back to here and data filter is not coming why for that I can do here I will give the const or we can use the huge effect and here set this will be that empty data array and here just copy this here I will give this here I will give the filter product data and here I will give the empty array when this data filter data will be changed cut copy this here here I will paste this when fill this product data will be changed then this huge effect will be run now let me just see now see here it will display all this product now I want to where is here this card and here I will give the Flex now see all this item will be here and after that I will give the flags wrap and all this product will be go on the maximum price uh maximum width for that this card feature where is card feature card feature component and here I was given the only minimum width and not a maximum width for that here I will also give the max width will be also 200. yeah and after that I will all this component in the center for that here I will give the justify content will be Center and and in between them I will give the space or three or little bit four yeah now see and this card okay I was here little bit space for that card feature and here I was added the trading from the top side I want to add in the y direction yeah now see little bit space is coming here also and here display the all this product and when I was click on the any of this then this data will be filter for that I want to come here home and this card feature not a card feature this filter product I will add on click and inside this we call this filter method where is this handle filter just copy this here and I will come here it will be the arrow function and inside this and here I will pass this field uh I want to filter by like that and after that this on click just copy this here and go on the filter product here I want to make here on click and here I will pass a take a props on click yeah now see when I was let me also when I use all Mouse in any of this then our mouse cursor will be changed for that I want to also give the cursor pointer and now see when I just click on the fruit it will filter by fruit when I just click on the rice it will filter by rice dosa paneer yeah like that it will be automatically filtered yeah see it will be filtering now I want to make a in between them little bit gap for that here I will give the margin from the top and bottom it will be the four here it will be coming and here this no price is not displayed why okay I was not biased the price yield dot price now see here automatically all this product is display and yeah all this home page will be done and now one things is remaining when I just click on the this product then it will be go on the a Nesh product and display the all this product description and for that let me just come here and here I will make a one component this menu here will be it will be display all this component for that I will come where where in the root index.js file and here I will make a one after this menu I will give the one dynamic here I will give the after the menu I will add the filter by and yeah this one filter by it will be the menu component no component just copy this and come in the menu when I just go this menu component and here I will give the here I will give the for now let me just comment this for now I will comment this and here it will be giving the error no problem and filter I will slash this here I will give the some random text like that and or or we I can give yeah this one and I will go on the menu page where is menu here here I will use the const filter by equal to use first of all I will to get the value from this URL this here we pass a ID for that ID cost we want to get the ID product equal to use params here we pass a params and let me just check console.log params right click inspect go on the console here you can see we got a object and filter by and here I will give the params.filter by and let me see here display the one two three which I was entered here after this slash menu slash like here right random text and press enter now see I got it here like that I will filter all this data and for that uh by default I want to display some product for that just copy any of the product ID I will just copy the which product let me just go on the home page and see this will be the key third product this password here I will copy the this ID and by default I will set when I was click on the this menu when I was click on the menu then I will go on that for that let me just go on the header where is header and here I will change this slash this ID name and also here in the desktop version menu slash this ID and after that I will come let me just again click and refresh this page and click again see it will be giving this ID and now I will got this ID and here I will directly extract also make a destruct yeah now here uh also I want to import our data the const ant product data equal to use selector and here I will give the state dot product dot product list let me just see I was quoted this data or not product data let me just see right click inspect console refresh this and this data is printing or not yeah this menu section here that I will be printing now here I will filter const product display which product I want to display for that here I wiggle the filter product data dot filter El equal to El Dot underscore ID will be equal to the uh filter by this one and here display this data console.log product data let me just see refresh this page and it will be coming yeah here you can see one product is display here and here in the top section uh here I will make do class name and inside this I will display the our product for that first of all I give the this size will be fixed for that width will be full and Max width will be approximately at most 670 672 and for checking purpose let me just give the this background colors let between 400 and let me just see okay it will not display why random subtext yeah see this much bit and yeah this match a little bit more for that I will go 3x yeah like that it will be perfect and it will be come in the center for that margin Auto and yeah it will be coming and yeah here now I will let me just give a little bit more if I give the four yeah and in that first here maker to come a due tag for upload images and description and here I will give the image SRC and yeah like that here SRC section I will give the uh display data display data dot display data and here I will give the uh zero and after that display data dot image and here we will display the image and this image width will be approximately 1 by 2 and it will be the no problem I will give this shadow shadow and drop shadow yeah it will look like this or we can remove this shadow and I will give the little bit space from the top side also for that here I will add the padding padding equal to 2 in the mobile version in the desktop version it will be padding will be four yeah like that and I think I want to add not here I will add here yeah now whereas our Mouse will be here then this product will be a little bit scale for that here I will give the class and here I will add the scale 105. but when I was hovered then for that see when I ask that this product will be uploaded giving me little bit art and here I will add the Overflow hidden now see this product will be coming but this will be suddenly coming we give the TV day duration for that transition all see it will be coming in the slow motion yeah this will be done and here I will display the all this product detail first of all I will display the product name I will just copy from multiple place I was uses from here this price detail just copy this here and go on the menu here I will paste this and here I will display the image no problem here I will display the like that copy and here I will display the category and here I will display the price okay all this will be displayed here no problem and after that here I was not at the flex yeah Flex will be done and now here I will increase the size of this text will be Excel a little bit more we can give two Excel in the mobile version it will be look like this and let me just see in the mobile version it will be looking in the mobile version not it will be the flags like that see in the mobile Vision it will be look like this and here I was given this let me remove this yeah now in the mobile version it will be like that and all this product in the all the stacks in the left side for that let me remove the text alignment Center yeah now it will look like this and below this display the tool name below this display the product and do I will copy the button where I just use this card feature card and this button let me just copy this and here I was not added the however effect also see whenever this color will be not be changed for that however I will give the BG yellow and it will be the six yeah now it will be coming just copy this one and come in the menu component and after that here I will make another dude tag and inside this we paste make a copy one which the will be the Buy and another will add to cart and this will be the flags and it will be the Gap will be three now let me just go on the menu here you can see it will be display and this see this image will be go much more bigger for that this one here this tube tag I will add the max width will be 1 by 2. okay this Max width will be 340 I think I want to give the match width will be Max width will be empty yeah now it will be perfectly here display the this product and here name and let me remove this background color for that here I will give the this background color and here this will be in the this will be display the bag uh Shadow that's why it will not be look good I will remove this shadow and yeah and this background color also I want to give the white or that BG White yeah now it will be look good both of them and in between them I want to make attacks let me give the text will be in the MD this in the desktop version this text color will tag size will be the 4XL yeah 4XL and this category also little bit font size is also increase for that I will give the tax size will be the 2XL and this price also and this price will be I will give the MD tags will be the to excel and this here I was not giving the padding both of them I want to add test alt and click here adding from the X direction will be the three padding from the y direction will be the two like that or I will add [Music] four five or I can give the one more things I can add the minimum width will be approximately 100 pixel like that and after that I will give the yeah this will be perfect and this top and bottom in between that little bit space is coming for that I will add a space here I will give the flex and flex call and after that I will give the Gap will be two one yeah one way perfect and below this display the description for that uh here is a button after that I will dish description and here I will get the p and here this clip Sun here I was give the p and inside this I will give the this product display description now let me just see okay it will not be able to display right click let me check check the key name which one and this description and now see it will do display and I will make this heading and class text will be slit see also we can get a 500 6 and font will be medium yeah now see this product will be done when I just click on the any of this product it will be redirect to the here here for that I want to change all this card and uh for that first of all I want to go on the this card feature here I will add link here I will add the link and and also import from the react router Dom also here I give the two and just cut this here just cut here and go bottom section here I will and inside this I will give the uh first of all why this error is coming let me cut here here I will paste this or why this error is coming okay inside the image okay let me just cut this here and I will paste inside this here and format this now here first of all I will give you the menu and here first I use the template string menu slash and dollar after that here I will give the ID and I will grab this ID from here card feature let me just go here where I was using the cut feature first of all I will give the card feature here I will give the ID equal to El dot underscore ID and anywhere I watch you just cut feature here also I will give this and now let me just see I will go on the home page and here see this will be all this oh all this feature will be disturbed this card will be disturbed for that card feature and I was given here here we give the very button here and here I will add width is equal to full now let me just see now see our card item take a full width and when I just click on the any of this card see when I was click on here see here okay this image is too much big for that here I was given the height will be to 28 height will be full and it will be IQ the 28 we can give this let me just see when I just go okay this height will be and here I was here in the class height will be full or I can hear hide given I can give here also and this will be okay this will be the okay okay this will be the menu icon it's mean this this one height okay let me reverse this I want to change on the this menu one for that like here this height for that I want to go on the menu and here uh I was not given the for that height will be full and here I will give the height Max height will be uh Max height will be approximately I think I will do Max height will be 300 let me just see or I can give instead of height I can give the width will be we can give the width will be full and its Max width will be that okay it's with here I can add a padding it will be approximately five and here I can give the max height will be the naughty LG it will be um this one yeah this one is perfect and below this display the some more product for that display mode product for that I want to separate varies in the home component card feature yeah this one I want to yeah from here to here I want to make another component for that your product for that I want to uh in the component folder I will create for a new file its name is what I want to give all product dot Js and rafce and here I can first of all very very in the home section I will cut from here all this content and go on the all product and here I will paste this and see which things I want to require first of all this filter product and makes here see this will be imported and this card feature yeah now I want to just go on the home page and here I want to first of all this data for all that let me just copy this this data and here I will paste I want to import this you selector and category list for that go here and where is category list here let me just cut this here and here I will paste this and yeah category list will be gone and next part will be the data filter okay home data filter okay this is these both are not huge and for that I can directly just cut here and here I will come here I will paste this and huge effect import and use state and yeah everything is fine yeah everything is running and now I will do one thing just here come and here below this I will I will be import all product yeah like that and now I will go on the home page and here see all this product will be displayed here and yeah here it will be gone and go below this when I just click here it will be go display all this content will be Center and for that here also related product for that here I will go and in here I will pass props heading and just copy this heading I will give heading here copy your product here and go on the home here I will give the props heading and here pass a props your product like that it will display here your product and I when I was click on any of this card then here also I want to display like that for that I want to go on the menu section and here um where is all these are close here not yeah here all things are will close after that here I will import all product and heading I will give the related product and now here I will just save this and now see here also it will be display the product and one more things yeah it will be going about this uh it will go about this for that I will go on the um where is menu card feature and here I was useless and on let me just see okay it will be working and here I will click see it will be not go up for that here I will be add on click on click on click after that it will be go window dot scroll scroll window Dot scroll here window dot scroll and here I give the top will be 0 and behavior we can give the smooth yeah now let me just see here I will go and when I just click on the any of the products see when I script ice cream yeah see here it will be displayed ice cream here I will click yeah it will be working when I just click on the any of these products see it will be come here and one things uh when I was click on this heading this top card this one this card then it will be not go any of the um here this page for that I will go on the home card and here I want to also get the ID and I think I want to do one thing just copy here and home card I will paste [Music] um here also and here I will close this and also I want to import this link from the react router Dot yeah see and now let me just check again okay it will display but it will not go it will be undefined for that I want to also receive the ID for that I want to go home any here card feature Home card feature where is here I want to give the ID El dot underscore ID now let me just check again when I click OK it will be working see it will be fine working now uh all this product are done and our home page will be ready like that and our menu also page will be ready now let's go on the making the add all this product to the our this card and for that let me just go here and where is card okay I was not created the card product before that I want to close all this folder file folder which open here uh and also I will close on the here also and mongodb is not required for now now let's create a card section and it will go down and here in the page page I will create a uh contact about login and sign up okay card is not I will create a card dot Js rafce and after that I will go on the uh where we are in index.js file here and here I will make a card and here I will give the component will be the card and make sure that here import it after that I will go on the header section where is component header and here I was this card yeah this card I will here make a link to and give the card after that I will just save like that and just cut here I will add after this due tag and make format this yeah now let me and check again yeah all this product are done and when I was click on the card see it will be go on the card page but one thing is remaining here see when I refresh this page then here this top section will all this product will be loading but here in the bottom section it will be not be displaying uh for this displaying uh here I also make like that loading one and for that all product and here all products I want to make if here I want to turn this in the form of Eternity operator and here I want to also make if this product is not available then here I will copy I think I wish created somewhere yeah here just copy all this here and come here I will paste here and format this and loading is not coming here I will take a parameter or I can do one thing I can directly here just type loading like that just copy this here I will like that I want to hear also uh in this one and this one let me just see first okay here display the only loading not all this for that I think I want to do in the filter I will do here I can make a okay here display the loading only for that this card feature card feature like that I want to make on the home section here this home card after that like that I want to just copy this section and I will implement this one for where where here and here I will make a ternary operator paste here and I want to make a data if some data is available here then yeah like that and this loading array feature okay I want to go top section loading array feature yeah this one just copy this and here all product and here I will paste this and why this error is coming okay and now format this I will give the next line now let me just check again when I refresh see here display the loading and here also all this card will be display loading yeah now if this are working and this card now let's make our card section uh when I was click to this add card then okay when I was click on the add card also it will be go on the here but I don't want to like that for that here I just make go on the card feature card feature and here I was okay here I use only click this heading one for that here I will create one uh const handle add card product like that here I make one function and this function I will get the ID yeah ID I will get or I will get yeah inside this I will get the ID after that I will go this ID I will get and after that I will this function just copy this here and where is add to cart here on click this function you will call and here it will be give the ID and here it will be like that and here I can give the e instead of this ID I can directly give the e and no need of this and here I will give the e dot stop stroke Focus like that when I was click on the any of the product it will be go here I will click on the add to cart then it will go here for this install stop this bubbling this is one type of bubble for that I want to just here I will just stop propagation in JavaScript for that let's copy this here and I will paste here when I just click okay here I was click then it will be go for that here I was link and I want to make this button outside this here I I think I want to queue and let's refresh this and now see okay when I click add card it will not go when I just click on this product then it will go yeah now these are done okay it will be working fine like that I want to all the product inside this card and here will you display and this card section here I will give the first fall heading H2 oh your card s your card items like that and here it will display let me just give the text will be LG and font will be bold and text color will be the Slate 500 . or we can use it and yeah and it will be seven six yeah six will be perfect and before that I've only here at the padding to uh in the mobile version in the desktop version I will give the padding for like that yeah and this will be the size in the mobile version LG and it will be Excel in text size will be Excel 2 XL yeah now it will be done and here below this here display the all the product and here display the list of the item uh calculation for that here I will make a due last name and here what will be the due class name and here display the it will be the your display card items here display the card item and make the command and in here display the let me just give class and here I will close total card item here display the total card item quantity and all these things first of all here uh I want to insert when I was click on this add card item then this product will be inserted on the one of the array and here this this number will be also increase and for that let me just go on the Redux and where is Redux Redux folder in the product section and here I will give uh here add card items after that here and also we make a delete card items yeah here I was in the product list and here I will add the card item equal to one array a card item in the form of a array and yeah and here I will make a state call to action here also I will give the state action yeah this done and I want to export this both of this function here I will give the function and delete also yeah now for adding this I want to ID for that console.log xn and here it will display the ID for that when anyone any user will click on the this add character then this method will be fire for that I will go on the here card item and here card item here I want to add first of all I want to import const import add card item from the product slide and also yeah it will be done and here I want to use const ant dispatch equal to huge dispatcher use dispatcher after that here I will give the dispatch and inside this add card item inside this we can pass ID this ID is coming from here like that now let me just come and click here and open this console this console and why these are happening here give the list props okay I think I somewhere not given where first of all I want to give warning where is line number in the home section line number 87 okay foreign page and where is line number 87 87 87 87 here here I was given the um and for that here I was given the 81 here I was given the ID no problem here also I was given here also here I was not given the key let me just give the index and one more things where here also it will be 87 here I was given key name is given then here I will add loading and it will be coming at t7 then here here it will be done here it will be done and card feature this key I was given no problem and here I will add the what will be there wedgie tables and let me see and where is here I want to add card loading all product okay all product here all product section let me just go on the all product and here I was given this okay here loading section I want to pass one more parameter index and here I will give the key index yeah now in this time no error but here it will give you the error will be the key will be props each style will be unique for that here I will add the all product any error is coming it will be coming where all click the render Method All product and it will be coming filter cart okay here also coming I will give the key and here El Dot or I can give the direct category and now where is coming react does not recognize the data name props where I was uses in the ssbc icon KCI fog and knife where are you uses filter product okay filter product here data name where I was uses data name okay it will be the some issue with this Library that's why no problem now here uh however this will be done now let me just right click inspect console and when I just click on the add card okay no event will be fire about that when I use click then here okay console.log [Music] why these are not happening let me just check the alert if I was clicking or not here I just click no no not happening here okay here add when I click the add card then no event will be fired and I think this event propagation here I will remove this yeah now it will be firing and I will let me just see in the console okay here in the payload section you can see we got this ID now here in the wherever Redux here let's go on the uh where are yours go card item and here I was sending only ID now I want to send all this data like first of all I want to send underscore ID and this will be the ID and name and price and second one will be the category and this will be category yeah this much and image also image image now I will send all let me just click once more and here you can see in the payload section we got category image name and price all this we are getting now after that I want to add this product in this one of the array which I was created in Redux varies Redux folder here product list and here this one card item now I want to add this for that state state Dot card item after that I will give the state DOT card item H equal to the dead Dot card item here I want to split this after that here I will give the comma and again create one object and this action again I want to split the action dot payload and after that I will give comma again I will add the qty quantity equal to quantity will be 1 and total total value total will be for now I want to equal to the total will be now let me just create a total here const and here I will give the total equal to total equal to xn dot payload dot price first time it will be equal to the total this price of this item for that I can directly add this total and it will be total like that and it will be added to this and now for checking purpose and it will be coming and I will go on the card and here I want to const product data product card items equal to the use selector and here I will give this state state DOT product Dot card now what is the name will be I want to check in the product list it will be the card item here I will paste this and let me just console DOT log product card item now here let me just check when I click on the add card item here see inside the payload okay it will come Let me refresh again I will run this yeah now I will click on the add kite item and yeah it will be only printed this one and why it will be not first of all I want to the all this console just close this for that uh this one is a header.js line number 23 edit.js line number 23 here let me just remove this and second one will be the home 12 18. home page and line number 12 and 18. 12 and 18 and another live product slice line number 13. product slice line number 13. okay it will be okay Light number 13. this one line number 13 is here let me remove this and after that yeah it will be much more done when I just click on the add item okay it will go and here card will be printed and okay when I just go on the card then here it will be printed the one product will be available in the array and let me just add one more when I just click this and go on the card item and let me just see here two product like that it product will be added Here and Now I want to here also display the number and for that go on the header and here top section I will give the const card item number equal to the use selector and he stayed equal to state dot product Dot card item once again I will check this yeah card item array and I wanted to go here I will paste and here just card item after that I will go where here it will be display zero I will make this and length now see Let me refresh this now see when I click the card yeah here it will be inserted and why this alert will be coming let me just off this and where I was given this alert here card item will be not card feature yeah here I now let me just see refresh again now see when I click the add card he has c number in increases like this C product will be added inside this and here also we can click and when I just click on the here and here I was not given here see this product are added inside this and here I want to also display this product and one more things I was missing when I was click on the C uh here add item then also this item will be added here for that let me just copy this this function and I will go on the menu where is menu menu page here and here I will give the let me just expand this and here this description here is a button I can do here yeah now here I will like don't don't like that for that I can directly give uh here I will just like this and just copy the product display this one and here paste this and after that I will just import dispatch here const ant dispatch is equal to huge dispatch and also this add kite add card item from the Redux product slide yeah this one done and let me just see when I click add item okay let me refresh this let me just go back and click add item it will be coming and when I just go click on the product here click okay now it will not be added okay I was not calling this function here where is this one on click yeah now let me just see when I just click see this item is added here now this part will be done and this car item will be added inside this here all this product will be added now I want to display here for that let me just come here and card item where is card card and where is card yeah card page and here I want to display here cart all this card and okay for that here I will come and display make a one two due and class I will give the first of all I want to display the image and image SRC and here I will give like that or I can do like here not here I say first of all I want to create one component uh card height card product dot JS here this is a card product and this is a card product make sure that rafce and now I will go on the card and here I will first of all this product will be added inside this and let me just check okay here see this all this product will be displayed no problem just copy this here before that I will give like that here uh it will be like that and here map operation here and return after that I want to import card item what is this card product card product once again I want to check okay small okay cart product but C is small then I want to make it will be big this one is small and this one will be big and this just copy this here here I will paste this and after that I will go on the card and here I will give this card product yeah now it will be display and let me just see uh where it will be displayed here in this time no product is available that's why let me add this product and here I will go here see okay here I want to display all this card and I want to first of all here data here I will give the key name PL Dot underscore ID and after that I will give the data equal to I give the image let me make a new line and then in the new line here first of all we send a name product name after that images product images here dot image and after that product category and it will be the category category El Dot category and also quantity is also added here when we add the any product inside the our card then here also one things I will added the quantity qty like that and for that I will go I show you here in the card item in this time for item is available let me just expand this and here you can see this quantity is one and the total price is 40 like that and for that I will also send a reach card product here I will change the qty equal to El Dot El dot q t y and after that total El Dot total yeah now all this product will be sent to the our this card product component where is cart a card product component here and here I will give this I want to extract all this value first of all ID and let me just see our ID will be sent how okay I was not sent let me just send the ID l dot underscore ID now here I will go ID name image category after that QT quantity total and anything small and we can yeah only that much name and price also one things I was forwarded price I was sending or not let me just see uh price I was not sending let me just send this price El dot price after that I will go on the card up product and here I will make a design first of all here I will display the image here this class name I will give the BG slat it will be 200 and here I will add the padding will be two by default and yeah let me just see it will be taking the full width but don't worry I will reduce this and after that here I will add the image and here I will add the image first and let me just close this see the images yeah image is very much big we can reduce this here I will give the height will be full and which will be also full object cover or instead of this I can directly use the height will be approximately 112 and with also same now let me just check a little bit bit will be more we can give the 32 yeah and yeah now okay this will be fine and now I will yeah this will be fine and I think I want to little bit more 30th six 36 will be also fine and after that I give the BG White and padding here I will give the three and after that I will give the or here I will give the padding here padding will be three and let me remove first of all this background color here I was given the padding will be three here I can give BG White and here I will give the flex and after that I will give you the this will be the rounded overflow hidden yeah now yeah this will be done and this taking of most weird and let me first fall after that here display the name and all this for that I will go on the menu section and just copy as it is like in the here menu it will display the this name and all this yes I will copy from here to here just cut this here and I will copy sorry here I will copy and go on the card uh card product and here I will paste this and after that here I will display the name category and after that price and handle product instance also I want to remove this for now and product display where is okay description also I want to remove this and let me just go on the card and see okay this buy and this one will display now I want to first of all decrease the size of this name here I will give the this will be two yeah two will be perfect or we can give the Excel yeah Excel will perfect and it will be LG in the mobile version and this category category also I want to reduce this let me just give the best size and this price also given the price size will be font to itself text base and after that this two button I will give the button will be ah in between that this button I want to convert this both button in the form of a increment and decrement and here I can give the I think 200 is perfect oh no no 300. yeah 300 is perfect now here when I was hover then it will be slate 400 here here also I want to convert slate 400 okay and now here I will change this will be plus and here I will give this minus and now I will increase this stack size text will be to excel let me just see instead of using this I can use the icon also let me just go the react icon before that I will close this tab react icons and here I will search Plus and I will just copy the this plus one and here I will come and also I want to minus let me just give and where is copy TI TV and here I will give like that I want to also import this both of icon for that I want to go on the top and here import uh TB plus and what is the second minus name TV minus from react icons slash TV now let me just check refresh this page and I want to go here taking some time to load this product yeah now it will be coming and after that let me add the product in the card see here I was added all this card and this width I was given the 100 pixel that's why and I will remove this minimum width here and here and instead of this I will give the padding yeah like that and in between that I want to display the quantity for that I will use the P tag and here I will give the q t y and q2i will be 1 but it will be said not display the center for that item Center and yeah after that here I will give the class font will be uh semi let me just give the semi Bolt yeah and this will be okay here I will add the padding also and now I when I was click on the in first of all give the space in between them for that here and here I will give the gap will be three four yeah four will be perfect after that I will give the uh where I want to go in the card item and here I will give this width will be full and after that Max width will be LG once again Max W will be LG and a little bit more 2XL 3XL I think perfect yeah here this one and in between that little bit space for that I will go here and here I will give margin or here I directly give the year margin from the top and bottom it will be the approximately four yeah now it will be perfect and this card is not looking good for that here I will give the round date yeah it will round it and here I will add the powder also border and Border will be two and it's border color border that will be 300 let me just see if I give the directly one border then yeah like that it will be perfectly okay and now I will make a increment and decrement this product and here it will be displayed the total price for that total price will be displayed here and let me first format this and total price I want to display for that here I will create a due tag and this tube tag I want to wrap all this one here and let's format again and here I will create a new class name I will add later here I will give the uh P tag and it will be the total and after that here I will give this uh another P tag and this here I will give the total and here it will display the total and here I will get the flags Flex justify contain space between and it s width will be full uh why these are not happening I can give the let me just give the background color for checking okay it will be only covered this much height for that covering the whole width for uh here I will show it the width will be full and I will increase the size of this width will be 36 instead of chalice 40. yeah now it will be perfectly and after that I will give this it will be in the single line Flex and item Center and in between that I will give the gap to and font will be bold and now I will remove this background color yes see yeah and font will be bold will be not look good I will change the color and here I will give the text color will be sled and seven yeah now it will be good and when I was click on this then its total value will also increases and also decreases for that I want to go here in the product section here I will make a const or I can do go on the here where where inside the Redux in the product slide here I was created add item delete item and also okay I was forget it delete one here I will add the icon delete and let me add this delete copy this and I will add card item okay delete will be added here this name I will give this here let's import this icon import from react icons slash AI now let me just see where is display here I want to display here for that um just cut here or I can do here where I will add cut here and here I will make a span pack or due tag class name I will give you later and here just make this here I will give the margin left side will be Auto now see it will be coming here and I will give this absolute okay now I will give the full okay State our absolute this is a space is creating for that this space is not created for that I will make here another due tag do last name just cut here and I will paste here format this after that here I will give the flex just if I contain space between and here I will remove this now see it will be coming here and here I will run the cursor cursor pointer now let me just see yeah now when I use how Mouse here then this cursor will be changed and I will give the text color will be slate it will be the 500 okay or we can give the seven and when I was hover then this text color will be converted in the form of a red color see yeah this color will be changing yeah now this will be done and when I was click then this product will be deleted and for that I will go on the reader uh where Redux folder varies here and here I will this delete item and here I will just export this delete one here I was already exported and one more things I want to also increase the our quantity for that increase increase qty and here I will give the St age action and arrow function after that I want to also decrease this quantity decrease qty and here I will give the state DOT comma action and this will be the arrow function yeah like that I want to export this increase one here and decrease one now let me just go on the card for implement this U delete concept where is card product after that here I want to first of all const and dispatch equal to huge dispatch after that here I will to import now like that delete card item from the product slide after that just copy this and this dispatch I will go where is delete one here I will give the on click on click on click after that here I will give the Arrow function you and dispatch after the inside this delete card item and inside this card item I will pass the ID this ID I will got from here this ID and yeah I will send this ID and here I will send the ID and after that here I receive the ID where is Redux folder here and let me just console.log xn dot payload now let me first of all yeah console.log and first of all I will add the item now see three item is added and when I just click delete right click inspect and here go on the console here see we got ID and like that when I was click on the delete then here also display the notification this item is deleted and for that here I will use the toast from react hot tools and here I will give the one item deleted like this it will be give the some notification in the top section yeah click add see when I click here see one item it did here but it will be not deleted no problem now go on the Redux folder and product item base Redux product item and here I will first of all cost here first of all I want to find the index of the inside this card item for that I will here use the product const index equal to the state state DOT card item dot index of equal to the index of equal to the what is the name only I want to park is the xn dot payload and here let me just console.log index now see let me just come here again let me just add this and here open the inspect console see when I click on the delete it will be given the minus okay why this will be giving the minus because minus it's mean that this item is not available and for that here item incense I was using directly I will give the instead of using like that we can use why this error is coming here we can use the uh find index let me just use find index after that here I will give the Callback function El and here I will give the El dot ID here dot underscore ID equal to the xn Dot payload yeah like that by this already will coming equal to like that and here it will be printing the index let me just check again yeah add item go here and click on the delete one item deleted it will be zero yeah it will be also here this is this both are same product that's why here coming a zero and here you can see it will be giving the answer yeah like that two three all this index we got and now I will delete this product for that Redux and I will go here and here I will give you the date Dot card item and here I will give the splice method and here I will first of all give the index and second will be the how much element I want to display it after this index here I want to 1 and now let me just go again and here I will add the product once again this data is loading okay now it data is done and when I click on the delete see this product will be deleted like that yeah now this product deleted now just click click click click and here now I want to make a to increment and decrement this quantity for that first of all like that I want to also find the index for that let me just copy here and here after after that here uh again I want to this quantity will here display here I will got the index and after that this index I will give the um state Dot card item and after that I will give you the state DOT card item and here I will give the index Dot Q t y here first of all I want to get this quantity qty country first of all I get this quantity after that I will again yes state DOT card item dot index I will state DOT card item dot index again I will be qty and here I will give the plus increment qty uh yeah pre-increment is that instant that the quantity will be increment then inserted inside this now let me just see let me add the product and okay here I was not to use this increment let me just set up this for that I will go on the card feature and here uh I want to import increment quantity and just copy this I will go here uh where is this is not not here I want to go on the cart very Scott yeah here I will import increase quantity and decrease quantity and just copy this and where is on click here I will Fast dispatch and dispatch after that inside this increment and here I will pass the ID let me just see this ID yeah this is ID the increment ID and here I will pass dispatch decrement and underscore ID now let me just see where I click maybe some error is coming let me just see assignment to const variable okay let me just see okay here I was given the cons that's why I will give the let now again I will add this product yeah this product will be added and here when I just click OK this product will be see increment will be done and decrement will be not be done for that let me just also give first of all I want to also got this all things are same just copy here and here I will paste this and here instead of increment here I will give the decrement and now let me just show you again add a product and here take see it will be decrement also minus zero increment and decrement now both are working but here I think one things is remain if q t y is greater than one then also this decrement perform decrement will be done otherwise not here let me just cut this here I will paste because quantity never go negative that's why and why this error is coming um okay here I want to make one curly bracket more let me add the product and yeah and yeah now okay this both products are same that's one which also added we will do later don't no problem see it will in this time only one product that's why and here see if your increment will be done and yeah decrement and increment both are done and this double double inserted for that uh here this card [Music] first of all I want to check this item is available in our uh this card item this card item or not for that here I will give the for that I want to check on just copy or you can use the same thing indexing concept just copy this and here I will go on the top section also like that and let me remove this console.log here also here also and anywhere no and here first of all if this will be coming at zero no because index may be zero that's why this concept will be not be working and here I believe for that here I will do just let me remove this and here const you will first of all check this item is available for not uh here I give the check and if I will give the state DOT card item dot sum and El dot equal to El underscore it will be equal to the action dot payload dot underscore ID let me just see console.log and after that I will give the check let me just go and here el.id okay here I will give the ID Dot now let me just go okay this page is loading and now see when I just click here see it will be given the first time item will be not available then it will give you the false and when this item is available then it will give that true like that true true when I double click then it will be giving the true like that for if uh check here I give the toast uh already item in cart if not here I get the else and inside the else let me just cut this here like that and yeah now this here and in the else condition I will give the toast and here one item added success fully item added says fully yeah uh yeah let me just check like that when I ask click add item see item I did successfully automated successfully and when I was killing which item is already available like this item is already available in the card then I can click this yes already item in card like that and here see this I number is not increasing yeah now this part will be done and here uh this pattern done and delete will be done now I want to make this increment uh see when I was increased the product then this total quantity is not increasing for that I want to go here increment and here also I want to give the const ant total equal to State DOT card item after that here I will give the index and here I will give that total and after that I will give or I can give the here find the price and after that here I will give the price and here I can create another variable cost total equal to price into uh okay this q1 increment is here instead of this we can give the quantity increase equal to and this one I will give here here and after that's paste here copy this here and here I will give after that again state DOT card item is equal to index equal to total and equal to the total like this now let me just check again go on here and add item item added successfully and let me just go here and here I will increase this quantity will be increases and whenever you decrease it will be not but increment is done for like that I want to also decrement for that let me just copy this part from here and I will go here and paste this here after that this quantity just copy this here and I will paste uh here or not yeah and this keyword and here I will make this decrement decrement and just copy this here here I will paste this and also here now let me just check again I will go item edit and here I will increment this product and here decrement see it will be working and here I will I want to add the symbol of rupees for that card item and here I was not adding the rupees symbol let me add this and I will copy the Rupee symbol here and here here just copy this and I will come here I will paste this now let's see the rupees symbol is added and here I will display the total all this product here for that let me just go on the card section and here this product card item is here and here I will make first of all S2 and it will be the summary let me just see where it will display here but I will want to display this here I will give the flex yeah and between the Gap will be the three and after that I will give this width will be full and Max width will be SM for checking purpose Max W with VSM and BG select for 500 let me just check I like that and I will give the margin from the left side for that I will give the margin from the left will be Auto yeah like that this will be the MD no problem and after that here uh first of all this heading I will give the class and this background color um I will give the blue and 500 text color will be white and padding will be one two and text size will be LG yeah now below this I will display the total price total quantity qty and here I will give this div tag and here I will paste this and here I will make another P tag here I will display the total price and one more things I want to display it total price here I will display the total quantity here I want to display the total price and like that here first of all I'll give the randomly okay and remove this background color okay now I want to give uh this one here I will give the BG not BG Flex and full width will be full and after that I will give the class margin ml Auto and C yeah like that just copy this or we can give the one more things width will be approxly 56 32 yeah like that here display and after that I will also add the padding py will be 2. not here I will add here py will be to and text size will be LG now here I will give the font will be bold this will be done like that and here I will give the and below this I will add a border for that border B yeah this one done and after that let me just copy the same things here I will add here and here yeah like that here display and here I want to display the price symbol for that all product and price symbol here let me just copy this card item here I will display the price symbol yeah like this and yeah and here uh I will make up one button for the payment Okay Main and giving the class and it will be the BG red 500 width will be full and text will be LG yeah and font will be bold padding y direction will be two and text will be white yeah like that and yeah done and here I want to display the this total quantity and price for that here I will make a const total price total price equal to product item dot field dot map or we can use the reduce accumulator current equal to the accumulator Plus current dot total and it will be given the zero and this total accumulator will be in the form of a listing format for that I want to convert parts int yeah and let me just copy this total and here I want to display this and here you can see 970 it will be the total and will remain see it will be increasing okay and this quantity also for that here I will go const total qty equal to I will all these are same and here I will paste this and here I will change the only qty and just copy this total quantity and here I will uh where here I will paste this now see now here all things are done now this part will be done and one things more if our let me just start from the here here you can see when I was go on the this card section then here also display this all this one and for that if card is empty then here display the Cardinal for that uh I want to go on the card and here uh here I will make a fragment tag this fragment tag I will wrap all this component all this here and let's format this and after that here I will give the directly just and here also I will curly bracket and if any element is available uh or I can do your card is uh I think I want to you here if and this will be where it will be close it will be closed here then I can remove here I will paste inside here and no now here uh when any element is available in the this card item then it will be display otherwise not for that here I will give the zero and here give the ampers enter now let me just so see your card and here give the uh some icon or some images let me just search Google no uh empty cart gif like that and I will let me just check some animation type animation like this we can go on the lotify and here we can yeah like these types of I can download this and I will download in the form of a uh this gif and here see it will be downloaded like see here this card is empty like that let me just go here in the download section and just cut this here or after that I will go here and in the front end part uh in the SRC section as this section here I will paste this and here it will be the empty here I will give the empty like that and now here I want to import this uh import T card image from first of all I want to go on the SS folder inside this uh let me just go I see folder inside this I will give the name I can directly just copy this and let me just check it will be GIF for that here I will paste this and I have gif and after that here I will display and here I will use the ternary operator instead of this Ampersand and after that where this due tag is close I want to see here after that here I give that binary and here fragment tag and inside this we can add the due class name and inside this image I SRC and yeah class name I will add later yeah and here I will give the this image just copy this here and it will come here here I will paste this now let me just see let me close this one and here now see it will be coming here I want to make this in the center for that here I will give the Flex width will be full and justify content will be Center items will be center now we'll see it will coming in the center and its image is too much big for that I will give this width will be full and this Max width will be approximately I give the Asm Max width will be SM yeah like that it will here display yeah and below this I will just make a simple empty card empty like that I will display that simple text this one and here I will give the Flex call yeah and after that here I will give the class and its text will be slate text size will be the 3XL and font will be the Bold and let me just make this seven or I can give the six five yeah five is okay empty card like that empty cart yeah like this and now okay when any item is available inside this then it will be display this product yeah now this one done and one more things when here see I was click and which uh which one is active uh that one will be we cannot like here I was click the paneer and it will be active here so the active one which here data will be so for that I want to go on the home section and here I was filtered data where I was given the uh home card and previous feature card Feature Feature and all product inside go all product here I was added the filter product and here I will uh here I will pass is active and here I will give the El this uh what is the name this one uh this element this category will be equal to the current category between which category is filtered by here I was filter this value for here and it will be stored inside this okay it will not be storing we can directly pass with the function like here when user will click automatically it will be done and for that we can do just copy this one here we can give the set and here we can pass a category and this category just copy this filter by yeah it will be equal to then then this will active will be true and now let's go on the filter product here I will give the filter product its background color will be changed for that I will use the till symbol and here curly bracket here also curly bracket and after that here I will give dollar curly bracket inside this here I will give the props is active and if it will be active then its background color will be BT yellow and it will be the it let me just see and it will be not be look like I think something is mistake for that let me just check okay still not working for that we can make two lowercase this one and this one also two lowercase now check okay still it will be not working here I will give this just copy this and filter product again I will paste here and instead of using this we can use the ternary operator like that and here I will give the simple string PG yellow we can use if this is not active let me just cut here and then this background color will be like this Let me refresh first when I click on the vegetable see it color will be changed but it will not be exit which I want for that here I will change this color uh which color it will be between yellow for a little bit like four or we can use the three or we can give the rate let me just check red will be looking good or not and after that this text color will be also change White will be it six yeah see now this active one will be n when I was click see here fruits and here all this category will float we know that this uh here all this category will be the fruits and when I was click on the cake here so the all the cake category and Dosa paneer like this all this filter is now working and we have completed all this and let me just show you again all this first of all login section here see all this will be here like that and here we go on the login and here we enter the some random email ID which I was uses One Two Three or we can use the one one one and password will be the one two three and log in login is successfully here display the images and we can also use here here see display the logout because this is a not a admin that's why if we log out it will log out and we login with admin email ID then here I will give the password and login now see login is successfully and here we click see here new option is open a new product when I just click on the new product here I have ability to upload the images now all this will be done and see this one and here menu when we go on the menu section see here we have ability to like this filter product Pizza Rice all this here it will be display and now thank you for watching this video till this and please like this and comment this and please suggestion uh which things I want to improve this thank you so much for what watching this video

Channel: Dynamic Coding with Amit

Views: 138,646

Keywords: Dynamic Coding with Amit, full stack project, mern stack full ecommerce site - using react redux node.js, Build and Deploy a Full Stack MERN Application With CRUD, Build a COMPLETE Fullstack Responsive MERN App | React, Redux, Nodejs, MongoDB, Express, javascript, mern stack, full stack app, Build a COMPLETE Fullstack ecommerce Responsive MERN App, full stack mern application, ecommerce restaurant web app, MERN STACK ECOMMERCE WEBSITE REACT, responsive web application, mern, css, coding

Id: JFCQLhSMjtM

Length: 566min 44sec (34004 seconds)

Published: Sun Feb 26 2023