Full Stack eCommerce Cart build (React, Redux, Node, Express, MongoDB)...From Scratch💥

hey what is up everyone and welcome back to another video in today's video we will be doing a little moon application build we will be using mongodb express reactant mode for this entire stack application we will be building this little ecommerce site so basically all functionality that this ecommerce will have it should have the ability to load the items from a database you can see it's loading and then we are able to view the individual items we can view the exact amount of stock this item has we can add the item to the cart it takes us to the cart we can see the cart nicely here the cart updates here and over there we can change this to seven and everything else will update accordingly we can add more items like this let's add a few just like that we have a few items in our cart and the nice thing about this application i've got a few requests on um having me do a video that's able to do this um and here we can refresh and then the cart stays in local storage so this is persisted into your browser's local storage so if i were to copy this open a new tab and close and re-enter i can see i still have my items in my cart i'm able to delete so if i refresh there's no items in the cart left i can go back we can view individual application and then i did a few nice things this is a from scratch build so everything is built from the ground up i won't be using any css framework whatsoever so i made this application fully responsive so we can check it out like this we even have this nice side side drawer menu that we create which is also really nice a lot of neat things in this application so this is the mobile view of the products page the mobile view of the individual page and if we go to the stock page this is how it looks in mobile view so i really hope you find this video interesting and if you enjoy please remember to like and subscribe and let's start with the build okay so i'm gonna go through this project um really at some pace so if it's too fast for you you can slow down the video or pause and continue as i go so first things i'm going to do i'll navigate it into the folder i just created i just called it men's shopping cart youtube build and in here i open visual studio code so basically what i'm going to do i'm just going to build out the the folder structure for this video so i'm going to start off here by just running npm and knit so i'm going to say npm knit and i'm going to say dash y so i don't have to fill in any of those things uh let's quickly just adjust this i'm going to make this instead of index.js i'm going to make this server.js just like that quickly save go back to our terminal and here i'm going to install some of the dependencies we're going to be needing for our back-end but before i do that let's create our back-end folder and our front-end folder so i'm going to say maker front-end and then space and then back-end and it will create the front-end and back-in folders in our directory so now i can go and install a few dependencies for our backend so in our root directory so it would be this directory not inside of any of these folders i'm going to run npmi and i'm going to be installing express mongoose and dot env so we can save our mongodb uri and we can run this great so now that that is done i'm gonna install two um dev dependencies the first one is concurrently so what con currently does this allows us to run a script that runs our back end and our front end at the same time so we don't need two separate terminals to keep on running then we just run one command and it will start up both of them so we're going to say npm i save dev and here we're going to say nodemon and con currently just like that we can run this and then we're going to quickly set up our scripts so actually before i'm going to set up the scripts i'm just going to go into my backend folder and set up the server.js so we can see them running and then i can actually go into the front end so let's cd into the front end for now so we're in the front end we can say uh moan youtube builds front end and in here i want to run npx grade react app so we can say npx create dash to act app and then just a dot because we want it in that folder well that is busy that's going to take a while so we can go into our backend manually like this and just create a server.js oh uh did not create a file you can say server.js so this would be the entrance to our um our project so this is what we added here under main so we can close this and in here we can start building our basic express server we can say france express equals require express then we're going to initiate the express function in an app variable f equals express and then we can do app.listen we want to listen on some port variable that we'll get from on our environment variables and then once we connected to that port we want to console.log with backticks we can say server running on port and then we can insert a variable port so let's create that variable port so we can say com support is equal to the process dot env dot port and if this does not exist we can just say or so the or statement takes the any statement that is true so we can add here five thousand okay so with that done we have a basic express server but before we run this i just want to in our root directory so not in the back end or front end i want to create two files the first one is the dot env and the second one is the dot bit ignore just like that okay and this is not done yet i believe you're still busy so in the dot env we can add our port variable we can say port is equal to let's just keep it at 5000 but you can change this anytime to whatever you'd like it should not be 3 3000 because our front end will be running on 3000 okay so we're going to have a uri as well but we don't have that yet so we can leave that we can close this up and the dot get ignore we'll do in just a second i just want to bring in the dot env in our server so we have access to this process dot env so right at the top we can say require and this package to install called dot env and then on this package we can run the dot config function config so now we should have access to this so we can actually open a visual studio terminal right here and we can run the following commands just to see if the server comes up so you can say node backend slash server.js okay so we have an area here let's check it out dot env config i kept spelling that incorrectly so i'm just gonna save this again i'm gonna clear and run that and we can see server running on port 5000 okay great stuff so you can close this up the react should be done by now okay so this is done so what i want to do is i want to remove the get x the git repository in the front end so react by when we run npm create react app it makes a git repository for the folder structure automatically i want to remove that because i want the git repository inside of my my root root directory so i'm going to go to this git ignore file i'm going to copy this i'm going to select all i'm going to copy it like that then i'm going to paste it inside of our git ignore in our root directory so right over here and then the one thing i'm going to do is instead of this node modules having the slash over there i'm going to remove that and then i'm going to copy this down again and put a slash at the end just like that so now if we save this it should block out both of them but the root directory does not have a git repository so first thing i want to do is inside of the front install i want to run this command rm dash rf and then the dot git extension so now if i were to run ls um a we can see the git uh is not here anymore git repository so i'm going to clear this up now i can actually remove this git ignore inside of our front end we can delete this because we won't be needing that and inside of our root directory now i want to create a git repository so i can see the out of the front end so now i'm inside of my root directory and here i can say git init just like that and now we can see both of these npm modules should be grayed out so this is awesome we want to add dot env in our ignore as well so down here we can just say dot env oh dot sorry okay so all of the important things are grayed out right now and our project folder structure is set up so let's quickly do the scripts so in our root directory in the packets.json we want to add a few scripts the first script is going to be the start so we always do this for the start script when you deploy to something like heroku or any other servo cloud host server place so in here we want to say node and we want to go to the back end and run the servo.js file so the next script we want to add is to run only the server so we can say server but we want to run the server using nodemon so we can say nodemon and then we go into the backend slash server.js the next script we want to have is to solely run the client and you'll see why we do these scripts like this because we're going to pass them to concurrently and concurrently we'll run both of them at the same time for us so in here we can run the following we can say npm start because if we start a react app you remember in the package.json we have this start script over here we can run npm start but first it should navigate into the front-end folder so we can say dash dash prefix and then we can say front end so this would navigate into the front end folder and start our react application the next one we want to add is the concurrently we can say run dev so we're going to run the script in our root directory called run dev and this should run both our front end and our back end at the same time okay and here i want to run the following script so this script um is going to use concurrently so we can say con current link concurrently just like that and in here make sure you type this correctly we have backspace and then we escape it with a string or with a quotation mark and then we run npm run server so it would go to this script and run this script and then we escape it with a backtick again with another quotation mark then we have a backtick again and in here with a quotation mark we run npm run client and then we can end this off with a backtick and a quotation mark just like this so just quickly copy this and make sure you have this um format correct in this way so basically what concurrently would do it would go to this run server it will run the server and then would go to the run client and run the client okay so with this done we can save and now everything should be fine so i'm going to test this out by going to my command line and in the root directory i'm going to run npm run dave and let's see if this works okay so here it's starting up we can see it run our server with nodemon and here it opens up our react app on local h3000 so we should see the react loading page over here okay great so we have our folder structure up and running so let's get started by um creating our back end i want to add things to our back end build and then we can go to the front end so let's do that next okay so i'm gonna close all of this up i'm gonna go back to my terminal i'm gonna stop this server from running and in here i'm gonna start building out my folder structure for my back end i just like adding my folder structure and because this just makes it neater so i know where i'm working so i'm going to cd into back end and in here i'm going to create a few folders so i'm going to say make directory and i'm going to make a config folder where i save my database instructions and setup then i'm going to have a controller folder this is where all my routes controllers will go then i'm gonna have a data folder and i'm gonna have a models folder and a route folder that should be all of them okay so inside of my let's start with connecting our database so inside of my config i'm going to create another subfolder and i'm going to call this db.js and in here we're going to be using mongoose so i'm going to say cons mongoose equals require mongoose in this fashion then i want to create the setup for this so i want to get mongoose to connect to our database so the first thing we're going to need is that uri in our process.env so over here we're going to need this we'll set up the database in just a second so here i'm going to say require and from the dot env we're going to say config make sure i do that correctly and then we're going to make a function here we're going to say const connect db and this is going to be asynchronous function because we're going to be working with our database we're connecting to our database and in here we add a try catch in the try part we're going to say await mongoose dot connect and this connect takes in that uri so you can say process dot env dot underscore uri so exactly what we have in here okay and then this takes in another object with a few settings we're gonna pass in here new url parser and we set this equal to true the next one is use unified topology and set the suture as well once this is complete we want to just console that log and here we want to say db connection success okay and if there is an error we want to console.error and here we want to say mongodb connection and set this equals to fail and then we just want to exit our server with a exit code of one so once this is done we just need to export this function so you can say module dot exports is equal to the connect db and save so now we're just going to need access to our manga uri but first let's bring this script into our server so down here we can import the connect db script and we can import this from dot slash config slash db and then we can just below that we can run this db function so now if i were to go into my terminal okay this will not work so let's first go to mongodb atlas and set up our cluster okay so here i'm on the mongodb atlas page and you can just try free and then create an account or if you already have an account you can just sign in so i'm just gonna go sign in okay so in here i've created a project called moon shopping cart redux tutorial whatever you'd like and then in this project i'm going to be building a cluster so here i can say bold cluster i'm going to take the free tier and this i'm just going to leave exactly like it is i'm actually going to choose frankfurt over here because that's closest to me actually ireland e west is closer so let's add a classroom name just going to call this mini moon and then create and while this is setting up we're going to need a few things for this cluster we're going to need to add database access and network access so under database access we can create a user i already have a user but i'm just going to delete this and i'm going to add a new database user and right here i'm going to say i'm just going to call it just call it user and then dash 123 and then as the password i'm just going to say user there's one two three in the exact same way so um it would probably be better if this goes to production which this application hopefully won't but um it would probably be better when this goes to production that you uh make this password more secure so i'm going to say add this user so we have this user and then under network access once again i already have something here we can add you should see this we can add ip address and then we're just going to say allow access from anywhere and confirm okay so once all of that is done we're now just waiting for our crusted cluster to create so once this is done i will get back to you okay so the database setup is done we can see this little green light which means it's active and now all we want to do is go to the connect tab over here and you want to say connect your application so here you can choose your node version i'm using a later version than this so i can just copy this string over here this is the uri so in our code we can now go to the process.env and paste in this string but first we need to change this part with his password to the password we created so i created the password the same as our name so this is the same and then here the db name we want to give so the db name is going to be let's say shop or whatever you'd like i'm just going to call it shop and if i save this and now i want to run my server let's try this out again i can say node backend server.js we should hopefully see the mongodb connect success as well so the server is running and mongodb connect success so this is great the next thing i want to do is build out our model so in the models folder i'm going to close all of this up i'm going to close this up instead of the models folder i'm going to create one new file called product dot js and here we're basically just going to tell mongoose how our product will look like so first off we'll once again import mongoose equals require mongoose and then we can start building our schema so we can say const product schema is equal to mongoose you can actually say new mongoose dot schema just like that and then we can pass in an object and in here we define so we're going to have a name field this name field is going to be of type string and it's going to be required so we can set required equals to true then we're going to have a description field and this is going to be of type string as well and required as well so we're wired then we'll have a price field and this price field will be of type number and required as well and then we're going to have account in stock field so this should be of this individual item we can say type of number and also required so this is where we'll pull out how many of this item is in stock and then the last thing we're just going to have image url and this is going to be of type string and then required set this equal to true as well so this is how our product will look we'll have a name description price count in stock and image url now we have to create the model so we can say cons product is equal to mongoose.model and in here we pass it some string we just say product and mongodb will change the collection name to products so then we can pass the product schema so you can say product schema and then just export this product model so you can say module dot exports equals to product okay so with this done we are done with creating our model and now i want to quickly create a script that will import data into our database so inside of the this data folder i'm just going to copy and paste something i'm going to say products dot js and in here you can go either copy this visually here it's a bit long though so i would suggest going into the git repository that's linked down below and here i just added a few products so a playstation with a name image url description price and then i have a iphone with these you can get all of these images and descriptions from the git repository under the data folder in the backend then you just copy this um file so we're going to use this to import our data into the database so i'm just going to save this and then close this up and inside of the root directory for the backend so inside of the backend folder i want to create a cdr script dot js and in here i'm going to be using our model we just created and the dot env because we're going to need to connect to our database so first let's add our require of the dot env and dot config and then i'm going to import those products so we just added their product data equal to require and then inside of the data folder the products file then we need to import our connectdb so we can say connect db is equal to require inside of the configs folder config the db and the next thing is we're going to need the product model we just created so we can say require instead of the models folder we can get the product file now we first of want to run the connectdb function so to connect to our mongodb instance and then we want this import data function so you can name this whatever you'd like but basically what this is going to do and this is going to be a asynchronous function because we're working with the database and what this is going to do is it's going to delete everything that's in our database and then insert the items so we're first going to have a try catch and in the try our area we're going to say await product dot delete menu so if you've seen my mongodb crash course you'll know these things so we'll delete many over here delete all of the products that's in the database currently and then we want to avoid product dot insert menu so now we want to insert everything that's in our products data so we can just pass that variable directly into this function and once that is complete we can now say console.log so we can just see the output and here it's going to tell us data import success and then once the success is done we just want to process.exit so this is just a script to to import it's not supposed to run the whole time so you can say process or exit if i can just type that correctly okay and then if something were to fail we want to console.error and here we want to say error with data import and then we want to exit with process dot exit with a status code of one so we can save this this is the function that should import our data and this file when this file cderscript.js is called we want to run this import data function immediately so we can just run it down at the bottom so we can save this and inside of our package.json i want to create a script that we can just run to import this data so down here i'm going to add import or actually let's say data and then that character i don't know what that's called in english double print in my language so we can add that over there i think it's colon i'm not sure i'm probably wrong um and then here we can navigate by saying node and then we want to run the backend slash cedar script dot js so it's going to navigate into our backend folder and then run this cdo script.js file so if you were to save this now and go to our terminal and run in our root directory npm run data colon import double point or whatever and it should connect to our db so we should see mongodb connection and then data import success so now if you want to clear that and go to our mongodb atlas instance in here we can view the collections and we should see our products data so here we can see the products data is the list of products we added so this is a quick way to get things into your mongodb database okay so now that we have this in our database we can close this tab and we will be working with the routes to fetch data and fetch individual products so we can close all of this up we can close the seeder the next thing we want to do is in our server.js just below the app declaration we can say app.use and here we want to use express.json so we're going to be needing json data from and to our react client so once this is done we can create our routes so the first part we're going to have is app dot use and this should go to slash products and we're going to create the route for that in just a second so i'm going to import it up here from products product routes and this is equal to require and we haven't created this yet but we'll do it now routes and inside of routes we'll have a product product routes dot js we don't have to set our js okay and then we can just pass this routes down here so now any request going to http localhost 5000 slash products we can actually say api because this is the api so api slash products will have access to these routes so let's save that this should not work so we can go into the routes and here we can create that product routes.js file and in here we're going to do the following things we're going to once again x import express but we're going to use the router this time so we can say express and here we can say the router is equal to this express router and then run that as a function so now we can say router dot get and the slash route we just want to get all of all of our products so we can actually give this a nice description we can say description and set this equal to get all products from db and then here we can say the route so this should be a get to api products and we don't have to set this but i usually do so you can say access and access will be public okay so in here we're gonna have our route that says request response and we don't have to add the next here but we'll be doing this part actually inside of our controller so i'm just going to copy this again and paste it down here and this get should be to some slash id so we can say get a product by id from the db so we can say product slash i think it's colon double point i think colon um leave down in the comments below what this is called i think it's colon i'm not really sure i'm probably wrong um and then let's go into the okay we first have to export the the router so we can say module.exports is equal to that router so now we have access here to these routes okay so let's create the controller for the product so this is actually really simple we don't have much um to do so we have products controllers dot js and in here is where we do all the fetching so firstly we're going to need our model so we can say product is equal to require and then we can navigate to the models not the routes the models slash and then the product and here we're going to need the cons get all products and set this equal to a function [Music] this function is going to be asynchronous again and this function will have access to the request and the response so in here we're going to have a try catch and then we're going to cross products is equal to a weight then we use the model to to get our data from the database and here we can say just find and then pass in empty curly braces once that is done we can respond with jason and then just pass those products down so our front end will make a request to this endpoint and then we'll receive all of the products if there is an error we can just say console.log or console.error and here we can pass the error else we want to rest.status with a 500 and say jason and then in here we want to pass a message field that says server error just like that we can actually now copy this exact same function and paste it down below here and this would see get product by id just like that and instead of fetching all of the products we'll get an individual product and we'll say product await find by id and we'll pass in here the request params because it will be inside of the params and then id because if you remember if we go back to the route we had products and then this id this is the inside of the param so we're going to fetch whatever is over there and then we return that individual product just like that and if there's an error we have the exact same thing now we need to export these controllers so we can say module dot exports and set this equal to a document and here you can say get all products and get product by id so now we can import these routes inside of our import these controllers inside of our routes so here i'm just going to say const and it's going to be named import so we have to import it by name and here we can say require inside of our controllers we want the product controller and in here we would like the get all products and get product by id and instead of passing these routes down here we're going to be passing these controllers so get all products should go to the first route and then the get product by id should go to the second row so if we save this our routes should be done let me just double check this yes it looks like our routes are done and this is basically our entire back end done so yes we have our entire back and let's just go to the server and then make sure we have everything running correctly over here um express let's just run this and make sure so we can say node backend server is running and then it should connect awesome okay so everything is working so now that is done so we're done with our backing we can start with the big part which is creating the front end creating the design adding redux and then yo that's basically that then so from there you can optimize and customize the application as you'd like so we are done with the back end folder completely now so we can close all of this up and now we will be working inside of the front end so i'm just going to clean up the front end here we will not be using this app.test we do not need the logo that svg and the setup.test we don't need as well so i'm just going to clean all of these up so it doesn't look so intimidating all this is fine in the index.css i'm just going to remove everything in the app.js i'm going to remove the logo import i'm going to remove this header and i'm just going to say hello world and i'm going to rename this to app to go with the bem convention and then in app.css i'm also just going to remove everything so we've done the file setup so let's save and let's see if this runs so in our terminal we can cd out of the back end and just run npm run div and this should start everything up we should see our server starting up mongodb connection and here we have our react app in it just says hello world so let's get started by building our front end so i'm just going to go back to where we are over here we've done our cleanup so in our app.js i'm just going to do a little bit of a markup and plan what we're going to be needing so first off we're going to need a nav bar so the nav bar we're going to need a side door and then we're going to need some backdrop that would be um placed behind the side drawer so these two things will show together and will only we only show the side door on mobile view so the next thing we need to do is we're going to need to have a home screen and then we're going to need to have a product screen where we view the individual product then we're going to have a cart screen so these are the three screens we're going to be needing and these are the the nav bars you can see both of them would be kind of nav bars this would be the mobile one of the desktop one and this would be the mobile nav bar so let's start by creating these two these three components up here so in our in my source file folder i'm going to say components and in here i'm going to create their files so i'm going to say navbar dot js and then i'm going to have a navbar.css i'm going to create a sidebar dot js and a side drawer dot css then the last one is going to be a backdrop.js and uh backdrop.css just like that so i'm going to close these up for now let's start by just doing the nav bar so i'm going to save this uh in here i'm just going to run my snippet rafce we can remove this line for react import as we don't need that anymore with react 17. so you can say import then we're just going to import the style sheet the nav bar i forgot to take off the multicurser import navbar.css and we're going to give this a semantic tag of nav and then we're going to give it a class name of navbar so that we can stick to the naming convention so you can say nav and give this nav bar okay so inside of the nav bar we're going to divide this up into different sections as well the first section is going to be our logo we're going to have our logo the next section will be our links so we can have our unordered list of our links and then the last section will be our hamburger menu so let's start by creating the logo so down here the logo is going to be wrapped in a div and we can give this a class name of now for underscore underscore logo and in here it's just basically going to be a h2 and we're going to say marin shopping cart okay and then the links we're going to have an unordered list a ul just like this and we'll give this a class name of nav for underscore underscore links and then in here okay in here we have our allies so each one of the allies will contain a link that would help us with the routing so we'll import react rather dom in just a second let's just finish building this up so this will not have a class name we'll just use csa selectors to get there and in here we will use the link tag so you'll say link capital letter link and then close this up and in the link tag we will be adding an icon as well as the text cart and then some span so if you remember we had the shopping cart trolley and then we had the word cart and then we had this little circle inside of the circle we had the cart amount so let's first actually uh import to actuator dom so i'm just going to go to my terminal going to cd into the front end and in here i'm going to npmi let's actually quickly install all of our dependencies so we're going to have axios we're going to have react dash router dom we're going to have redux we're going to have react dash redux and then we're going to have i think it's redux dash thunk just like that i think this is all of it so it's axios reactor dom redux react redux and redux thunk oh and then it's the redux dev tools i believe let me just check yes so we have the redux dash dev tools dash extension just like that just make sure everything is correct okay and we'll run this this should install everything for us okay so once that is done we can now import at the top here we can say import link from react router dom so now we have access to this link and this link will go to the cart page so we can say slash cart and before we actually can use these links we have to wrap our app application with the browser router so let's quickly do that sorry i'm looking a bit confusing here but in here we can import from your app router dom we have to import the browser router and we're just going to rename this as router then we need a switch and a route component and in here we can actually place these we're going to have a main tag in here so we can say main and in this main tag we'll be placing our routing screens so in here we'll have a switch statement and the switch component will have route components copy that down so the first route will go to it's a exact path of slash and this would just be our home screen component so we can say component and then in here we'll have a home screen component so for now we don't have anything set up for that we'll do that in just a sec the next route will go to also an exact path of i think this is product so we can say slash product and then it has some id so each product will have an id and this will render the product screen let's say component and this will render the product screen the next thing we'll need is the cart route so you can say path is equal to slash cart and this will render the card component card screen component so you can start screen here we can say product screen and here you can say home screen okay so we haven't created them yet so it's going to complain about this we can remove this from down here we first have to wrap our entire application with the router so we can say router and then take this and wrap our entire application just like that now we can actually remove this div now that i think about it because we don't want the div the nav bars inside here so let's quickly just create these files so that it doesn't give us an error so inside of our source folder i'm going to create a new folder called screens and in there i'm gonna have a home screen dot js i'm gonna have a home screen why does it keep on doing that inside of the screens i'm gonna have a home screen dot css i'm gonna have a product again it does that why i'm gonna have a product screen dot js i'm gonna have a product screen dot css and then i'm gonna have a card screen dojs the next one is a torch screen dot css okay so now we've created all of our screens so let's just close all of the css folders for now and in each one of the screens i'm just going to run rafce and we can remove this once again let's import the home screen css file we give this a class name of home screen and in here we can just say home screen so that it just loads nicely so here we can say raft we can remove this import and just change this to product screen.css we can give this class class name of product screen and in here we can say product screen products save that last one rafce here we can import the cart dot css screen.css and we can give this class name of card screen and then in the div we can just say card screen and save this uh okay so we can close these up now and then in here in the app we can just import them so i like to name them as screens and then we can import the home screen from the screens and home screen and i'm going to copy this down for the product screen and the card screen just like that so if we save this this should all be fine now we installed all of our dependencies sorry about that deviation from the nav bar but now the link should work and yeah this looks fine okay so back to the nav bar what we're actually doing in here we're going in the link we're going to have a icon the shopping cart icon and then we're going to have the text cart and then we're going to have what are we gonna have there let's see oh we're gonna have that circle so this is going to be a span that contains the count of the card so i'm just gonna set this to zero i'm gonna give this a class name of part logo underscore underscore badge and yes that's that for the link for the first link so we can actually copy this down we will not be using the icon we'll just have the text that says shop and this will take us to the slash page so back to the home page okay the next thing is the hamburger menu the hamburger menu is going to be a div and inside of the div we're going to create three more divs to create this hamburger looking effect we'll give this a class name of um hamburger and burger underscoring school menu and this will have an on click but we'll get to that in a later stage so now we've created all of these so we can remove these the last thing we need to do is get these icons so here we're going to have an icon and we're going to give it a class name of some font awesome icon so in order to do that we're going to need to import the font awesome cdn so i'm going to go back to my web browser and here i'm going to say cdns.js and this will take you to this web page and in here you just search font awesome and i'm going to take this first one and then you can see i've selected this one previously we just copy this css all dot min dot css we copy this tag we can close this down go back to our application and in the publix folder in the index.html we can add our script tag over here i'm just clearing all of this and here we can add our link tag for font awesome we can save this you can actually rename this as well to moan shopping cart and save so now we have access to the following icons so we can say if it is space fa shopping dash cart and this looks like all of it so if you were to save this to reformat it and bring this into our app component we can import this as components so i like to call this components and here you can import navbar from the components folder and the navbar file and we can place the nav bar as a component down here and if we just save this and go check out our screen we can now see the nav parts the styling is really ugly but we'll get there in just a second so i can see there's this this margin around the corner if we were to view the inspector we can see we have this unwanted margin in our html tag so if you check here we have some within the body yeah in the body we have this margin around and we want to remove that so we can go into the index.css and here we say asterisk and here we can say remove all padding remove all margin and then give us a box sizing of border box just like that i'm going to also go to the body tag i'm going to style it by saying font or font family and set this to ariel you can choose any other font you'd like i just like ariel for now and we can set the background color of our application we can set this background color to f4 f4 f4 just giving it this off white and the next thing i want to style is all the images should have a width of 100 and it should be object fit contain so it would just take all of its container and then fit into the container so that's the global styles we won't be touching index.css again so in our app we can bring this in and if we just save and go back we can see there's no margin or unwanted padding we didn't start ourselves okay so if i were to click here it actually routes to our different screens now we can see it changing up in the url and down here and if we were to go to slash product we can see oh it should be product slash and then some id so we can see the product screen being loaded there okay so back to the home screen it's finished on navbar style so on navbar style here looks complete so let's go into the navbar.css and in here we're going to be styling our navbar so the first thing we're going to target is this nav bar over here so we can say navbar dot therefore and here we can give it the following style we can say width of 100 percent we can give it a background color of this matte black we can display it as flicks so what this was going to do is just going to push all of the items so this item this item and this item next to each other and then we can say justify content space between so this would just push each of the items away from one another and here we can say align items to center and we can give the nav for a padding of top of 1.5 grim and left and right of one rim so it would just give them some space at the at the sides and at the top and then the last thing we have to give this now for a set index of 50 as we're going to have a backdrop and a side row that should slide over these so if i were to save this and go back to our application we can now see the following happening so this is the hamburger icon somewhere over here that's why it's spread out like this and then we have the padding you can see the padding and so forth so let's continue by styling the logo so we want to style this nav logo we can go nav logo and we want to style the h2 inside of it we want to give this a color of this off white again we want to give it a font size of 1.4 ram and then we want to give it a cursor of pointer so if you want to let them be able to click on the icon and take them back to the home screen you should just wrap a link over it like that so if we check the icon logo looks like this right now so it's starting to get some shape so the next thing we want to do is style this unordered list so we're going to copy this ul and then we're going to go paste it down here and style that class so we want to display flex so this will allow all of the links inside of the url to sit next to each other we want to give it a list style of none and then we want to align items to the center if we to save that and go back we can see it sitting next side to side to one another so now we want to style the ul inside of this nav link so i'm just going to use a css selector and go and find all of the allies inside there and i want to give it a padding of let's say padding left of 1.5 rim if i were to save that and go back you can see it's pushed away from each other like that so this is awesome next thing we want to do is style the actual a tag inside so this link gets translated to an a tag that is why it is this purple color so we want to style that so once again i'm going to use this selector up here and just navigate to that a tag and we can give the a tag the following style we can say text decoration of none so it takes away that blue of that underline sorry and then we can give it a color of the exact same off-white we had previously you can actually set this in css variables in your index.html of index.css and then just reference the variables but i'm just going to type it out quickly like this so you can say font size of these a tags we're going to set this equal to 1.2 ram then we're going to have them display flex so each one of these links links are going to have display flex and the reason for this is just um you'll see in just a second and right here we can align items to the center and if we save this and go back we can now see that they have this nice white color the reason we display flex is so that this badge and the cart and the card icon are all just nice and centered with one another okay the next thing we want to do is style this um span so we want to style let's see yeah we want to style that span okay so i'm once again going to select this and dive deeper into our component of our css nesting so we can say style the span and we're going to give it a display of flex so whatever is in that span will be centered into the middle so we can say align items and set this to center and give it a margin left of 8 pixels and if we save this and go back to our screen we can see that these are pushed away from one another so i'm actually going to actually want the cart item to be separate as well so if i go back here i want to add this part in a span so i'm going to add a span here and then i'm just going to pull that straight up in there so if i save this and go back we can see it's pushed out now we have to style this individual link so this page over here so let's quickly do that we called that this so another thing we want to add here is just to the link we want to add a class name of cart underscore underscore link so this is just the link for the card so we can style this properly so i'm going to copy this save it and then here down here we want to style this cart link we want to give it a background of triple three we want to give it a padding of 10 pixels all around and then we want to give it a border radius of 8 pixels and if you would just save this and go back it looks like this right now so we have this kind of a button buttonish look okay so the next thing we want to style is give it a hover so on this cart link we can say the hover and then we want to change the background color to this nice pink pinkish color so i'm going to copy it down here set the pink color so it's dd 2 1 9 e and then we want to give the text the color of this off-white again so if we were to go back and now hover we can see it changing like so next thing we want to style is this icon badge so we're going to copy that and give it a style of width of 30 pixels a height of 30 pixels and then we're gonna give it a background of that off-white then we're going to give it a border radius of 50 so it's round then we give it a margin to the left of 8 pixels we can give it a color so whatever is inside of it of a black color so that matte black color we're using then just going to scroll up here then we can give it a display of flex so whatever is inside of that span will be centered so we can say justify content center we can say align item center and then we can say text align center just like that and then we want to give it a font size of one rim if we were to save that and go back we can now see it is styled with the circle the zero is centered in the middle and we have this nice hover effect so we're getting there so we're going to remove the hamburger icon in just a second with a media query and then put it back when we get to smaller views okay so once that is done we can quickly style the hamburger icon so we're going to style this menu over here paste in that class and here we're going to give it a width of 100 actually no we want to give it a width of 30 pixels going to give it a height of 30 pixels and then we want to [Music] display this as flex but we'll display it as none in just a second i just want to see the styling i'm going to give it the flex direction so each one of the divs should be in a column and then we want to justify content and set this space between so it pushes all of these divs in the height away from each other and i want to align items to the center so that all dips are just in the center and then i want to give it a cursor of pointer just like that so if i were to go back and save um refresh okay so something is not showing up here okay so the reason this is not showing up is it's actually there we can see there is a hamburger icon but we haven't given a color yet so let's style the individual divs inside so we can say each one of the divs should have a background color so it should have a width of 100 it should have a height of 3 pixels each and a background color of that both white go to save and go back now we can see the hamburger icon being displayed so it's all coming together the last thing we need to do is give it a hover state so if we were to hover over this this hamburger menu i'm just going to place down here if we hover over this we want to select the diffs and change their color so we want to give them a background color of that same pink we have down down here so if we save this and go back we can see if we hover over it now it gives it this pinkish look okay the next thing we need to do is style the responsiveness of this nail bar so the first thing we need to do is change this display to none so we're going to set this to none so now it would push everything away like this and then we we get to a certain size we can set the hamburger we need to display flicks again so our media queries are going to look as follow we're going to say add media and then we're going to have a max width of not max max max width of 960 pixels this is where i want the screen to start becoming mobile so i'm going to say now for links therefore underscore links so it's um these over here where we display flick so if i were to show it here it's these two items over here or the nav links we want to hide them on mobile so i'm going to say display of none so if you just save and go back and when i get 960 pixels which is around here it it hides you can see it over here and instead of it hiding and showing nothing when we get to the size i want the mobile hamburger menu to show so i'm going to go back to the media query and in here i'm just going to copy this over here paste it and we want the here it is display none so here we want it to be display flex if we save that and go back we should now see it being switched with the hamburger icon so you can see the moba the the nav bar has this kind of a jump and we kind of don't want this so we have to set the dynamic height on the on the nav bar so let's see what is the calculated height over here computed height is 110 pixels so let's just set the nav bar height to 110 pixels 110 pixels and save so now we won't see that jump so it doesn't have that jump anymore we just see those changing so last thing we need to do for the nav bar is one more media query and we want the navbar logo size to not be that big so if you get around about here to 500 pixels we don't want the nav board logo to be this huge so we want to style it smaller so we can say add media and give it a max width of 500 pixels and here i want to style the nav bar um h2 so here we gave it a font size of 1.2 1.4 ram and down here if we get to that size i want to change the font size to one red just one ring if we go back we can see it's smaller now so if we go from big screens we can see the the nav bar is totally mobile friendly now so this is about the size of the x sam again the iphone x is there so we have this nice looking nav bar next thing we want to do is create our side drawer and backdrop so we are done with the nav bar now we can close all of these up and in our app component we can see this side drawer and backdrop so let's quickly create those so in our components folder we already have the side drawer so we can open the side drawer let's quickly do the backdrop this is the easiest one and we're gonna create our component again by rafce then we're going to import our style sheet so we can just say backdrop.css and we give this a style of class name and let's say save it doesn't have to have to have anything inside and we can give it a style of backdrop and the backdrop style is also pretty simple we just say we give it a width of 100 so it takes up the entire width of the page we want to give it a height of 100 viewport height so whatever viewport it is on take 100 of that we want to give it a background color of this rgba value we it's 0 0 0 and then a 0.5 transparency and then we want to give it a z index above the nav bar so we gave the nav bar index z index of 50 we give the back to opposite index of 100 and we want it to be positioned fixed so whenever you scroll it doesn't move it just stays inside of your viewport and so we position it top zero and left zero so to save this and import this component in our in our app component we can change this to backdrop and then we can just place the backdrop in here so if we were to go back to our component we can see this um transparent looking backdropping shin so it's currently showing the whole time so we'll do this the the hide and show of this in just a second when we're done with the side door so let's create this side drawer component so i'll be closing this and let's go to the side drawer and we can say rafce and then import the side drawer style sheet oh that's the wrong one dot css and here i'm just going to give it a name of class name of cydra of side drawer but it's actually important we're going to give it dynamic styles but first let's give it a side drawer so we can see it side drawer just like that and we can save it for now and then in its style sheet we can say dot side or and give this a style of the following you can give it a style and set the width equal to 70 percent of the page we want to give it a height of the full 100 viewports we want to give it a background color of white so it just contrasts from the body and then we can give it a position fixed as well so in here we don't want this to scroll with the base we want to stay the same we can give it a top of zero and left of zero and then we need to give it a z index of above the backdrop so i'm going to set this equal to 200 so the backdrop was 100 and therefore was 50 and this is um 200 so this is awesome if you go back and this is imported we can save and now we can import this from here give this side drawer and then we can import the component down here and save now you can see the side drawer menu on the side so we have this looking like this so this is really nice but the problem is now it just shows the whole time so we have to put in some logic or state to toggle this so inside of our app component i'm going to import use state so we can say import use state from act from react and here we're going to have a toggle state so it would work as follows every time i click on the backdrop it should close and every time i click on the navbar icon it should open so in here we can have const equals to use state and we initially set this to false and in the state we're going to give it a name of side toggle and set side toggle just like that so initially it is false so to these components so the side drawer and the backdrop we have to pass the value of show and this show value will be equal to whatever the site toggle is so if this is false it would be hidden if it's true it would show so you can just copy this and paste it in here and the same goes for the backdrop we can give it that exact same value to check so we can save this and now in here in our backdrop we're going to destructure that show prop we passed in and now we want to only return if show is true so we can say show and then just put double ampersand and this would say if show is true then do this so if you were to save this the backdrop should actually disappear now so we can't see the backdrop anymore but now we have to implement the logic for the side drawer so in the side drawer we have the following logic will display some style so that it moves into the screen and out of the screen so here we're once again going to destructure the show prop but here we'll have the following logic so we'll create a style dynamically for that div so we're going to say cons side your style or just say class is equal to side drawer the one we have down here so this is the initial class it would be equal to and here we say if show is equal to true so if so is true we want to take a the sidewalk class and push onto that array a new style of show so this would push a new style of show onto this item so we'll create this show style right now and in here we just remove this and add side drawer class dot join and we join these two items in the array with a space between them so it will it will add them as a style string so if i were to save this we'll still see the side drawer because we have to change these styles so if we go into the styles what i want to do is make it move in and out of the screen transition nicely so i'm going to have a transform and translate the x position 100 out of the screen and then i want a transition of all and this should be three point zero point three seconds and i'm going to say ease out so it starts fast and ends slow so if we've done that and save we can see that the side drawer is no longer in the screen so that is the translate x minus 100 and the next thing we want to do is add the side row show so you can say side or dot show because when the show is set to true it would add this class to our component and all we want to do here is transform translate it back so we can say translate x back to zeros where it was before so here you can't see it so if i go to my components and in my app and i change this equal to true you can see it slides in like this so i'm going to check it uncheck it check it uncheck it so it has this nice sliding animation and the backdrop bring comes out as well so we're getting there only a few more things to do with the nav bar [Music] so we want to make sure when we click on this button that it opens the drawer so let's do that so in our nav bar component this button this hamburger should have have an on click so we can pass in here on click so whenever something is clicked on it we want to change the state in the app component we want to change this to true so we can pass here but what did i call it in my project let's see we can set toggle so we can add a click event here to the nav bar so we're passing and clicking into the nav bar and this click event is just a function that calls the set site toggle and sets the state equal to true so now in my navbar component i can destructure that click listener or that click event so i can go to the props and destructure the click and here i just pass the click to the on click event of the hamburger so if i want to go now now we can see it opening and closing so just like that so it's false now if i click on it it goes to true so now i want to do the exact same but in reverse for the the hamburger for the backdrop excuse me so i believe we're done with the nap or now so we can close that so in the backdrop i want to also pass it on click event so here i can pass a click prop and all this click prop to do is it should set the um set that state equals to false so there's probably a better way of implementing this for um using stuff like modals as well but for this specific backdrop i'm displaying i'm passing it this click event to toggle this state value so inside of the backdrop i can now destructure that click as well and we can place the on click listener on the backdrop dev itself and pass it that click value and we can save this and all this will do is turn it to false so if i were to save this our navbar should work now boom very nice very very nice okay so the last thing we need to do is pass a click listener to the side drawer as well because the side drawer is going to have navigation items and when we were to click on the navigation items we want the side drawer to close so let's finish styling the side drawer first so we can close the backdrop and in the side drawer we're going to have the following things we're going to need these side these links why is it not working these links should be in our site drawer as well so we're not going to [Music] refactor them into their own components we're just going to recreate them so in here you can open this and now we're going to style our side drawer and in here in the div we're going to have the following things we're going to have an unordered list and this unordered list will have a class name of site drawer underscore underscore links and in here we'll pass that on click listener so anything that is clicked inside of the ul uh the unwanted list will [Music] cause it to close the side door so you can just pass the click in like this we haven't passed the click in here yet so you can actually do that it would be exactly the same as this one so you can copy this and paste it down there save that okay now we can continue with this so in here we have an ally and inside of the alloy we'll have a link tag again so we can import the link tag so you can say import link from react router dom and we can add the link in here so we can say link and this would have a icon once again that same class of shopping cart so we can say if it is fade as shopping does card and then we'll have the text that says cart and a new spam we actually want to place this inside of a span so we want all of this inside of a span okay so we can move this above and in this span i will have the text of cart and in this panel have another span of the class name underscore underscore and we'll give this a class name of site drawer underscore underscore cart badge and this will just set to zero for now this will dynamically render afterwards so this looks fine the next thing we need to pass is another ally and this ally would just be a link that goes to the shop page and we can set the two equals to just the slash route and then we can set this to equals to the cart route so it will take us to the cart if we were to save this and go back we can see these two items in here so this is really ugly we want to center them in the middle and give them nice styles so let's quickly do that go into the side drawer dot css and here we're going to style the link so i'm going to say side or underscore underscore links so it's that unordered list this one over here now i'm going to give that a style of display flex we want to flex direction column of column and then we want to list style of none we need to save this and go back we can see it didn't change much but it did change so next thing we can see side drawer side drawer links and we want to start style the allies so here we can give each individual ally display of flex and align items of center so this would just help once again with the cart and the the badge the next thing is the side links and then we'll go into the allies and style the individual a tags so these a tags will have the following style we can say display flex we can align items to the center we can justify content to the center and let's see what we can do we can display it as flex 1 so it would give us the entire space we can say text align center give it flex of one we give it padding of one rim and we can give it a text decoration of none and then we can give it a color of that matte black we are using this right through and we can give it a font size of 1.6 wrench 1.6 just like this you could just save we first have to add a few things up here to see this effect so we can see it's um on the top like this so you can leave it like this if you want but i want to center it in the middle so in order to do that we have to make the side drawer display of flex and we need flex direction column set that to column and then we want to justify items or justify content to the center so if we to save this we can see that it is now placed in the center so we have this nice looking um side drawer i want to give these a hover state so the links over here i want to give it a hover state so when you hover over them i want to give it a background background of that matte black i want to change the color to that off-white and then i want to add okay let's save this and see what we have we have this nice looking hover effect now okay so the next thing i want to add is the style of this um this badge over here so i'm first first of all going to give the this two spans separation so if we navigate to the side your links and li and then the a tag and then the span we can give it a display of flex we can align items to the center and we can give it a margin to the left of 8 pixels we can save this and now we can see it has this separation between them okay so the last thing we need to style is this badge and we can style the badge by doing the following you can say side your ling no we actually gave that a name let's go check it out uh cyber badge we gave it a name here and we want to give this a display for flex align items to the center we want to justify content to the center and we can say text align to the center as well just enter everything we want to give that a width of 30 pixels we're going to give it a height of 30 pixels and you have to set this otherwise the border radius is not going to give it a round border and then we said border radius equal to 50 and we can give it a background color of that matte black and we can give the inside color so the text inside that off-white color and then the last thing we need to do is add the font size of one rim and then give it a margin left as well so it just pushes away from the card text of 8 pixels save this and go back now you can see it has this nice looking thing okay so when we hover we actually want to change this uh icon background to white and the inner text so we can do that by once again copying this up here and if we copy that we can now go to this item so we copy this item and say when we when we hover over a tag we want to switch this icon's text we're going to switch the the the colors we want to change the background color to this off-white and we want to give the color inside of that matte black so if we just save that now it it it has this nice contrast okay so we're basically done with the styling the last thing i want to do is make sure if i go to non-mobile view i don't want the side drawer to show anymore so i'm going to set a media query add media and set the max width equal to 960 because that is when the side drawer is allowed to show i'm going to sit side door equal to display of mount so you can say display so up here we gave it a display of flicks and it actually doesn't matter it's just going to remove it so we're going to show okay so this should actually not be max it should be min so here it will show but when we go here it won't show anymore so the backdrop still will show because you can use it for modals when you're on this screen you can you still need a backdrop for modals but when you're here the side drawer does not show so now we have this nice looking side door so that's awesome next thing we want to do is start styling our um individual screens getting our screens mobile friendly and then once we're done with the styling of the screens we can implement redux and then do the logic from there talking to our backend and so forth so let's quickly do that the first thing i want to style is our home screen okay so now we're going to do the home screen so we can close all of these up and we want to style this home screen component so in our screens go to home screen and open the home screen css as well so i know the styling of these is a bit tedious but i got a lot of requests telling me to do everything from scratch and this helps them learn so i'm doing it now and i hope you enjoy it stick with me take breaks in between the videos and make the make the journey a bit more fun okay so in the home screen we're going to have our home screen div and then i'm going to have a h2 that says latest products and i'm going to give this a class name of home screen title underscoring the sport next thing we're going to have in here is a div that has the products inside of them so we're going to have a div and this step is going to be class name on this home screen underscore underscore products so this will contain all of our products and in here we're going to display the products so each individual product is going to have its own component we're going to reuse that product component so in here we're going to render our product we're going to pass it a few pieces of data but we're going to render the product over here so let's actually style the home screen although we can't see the product yet let's just style the home screen we can say home screen and give this a max width of um of this pixel width of 1 300 pixels i'm going to give it a margin of at the top of one rim and at the sides of auto so it would center this almost like a container so for to go back and stretch this open you can see the home screen is no longer on the side it has like this centered container type of effect so you can create a container class in css and just wrap everything around but i just use this in my demo project so okay next thing we want to do is style the home screen title i'm just going to school title and we want to give this a font size 1.5 rim we want to give it a color of that matte black we want to give it a margin on at the bottom of one rim and a margin left of eight pixels the next thing we're going to do is style the home screen products so i'm just going to call products and this is going to be a great container so we're going to say display grid and here we're going to do a lot of media queries to resize the grid for different screen sizes so you can say grid template columns and the initial size will set to repeat four items and we set each one of them to one fragment so if we were to save this we don't really see the grid now because there's no items in them so let's go into our product screen and let's create this product component so i'm going to create this product component inside of our components folder here i'm going to call it product.js and i'm going to give it a style file as well as product.css so inside of the product.js i'm just going to create my component again i'm going to import the style sheet so this is kind of the same thing over and over again just getting the boilerplate set setup i'm gonna give it a class name of product and let's start with building how this product will look like so i'm gonna first hard code all of the values in here so we're going to have an image tag for the product and this source and alt i'll get in just a second just going to hard code it for now um i'm going to give this div a class name of product underscore underscore info so this will contain all of the info about that product and we'll have a p tag which has a class name of info unresponder school name then we have another p tag that contains the description so you can say give this a class name of info underscore underscore description and in here we'll just have some lorem ipsum of let's say 15 for now we'll give it a title of product one and then we'll need to add another p tag that has the price so you can just add the price like this by saying the dollar sign and then save 499.99 and then we'll need a product a link that a button that takes us to this product so you can add here import the link again from react brother don to import the link from react router dom and then we use this link as a button so you'll give it a class now of info on the squanderschool button and we'll just set the text equal to view so we'll view that item and we'll set a two prop on this to go to let's set it to backticks so we'll go to slash product and then add the product id so we'll just set this product id to this for now but we will dynamically render the product id afterwards so i'm just going to grab the image image url and paste it in there okay so we'll we can go into the data folder in our backend and then just grab this url over here copy that close this and paste it in here we'll dynamically render them here and just give it a product name and then just give this price a name of info i'm just going to school price so if we were to save this and go back to our application we can see there's unstyled but card looking thing and you can see that it has the grid now you can see the grid being grid item two three and four okay so let's style the individual product card so inside of our cards.css we're first going to um get the product and then we're going to give it a width of 300 pixels we're going to give it padding inside of one rim we're going to give it a background color so that it just stands out from the body of just white i'm going to give it a cursor of pointer you don't really have to do the cursor pointer if you wrap this item inside of a link you can use the cursor pointer and then instead of using this view but i can actually remove this let me remove that and then i can say box shadow i'm going to give it this nice looking box shadow of zero four pixels excuse me one pixel and then four pixel and then rgba of zero zero zero and then zero point four then we give it a margin at the top of top and bottom of 8 pixels and then the left and right it should be centered in the grid container and then we will display this item as flex so everything inside of the product container will have a flex direction of columns so everything in here will be aligned below each other and here we can just say justify content space between and yeah this should be it so if i were to save this and go back we can see this nice looking card box style being rendered so now let's style each of the individual items inside of the card so i'm first going to style the image just going to give the image a fixed height so i'm going to give it a height of 170 pixels so all all images that come into here should have the same height so that the cards just stay the same level because the images differ and this will change the size of the card i want to give the image a border radius of 8 pixels so it just gives it the slight radius so if you save and go back okay we have to style the image save and go back we can see the image is set to a certain size and it has this nice looking just slight border radius next thing we want to style is the product underscore underscore info and we want to get all of the b tags we want to give all of the p tags this same style we want to give them a margin bottom of 8 pixels so if we save this and go back we can see they are pushed away from one another next thing we want to do is give the info price the style so you can check info price and give the info price style of font bold so it would just stand out because the price is important and weight of bold and safe we go back you can see it's standing out a little bit more next thing you want to do is style the info name so you can say underscore info name and we want to give this a font size of one rim and overflow of hidden so if it becomes too long we don't want the entire card to like press up against um will look mushy so it would just kind of cut off the name so it's it's fine for me if you don't like this you can just change leave this out and then next thing of info underscore description i want to give this a style of font size a little bit smaller than the rest of the info so if we were to save this and go back we now have this looking application and the last thing we want to start is the info button and give it a hover state so we want to say info on the screen scroll button so we want to display it as block we want to give it a width of the entire container we want to give it a text decoration of nine because it's a link so we don't want the link decorations we can give it a text align center so whatever is inside of this button should be in the center you can give the color inside of this black we can give the background color of the off-white and then we can actually make the backyard let's let's see how this looks yeah that's fine and then we can give it padding inside of 8 pixels and 16 pixels left and right so it gives it a little bit now we just need a border give it a border and we can set this border equal to one pixel solid and then this matte black color we give it a font size of one rim and i think that is about that if we save it and go back we can see this nice looking button but now we want to give it a hover state and just switch or inverse the colors so here we can see change the background color now to this black this matte black and then change the color inside to the off-white save this and go back this should be hover sorry and save and go back now every time i hover it change the look of this button so we're getting there last thing i want to do for this item itself is when we get to certain screen sizes i want to adjust the width of how it is displayed so this is going to be a few media queries but let me add a few more items so i'm going to add a few more products in our home screen i'm going to render let's say that amount yeah okay so now i want to style how they change um media query wise so let's make this responsive so in our home screen dot css i now here want to add a few media queries so the media queries is going to be on the different breakpoints we're going to say media and give it a breakpoint at max width of 232 pixels this can differ from whatever screen you're using or computer or web browser so just check it out and then just adjust this this on my screen is that and i want to change the home screen products and i want to set the grid template columns equal to repeat of three so instead of having um one fr instead of having four like up here when it gets to this breakpoint i only want three in a row so that is what we're starting over here so if we go back we can see it being adjusted when we get to it's about two there it went to three okay so that's nice but now we would like the items to span bigger sizes so the individual box width the products box width should be more so let's just finish all of the break points on the window on the home screen next one is we can actually copy this because it's going to be the same thing just different break points here we have a breakpoint of 950 pixels and i want to change this to 2fr and then i'm going to place this down here once more again and if we get to 630 pixels i only want it to have one column if i save this and go back we can see the adjustment happening okay so now i want to style how each of the component the product components look at different breakpoints so we just want to adjust the sizes you can leave it like this but i just made it more responsive doing it this way so in the home screen we're done with the the home screen css for now and then the product css we're going to have a lot of media queries so here i'm going to say media and give it a max width of the same one the first breakpoint of the home screen and here i want to give the product a width of 360 pixels and if i save this and go back if i get to this break one here you can see the boxes became bigger it just looks nicer in my opinion doing it like this and now i want to style it for all of the other breakpoints so i'm just going to copy this down a few times and the next breakpoint is at 1115 and we want to give it the box size a width of 330 pixels if we go back we go here and then the next block size is you can see it happening around here slight but it did change let's just check it again yeah okay the next uh size i want to give it um is at 1028 and i want to give this a size of 300 pixels in so if i go back and watch this happen 200 and so here we can see it kind of makes weird it's like this this media query is not firing off for some reason let's see what i did wrong here so this one is not firing off okay so i saw what i was doing wrong so just remove all of the other media queries down below because that keeps on overriding them to 360 pixels sorry about that that was a noobish mistake the next thing we need to do here is add the next breakpoint of 200 and of 1028 and set this to 300 pixels so if i go back and view it now [Music] you can see it changed so you can now see the different box sizing so here about 15 it should become smaller over there and then once again over here becomes smaller and then the next size is the breakpoint for mobile so you can set this equal to 950 and save so when it gets to 950 breakpoint so around here we would like it to take a bigger a bigger width so of four 400 pixels so now it takes up the bigger screen size the next media query is when it gets to 830 pixels we now want to make it a little bit smaller again so we're going to set it back to 230 pixels so if we just see this in action it goes here and then 830 is when it's almost close to one another around about here then it becomes a little bit smaller again you can actually make this a little bit bigger but oh well you can see the media queries in action another breakpoint is at 700 pixels and we want to set the size here to 290 pixels of each other get there you can see it changed and then there's two more or three more we have at 630 pixels we can set this equal to 50 450px so if we get to 630 it becomes one it becomes one item a row and then we just made it a little bit fatter so it just takes up a bit more space and then next one is a breakpoint at 500 pixels so when we become much more smaller screens we set this equals to 350 and then the next meter query we can add here and set the size equal to 400 pixels and set the size of the box equal to 300 so it's now it's back to its original size so if you see this in action we can see this working perfectly here it becomes a little bit smaller and then smaller again and here we are on the right side for mobile so this is perfect we have this working nicely the next page we're going to style is our individual page so if i were to go press view you can see it redirects to product and then the product id we're firstly going to hard code it and then we're going to dynamically render the values and then the next page is the cart page and then we'll set up the redux i know this is a long video i might break this down into two videos um but yeah hopefully you stick with me and still enjoying this sorry about the media query a little bug but we figured that out and yes let's continue let's do the product page next for viewing the product okay so let's start with the product screen i'm gonna speed through this a little bit so the product screen we're gonna have a few segments we're gonna have the product left side and then the product right side so we can call this one dev class name of product screen i'll just kind of score left and then i'm just going to copy this down and name this product screen underscore underscore right okay so the left hand side will have a few few things in it we'll have the left image so you can create a div for a container for the image so you can say this is equal to left image and in here all we're going to have is an image and i once again will go and copy that image from our product over here i'm just going to copy this image we'll add this dynamically when we add readouts okay and then here's just product name okay so that is that piece of the div the next part in the left side of the screen we have a div called product info so we have dev and you can give it a plus class number uh left info left i'm just going to score info just like that and in here we're going to have three p tags one p tag for the class name so we can say left underscores called name and then we can add here playstation or just product let's just call it product product one then we're gonna have another p tag i'm just copying this down and the speed tag will hold the price so we can say price is equal to dollar sign and then we just add in some value we can remove this class name copy this down again and then in here we have a description and this would once again just be some lorem ipsum and we give it a count of 15 just like that okay and then outside this is all for inside of the the left container the right container we're going to have the following we're going to have a div that is equal to right info and then some button so inside of this dev we're going to give it a class name of right under underscore info so this will contain the price the subtotal the amount you choose and so forth so in this div we'll have a p tag that says price and then we'll have a span tag and inside of the span tag we'll render the the price so i'm just going to add here once again hard coded values like that next one is a p tag of status so the status will just show if the item is in stock or out of stock i'm just going to hard code this for now and then the next p tag is the quantity quantity field so the quantity we're going to add a select option so you can be able to select i'm just gonna remove all of this and then in here we're going to render a few options so we're going to give it value and just copy it down let's just add four for now this will all be rendered dynamically and like this and then the last thing we can add a p tag with a button inside so the reason i'm using p tags it just helps with spacing and styling and we can give this a type of button and give it a class name we can just say add to cart just like that and that should be everything we need for our products page so if we save this and go back to our page we can see the image is extremely large and everything down here is also just very ugly so let's get to styling this so inside of my products.productscreen.css i'm going to start styling these so i'm going to say product skin and then i'm going to give it a max width of 1300 i'm going to give it a margin at the top of one rim and center it in the middle and then i'm going to display this entire container as flick so this would put everything right next to each other like that if we actually um yeah that's fine and the next thing we want to style is the product screen i'm just going to school left hand side we want to display or flex as well so it would add them to to the side and then i'm going to give this a flex size of 80 percent of the screen so if i save this it should look a little bit weird because we didn't give this one a styling yet product screen left side let's just see if i name that correctly copy okay then it would style it like this so i think i i mistyped this uh the next thing we want to style is the left underscore underscore image i think i gave it that name yes left unscrewing image i'm going to give this a margin of one rim and we want to give this a flicks of 60 of its container so it's in the left the the the product left side we want to give it 60 of that container next thing we want to do is lift underscore underscore info and we want to give this a margin as well of one rim we want to give it the flex of the remaining 40 percent of that container and then we want to give it a background color of white so it stands out from the body you want to give it a height and set this equal to fit content we're going to give it a font size of 0.9 red so it's a little bit smaller and then we want to style the lift on the screen score name and give it a font weight of bold so it just stands out a little bit more we're going to give it a font size of 1.3 rim okay if we save this and go back we can see it's getting a little bit more shape we haven't styled this site yet though but we'll get there the next thing we want to style is each of the individual b tags inside of the info so you can say here info and style the p tags as well as the right side so we want to give the right side i'm just going to score info p tags the exact same style so here we're going to give it some padding of one rim all around and we're going to give it a border bottom of one pixel solid and then some rgb value rgba and here it's going to be 0 0 0 and then opacity of 0.2 if i were to save this and go back we can see it created this kind of box looking thing thingy now we can see that it adds a border to the bottom of the last item as well which we don't want so we're going to remove that by saying dot left i'm just going to sort info and select the p tag but the last child and we're going to do the exact same thing for the right info so we can just say right and we want to give this a style the border dash bottom or just border we can choose the entire border we're going to give this border of none if we save this you can see it looks a much it looks much better now okay so next we want to do is style the right side of the screen so we can say product screen instead of left side we can choose right and here we want to give it a flex of 0.2 so if you remember here we gave it a 0.9 ah 0.8 and here we give it a 0.2 so it just takes up the rest of the the screen size you can see it's placed nicely now and then we want to style the right info div so i'm just going to write info and here we're going to give it a width of 250 pixels we're going to give it a margin of one rim so it's aligned with the rest we can give it a background of also white and we're going to give it the same box shadow as we gave the individual items so we're going to give it 0 1 pixel 4 pixel and then a rgba of 0 0 oops zero zero zero and then zero point four if we just save this and go back we can see it has this nice looking box um for the info next thing we want to style is the right infos paragraph tags so right info and we want to style each of the paragraph tags i'm going to give it a padding of one rim i'm going to give it a font size of 0.8 [Music] we want to display it as grid so that it is equally pushed away from each other you'll see it in just a second give it a good template column and repeat this twice of one fr so if we save this and go back you can see these things are nicely aligned so if i were to remove that you can see it's not really aligned at all it's fine like this but this looks better in my opinion okay so it's nicely aligned the next thing we want to style is give the the button a style so the right info p tag we're going to get the button and we want to give this button the following we need to give it a grid column and we want it to span all the way so we from one to negative one so if we check it out it spans the entire way now so that's exactly what we want i'm going to give it a width of 100 we actually don't need to do that now that i think about it doesn't actually do anything you can remove that and then we want to give it a padding of 10 pixels and 16 pixels then we're going to give it a background color of the black i'm going to give it a color of that off-white we want to give it a border of that one pixel solid once again that matte black give it a cursor pointer and then we want to give it a border radius of five do we want to do that let's see how it looks like this now let's just leave it like that i'm not going to give it a border radius and the next thing we want to style is the select so we can just grab the select like this give it padding the same as the button so 16 pixels we save it looks much better now and the last thing we need to do is make this page mobile friendly so if we take a look at when it starts shrinking it this doesn't look nice at all so we would like them to be displayed below each other at a certain point so this media query is just going to be when it hits the mobile screen so we can say when it's a max width why do i keep on doing that okay of 960 pixels we wanted to adjust a few things we want to adjust the product screen we want to instead of making it only flex we want to set the flex direction to column so we can just say flex directions equal to column if we save that and we go here you can see it changed that pushing it down so we want to do the exact same for this left container so here we can do for the left container we can copy this place it down and here i want to display flex direction and set that to column as well so if you get here it is nicely aligned below each other so i'm just going to add flex to one and then for the image we can make the image display all the way as well so we can say image underscore underscore or x actually left from the scroll image and give this a flex of one as well so it just takes up the entire screen we want to lift on the screens to info to display effects of one as well then we want the product right side and we want this to display flex of one so it takes up the entire space and then just give it a padding of one rim if i save this it looks a little bit better we want this box to display the entire width now so we can get it by right info and setting the width equal to 100 and give it a margin of zero we save it it looks like this so this looks much better it even looks nice on mobile screens so this is how we adjust the product screen very nice this is starting to get there okay so the next screen i want to tackle is the card screen how the card screen is going to look so let's get doing that okay so the card screen is also going to be really quick we're going to do that quickly we can close all of this up close this up the app screen can still be open it doesn't really matter close it up open the card screen and the card screen.css and here we're going to start building so the card screen we're going to add inside of its container we're going to have once again a left side and a right side so you can say class name is equal to card screen underscore underscore left and then we have a h2 of that says shopping cart so if you can hear the dog it's our neighbor's dog so we're going to copy this down we can remove the h2 but we have the right side over here now okay so in the left side we're going to render each one of the cards items so this is going to render a card item just like this and this card item will have the data of that specific item so this will be its own component so let's create that component in the components folder we can say cart item dot js and give it a style of style folder of cart not a folder card file cart item item.css and in here we can run the rafce command we can import cart css card item css over here and we can give this a style name of class name card item just like that and in here we can render a card item for now and then import it in here you can say import just name it components and here you can say import card item from the components folder the cart icon file and just like this so if you to save and go back we can see cart item is being logged to the screen excuse me okay so the next thing on this screen we're gonna do the right side the right side is going to have a div of card info so class name and set this equal to card screen underscore is called info so this will contain all of the info about whatever is in your cart so here we have a p tag which has the subtotal and the subtotal will have some count so let's say zero for now and say items afterwards and then we'll have a p tag once again of the price so we can say dollar and then 49.99 okay so that's that part of the div and then the last div is just the button so we can add here and add a button in here and this button would say proceed to checkout just like that we need to go to view this now we can see everything on the screen so let's get to style these things okay so the cart item we haven't done yet so let's quickly do the card item this would just make the styling more visual for the card screen so the card item will look as follow okay so in our card item container we'll have a div that contains the card item image so you can say class name so go to cart item underscore underscore image and in here we'll have the image tag that once again i'm just going to copy that from the product get this image right over here copy it paste it in here product name okay so that is the image container and the next one is going to be a link which takes us to that individual product so let's import link from react broader dom and here we can place a link tag a link component excuse me and in this link we'll have the product name so this will link to [Music] backticks we'll go to slash product and then we'll have that product id so once again i'm just going to pass in this for now we'll give this link a class name of cart item underscoring school name and in here we'll just have a p tag that contains the name so it's just going to be product one for now and then the next thing just below this link will have a p tag again and this will have a class name of cart item underscore underscore price and this will just contain the price of the item so you can say 499.99 and then the next thing we need is the select so we can add the select again here oops grab that clear it out we can give it a value or we can't set the value now and in here we'll have the option so this will obviously be rendered dynamically once again so i'm just going to add four just like that okay so almost done all we need is the button for deleting or removing the item from the card so we can use this a claw class name that is equal to cart item underscore underscore delete button and we give it uh on click later and in here we'll have an icon of the class name of if it is trash so this will show little trash icon okay and we can give this a class name of cart item underscore underscore select and if we just save this and go back you can see once again the image is huge but we have the different um parts of the cart item so let's quickly style the cart item and make it look nice so here i'm going to target the cart item container and i'm going to give it a width of 100 so it takes up 100 of its container padding of one rim i'm gonna give it a margin bottom of eight pixels i'm gonna give it a display of grid so each light each piece inside of the container will have its own grid column so you can say grid template columns and here we can say one fr for the image then we have four fr for the name then we have one fr for the select and then one fr for the no it's for the price then the select and then the delete button so we'll give this a gap of 8 pixels we'll give it a background color of white we'll give it a border radius of slight slight border radius of 2 pixels we'll give it a place items um in the center of the grid and then we'll give it yeah that's that so if we save that and go back we can see it still looks a little bit weird because this image is still huge let's continue we'll style the card item on the sponge for name and give it a text decoration of none because it is a link tag to give it a color of the matte black we used all around then we can install the card item underscoring school name and give it a hover effect and give it a color of that pinkish thing we used with the nav bar as well just like that then we want to style the card item underscore underscore select just want to check that i named this correctly yes i did okay so the select and then we can give it a style of padding 10 pixels and 17 pixels then we can style the button so card item underscore underscore delete button i believe that's what i called it yes and then here we can install it to the padding of 10 pixels 17 pixels give it a color of red this would just make the logo red inside to give it a background of that off-white we give it a border and set the border equal to one pixel solid and then that matte black give it a cursor of pointer and here we want to transition all and for three seconds we want to just season ease out and the reason we're going to transition is because we're going to make the button appear a little bit bigger when you hover over it so here we can say cart item underscore underscore delete button and we want to put a hover state on it as well as a focus state and an active state okay and we can move the last comma and here we can change the background and set that equal to the matte black and then we can say transform and here we can upscale the button to 1.2 of its original size so if we were to save this and go back you can see this is still huge but if i um show you the button it has this kind of look so the next thing we want to do is do a few media queries for this pay for this item as well so we're going to say media and then give it a max width of 700 pixels so at 700 pixels we want to change the cart item under underscore name and set the size so the font size equal to 1.8 ram we want to select the card item on the square underscore select as well as the card item button so um delete btn and we want to resize them we want to give them a padding of 8 pixels and 13 pixels and then the last thing in this media query is the card item underscoring price we want to set the price to a little bit smaller font size so we can give it a 0.8 red just like that let's make this media max width and set this equal to 500 pixels and here we want to set the same things as here above so we can just copy all of this copy and paste it down here i want to change this to 0.6 and make this 5 and eight pixels and then the last one 0.6 as well so we can once again actually um group those two but it's okay now if we save this and go back we should be able to see the media queries take action you can see the size has changes over there so let's get to styling this um product that it just looks better okay so we're done with the card item so in the um card screen we're gonna style the card screen now so in the card screen we're going to select the card screen and once again give it a max width we firstly display it as flex so this should throw everything in the correct way just like that and here we can give it a max width of 161 300 pixels to give it a margin top of two ram and auto on the sides so it's just centered like that and then we can get the card screen h2 that says shopping cart and give it a margin bottom of one rim then we can get the card item card screen underscores for left and set the flex equals to 0.7 percent of the screen we give it a margin right of the one ring to give it a background of transparent and then we can give it a padding of one red and then the card screen right side on the scrollers to the right we can give this a flex of the remaining 0.3 the 30 and then give it a background of white give it a box shadow of the same box shadow we've been using all along zero one pixels four pixels and rgba and here's zero zero zero and then zero point four opacity and give it a height of fit content like that if i want to save this and go back we can see the improvements been being made already and the next thing we need to do is style [Music] the right divs so we're going to give them that that that box looking effect as well so you can say card screen on the screen let's go right and we're going to select the devs and we're going to give them a border bottom a one pixel solid and a rgba of zero comma zero comma zero comma zero point two and give it a padding of one rim then we want to first get the the last child so we can say card screen underscores will write and we want to select the the divs and the last child we want to set the border equal to none if we check this out we can see it has this box looking effect once again next thing you want to style is the cart screen underscore underscore all of the info p tags we want to set the padding equals to 8 pixels so if you switch and view it now we can see all of these has 8 pixels this one has 8 pixels okay so the next thing we want to do is guard screen and i'm just going to scroll right the image the the display of this grid it's not looking correct i'm not sure why so let me go into the cart item css so this should be display grid oh this should be columns display template columns yeah okay i wanted to say so just change that to grid template columns not grid auto columns so now it looks it actually looks like it's supposed to look now wow okay sorry about that okay so we fixed that the next thing we want to style here is let's see i'm going to style this button so let's grab that button so it's inside a div and the button we're going to give it a padding of 10 pixels 17 pixels i'm going to give it a width of 100 we're going to give it a background color of that matte black give it a color inside of the off-white i'm going to give it a border of one pixel solid and then that black color and then cursor pointer you save this and go back we can see it looks nice now have this hover effect we're going to just want to add a hover effect to this button so we can copy that and place the hover effect on it and we can just change the opacity to 0.9 like this so it has this nice looking just shows you indicating that you're hovering over it now we want to add the media queries to the screen as you can see it's not really responsive we can we saw it changing here we can see the the products details and stuff changing of size so that's nice this is still not selecting correctly um card item select did i yeah i named that incorrectly so inside of the cart item here it should be cart item just like this no now it displays correctly okay so this looks fine and next thing we want to do is make this mobile for the card screen so we can say add media and we can say max width is 1320 pixels we can select the card screen and make the max width 900 pixels so this is the first media query so if i were to go here you can see the the max screen size changing okay the next one is we can copy this again paste it down here is when we get to 960 so when we get to mobile view we want to change the max screen size to 800 so if we save this and we get to mobile view about here then the screen size changed again the the max screen size and then the last meter query is when we're inside of this instead of this mobile view we want to change the screen card screen and set the flex direction which is the column so if i do that i have to remove this we can see when we get here it's actually supposed to put it in column why is it not putting it in the column okay so i just had to refresh this because i made an error so the server was a little bit wonky okay so there it displayed flex like that and then the last thing we want to do is add the cart item underscore underscore so it's actually not card item storage screen so this has been a long video i hope you're still with me i hope you're taking breaks and then margin one ramp so if i were to view this now you can see that there are being mobile responsive so this thing over here we actually want to remove the margin to the left so if we get to mobile view here i want to remove the margin of the card screen left so card screen i'm just going to scroll left i want to remove all margin so now it's equal nice just like that i think this is pretty nice so if you add more items to the cards we can see how this looks by adding it like this we have more items to the card becomes smaller and now it's completely mobile boom so if i switch to shop we have this if we switch to cart we have this so this is really nice we are basically done now now we just have to implement redux so this is where the exciting parts come where we use work with state in react this should be really straightforward we already installed all of the dependencies we just have to set up the store and then we're good from there so let's do that next okay so let's go and start setting up our redux i'm going to close all of these up just to make it nice and neat close back end and inside of my source folder i'm going to create a new folder and call it redux everything relates to redux we're going to place in here and in here i'm going to create a store file store.js just like this and in here i'm going to create an actions folder reducers folder and then a constants folder okay so in the store we're gonna start with the store here i'm going to import create store from redux okay what i'm gonna import from redux as well is the combine reducers and then the apply middleware okay the next thing i'm going to import is redox stump so i'm going to import it as thumb from redux stunk then i'm going to import from the dev tools so from redux dev tools extension i'm going to import compose with dev tools so now we've done importing all of our necessary imports let's create our reducer so i'm going to say const reducer is equal to combine reducers and instead of combine reduces i pass an object and in here we will have all our different reducers so we don't have any reducers now so i'm just going to leave that out then i'm going to create a const middleware which is going to be an array that has all of our middleware in it so we only have one middleware so we're going to add thunk in there this is our middleware it helps us to make asynchronous quests in our actions which you can't do otherwise with redux so other was i think redox sago but i know redux thunk and um let's create our store so you can say cons store is equal to create store and this create store takes in a reducer the one we created up there it takes in some initial state or um the next thing is an enhancer and we're gonna compose with devtools as our enhancer and then apply middleware inside of that and then we're just going to spread the middleware so whatever is in this array we're going to add it there so we can basically just add thump right in here like that but i just like doing it in this way because you can add more easily by just adding it there and then we're done with that we just want to export default store okay so now we're done with creating our store setup so let's connect our application to the store so in our index.h index.js here we want to bring in our react redux package so we're going to say import something from react redux and in here we're going to import something called the provider so this will provide an entire application with this state or with the state in our redux store so here we're going to wrap up our application with the provider component just like this and then this provider component takes in a store prop and here we pass in magically the store we just created so we're going to import store from and in the redux folder we get grab this store and then we just pass in store as the com as the pro we can save this now our application has access to this store so actually if i were to go to my browser tools now and view under the redux tab so you can add this extension to your browser by just saying redux chrome tool and this first one redux devtool it already says add to mine so i can remove it but it would say add to chrome from here and then you have access to seeing redux over here so no store was found for this application if you refresh bam the store was added and the reason for that is we added this compose of devstool dev tools as an enhancer so it gives us access to all of the state the actions what happened you can see the actions being fired off here what is the differences in state you can see like charts of how your state looks and so forth it's really amazing okay so let's continue now that we're done with that let's start by creating our constants i like doing it in this order that is the order that i learned how to do this and in our contact constants we're going to have two files the cart constants and the product constants so we can say charge constants dot js and in here we're going to export const we're going to export a few constants we're going to export a constant with the name add to cart and we're going to oops we're going to set that equal to the same value but as a string so this just helps with not making spelling mistakes you don't have to do the constants but it's just best practice to do it this way next one is remove from card i'm going to copy this and paste it right in here the last one is reset card so we can say card reset copy this and then add it to your application add it to your variable name we can save and we're done with the the cards constants the next constants we can create is the products constants or just product constants dot js and in here we have the following constants we'll have export const get products underscore requests so we'll see where we use this when we initially make a request to our api we send this so that we um add the loading as true and then we want to just change this to success so when we finally get our products and then the last one we want to change this to if something happened and the products getting the products failed then we want to we can actually just copy this and paste it down here and this is going to be instead of products we can rename all of these to product individual singular and then we can add here details so if we go and fetch the individual product and view it on the product screen we call this actions or this constants and then the last one here is just product details reset if we save that that's all of the constants for the products so now we're done with all of our constants now we can go into our reducers so the first reducer we're going to work on is our part reducer so i can create a file here and call it cart reducers.js and in here we're basically going to import everything as action types from our constants file so we can say from the constants folder the card constants so now we have access under the action types if i were to show you this i can say action types dot and then it shows me all of the constants in the in the cart constants and here i just want to export my reducer so i can say export cons and this is card reducer and this card reducer takes in two things it takes in a state which we can set equal to just a document and this document or object has a field card items and set the squad items to just an array and it takes in action so this is our initial state or our default state we set and now we want to check the actions that are dispatched so we want to check the action type so if the action type is of type so you can say action types is of type add to cart we want to do the following let's just add the default case here as well so it just stops with that line so we can just say if there's nothing if one of the action types that came through is not one of these we mentioned just return the state okay else what we want to do here is we want to say const item is equal to the action dot payload so we'll get in our action dot palette we'll get the item we would like to add and then we want to check if this item already exists in the cart so you can say item is equal to state dot cart items and here we want to find so we can run the array method fine and then we want to check if this one we are mapping through so the x dot product is equal to the item dot product so the product will contain the id of this product in the cart so the product will just reference the the the item by its id so if we find that id in our current cart items array then we know it already exists and it will return the item in there so here we can do a if check and say if exists item so if it actually exists we want to do the following to our cart state we want to spread the state of our cart then we want to go to the cart items and we want to set it to new cart items dot map so we want to set it to a new array and we're going through that old array and we map through each item in the array and we check where the x the current item it's mapping through dot product is equal to the existing item dot product and then we want if that is true we want to set that equal to the new item we found in the action.payload so this item here we want to set that equal to the new item else we just want to set it equal to the current item it is mapping through so that is what what we want to do in the if part else if the item was not found it's the first time it is added to the card so we just want to add it to the card so here we just say return and we once again spread the state and now we can go to the port items array and just push it in here so we can spread the card items and then just add that new item in the array just like that okay the next action we had is for in case we have an action type of remove from card so we want to remove this item from the card so we can say just return spread the state and then we want to say card items and we want to take the state of the cart items and we want to map or filter through it so we want to filter through each individual item so we can say here if the item dot product so the id is not equal to the action dot payload so in the payload for remove from cart we'll just send the id of that pro of that item so we want to add everything to the new array so the card items array where it is not equal so where the product is not so we kind of leave it out of the new array so that is how we would do that and then yo that's i think that is it so we can save this and now we can go to our actions so in our actions folder we can create a cart actions.js and in here is where we're going to make our http request to our backend to get the products details and add it to the cart so in here we import once again everything as action types from our constants folder and then the cart actions and here i want to import axios so this is going to help us make us our ajax requests so here we have a function called add to part and this function takes in the id so the product id and then the quantity of that product and then we return the asynchronous function which has access to the dispatch function so this is why we use redux stun to be able to do this and once we're done doing that we can now say cons and then destructure the data out of our axios request so we can say axios.get and we want to make a api request to our backend so we can say api slash products and then that specific id so if you remember from our backend which was a while ago we had the products controller and then we can go to the route here we have the product slash id so we are going to api products slash id product slash id so we hitting this round and getting that um that items data back so we can just add the the id in here and once that is done we want to dispatch a type of action types dot add add to cart and what we what we are expecting in the reducer if you remember correctly in the reducer we are expecting the item so we can build up that item now so we can say payload is equal to a document or a object and this object will have the product field which is equal to the data that is returned dot underscore id will have the name field which is equal to the data dot underscore or just data data name then we have the image url so this comes from the database now so we can say data.image url we have the price so we can say data.price then we have the count in stock and here we can set data to count in stock just like this and then the last thing we want to pass in is the quantity that we get from the function call up here once are done with the dispatch we want to save this car to local storage so we can say localstorage.set item and we give it a name of cart and here we want to set the item to the local storage so we have to save json and we want to get the data that we dispatched here so in order to do that in this second function here we can extract the get state function this is part of redux thunk so here we can now say the following music we can say get state and this will give us the cart state which we actually haven't added to our reducer yet now that i think about it but we'll do that in just a second so under the cart let me quickly add it to our store in here we have to pass it to combine reducers so we first have to import producers so you can say import from the redux it's actually in the same file so i can just say reducers and then we have cart reducer and in car tradition if you remember we had add what was it called we called it card reducer just card tradition so you we can import the card reducer and in here by combine reducers we give it a name of cart and then here we add the card reducer to the value of cart so now this cart value should be inside of our store so if i were to refresh here and we go to state we can see the cart value is in here now so now we want to get access to the cart state and the cart items in our action here so we get state we go to the cart reducer and then we get the cart items and then we add that to our local storage so this would be the end of this add to cart function the remove from cart function we can once again just export const remove from cart and here we don't have to do asynchronous action so we just want to dispatch from this action so we can say dispatch and then we want to get the state as well because when we remove the item from the card we want to update the local storage and here we can directly call this patch of the type so we can say type of action types dot remove from cart and here we just want to send a payload with the id that we want to remove and this id will be sent from the remove from cart function and then we just want to update our local storage got saved item we want to get the same one as we named it up here the cart and we want to do exactly the same say json.stringify and in here we want to get state and we want to get the card state and the cart items just like that and it would update it because once this dispatch is complete this cart items will no longer have that item we removed so if we to save this now we are done with our cart actions so we will we will be able to add items to our cart okay so the next thing i want to do is do the products reducers and actions and and so forth and then we can add it to our application so i'm just going to keep the store open so i remember to add the products so i already have the products constants so let's go to the product reducer let's go to the reducer folder and say in the reducers we create product reducer reducers.js and in here we're going to handle all of the state that we receive from our back end so the first one we're going to have we're going to have two reducers we're going to have the get product reducer and the get product detail reducer so we import once again as action types from the constants and their product constants this time so we're going to export our first reducer we're going to give it a function name of get products reducer get products reducer and it will have a state and then some action this state will look as follow we'll have a state and we'll set this equal to object and this object will contain the products which is an array and then the action that is received so here we can make a switch statement where we check the action dot typed and in case the action.type is of action type start get so we first want to do the request and when we do the request we want to set loading to true so here we can return and what we do is set a loading value and set this equal to true and this will allow our application to wait until this value is equal to false before we display certain things otherwise it would crash so we set letting to true and then we set the product still equal to nothing so if we have a case where we have action types dot get products success now we know we got the products so we want to set loading to false and then we want to add to the products array here we want to add our action dot payload so from our back end we will receive a array and then we just populate this products with the array we got from the backing and here we can say action dot action types dot if there was a fail so get product get products fail so if something were to fail basically all we want to do here is set an error variable so we set loading equals to false but we want to set some error equals to the action.payload we'll send the error message in this payload and then we just need a default case so that you could stop complaining just like this so this is the first reducer the get products reducer so this would get all of the products when we get to our home page it would fetch all of the products and list them the next one is we if we click on view a product so we get individual product details and set this equal to some state in this state we'll just have a products document just like this and it would be equal to just the empty document and then we have the action and in here we're going to have a switch statement once again of action dot types we'll just type and if we have a case where the action types is equal to get product details request we want to do the same as that we did above we want to set loading equals to true and then we don't have to add anything to the product so we can kind of leave that just like that we can say case action types dot get product details success here we want to return and set loading equals to false and we want to add to the product we want to get our action.payload and add that to our product whatever is that we get from the backend so when we make a request to the backend in our payload we'll get that individual product and then just add it to that object the next thing is case of action type dot get product fail so if there was a fail we will return loading as false and we'll set the error that we get from the action.payload the last thing is when we get action reset so action types dot get underscore product underscore details reset just like this and all we want to do is return empty product so you can just say product and set this equal to an empty document the last thing is the default state so we can just return the state so here we are done with our reducers so let's add our reduces to the store so i'm going to bring this down we're going to have get products so let's just um reference the white one so it's product reducers and here i want to get products will do product detail and get products did i did did i not name this reducer yeah it should be reducer save this get products details reducer and then get products reducer and in our combine reducers we add two new pieces of state we get products and we set that equal to get products reducer and then the next one is get product details and you want to set that equal to get get product details reducer so if we just save this now and go back to my application and refresh we can now see that the through the three pieces of state we have the get products which has an array of all the products then we have the get products details which contains a specific product so now we are done with adding the reducer let's create the actions for the the products so in the actions folder we create a product actions.js file and in here we're just going to dispatch all of our actions to get from the database so we can import everything as action types from the constants and the product constants and here we want to import axios from axios and once this is done we have the two different um actions we're actually going to have three but we can say export const get products so when we get to the home page we'll call this [Music] we'll call this function this function has access to the dispatch and here we can do the following we can make our try catch http request so in here we dispatch the type of action types and here we say get products request so we set the loading to true and then we make our request to our api so we can just destructure the the data and we can say await axios.get and here i want to get the following things i want to go to the route of slash api slash products and this should just return all of the products in the data then we can dispatch the type of action types dot kit products success and then the payload should contain all of the data so you can just add data in over there okay so if there is an error we want to dispatch the following we want to dispatch a type of action the failed one so we can say get products um failed so it failed and here we want to set the payload equal to the following we want to check if there if this error has a response then we want to check so if this error has a response and this response has a data dot message field then we want to send back the data dot message field so we want to send this back else we just want to send back the error dot message like this okay so now we can copy this this is the end of the gate products and we can paste it down here and we can say get product details and we'll need a product id to get the the details from and here we can dispat action get product underscore details request then we want to make a request to a specific endpoint so this is going to be backticks and in here we want to find the product by its id so in the back end we had that product by id if you go to the routes we have this we want to make a request to this route again okay so once we've done that we get the product in the data we want to dispatch underscore details success and then pass it through else the error remains the same so this is much faster okay so we can save this and then the last thing we want to do is we want to remove product so we can say export remove product details so this is if we switch back to the screen we want to first remove all of the state so in here we can once again get the dispatch but this is not an asynchronous function so we don't have to say async and here we just want to dispatch we want to dispatch the type of action types dot get product details reset this one and save so this is all of our actions done so if this was a little bit too quick for you just rewind and watch it over again this should all of these actions should make sense when we add it to our application now so the first thing we're going to do is fetch our products so i'm going to going to exit out of this close our back end and inside of our home screen i'm going to initially use a use effect to find our products so let's get started with that instead of rendering the products like this i'm going to get it from my store so i'm going to import use effect and from react and here i'm going to add my use effect so before i add my user fix i want to get two hooks from the react router or react redux i want to get two hooks so these hooks are use selector and use this patch so this is a much easier way of working than that map state to props and map dispatch to props you imported really easy and functional based components so here i can say cons i create a dispatch variable and i set this equal to use dispatch the next thing i want to do is get the products data so i want to in my reducer i want to get this product's data so i can say get products is equal to use selector and this u selector takes a function that returns state and i want to return the state dot products or get products and from the get products i want to destructure so i want to take this and i want to destructure and get the products array so there would be more things added here we get the product la array we get loading and then we get error so before rendering anything um or mapping to anything you want to check for loading or error so that you don't get errors okay so in our use effect when this page loads every time this page loads i want to make a dispatch to list the products so we have to import that action so we can go down here and say actions and i want to import something from our redux file and our actions and then our product actions so we want to get products so get products and i'm going to rename this as list drawbacks so that we don't have a clash between these two names so list products i want to call i'm going to say dispatch and here i'm going to say list products and just run it as a function so now we should be able to list the item so if i just add dispatch as a dependency to the use effect and i save this and i go back to my page and i reload we can see the products was populated what does it say say here failed status code let's check oh we have the course error okay so in order to do this correctly for our react app to have access to our backend or make a request to to our backend we have to add a proxy so inside of our front end we go to its packet.json and here we can add a proxy so this proxy should be equal to the following it should be equal to http 17127.0.0.1 and then port 5000. so this is just um redirecting it to our localhost port 5000. so if i were to do that save and refresh this should work now redox request failed okay so let's check this out we're making a request in our redox actions or products actions so here we get products we dispatch action loading and then we make a request to api products it's a get request to api product so in our backend oh you know what we have to actually restart the server to do this so i'm going to restart the server run dev again this should work when restarting the server because we made a change to the package.json so let me check if this works let's cross our fingers looks like it worked we don't have an error so in our redux we can get to products products and the products is now an array of our six items we have in our database so this is awesome now we just have to render them in our home screen by passing it to the products so over here we want to do the following checks before we do anything with this products we want to check if loading is done so we want to say if loading then we want to display a loader so i'm just going to add h2 that says loading you can add your own loader here so if it's loading show the loader else if there is an error so the one like we got now if there's an error i want you to display h2 that says that just logs that error so this loading is coming from our state over here and this arrow is coming from the state over here so if none of these two are true so if there's not loading and there's no errors then i want you to map through my products so the products that we got from the state.map and then for each product i want to return a product component and render it so if i would do this and save and go back you can see it's loading and then it shows us all the product and it rendered the exact the same amount of products that we have in our database so now we just have to pass in the correct values to render on the screen so let's do that but in order to do that we're going to have to open our components product component and in here we're going to have to extract all of these things so we're going to need a image url you're going to need a it's a name you're going to need a price a description and a product id is that all see here we pass in the product id um here we have the price here we have the description name and then the image yes that looks like everything and instead of rendering the hard-coded values here we can pass in the image url and for the alt we'll just put in the actual product name so we can say name and here where it has the product name we can just add product or just name to destructure it from there and in the description we can just add description but in the physical product thing i don't want the entire description to show so i'm just going to add a substring of the first 100 characters and then i'm just going to add a dot at the end like that okay so the price is over here so we can add the price down there and then over here i just want to add the product id so instead of um yeah this should work and in our products when we render it we need to pass that product so we can say product id is equal to the product we are rendering through dot if we go back to our state we can see it's under the underscore id field so you can say underscore id this actually needs a key as well so we have to pass it that same thing that's the key let's just make this neater to read by doing it like this then we need the name which is equal to the product.name then we need a price which is equal to the product dot price have a description which is equal to product.description and then the image url which is equal to the product dot image url if we save this and go back it should load each individual item separately so loading is still set to true and boom we have each individual item loading separately so if i were to click on this it's still going to give me the hard-coded product view but we'll do the exact same thing that we did for the products so this is nice we're getting there so [Music] okay so this i think this is done yes this this is done so the products is done as well so the next thing we need to do is go to our actual product screen just the product screen and here we want to render our values dynamically as well so i'm going to go into my screens product screen and here once again instead of this hard-coded values we're going to get a few things from our state so we're going to import use state use effect from react then we're going to import the use dispatch the use selector from react redux then we need to import our actions so i'm going to import the action of get product details like this from the redux folder and the actions and the product actions and we want to get another action of add to cart because if we look at this view if we click on an item we can say add to cart so we want to be able to add to cart from this page so let's actually stay on this page and we can see it loaded the actual id in the data in the url so add the card from redux slash action slash cart actions this time okay and we're gonna get a few things as props we're gonna get match and history so in here we're going to have a const of state called quantity and set quantity so we'll be able to adjust this field over here this is what the quantity state is for and we're going to say use state and set this equal initially to 1. then we want to create our dispatch variable so once again just say use dispatch and then we want to extract our state so we can say product details product details is equal to the use selector hook that takes state and returns whatever we want from the state so we want to return the state dot get product details because if you remember we have in our state this get product details which contains the specific product okay and from this product get products detailed we want to get the loading the error and the actual product and we're going to set this equal to the product details so in our use effect we want to check for the following things and do the following things we want to check if the product exists so we're looking at this if it exists so if it is in state and the match dot params dot id so whatever is in here that is what match.params gives us it gives us this and then we say dot id because in app we set a id field here if that is not equal to the product that is in state dot underscore id then we want to dispatch an action so we want to dispatch get product details and we want to pass it if you remember it takes in an id we want to pass it whatever is in our param so we can say match params.id and here we just have to add a few dependencies it's the dispatch dependency it's the product dependency and it's the match dependency if we do that and save now it should load the get product there we've got our actual product that that was loaded so if we click on the iphone we get the iphone data and you can see the actions being firing off here so now we have to do is just display the right information in screen on our screen so instead of here so first let's make sure that it's not loading okay so we're going to go all the way above here and we're going to say if loading is true we want to display a h2 that says loading else if there is an error we want to display this h2 that just logs the arrow to the screen for us and if none of these two are true we want to do the following we want to render a fragment and this fragment contains everything down below here so we can copy this and paste it into it and save so now if we click on an item we'll see loading for a brief second we'll view it says loading and then it goes now we just have to render the correct information so in here instead of source we can now load the product dot image url and for the name we can just load product dot name so if we save this already it should change to the correct view so here we can just add the product name as well product dot name and this is coming from our state now so here we can say product dot price and in description we can just say product dot product dot description and then the last thing is on the left hand side the products page so if we were to save this and go back you can see it's um re-rendering and this price is based upon how many i select so if i were to select like four this price would update to the amount uh let me just make sure about that i don't think i'm talking incorrectly okay so that's actually not the case so leave it like that this just gives you a brief summary of this product is it in stock what's the price and and so forth so this would actually be the same you can add here product.price and in the status we can do the following we can check if the product dot count in stock is greater than zero then i want to render in stock oh that was not supposed to happen else i want to run the render out of stock like this so it would check if we go to our product detail and the individual product we can see that we got the count in stock from the database as well so this would be in stock and the next thing is rendering the select correctly so this is the part where it we use a little bit of a hack so we can say here value is equal to the quantity field we add it and we have an unchanged value here this unchanged value will take an e and then we will set quantity equal to e.target dot value so whatever we choose in this drop down and rendering the correct amount here all we have to do is create an array and we'll use the array constructor and pass in here the product dot count in stock so it will make an array of the exact size that is this product count in stock and then we'll take the keys of this new array and then we'll map and mapping through this we can check for each key we want to create an option so we can say option and give this option a value in here of x because if it's in the zeroth index that means there's one and then plus one so we give it a value of the exact same we can say x plus one and then we need to give it a key because it's mapping and react wants you to add a key unique key so we can just do it like this so let's just see we don't need to do these curly braces we can just pass in these like this and save if we were to go back now we can see the correct amount logging so we have five and if we go to the product we can see we have count in stock five so if we were to go to someone something else we can see there's 15 playstations and there's 15 in stock so this is coming together really nicely now all we have to do is um are we able to switch the the state yes okay so that works so all we need to do is the add to cart functionality now so in order to add to cart we need to do the add on click event listener to this button so we can say on click and we want to add to cart handler and this add to cart handler will be a function that we create up here so we can say cons add to cart handler and this add to cart handler does the following it dispatches to our reducer so it dispatches add to cart to our reducer so we actually have to dispatch add to cart and this add to cart took in an id and a quantity so here we can give it the product dot underscore id as well as the quantity field that we got in the state here and then once that is done we want to history dot push to the the card so we just want to go to the cart and view this item in our cart now so if you want to save this and go back and we add to cart it takes us to our cart now obviously these are still hard-coded and we'll do that in just a second but this is looking really really nice okay so the next thing in this page we're actually done here we're all done with the product screen so the next thing we need to do is go to our card screen and in our card screen we want to obviously use effect again and load everything that was added to our card state so if we check here we add it to cart so if i were to view the card state we can see we have one item in there now we can see the product name image url price and quantity so the add to cart works fine so now we just have to render it correctly okay so instead of hard coding these items in here like this just gonna remove them for now and i'm going to import from react they use effect and i'm going to import the use selector and use this patch once again and the reason we import the use dispatch is when we go to cart and we want to adjust the the cart size or the card quantity from here we need to redispatch the cart to change that so from we act redux and then what do we want to do here um well when we load the yeah okay so we actually don't need that oh okay so you can say import link from react router dom okay so let's do this once again we create our dispatch and we say use dispatch we want to get our cart from our state so we can say use selector and we take the state and return the state dot cart then from our part we want to destructure a few things we want to get the cart item items card items now we have access in this component to the correct items so the next thing we need to do is actually we don't need use effect now that i think about it yes we don't need use effect okay so now that we have the items we want to loop through the items in our cart so here we can do the follower check we can say cart items dot length if the length is equal to zero that means there's nothing in our cart then we want to render a link so this div should have your card is empty and then we want to render a link that says link and this goes to the black to the back to the shop page and in here we just want to say go back so if that is the case that it is empty else what we want to do is we want to map through the cart so if that is not the case we want to say part items dot map and for each item in the cart we want to create that cart item component so we can say cart item and render it in the state and in here obviously we're going to make this cart item dynamic as well but i think this should work so let's save this and go back we can see we only have one item in our cart this is the one item in our cart and it's only rendering one thing so now we have to make the card item dynamic so in our components cart item instead of hard coding the things here as well we can do the following we can get the item gonna get uh you know we just get the item so in here instead of rendering the photo like this we can just say item dot image url instead of product name like this we can say item.name and here we were able to click on the product and it would redirect us we just said item dot underscore id i believe let's just check in the card oh it's under the product so it's item dot product like this and then the item name item dot name the item price click into item dot price and then we'll do exactly the same here for the select we'll have a value which is equal to the quantity we're going to send through i'm just going to check this so the value we're setting it equal to yeah to the item dot quantity that we added and here is going to have an unchanged handler as well and there's on change handler we will actually send this through from our um card screen so i'm just going to console.log here for now so it doesn't throw it here okay and then i want to render these dynamically once again so i'm just going to say create an array array of the item dot quantity or count in stock and then dot keys and then map and in here i want to map through each of them and return an option the option key should be equal to x plus one the option value should be equals to x plus one and then you can close it up and in the body of the option we can add x plus one we need to save this and go back uh cannot properly image of image url of undefined so let's refresh this go back um [Music] you can view item add cart okay so it's having a problem over here oh we haven't actually passed in the item yet so you can pass the item in like this and set it equal to the item if you do it now now you can see it actually loads so the next thing we need to do is whenever we change items quantity from the cart item page so from here when you want to change the item quantity we need to dispatch a a function to redo the cart so now you can see if i refresh we kind of lose the cart data so this is not correct we'll get to that in just a second so in our cart screen let's create a function here called const quantity change and load and this quantity change handler will get a id and a quantity and what this would do it would just dispatch or add to part once again we actually need to import to that action so you can say actions dot import add to cart from redux actions and then cart actions so we have access access to that and then we just pass in the id and then the quantity then we pass this reference to this quantity change handler to our cart item we can set that equal to that and we can then go into our cart and destructure it out of our props as well and whenever there's on change instead of logging this to the screen we can say quantity quantity and then just send in the value so whatever the value is e dot target value as well as the id so it's actually first the id and then the quantity so we can say item dot product and then the e target dot value the e comes from the unchanged function over here so if we to save this it should re this dispatch our our cart so if i change this and set it to two quantity is not a function get it from here set it up here oh i didn't save this oh my goodness okay so if we change this to three it updated to three so this is great so if i go to my cart i can now see the quantity is changed to three the redux devtools are really amazing for working with this okay the next thing we need to do is either remove the remove from card so if i want to remove this from the cart so we have to pass through to this item the remove from cart handler as well so we'll create another function called fonts remove from card and this remove from card just takes in id and then it would dispatch the remove from cart that we have to import here to move from cart and it will dispatch this function and just pass in the id now we can reference this function to the cart items component and inside of our cart item we can destructure that function and whenever we click on this button so we can say on click on the delete button we want to run that function so we can put it in here and just pass the item dot product if we save this and go back and we delete maximum call stack exceeded okay that is not good so let's see what i did wrong here so whenever i click on the button i want to call remove cart and send it the product item um this function this function oh it has the same name okay so we can't do that we have to remove just call it remove handler and here i'm going to copy and paste it in here like this save this destructure it differently here give it a different name here and save so this should work sorry about that so you can't give it the same name otherwise it's going to recursively keep on calling itself so if i go here and i delete it deletes it from the cart and we no longer have any items in our cart and it tells us to go back and add something to our cart great so this is working now the next thing we need to do is update these this little number here and then display the subtotal and everything correctly so let's do the subtotal thing first because that's almost the same and for the subtotal it is over here i actually want to create a function called get card count and this function should run but there is no such function yet so we can say const get count and we're going to create basically the same function in our nav bar and here all i want to do is return the cart items dot producer will just reduce so we're going to use the reduce array method and here we have a quantity and the item so we want to say for each item dot quantity we want to plus that by the quantity we started with and we start with zero so if we save this and go back you can now see the item is log logging 30 which is incorrect and the reason for this is we should just add this to number convert this to number so the quantity dot type is saved as a string you can see it's a string there so we want to just convert it to a number and if i do that save and refresh we can see we have the correct amount so if i were to adjust this to two that adjusts with it okay so now we want to do the same for the price but for the price we have to calculate something so we want to say const get card sub total like this and this function is also going to use the reduce but just in a different manner so we can say return card items dot reduce we have the price now and then we still have the item and for each item we want to multiply this item dot price with the quantity so the item dot quantity and then we want to plus this or sum this with the price value we started with and the starting price value is zero so if we save this and run this function where we add the subtotal which is down here we can actually do this like this curly braces run the function and then i just want to say to fixed and set that to 2 and save if we go back we can now see the actual value being locked so if i go back to only one we can see the correct value going to it should be two yes okay so that all is working correctly this is awesome i hope you guys are excited that this is starting to work and it's been a long journey but i think it's worth it i think it's worth it you've learned a lot uh okay yeah so that's all for the card screen all we need to do now is add it to the the nav bar so i'm going to go into my component the nav bar component and in here i'm going to need access to the state once again so i'm going to say import only use selector there from uh react redux and here i'm going to cons card is equal to use selector and we're going to take the state and send back the cart and here i want to destructure the cart items from not from equals to the cart so i'm going to create the same function here's git card account which is equal which we which will return the card items dot reduce so you want to take in the quantity and item so here we can say the quantity plus the item dot quantity and it would start at zero we just want to run this function in this position right over here like that and if i were to go back there's nothing in my cart now but if i add something to my cart it updates over there and if i change this to let's say seven it updates over there as well but you can see this is doing it incorrectly once again and the reason for this is we have to make this number of the type number if we save this it's going to change it and boom we've got everything set up correctly so if we go to our cart we can see this if we add something new to our card let's quickly do that boom we have two items in our cart we have 14 items in our cart now and the subtotal is a lot of money and we have no items in our card so this is great the last thing we have to add it to this screen here as well to the side drawer so you can actually uh just copy this i'm going to copy all of this copy this and go to our side drawer and then paste it in down here then we just need to import your selector from react redux and then just run this function in this badge here save we go back and we go to mobile view we go back and we add something to our cart let's add this to our cart and review we can see these cards being updated correctly awesome so what do we have next to do i think this is about it i think we're about done um [Music] let's see let's see i think this is it i think we are done let's see it has all of the functionality i'm able to add to cart oh we just want to check if i refresh we want to make sure it persists in local storage so all we want to do is we go to our store you remember in our store i said we can set initial values so here we want to set some initial values so we can say const initial underscore state is equal to our object and here we can say set the cart equal to cart items and this cart items we want to set equal to something so we want to check const cart from local storage and we want to check if we are able to find a cart value in our local storage then great then we want to add that to our cart items value over here so i'm going to say if local storage dot get item so we want to look for an item and if i find this card item i want to do the following so i want to check if it exists and if it exists i want to take that card item and say json.parse and i want to pass it in that card item else i just want to add an empty array so now i can just copy this and paste it down here and paste this initial state in between the the the enhancer and the reducer and now if i were to save this and go back we have zero items in our cart if i were to go and add something to our cart let's add this item to our cart let's add another item to our cart let's just do this for fun because we're excited we just finished this application and we were to refresh it persists in local storage so i can see we have one error here so let's just check we didn't give something uh in the card screen we have to give each individual render a key so we're just going to give this item dot product so this should be a unique key so if we do refresh we can see that it's gone if we delete this and refresh we can see it still persists the data at three we have three items in our cart for you to go do this refresh add a new page open this we can see we still have the same data if we remove it we can refresh nothing here and go back here and refresh and nothing is here so this is the end of this application i really hope you enjoyed this video it's really a long video but i think you guys would like this i got a lot of requests asking me to do something like this just making a full project type video and yeah so i really do hope you like this video if there's any problems let me know down below and please remember to like and subscribe in this video because this video took a lot of time to make and i'm doing it for you guys so yes peace out and i will see you guys in the next one cheers

Channel: The Full Stack Junkie

Views: 160,036

Keywords: Redux, React Redux, Redux thunk, MERN stack project, eCommerce Cart React, NodeJs ecommerce project, NodeJs ecommerce tutorial, Full Stack MERN development, Redux ecommerce example, react redux ecommerce project, the full stack junkie, full stack web development, build ecommerce shopping cart with react and redux 2020, build ecommerce shopping cart, full tutorial on react redux shopping cart

Id: 0divhP3pEsg

Length: 225min 59sec (13559 seconds)

Published: Mon Dec 21 2020

Reddit Comments

[u/Knettwerk]

This is amazing. Thank you for posting

[u/cjthomp]

MongoDB?

[u/theRealRealMasterDev]

Whoa, good stuff. Subscribed!

[u/happybdayjimmie]

Let me guess paypal gateway?

[u/Square-Bus-7559]

this is what i need right now , thnx bro subscribed :D