React Shopping Cart Ecommerce Beginner Website - Build & Deploy A React Beginner Project

hey guys how's it going I'm back here with another video and today I decided to bring this really cool video where I'm going to be showing you guys how to build and deploy a beginner react application where you're able to shop around in a in a store with products that you you add to your store and you can add stuff to cart just like this you can remove them as well by just looking at your cart you'll see all the items you added are over here you can add more as you can see you can see that's total price for all of your the items in your store by just click by just looking at this amount over here you can also remove them change them if I want to buy 89 iPhones for example this is how it would look I can also just remove them just like this right and you can continue shopping and do this for how many other items I went to as well the reason why I wanted to make this video is because uh first of all a lot of people ask me to make a shopping cart system like a shopping cart app in react because honestly it like I had never done something like this because I never needed to uh but it does help a lot for beginners I just realized the the logic behind building something like this can really teach a beginner all the basics of states in react how to organize your project even um learning stuff like State Management which is really important when you're learning react as a beginner so for that reason I decided to make this video and at the end as a bonus I'll also show you guys how to deploy this application so that anyone with the URL can actually access it we're going to be using hostinger to deploy I've shown how to deploy to hostinger in the past so stick around for the rest of the video because I'm really excited to bring this to you guys and yeah that's basically it so now let's get into the tutorial [Music] [Applause] [Music] [Applause] okay everyone so before we start writing the code I'm gonna actually show you guys how to set up the initial part of the deployment process for this application like I said um we're going to be deploying this app at the end of the video but we're going to be using a platform called hostinger which is a platform I've actually shown in the past and I really enjoy it and the reason why I think hostinger is a good option for hosting your websites is because first of all it is used by a lot of people so it is a reliable service where they have really good support 24-hour support in fact and it's really nice because like in the past I've had to deal with um needing quick like support for a specific project that I was hosting and since there are Services out there which don't offer um 24 7 support I wasn't able to get it in time and when you're hosting on a project may it be a startup or anything like that it is really important to actually actually be able to have access and maintain it 24 7. so that's one of the reasons why I really like it and also because I think it's pretty affordable for those who don't know if you want to have your project being live and I would recommend doing it for I don't know personal projects or um even for your personal portfolio or something like that you would have to pay because you need to host it somewhere and with hostinger they actually have a really good like price quality ratio where like it's really affordable for the the quality that you gain from it and when we start um creating an account so you go to this website over here I'm gonna have a link in the description if you want to click on it um when you go to this website and you go to the web hosting plan over here you'll see first of all it's really cheap it's 2.99 a month um and you also gain a free domain and a free email from it so most places out there you have to buy a domain on top of buying and paying for your hosting service but if you go through this hosinger web hosting plan over here you actually get a completely free domain and a free email which means that um you can have like a Gmail or something like that with the at um with the domain of your website which is really cool and I think for especially for personal portfolios um and creating your own brand that's really good um so what I want to do over here is I want to click on add to cart I actually already have um this hosting plan uh but I'm just going to show you guys real quick what you guys have to do so you go over here and there's a bunch of options right um I would recommend choosing the 48 months one because uh technically all three of these have the same price however if you choose the 48 month one you get the same price for the longer time so if you get the 12 month one and at the end of 12 months you don't you want to continue using it the price won't be the same as it is right here it will renew at 8.99 a month so if you want to continue having it for this price I recommend choosing this option over here then what you have have to do is you have to fill out first of all create your account I already have an account log in with Google Facebook or just put your email address and then if you choose over here what kind of payment you want to have now one important thing is you do have a coupon if you want to pay for this because I have a coupon for you guys since hostinger is actually supporting this video um you just put Pedro Tech and you'll see that it will actually decrease the price by a lot as you can see over here so the pager attack coupon is really nice and I would recommend using it and it comes out to a very cheap price for for literally having two years of hosting and one year of a free domain so you just fill that up put your information it's completely secure and when you're done with that you log into your account so I'm going to cut the video right here to go to the dashboard just to show you guys how the dashboard should look okay so this over here is what is known as the HP panel in hostinger it is your dashboard where you can do all the stuff such as claiming your free domain that you just got from the hosting plan and also setting up your hosting now we're gonna put a stop to this right now and we're gonna start writing the code for the video and if you're interested in learning how to deploy this come at the end of the video Just choose the there's like the videos divided into timestamps so just go at the end where we're going to be deploying this app and setting it all of this up for you guys so with that in mind let's get into the code of the video okay everyone so let's start coding the project I have set up over here a simple react application um so I'm not going to show me just running create react app I also deleted a couple of the initial files that come with running the command and all I left was the app.css the app.js and the index.js I want to remind you guys that in most of my videos I don't show myself writing CSS because I feel like it's not the purpose of the video and the purpose is writing the react code so if you still want to check out my CSS all the link for like all the code will be in the description and also will be pausing the video some points to paste CSS just so that the project doesn't look very ugly um but I'm not actually going to show you guys me writing the CSS but basically how we're going to start is by adding some packages to our package.json because we do use some extra dependencies and the dependencies we're going to use is first we're going to use phosphor react for some icons that we're going to be using it's a very simple small library with a bunch of really cool icons that you might want to use then we're going to install react router Dom because we need to have different routes in our application now I believe this is just the two packages that we're going to be installing remember that um this is purely front-end so like we're not going to be actually checking out and buying products in our store it's purely just adding to cart and like saving and checking out your card it's it's a very simple react project but it also teaches you a lot about react so I'm not going to integrate anything other than just purely front-end so now that we installed both packages we got to start setting up the initial structure of our project so we're going to start out by actually writing out here our app.js and setting up our routes so I'm going to import over here at the top from react router Dom and I'm going to import first of all a browser router and let's call it router as always then we're going to import the routes component and the route component so the classic components that you always import whenever you are working with react router Dom then I'm going to come inside of our app Dev over here and I'm just going to set up our router so all of our routes will exist inside of this router but to Define our routes we're going to have to put all of them inside of our routes component and then over here at the top we're going to have a nav bar just in between this router and this route we're going to put it in F Bar so we can navigate throughout our app and inside of our routes we're going to put all the different routes we want so initially we only need two routes right uh we need uh the route for the like the shop where you see all the products and I'm gonna set it to be in just a single slash because I want it to be the main page of our website then the second route is the cart right so I'm going to put over here slash cart as the path because I feel like that makes sense then what we want is we want to create the files that will contain the pages for each of our routes and we want to create the file that will contain the navbar that we're going to put over here so the way I like to structure a beginner project is like this I like to have a folder called pages and this folder will contain all the different pages in this case it will be two it will be one for the shopping part of the website and the other one will be for the cart part of a website and then I also want to have a components folder now this components folder is for components that are not specific pages and that will be used in many different parts of our website such as a navbar the network will be accessible everywhere in the in the project so if I wanted to come over here and create a navbar dot GSX file just like this then I could also you might notice that I called this jsx this is because if I'm building a project right and I want to Define files that are purely JavaScript and files that are actual react components I like to call the JavaScript files GS and the react components jsx so that's why I'm calling it this way then for our navbar we're gonna put a snippet and create our navbar component just like this now with the navbore we can actually import it over here by saying import from dot slash components slash navbar and I import the navbar component and I want to put it between the router and the routes the reason for this is because um what happens with react water Dom is whatever you put inside of here will will change depending on what route you're in but if you put this above the routes then it will be present in every single route so we always want the navbar to be available and being seen so all that is changing when you change routes is whatever is below the nav bar so that's why we put it above and you can see that right now all we have is a simple n over here um because that's what our navbar component is but we can start out actually building our navbore since um I feel like it is important to start out with that since we can we will then be able to navigate throughout the different pages so for the navbar all we have to do is we have to first of all define a class name for this div I'm just going to call it navbar again this is for styling um you don't have to do it this way if you don't want to use my Styles but I will be adding so that when I add the CSS all the Styles will make sense then we're going to add another div inside of here and this div will be where all the links will exist so I'm going to call it links and what are links well they're just the the links that you click on to navigate throughout the pages and in react to other Dom there's a component called links so I'm going to say react to the Dom and I want to import the link component and to create a link all you do is you just say link and you type here what the text for your link will be for example for the main page or the shopping page we're going to write shop and for the cart we're not going to write anything yet we're actually going to put an icon inside of here and you'll see in a second but when you want to navigate throughout those pages you actually have to put a two prop over here which is a text telling you where you want to go when you click on this link if you want to go to the shopping page you put the empty tag because it is what we Define it as its path but if I want to go to the cart we have to put the slash card over here and it will then work now what we want to do is we want to add the icon for the cart link and to do that we're going to come over here at the top we're going to import from the library that we installed the phosphor react I'm going to import a component called shopping cart just like this now to use this icon all we have to do is we just have to display the component and set a size to it now the size I'm going to set is 32 because I feel like it's a good size and it matches how I want the styling but you can see that now we have the shopping cart icon right over here and if I click on the different links it will change the url at the top obviously we haven't added any UI to be displayed when uh you go to those specific routes but we're going to do that right now that we have the actual C or the actual code for the nav board done but before we get to that I'm actually going to just quickly add the CSS for the navbar by creating a navbar DOT CSS file over here and again I'm not going to show them you writing the CSS I'm just going to add it show to you guys the code that I added and come back in a second okay as you can see uh with the CSS now the navbar looks a lot better and the CSS is very simple I just added some width some height some color also some CSS to make the links be placed in the correct place but it's very simple stuff that I'm pretty sure you guys can figure out as well so now that we've finished up the navbar let's start creating the structure for both pages that we're going to have in our application so for the actually for each page what I like to do is create a folder for them the reason for that is because we're going to have other files that are part of this specific page and I want to organize all of them together so for example for our shopping page I'll just create a folder called shop and for our cart page I'm going to create a folder called cart I just realized that cart was put inside of the shop instead of inside of the pages but now I fixed that and we have both of the folders over here so for the shop page I'm just going to come over here and create a file called shop.jsx and I'm going to do the same for the cart I'm going to create cart.jsx now again I need to create both components so I'm going to just type this over here create the component and I'll do the same over here and uh now that we have both components at least created what we can do is we can import both of them over here at the top so I'm going to say import from dot slash Pages slash shop uh Slash shop again and we're going to import the shock component we're gonna do the same thing with the cart by changing this to cart the support and this to cart as well and all we have to do now is in each of the routes we're going to set an element now this element will be just the component being displayed which in the first one we're gonna display the sharp component uh and then just close this like this and on the second one will be the card component just like this and now you can see that in those components we just displayed the name of them right so in the shop we just display shop but in the cart we also just display cart we can see that navigating through the routes actually change what we're seeing in our screen which means that our routes were successfully created okay so now what we want to do is we want to start writing the code for the shop which is uh we have to start with the shop to then go to the cart because we can't have a card item without having the ability to add the shop items to cart so with our shop what we're going to do is we're going to start out just defining the HTML structure of it right so we're going to start with a div with the class name shop then another div because we want to add a little title uh text over here just the name of our store and for this I'm just going to add an H1 tag I'm going to say something like a Pedro tech shop but obviously you can change this don't call it page attack shop because it wouldn't make sense but then we're going to add a class name to this I'm going to call it a shop title something like this then we want to add another div and this div will be for displaying the products so I'm going to add a class name called products just like this now how are we going to display the products like I demoed in the beginning well we do need to have a list of all the products that we're going to display in our store now if you have a full stack application maybe the product list will come from an API request that requests some data from a database but this is all too complicated for the scope of this project in this project we're going to pre-define what Pro like what products we want to have in our store so I want to create a file over here called products.js and you might see that I called it JS because it's not a component all that this file would do is it will export a list called products and this list will contain the data for each product that we want to create we're kind of like faking a Json data and we're going to be using this as the data for our project now how does this data look like well it would be a list of objects because each object object will represent a specific product now each product will probably want to have an ID right because you want to identify which like different products so for the first one we're going to give an ID of one then we need a product name because each product will need to have a name right and the first one I remember having is an iPhone so I'm just going to call it an iPhone then we need a price which uh I remember the iPhone was 99 so I'm gonna put 999 and finally we need a product image now the product image is a little bit complicated uh if you want to use the ones that I used uh all of that will be in the description I already have all the images so I'm actually just going to copy them and paste them into a folder which I'm going to create over here called Assets in this folder will contain all the different images in our product in our project right so I'm just going to copy and paste the images that I already have saved in my computer over here just to show you guys okay as you can see I just pasted all of the images for the products again if you want to check them out just click the link to the code in the description but now that we have put all those images over here if I want to set a specific image to a specific product all I have to do is I have to come over here at the top I have to import an image from uh and then I give the path to that image so in our case we're going to say dot slash assets slash the name of the image and I'm going to import the first one which is called 1.png and I need to give a name to that image so I'm going to call it product one then I can just put it right over here and this is how we will Define each of our products now I'm going to do this for eight products as you can see we have eight images and I already have the data for each of them so I'm obviously not going to show me handwriting all of them I'm going to cut right now to when all of them are done but if you want to customize it do it on your own I would recommend doing that changing the names changing the ID changing the price do whatever you want even get different images but for now I'm just going to copy and paste what I've already done and paste it over here so that you guys don't have to see the tedious process of creating this data okay as you can see I just copy and pasted these are the eight Imports always keep in mind that some images have different extensions so some of mine are PNG some of some are webp but as you can see all the products were correctly created I give a different price to all of them a different ID to all of them and this is extremely important but as you can see it it all works out perfectly okay so now that we have our products done what we have to do is come to our shop component over here and we want to import um from that file so we need to go back twice uh actually one more time and then go to products and we're going to import the products array now with this array we're going to Loop through every element right because we want to display them in our screen right we want to render each of those products so we're going to map through all of them and grab the data that comes with each of them right so the data would include um like the ID the product name the price the product image all of that so um to do that we're just going to return for each of those products another component right actually I don't have to return it like this I can just return it by just rendering that component I'm going to create another component called Product it hasn't been created yet but this is how it's going to look and we're going to create it inside of this folder over here we're going to call it product.jsx now to create it I'm just going to put our AFC create the component then just come over here and import the component correctly um I'm just going to import it directly from here I'm going to say import from dot slash product and I'm going to import the component now I want to pass in the data for each specific product into this component because I want to basically just what will exist inside of this component is the little card or the little because what will exist inside of this component is the UI for each specific product being displayed in the shop so what I want to do is I'm going to actually create a crop called data and this will basically just be all of the data for the specific product being passed down and then on our product component we're going to grab the props and from here we're going to get from props.data all the data that each product has so that would include the ID the product name the price and the product image just like this then it's given us a bunch of errors and I guess it's because um oh I just realized uh I have to fix the import of this I just fixed it so I think it's fine but uh okay let's go back over here to our product page we have each of our products um being displayed actually since there's eight products and right now all we're doing is for each product we're uh just sending back the word product you can see it is actually mapping through the array because there's eight products being displayed here but we're not actually displaying the correct information if I wanted to test to see if I'm displaying the correct information for each product I could for example just try to display the product name and you'll see that it actually does that which is amazing but we want to do much more than that we want to display the image the price all of that stuff so let's start defining the structure for how this component will look like so the first thing is a class name now I'm going to call this a product then I want to add an image right the image of the product now the image is pretty simple um all I want to do with it is I'm going to set a source and the source for this image will be the product image that we defined for each product then I want to have a div over here and this div will include the product name and the price so I'm gonna give a class name uh and call it description so it's kind of like the product description and inside of here I want to define a P tag to display the product name just like this product name and also I want to make it bold so I'm going to surround this with uh like a b tag just to make it bold and then I also want to add another P tag another paragraph tag and just display the price and I also want to add a money sign over here just to specify that it's money you can see that right now it is working it is displaying this for each image for each product but obviously the UI looks horrible I would never want to buy a product from a store that looks like this so we're going to fix that in a second to fix that I actually just have to so to get it started to look like what we wanted I'm just gonna add the CSS by adding a file over here called shop.css and I'm just gonna also import it um on our shop when I import the CSS file on the shop it will also import um on the components inside of it so all the Styles we put on this one will also be applicable because this component is inside of the shop component so I'm going to put the CSS and be back in a second okay as you can see I added all of the CSS um if you want to take a look I just made it so that now it will look perfectly fine just like uh in the demo it has a three column layout and we see the price and the product name just like this now this looks great right but there's a very important feature that is missing here the button to actually click on and add the the product to cart so I'm gonna add that just as a initial measure because we have a lot of stuff to do in order to make the adding to cart functionality work but for now let's just add the button and it won't have any functionality other than saying that it is an add to cart button I'm also going to add a class name to it because I know I added some styling to it and I'm going to call it add to cart button and you'll see that now it's being displayed over here when I click on it nothing happens because we haven't made it so that something will happen now this is where this starts to get a little bit complicated but also really interesting how are we going to set up a system where if I add to cart an item over here it's going to keep track of the items that I add to cart so that when I go to another route or another completely different component I I'm gonna see that information being displayed over here because it keeps track of everything well we need to manage a state that will represent all of that now to manage a state we can use a lot of different tools State Management tools that are available in react I'm going to use the context API because it is a simple product project and the context API comes with react and in the sense that you can easily you don't have to install anything other than just running your create react app command so that's what I'm going to be doing and I think it's a good introduction to State Management I feel like the context API is a really nice tool that a lot of people don't know a lot about so that's why I wanted to introduce this as well so in order to start using the context API in our project I'm actually going to create a folder called context and inside of here I'm going to create a file called shop context.jsx now if you're not familiar with the context API I would recommend watching a video before this about it if you want to go get more in depth um I do have a whole course on just this topic if you're interested in it um but um I think what we're going to do in here is gonna also be able if you've never done it before you'll probably understand it as well so what we've done here is we just created this component called shop context I'm actually going to call it the shop context provider and inside of here it's where we're actually going to Define our states and everything that is related to logic in our project now to do that we need to create what is known as a context so I'm going to come over here and I'm going to export the const and call it short context now what what does this context mean well it means that we're going to create this kind of like store in our application where it's going to keep track of states and functions that um needs to be accessed everywhere in our project right so I want to have a state where I can access and change that state in the shop but also in the cart so that's why creating a context can be really useful because then I can use this to access and modify the state on both of those components so when I create this sharp context all I have to do is I actually have to um wrap this around with the sharp context and then say dot provider now why am I creating a whole component for this well because I want to keep track of all of the data and organize my my logic inside of this single component so all this component does is it will Define all the states for our application inside of here Define all the functions that will be used and then just pass it to the provider now how are we going to render this well I'm going to grab the props and actually just display whatever we wrap this around by saying props.children now if this is the first time you're seeing something like this I recommend taking a look um at what props.children does we're just wrapping this around and creating a component that is not self-enclosed but rather it will wrap around other components in our application then over here we can actually start creating the states that we're going to have in our application so we're actually only going to have one state which is going to be called um let's call it Court items right um I'm going to call it card items and then the function will be set cards items just like this now this state will actually be an object right it will be an object with um eight properties this is how I want to structure this I'll just start writing it over here just to explain to you guys but it will be an object it will have a key of the ID of each product so like we have the product uh array over here right and each product has an ID so what I want to do is I want to have an object that for each product ID which is the key we're going to put over here how many items currently are in the cart with this specific ID so initially all of them will be zero right the second product or the ID with the product with or the product with the id2 we have zero then three with zero and so on but if I wanted to add the product with the id2 to cart then this would change to one if I wanted to add five of them this would change to five right so this is the idea of how this state will will look like now I I can easily set a default value of this to be what I was going to do right so we have eight products and I just set one two three four five six seven eight and then just put it right over here right but if I wanted to add a new product then I would have to add a new element like this so what I want to do is I actually want to create a function that will get the array and create an empty object to represent our initial state of our court items so I'm just going to call it get default cart this is not necessary but I feel like it will help a lot so if I want to add more products then this function will automatically handle that so what this is going to do is we're going to create a cart object like this then we're going to Loop through all of the items in a cart so I'm going to say products and import the products array the length then I'm going to increase by one and then for each item I'm gonna store it out defining the card item to have a key equal to the I value over here and set it equal to zero and at the end I'm just returning this card now why am I doing this well because um again we want to create an object with the IDS equal to the IDS of the products but if we want to add more more products we just have to add them to this array and not and this will handle the changes automatically now you might ask yourself as well why did we start with with one instead of zero basically we stored it because oh and also have to say plus one basically we started because the IDS don't start with zero they start with one so we just made that minor adjustment right so okay if you're confused by this don't worry leave a comment that's in the comment section I can answer to explain it better but basically this will allow us to just get a simple object that will be the default state of our cart without adding anything to the cart now that we have our state we need to think about this um what are some stuff that we might want to do with this state well first of all we might want to be able to add an item to cart right so we're going to create this function inside of here called add to cart now this function will take in the ID of an item we want to add to cart and all it's going to do is it's going to set the card items array or object to be equal to the same object as it was before so I'm going to actually grab the previous value of the state and set it to be equal to the same as before and see some returning an object I also have to wrap this with some parentheses but I also want to make one change I want to grab the specific item with this item ID and change it to be whatever it was before plus one because we're adding one we're changing the object that for example if I wanted to change the item with ID 1 right I would probably go from one zero to one one and then if I did again it would go to one two so this is the item id which we're defining over here and we're setting it equal to whatever it was before plus one so how do we get what used to be the item id well we just say prev Item ID so we're grabbing the previous one and adding one right so this logic it looks a little bit complicated but um it makes sense right we're just setting to change an item we're just altering that specific items ID um its value and adding plus one now this is all the functionality for adding to cart now how do we remove from cart well we can do it similar to what we did before I'm going to say remove from cart but the difference is obvious we're just subtracting one like this now that we have both of them kind of done um we're going to add more functionality later on but for now let's just keep those and we want to start the process of passing this into our provider so that we have access to it outside of this component so how exactly are we going to do that well if you want to pass in you can just come over here and pass a value which will require an object containing all the different states and functions you want to to pass into your provider now we're going to create this context value over here and like I said it would just be a normal object and I'm going to pass in everything that I might want to access right so first of all I want to have the cart items over here then I also want to have the add to cart function and finally the remove from cart function just like this then I'm going to pass the context value directly over here and now if I want to access the cart items or any one of these things over here all I have to do is I have to go to where I want to access it which in our case it will be in the products component because here's where we have the add to cart button and we need to access the add to cart function then what we want to do is we want to come over here at the top and import um from the actual context folder and Shop contacts we want to import the shop context just like this right oh one thing I forgot um we created this shop context provider but we never actually applied it to our app so we have to come to our app.js right over here and wrap everything we have over here around with the shop context provider shop context provider just like this um and now all all of this components will have access to whatever we put in the value of the provider so let's continue so we're here in the the product.jsx right we import the sharp context then we just say const we set it equal to use context which is a hook that comes with react it will automatically import and we just pass in the context switch we want to grab the values so now if I want to have access to for example the add to cart function all I have to do is just grab the add to cart function right over here and now we have access to it so I'm just gonna pass in as the on click of this function just like this uh I'm gonna say that when you click on the button I want to call the Azure cart function now it actually requires as you remember it requires an ID right the ID to the item you want to add and since this button will exist inside of each product right because we're mapping through the array let me just open up the shop again we're mapping through the array and for each of the array elements we have we rendered this product component so the ID for the item we want to add to cart exists as we passed it through props so all I have to do is just pass this ID over here and I'm actually just going to keep console logging over here the the value of cart items so you guys can see that it is actually changing so I'm going to inspect element over here let's go to our console and you'll see there is uh it console logged immediately from the start this is our cart items right it has our eight items over here but it has zero for each of them now if I click on add to cart for the first one you'll see it will console log again but now we have one for the first one because we called the add to cart function if I click again it will cancel log again but now it will be two if I click on the I don't know this one you'll see that now the item number five also increased by one so it means that our add to cart function is working perfectly which is amazing but we're not seeing that uh the number over here right we're not seeing the number of this specific card item uh because if you recall in the demo when you add it when you added something to cart it kind of showed how many items of that specific item was in your cart so what I want to do to fix that is I'm actually going to delete this over here come to our product and in our eye to cart button we're going to add some logic related to that so we need the card items uh stick right because we need to have access to that state in order to see how many I how many items are in our cart and over here we're just going to add some logic by saying that um well if the amount uh for the item with this specific ID is um greater than zero then we want to display the amount but how do we know what is the amount well we can just create a variable over here called cart item amount and the amount will literally just be the cart items and we grab the value with the ID of this specific product because that will be the amount of this specific product in our cart so then we just say okay if cart item amount is greater than zero then I want to display this uh simple uh UI over here which is just going to be a parenthesis uh with the actual card item amount so we'll see that now it shows like it's two if I keep leaking it will increase and I can do the same for the other ones as well right it only displays if the card item amount for that specific product is greater than zero and then it displays the correct amount just like it should now let's go back over here we have all this logic done but what is left now is adding the logic and everything related to our actual cart because we you're able to add stuff to car but our cart isn't being displayed over here so to do that we're going to come over here and we're going to take a look at our card component which we haven't actually created yet we just have this which is fine but we want to create a structure for it so the structure is pretty simple first of all you will have a class name of cards right because this is how we always start then I want to add a div with a little title just like we did with the shop um I'll put an H1 tag over here and I'll say your cart items just like this then I want to create another div called uh probably cart items let's give a class name of cart items card items by the way I don't know if you guys noticed but my voice is kind of screwed in this video it's just because I'm pretty sick and that's why sometimes it may fail But continuing over here we have this is the list of all of our items and it's going to be very similar to what we did in our shop where we we have this list of items and we want to map through all of them right so we're gonna do the exact same thing we're going to grab our products list just like this products and we're going to say products.net and we're going to grab each product but the difference is we don't want to display all the products here like we did on our shop right the shop all we did was no matter what products we just display it by rendering this product component over here in our case we actually want to only display the items that are from the products array that are also in our cards right so how do we know if a product from the product array is in our cart well if the actual um let me go to the context if the cart items object with the key equal to the products ID has a value greater than zero right because then it means that we there's more than zero items in the card for that specific product so what we have to do is we just have to uh actually I just realized this became product with capital P all we have to do is we have to say if the cart items and for that we actually have to do the whole thing we just did with the the shop now we shop with the actual product um thing over here where we import the shop contacts we have to do the exact same thing and we grab this stuff from the context so we have to do this and grab the cart items so what we're going to say is okay if the cart items object and the element with the product dot ID has is not equal to zero then it means that um there this product is in the cart right because we're checking okay for each specific product if the product.id has the key of the core items object is not it has a value that is not equal to zero that means that it is greater than zero meaning that um it is probably um it is a a product that is in your cart so if that's the case we want to return uh a new component we're going to create called card item cart item just like this and it's going to be very similar we haven't created it yet but it's going to be very similar to the product component that we created where we're going to pass in the product as a prop to a prop called Data so what we have to do is we just have to create this component I'm gonna create it right over here cart item.jsx and this component will be very simple all we have to do here is first change the title then we're going to create a div with a class name of cart item just like this then we want to Define how we want each item in our card to look like if you recall in the demo what it looked like was basically very similar to the product it had an image right over here where we have the source and the source will be equal to the product image now we get the product image and all the product information by grabbing the props and doing the whole thing where we did with uh the product before which is we just grab everything from the props.data just like this and we just passed the product image as the source then what we want to do is we want to have a little description just like before right we're going to have a div give it a class name of description and over here we want to put a P tag to represent the product name so I'm going to put p and we're going to make it bold as well just like we did before and just pass in the product name just like this then we also want to have the price so I'm also going to put a P tag for the price and if you recall we put a money sign and then the price of the product okay this is all good but we want to I'm just going to add the The Styling so that it kind of you guys can have an idea because right now first of all it's giving us an error and I feel like it's giving us an error because in our cart over here we never imported use context so we have to import use context and also we never imported the cart item component so we're going to do that right now we're going to say import from dot slash cart item and we're going to import the cart item component so you can see it is working but we have nothing in our cart so if I try to add one thing in our cart you'll see that now it appears over here because it is looping through every cart item that we have now if I edit if I want to add more stuff you'll see that it's not like properly aligned there's no styling so again I'm going to add all of the styling for this specific area of our project I'm going to create a cart dot CSS over here and I'm going to add the CSS and be back in a second okay so I just pasted all the CSS this is how it looks um it doesn't do much all it does is basically you can see all of our card items are now being displayed in a way that actually makes sense right and um I also imported the CSS file inside of our cartel GSX so don't forget to do that as well if you're adding CSS so now what I want to do is I want to add the ability to have like a plus and minus a button over here with a little text input where when I click on it I can alter the amount in our cart for that specific product so to do that I'm going to come over here to our cart item um like component and below the price just right over here actually below the description maybe no it's still in the description yeah I'm going to just add a div and let's call it uh count Handler now this is where we're going to be changing the amount of each product's uh it in the cart so first we want to have a button which is going to be a minus because you're going to be using it to decrease the count then you want to have a button for the plus right to increase the amount and then in the middle you have to have you want to have an input which we can manually change the the value right so this is how it's going to look just like this now I want to set an initial value for the input because this value will be I want to already display over here the amount that is already in the cart so for example if if we look over here we have one but we have two of this one and one of this one so it should show over here one two and one by default right so to do that I'll just add the value and to get the value I need the actual card item so again I'm going to do all the stuff that we did with uh the the both components where we grab everything from the context um and to do that I need to import they use context hook and also import the sharp context from the context file that we created right and then why do we have an error oh because we need to pass the value what we have to do now is we just say cart items over here and then pass in the actual ID of this current item right the one that we grab from our props and then it will actually display the correct value for uh for this specific product then what we want to do is we want to start handling the adding and removing right so that's going to be simple because we already have those two functions in our sharp context uh file right we have the add to cart and remove the cart but we haven't used the remove to card yet so to use it all we want to do is we want to import the add to cart and the remove from cart then over here I want to add an on click for this one and just say remove from cart and remember it requires us to pass the ID over here then I'm going to do the same thing with the plus but add to cart just like this now let's see if it's working I'm going to try to add more stuff to this one it seems to be working if I come back it should be updated and show that there's five instead of one if I want to remove I can remove right I can remove easily and I can do this with all of them if I if one of them is at one I can also remove to zero and it will disappear right I can basically clear up my cart so everything seems to be working but we still have to finish the Lux the the less functionality uh I believe which is to be able to alter this text input over here so to do that all we have to do really is we need to actually create a new function because over here inside of our inputs we're going to have an on change which we can grab the event right so we can use the target of value to grab the actual value that is on the input but we don't have any functions in our shop context that allows us to manually change the actual value of a specific product count in the cart items so what I want to do is I want to come over here and I want to say const and we're going to create this function called update cart item count and it will require two things it will require first the new amount we want to update this to so if the card items for a specific product was one we wanna we write on the input five the new amount should be five then we also need the item ID to know which item we're changing right then over here all we're going to do is we're going to set the cart items to be equal to what it was before just like we've been doing so far so three dots prev but then the item id now instead of increasing or decreasing by one it will be equal to the new amount just like this now since we want to access this on other components we need to put it inside of our context value so I'm going to come over here and put it so then now I can just import this from our use context just like this and pass it in over here now what are the arguments we passed well the first one is a new amount and that will be equal to event.target.valu also recall that since this is an input and it's not a number input it's a text input this over here the event.targeted value will be a text will be a string and not a number so we need to convert it into a number just like this then we want to pass in the ID and that will be simple I just passing the ID that we grabbed from the props and it should be working that means that now if I come over here and I want to change this the camera to be 99 items I can just do this and you'll see that it does change in our actual thing right it changes the value from our state which is amazing so this is basically it for all of the uh in like major features the last thing we want to do is just have those two buttons over here at the bottom to continue shopping or check out and also display the total amount of our whole cart so to do that all we have to do is we come over here to our I think our cart we want to add this div called um maybe like footer or actually I'm going to call it checkout uh it's just like the less part of our cart then over here I'm gonna add a P tag for the subtotal of our cart and right now we don't have that actual amount but we're going to write the logic to get that amount in a second then I want to have a button for continuing shopping and a button for checking out now the checkout button won't do anything because this wasn't the purpose of this tutorial obviously I'm not going to show you guys how to go through like paying for stuff in a real eCommerce website this is more of a beginner react project it is purely fronted if you guys want to see me actually build a full stack version of this where you can actually do all of that I can for sure do it but we're not going to add that functionality now you can see that if I save this um it appears over here at the bottom but the amount is not being displayed so to get the amount I actually have to go to our sharp context over here and I'm going to create a function called um get total cart amount so this function all it does is it just generates the total cardamom right so to do that we have to first create a variable called total amount and set it equal to zero and what we're going to do is we're going to Loop through every item in the cart items object see if their values are greater than zero meaning that there is one like one of them in the cart and one there they are in the cart we grab that value which is the amount of them in the card and multiply times the price of that specific product and add that to the total amount so let's do that right now we're going to say four const item and cart items this is how you Loop through an object then I'm going to ask if the cart items and then item is greater than zero so if the value is greater than zero then we know that we want to add it is in the cart so I'm gonna get the item information why do I need to get the item information because I don't know the price right of this specific item to know the price I need to go into our products array uh so I'm just going to say products like this we need to go to this array and try to find the specific product in this array with the ID where the product.id is equal to the item and I have to convert it into a number as well now what exactly is this logic doing well find is a function in JavaScript where you find a specific element in an array where um some part of it satisfy a condition in this case we're just asking okay we know that the item over here or is the ID representing the product which is in the cart so we're just trying to find the product so that we can have access to its price because now all I have to do is I just have to say the total amount is equal to the total amount so we're just adding to the total amount the cart items item times the item info dot price now what is this well this is the amount of that specific product in the cart so we have two of them then we want to multiply that the price times two right we just don't we don't want to have you pay only one for three or more products right so we're doing this and at the end of this Loop it should have the correct total amount so I'm just going to say return to Roma now we want to have access to this and somewhere else so I'm also going to put it in the context value in our cart over here I'm just going to um grab this directly over here and just grab that amount so total amount is equal to this function and now we can use this over here and you'll see that it correctly calculates the subtotal right it's a very big amount because we have 103 of this thing but if I set this to zero it decreases by a lot and it changes depending on how many items we add right so this is pretty cool the last thing I want to do is just whenever you click on continue shopping just go back to the shopping page right so to do that it's not that big of a deal all we do is we actually have to do some stuff related to react router Dom we just come over here at the top we import from react route Dom and we want to import something called the use navigate hook now why do we need to import this well because I want to be able to click on this button and navigate to another route in our react router route definition right so to do that we have have to grab this function called navigate set it equal to use navigate and just use this function as the method of navigation all we say is navigate and we put the route to where we want to go in our case it's the empty slash because we want to go back to the main page you see now if I click on continue shopping it will bring this to the main page which is exactly what we needed I also realized that when we go to zero right the subtotal subtotal is zero as of right now it's still showing this and in the demo I actually didn't show this this is because I have to add this final piece of logic over here where I ask okay if the the total amount right is greater than zero then I want to display all of this stuff over here but if it's not and actually I'm going to put this outside of this div just over here um but if this is not greater than zero then I want to display an H1 tag saying your cart is empty just like this so what this does is now it says your card is empty but if I add more stuff then it will display the cart and the subtoto and the buttons just like this so this is basically it for the code of this video now I'm going to show you guys how to actually deploy this whole application so that anyone can access it by using a really good service which is sponsoring this video called hostinger okay everyone so now that we finished the code for the project let's start the deployment process so first of all let's claim a domain now claim your domain is really simple with hostinger all you do is click the claim domain button assuming you actually um got the free domain with hosinger and you choose the extension over here there's a bunch of options you can choose miniatures.com because I I think it's the best option out of all of this over here um just because you know like.com usually implies uh in my opinion a more secure website I just think of it that way it's my opinion but you can choose all the other options as well and I think it should be fine I do have domains with net such as Pedro technology.net and everything like it's fine you just choose whatever you prefer so I'm choosing.com and then what you put over here is the name of your domain so in my case we we created a shop right a store uh as our project so I'm just going to give it a cool name such as Pedro Tech um store or page attack shop yeah probably like this prototype shop so I'm going to click on check availability because maybe someone already has this domain but you guys can see no one has it so I can claim the domain really simply I just have ownership over this domain and no one else has it so I can use this domain to host our project we can actually choose now um the information about this because it is important that you put your contact information when you have domain in case someone for example wants to buy the domain from you so you always have to do this so I'm gonna put over here this is just uh your country I think is a country of residence or no the country of citizenship so I'm going to choose Brazil which is where I was born in and I'm gonna click on next step and it's going to ask for your um contact details I'm not going to show me doing this I'm just going to fill it out myself but um you should um fill it out yourself and come back when you're done with it okay as you can see uh I finished filling it up and it says that um I'm almost there because they're reviewing the information that I put for my domain so um they're verifying everything as you can see but we now have ownership over this domain so what we want to do is we're going to come to home over here and we're going to start setting up our premium web hosting um that we have over here that we got from our purchase of the plan so I'm going to click on setup and it will bring us here then we're going to click on start now now it asks us for an option between creating a new website or migrating my website now this is actually important to understand because migrainian website is just in case you already have a website being hosted somewhere else and you want to migrate it to hostinger and create a new website is not what we want as well because this is actually when you want to use something like WordPress which hostinger has support for um to create your website we actually want to click on Skip and create an MC website then you got to choose a domain so if you don't have a domain or if you want to buy a domain um you can just click on buy new domain or select the domain you already have in our case since we bought we got it with the plan on hostinger it's already over here so we can just select it now it also asks us for our server location and the good thing about hostinger as well is that it has 10 data center locations around the world so uh that means that you will constantly have a high speed connection um to any of them if you are around on those areas and they have it in a lot of different areas of the world so you can just choose whichever one makes more sense to you I'm obviously right over here actually right over here so I'm going to choose the North America USA az1 and it should be fine so I'm just going to click on finish setting up now as you can see it is um initializing like everything it is creating so when this loading bar over here is done I'll be back in a second now that it's done it's going to say either to view our website or go to the control panel obviously I want to go to the control panel because I want to make some changes and start setting up and actually deploying the website through the hpanel which I mentioned previously so this is the actual panel and it has a bunch of stuff related to our project being hosted right now there's obviously nothing if we go to page of touch Predator techshop.com it's actually being it's just a preview window because um it has to finish being set up but um we can start actually putting the files inside of our system now how do we do that well straight up there's an option over here called file manager and that's the thing we're going to click now on file manager it's going to open this up and it's basically going to ask for a build version of your project we haven't generated that yet but we can easily generate it right here if we go to our code and we run yarn build now if you're running if you're using npm you have to actually run npm run build but I'm using yarn so I'm going to run yarn build and what this will do is it will create an optimized production build which will basically be what we're going to be putting inside of our hpanel it's this folder over here now when this is done which it just got done uh I'm gonna open this up on a review all of this on on finder just so I can see the file over here the folder over here I'm going to open up the public underlying HTML folder on the file manager when I open this up there's going to be this thing called default.php I want you guys to actually delete this because it won't you need to delete this for this to work then you're going to open up your build folder over here and then just copy and paste everything that is inside of here inside of this folder it's going to install or upload everything as you can see really quickly and now just like that if I actually go to our website you'll see that it's been deployed which is really cool right this is a preview of the website as you can see it even says to us that it is view but it is the website that we deployed and it's been created just like we wanted to now you can see that um this is actually just a preview right um and it is um it has a secure connection but this is just a preview if we actually want to try going to Pedro techshop.com it will work as you can see we are in the actual domain of the website and it is the same website but it is not secure now what does it mean to be not secure it means that there's no SSL certificate installed in this website now I would recommend every time you have a public website to install a certificate because it means that it is more secure so in order to get that going we already have a free SSL certificate that comes with the the hosting plan well to set that up what you have to do is you go to SSL over here and you see it actually is supposed to automatically install for you but sometimes it might fail so it will retry to install it and on my second try you see it actually actively installed the SSL certificate so now if I go to my thing and I refresh it should actually be secure just like it is so I wanted to show this because sometimes in my fail on the first try but it tries I think 26 times and um you don't have to do anything to actually retry it so if that happens to you just wait a little bit and it will install for you as well so this is basically it for this video I wanted to thank hostinger for sponsoring this video I really really like the platform if I didn't I wouldn't have made two videos with them already and I think like till this day my other projects are also um live and working so I never had any issues with them and they are really good with what they do um also if you want to help support the channel and you want to set up your account with hostinger please go in the description I'm gonna have a link over there and you use my discount code as well you will get like some benefit from it by getting the discount and it also helps support the channel if you ever need if you ever want to support the channel in some sort of way um just do that and yeah that's basically it I really hope you guys enjoyed this video If you enjoyed it please leave a like down below and comment what you want to see next subscribe because I'm posting um twice a week it depends I've been sick for like a month and basically it's been really hard uh to record my videos um I also had to deal with some stuff the month before that um and it decreased the amount if I I upload it but um hopefully January 2023 it's gonna be the year where I'm gonna be as consistent as I was before that and I I really appreciate all the support that I got from you guys like this year has been insane I hit a hundred thousand subscribers that's I don't I haven't even processed that yet and it was all because of you guys so that's why I wanted to thank all of you guys again so yeah that's basically it really hope you guys enjoyed it and I see you guys next time [Music] [Applause] [Music] [Applause] thank you [Music]

Channel: PedroTech

Views: 193,363

Keywords: computer science, crud, javascript, learn reactjs, mysql, nodejs, programming, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, node js, express js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, deved, pedro tech, react shopping cart, react ecommerce, shopping cart react, react shopping cart tutorial, react project, react beginner project, react project for beginners, react website

Id: tEMrD9t85v4

Length: 69min 39sec (4179 seconds)

Published: Thu Dec 08 2022