Amazon Clone in React, Tailwind CSS & Redux [2023]

in today's video we're going to be making an Amazon clone using the latest versions of react Tailwind CSS and Redux we're going to implement Amazon's home page with a fully functioning Carousel that will contain images and a video we're going to implement a navbar with a search box that's going to offer suggestions as we type this will then take us to a search results page we're going to create a product page that will display each of our products we're going to implement the shopping cart functionality from scratch that will keep track of all of the products that we're adding and removing from our car and we're going to be creating a checkout page which will display all of the things the users decided to buy and the final thing we're going to do is deploy it to AWS so you can show it all off you're hard showing off also while doing research for this video I found something rather strange in Amazon's code if you scroll down to the very bottom you'll find it's probably worth sticking around just to find out what that is once we've learned all of these latest Technologies and built the site I'm going to give you some suggestions for extending any questions throughout this video just leave them in the comments okay so let's get started then the first thing we're going to do is create a folder on the desktop and we're going to call that Amazon clone and I'm going to drag that into vs code once that's done I'm going to open the terminal with command J and we're going to use create react app to set up our react application so the command for that is MPX create Dash react Dash app and we're going to do dot forward slash and all this means is it's going to set up the react application in the current directory now some of you won't be familiar with MPX and what this is is a package Runner tool and this allows us to run node.js executables that are hosted in the npm registry so it's not the usual npm install where the packages get stored locally so this is going to allow us to use create react app to create our react app but we won't actually have to download it and store the package locally so not only does this save space but it also ensures that you get the latest version of the executable that you're running so let's hit enter and we'll wait for that finish it can be a couple of minutes so I'm just going to jump to the Future Okay so now that's all complete let's briefly go over what create react app actually does to like the name suggests it creates a react app but what it essentially does is provide a simplified environment where we can create our react application so it does this by giving us this project structure so we've got node modules the public folder with our index.html got the source folder with a few files in there we've got a package.json a readme and we've also got the git repo as well it installs a few dependencies like react and react Dom so pretty standard stuff but it also provides these react scripts but what these do are some handy scripts they extract some of the tasks that we might need to do with our react applications such as building for production so these scripts use webpack and babble and stuff like that and we don't have to worry about what's under the hood so you can see that these scripts are associated with the normal npm start build test Etc and you can see the output of what we just ran explains some of that for us so we're going to use one of these scripts throughout this video which is npm star and what this does is spin up a development server which looks for Live code changes and it will instantly update in the browser so let's have a look at how that works then so if we come back down to the terminal and we do npm star and we run that okay so once everything's finished here and we've got our live server running you should see that we've got the default create react app page which has got the react logo spinning and it says here if we edit app.js which we should do now we can see Live code update so if we just type something like testing this out we can see that we've got uh immediate updates so that's the development server in a nutshell so I'm now going to terminate that with Ctrl C and the next thing we're going to do is clean out some of the projects so as good as the project structure is we don't need most of these files in the source folder so we're just going to go ahead and get rid of it and we're going to add it back again so with SRC so once that's done we're going to install one of the main dependencies we're going to use throughout this video which is Tailwind CSS so I've got the documentation page up right here I'll leave a link to that in the description so in a nutshell Tailwind CSS is a CSS framework that we can use right in our HTML I'm not going to go into too much detail now as I'm going to use it throughout this video and you'll get a very good understanding of how it works as we go along so let's use some of the setup guides that they've provided so I'm going to take a copy of this and this is going to install Tailwind so npm install we've got this Dash D which means it's going to install as a Dev dependency so if we go to our package.json scroll down to Dev dependencies we've now got Tailwind CSS so this is just the way we have to install Tailwind CSS and then we ran MPX so mbx again Tailwind CSS init and what this did was create this tailwind.config.js and we're gonna have to update that almost immediately and the reason we're doing this is we need to let Tailwind know where our template files are so let's just take a copy of everything and copy it completely over our config.js and the next thing we're going to do is create a index.css file so we're going to do that in the source folder so index.css and we're going to copy the Tailwind directives to our CSS so copy them in there and these are essentially custom Tailwind at rules that we can use in our CSS so they basically exposed tailwind's functionality okay so that's it for Tailwind another thing that I wanted to point out is I've got auto save enabled the next thing we're going to do is look at the extensions that I've got installed so you may have noticed one already which is the vs code icons which just gives you these little icons next to each of the files it's by no means necessary but it's just nice to have the next extension we're going to look at is this react Redux react native Snippets for es7 this is basically just a Time Saver it's going to allow us to run some commands and we'll get code generated for us again you don't need to install this but it will just save you some time if you're following along and the final extension that we're going to talk about is the Tailwind CSS intellisense now so this is the one I'd highly recommend installing it makes Tailwind at least 10 times better to use in vs code if you have this extension installed now they're not official statistics but I'm pretty confident about my okay with that all done the next thing we're going to need to do is download the zip file from Google Drive I've left a link to this in the description so once you've downloaded and unzipped that folder you should see the contents that look something like this so we've got an images folder data folder and an icons so if we select all of them and we paste it into the public folder of our reactor and we're going to replace the icon that we originally had so the new icon is going to be the Amazon logo and then we'll revisit the data and images folder as we go along okay with that step done let's get our react app created so I'm going to create another file and this is going to be called app.js so this is where we're going to use the snippet extension and I can type RAF and I've got a few options here I'm going to go for refce which is going to create a react Arrow function component so we can click that and we've just got our basic skeleton of a react component before we can write any code we're going to need to actually create our react app with the react framework and connect it to the Dom so let's create another file called index.js and I'm going to use another snippet here which is IMD and this just gives us an import statement and I am going to start off by importing from react Dom and we're going to import react Dom next we're going to import the component that we just created which was app and then we're going to import our index.css file [Applause] now this import looks a bit different but it's known as a side effect import which I'm not going to go into now but interesting to know and we're going to start by creating our react app by defining a root so we can do that using react Dom and use the create root function and we're going to pass to that document get element by ID and the ID we're going to specify is root so this actually lives in the public folder in the index.html you can see we've got a div with an ID of root so this is going to be the root Dom node and everything inside it will be managed by react Dom so hopping back over to index.js the next thing we're going to do is root dot render and we're going to pass in at and this is going to tell react that we want to render our react application with app as the entry point and let's just confirm this all works with spinning up the dev servers so we've got npm start and you can see that that succeeded so we've now got app and we've got our new icon as well so everything's set up it's not as impressive as it was before but it will be later on don't worry about that let's just confirm that Tailwind has been installed correctly so I'm going to jump back to app.js now if this is your first time using Tailwind CSS essentially how it works is we apply utility functions directly to the HTML okay so let's do a quick demo so if we move this onto one line and we'll just say testing Tailwind for now the way we specify these utility function is if we have a class and this is where we are going to use the Tailwind intellisense extension so what I'm going to do is start typing I'm going to go BG for background so this is where where the extension comes in so it's showing us all the possible utility functions that we could choose for the background color so I am going to use background purple and you can see that we've got a variety of options to choose from so I'm going to choose 400 you can see that our div has a purple background now so again we've applied no CSS we've just got the utility functions to the div and another really nice feature of the extension is if we hover over this we can see the original CSS that's being applied now if for any reason you're not seeing this purple background just go over the documentation that we just went through for installing tailwind and just double check that you've got everything set up correctly so I appreciate that was a whirlwind tour of Tailwind but don't worry throughout this video we're going to cover all the major features of it okay so let's jump back over to app.js so the first thing we're going to tackle is the roots for our react application and what we're going to use for the roots in our application is react router so let's get that installed I'm going to kill off Dev server again so the command for that is npm I react Dash Dom once that's installed let's sort out our Imports then so again just do IMD and click enter and we're going to install from react root or Dom and what we're going to import is browser router roots and root so I'm just going to get rid of this demo div for now and I'm going to add browser router as the outer tags of the app component so essentially what browser router does is it stores our current location in the address bar or the browser and it also allows us to navigate using the browser's built-in history stack So within those tags we're going to Define roots and Within These routes we're going to Define all of our routes for the application so we just start off with one for now and we only need the single tag for that but before we can Define our first route we're going to need a destination for our users to actually land so let's create a new folder within our source folder and it's going to be called components and within there we're going to create a new component called homepage.jsx again we're going to do refce generate the component and we're also going to add an index.js file to this components folder so index.js and the reason we're creating this file is it's going to allow us to import multiple components on one line otherwise we'd have to do them separately on each line and you'll see this as we go on so for this we're going to need to export default as home page from home page okay with that done we can jump back over to app.js and use the IMD snippet IMD enter and we're going to add components and we're going to import home page now we've got an actual component what we're going to do is Define a path and this is going to be the root path and we're going to go one step further and say it has to be the exact path and we're going to provide an element that is going to be the home page component okay so let's start the dev server again so we've got npm to start and you can see that we've got our home page as this is our default landing page however if I put in a different path say slash something didn't even spell it right but you can still see that our react application doesn't know where to go to find anything to render so if we go back to the root we can see we've got a home page again all right so let's get started building our home page so the first thing we're going to do is create the overall layout of the home page so if we actually go to the Amazon website and we have a look at the dimensions of it you can see that we've got obviously we've got the nav bar but we've also got this Central container that contains the carousel the cards and all of the content from there on and you can see that it's a fixed width so it doesn't matter how far you extend it it's got this sort of slim Central container and this is around 1500 pixels also if you shrink the container it gets to a point where it doesn't go beyond around 1000 pixels so you can now see we've got the horizontal scroll bar that is something we're going to implement on our home page now I'm sure some of you might be thinking so if the container doesn't shrink Beyond a thousand pixels how about for mobile users so Amazon actually serves up a different site depending on whether you're a mobile or desktop user obviously all Sites aren't like that so I'm going to show you an example from BBC football be on the screen right now I request the desktop site when I'm using mobile and I get the exact same site because it's responsive from desktop to mobile however when we do that with Amazon you can see that when I request the desktop site I'm greeted with the familiar site that we just looked at just now but when I go to the Amazon site by default using the mobile site I get a completely different site now there isn't enough time unfortunately to do both versions of the site so I'm just going to be doing the desktop for now but if there's enough interest maybe I'll do a mobile version in the future let me know in the comments okay before we actually Implement that layout ourselves one of the things we're going to need to do is sort out the actual background of the website first and that uses a bespoke color so you'll have noticed in the Tailwind demo that I did just a minute ago that there were a lot of colors offered through Tailwind but the background color for Amazon website is a very specific gray and there are a few colors like that throughout the website another great feature of Tailwind is it allows us to actually extend the utility functions that we were housing just a minute ago so it's going to allow us to Define our own colors so we can do this by going to tailwind.config.js and you can see that we have this theme here with extend and we're just going to open that up so we're going to need to Define colors and then have our own set of curly braces and it feels wrong to spell colors without a u but this is an American product so I can't complain and within here we can start defining our bespoke custom colors and then we're going to do one more layer which is going to be called Amazon clone and again that's going to have a colon with some curly braces and we're now going to Define our colors so the first one I'm going to do is background colon and the value is going to be the hash with e a e d e d and we're also going to define a default color so that will be in capital letters default and the value of this is going to be hash one three one nine two one we're also going to define a light blue with the value of this being hash 232 F3 a and we need the comma as well and the final color we're going to Define is yellow and this value is going to be hash Feb d69 and we're just gonna need a comma as well okay if your Dev server is still running at this point I'd kill it with Ctrl C and spin it back up with npm star as this config needs to be reset okay with that done and the dev server running let's go back to the home page component and let's define a class which we're going to do BG again like we've just done and this time we're going to do Amazon and you can see we've now got the selection of all the colors that we just defined so we've got that light gray we've got the light blue the yellow and then the default color which is like a dark Navy now we're going to choose the background option for our div and you can see that that's updated in the browser so we're all good to go on that front Okay so our next task is to Define that container that we just looked at on the home page so I'm going to get rid of home page and I'm going to Define another div and again we're going to give it a class so I just showed you on Amazon's website that they actually have very strict widths or the maximum and minimum and they are to the pixel but we do have utility functions in Tailwind to have more General widths so if we choose W3 for example this would be wet free so we could again hover over it and we can see the width that this is defined so a bit more of a general responsive width but we're going to need the actual pixel values now luckily we can easily do this with tailwind and this is going to involve using square brackets this is called arbitrary value support so we're going to need to define a minimum width which is like this and we're going to provide again the square brackets and this is going to be 1000 pixels and we're also going to Define maximum width again same way and this is going to be 1500 pixels so let's write some quickly and let's give this a background color of purple so we can actually see the container that we just made so let's do purple 500 so you can't really tell the container here but when we expand we can see that we've got our container here and this has a maximum width of 1500 pixels so you'll have noticed one problem with that and it's that we want our container to sit centrally in the browser window and we can easily achieve this with margin Auto so for Tailwind that is M Dash Auto and now if we resize the browser window we can see that our container is sitting centrally to the page so one of the first things you'll notice when you go on the home page for Amazon is that it has a carousel of images and videos so let's get on with creating that for ourselves okay so we're going to need to go to the components folder create a new component called carousel.jsx we're going to do the refce create our Arrow function component and we're just going to add that to the index.js file so just take a copy of this and paste it below and we'll change Carousel for home page all right so let's quickly pop over to Carousel and I'm going to give it a class and we're just going to have a background of blue for now okay in order to actually add it to the home page the first thing we're going to do is import the component so we can do that with import Carousel and we can just do dot forward slash so once we've done the import let's add it below testing and we can now see that we got the carousel on the home page within the container so if we expand that lovely stuff now before we start implementing the carousel I just want to show you this bizarre thing that I found while I was researching some of this stuff so if you go to the Amazon home page and you're on the home page and if you inspect it or open up the development tools if you scroll down to the very bottom you'll find a dock that meows now imagine how weird this was to find when you're just I was literally just checking how they do the gradient on the images and some of the Carousel and how it works imagine finding that pretty weird but hey ho it's pretty funny to find so anyway let's get back to creating our Carousel so we're going to need a library to implement the Carousel and I've gone for swiper and there's nothing really to stand out about this Library except for the fact that it worked really well and also it's very popular with you know 1.7 million downloads a week so yeah we're going to be using this throughout so I'm gonna copy the import kill the dev server if you haven't already and let's paste that in okay once that's finished let's head back over to the Carousel component and we're going to import some of the swiper functionalities so this comes from swiper slash react and what we're importing is swiper and swipe a slide we're also going to need some styling for the carousel so let's import the CSS so we can just do import swiper CSS and we're going to make some changes to the outer div so let's get rid of the blue for now and we're going to make the height of this div 600 pixels and we're actually going to have a white background so we can do that with BG white okay with that done we're going to use the swiper that we just imported so swiper I'm gonna have the closing tag as well so these tags are going to be surrounding our Carousel so we can add some config to it so let's do that so the first thing we're going to add is loop and we're going to set that to true and what this means is that once we get to the end of all the images in our Carousel we're just going to go back round we're going to specify that space between each of the slides is zero we don't want any space between them we're also going to add a class just to make this Carousel half the height of the outer div so we can do that with the square brackets again just make it 50 okay with the initial config in place let's add our first swiper slide so this is where the images that we imported earlier are going to come in so let's add an image and we're going to give it a source and the path we're going to give it is dot dot slash images Carousel underscore one dot jpeg so let's kick off the dev server again with npm star all right so there we have it we've got our first image but it doesn't really tell you a lot that this is actually a carousel it just looks like an image so let's work on that now we can quickly change that by taking a copy of the first slide paste it underneath and we'll just change the carousel one to Carousel 2 and now we can see that we actually get a second image that again because we've added the looping we can Loop Round And we can actually swipe it through like an actual Carousel so now it's a bit more carousel-esque now what you may have noticed on the Amazon website is that we also have the arrows for navigating the carousel so we can click on the buttons go left or right so we're going to add that too and we can do that by adding some more configs so if we go navigation and we're going to set that to true we're going to add another import for the CSS and this is going to be swiper CSS navigation so another thing we're going to need to add for navigation is a module so let's define them so that's just with an array inside the curly brackets and we're going to need to do another import so let's do IMD enter and this time we're going to import from swiper so not swiper react just swiper this time and we're going to import navigation then I'm going to take a copy of that and then we're just going to place it within the array so if you look on the browser now we've got the arrows but you might have to give the dev server a little restart and once it comes back you can see that we can click on the left or right arrows and navigate between the images so pretty good another feature of the carousel when you go on the Amazon home page is that it doesn't wait for you to click through the images it's automatically taking you through them so let's add that feature in ourselves so this is going to be done via something called autoplay so once again we're going to need to import that so we can just get that from swiper again and then we're just going to need to add that to the modules section again we're then going to specify our own autoplay config so we're going to need two lots of curly braces for this and we're just going to set a delay of 4500 for milliseconds okay so if you take a look at the browser now you can see that the images are now Auto playing with the delay that we specified okay with that done we're going to add our other images so let's take a copy of these two and we'll paste it underneath and we're going to change this one to a four and we're going to change this to to a five so we've got one two four five the reason we've missed out number three is we're gonna add that as a video which we're gonna do in a second but let's have a look at those images to save time I'm just going to skip through that so we've got this new image here we've got this other image and the original one so there's our four Images so it's looking good so as I just mentioned every now and again when you go on the Amazon home page they have a video for whatever they're advertising let's add this slide with the video so we're gonna need another swiper slide and within that we're going to add the HTML5 video tag within that we're gonna have a source and that's just going to be a single tag and we're going to Define its source as dot dot images and it's called Carousel vid dot MP4 I'm going to give that a type of video slash MP4 now this is the video although at this point there's no way of knowing that's because we're missing a very important attribute and that is controls from the video tag so you can see after I added the controls attribute it actually looks like a video now we can interact with it and let's actually watch it foreign just for the record I like to say I enjoyed rings of power I know some people didn't I know some people did let me know in the comments if you did something else I noticed while I was snooping around the code on Amazon's homepage is they use something called video.js for the library it gives them a nice little play button and stuff like that it's a bit out of scope for this video but I thought I'd mention it now as enjoyable as the video was if I was on the Amazon home page I'm not sure that I'd want that video blaring out at me while I'm looking for some new socks or whatever and we can do that by adding muted to the video tag and now you can see that the control on the video player is now muted by default so if we play it again you can see that we don't have the Orchestra in the background that kind of thing so again it's just a nice little touch to our Carousel and the final thing I'm going to do is just add a class and this is just going to add a background of black and you can see that it just fills in some of the video the video is a bit thinner than some of the images and this just makes up for it okay so this is looking pretty good we've got the images and we've got the video in our Carousel but there is one thing missing from it and that is the gradient that Amazon add so what this does is it sits behind the cards that are on the home page and each time that you flip the carousel they'll have at the gradient going behind it so to achieve this gradient we're just going to do a single div tag this time and close it straight away and we're going to give it some classes so first off we're just going to specify that we want the height to be 50 to make up the other 50 pair wind have gradients built into the utility function so if we do BG and then gradient we can specify the direction that we want the gradient to go so we want ours to go from top to bottom so we're going to do 2b and then we're going to specify what color we want the gradient to go from and in doing so this will make it go from that color to transparent so we're going to specify from Stone and we're going to pick 900 and there you go you can see we've got our gradient effect already and it's looking pretty good okay with the carousel looking pretty good let's hop back over to the home page and we're now going to start making the content that fit on the home page the cards and stuff like that okay so you may remember from earlier but the content on the home page is arranged in cards and they're in a grid like fashion and Tailwind has something built into it that also allows us to do a similar thing but not only just make it grid like but it also makes it responsive too so to get started with this we're going to create another div and we're going to give it a class of grid so as I mentioned earlier we're not making the site responsive to mobile but we still are making it responsive so for example it's widest the grids for the cards is four columns however when you shrink the browser window it goes down to free so we're going to implement the same thing and we're going to achieve that using Tailwinds break points so Tailwind Works in a mobile first fashion and all this means is it takes the CSS for the smallest break point first and it's not until a larger break point is met do other styles then be applied in our scenario we're going to start off with grid calls free specifying that we're going to start off with three columns so we can just Define a few divs here to show what that's doing so let's just do three of these and here you can see on the right that our divs have been separated into a column of free if I added a fourth div that will be added underneath so we've got number four there as I mentioned just a minute ago we're gonna want at the widest width for the browser we want four columns to show so we can specify this by using Tailwinds break points so we're going to look for the extra large break points so we can do XL followed by colon and then we can specify grid calls four so by default Tailwind is always going to be looking to apply grid calls free while it hasn't met the extra large break point so let's just quickly test that out so if we go to a smaller size window you can see that we've got three columns one two three four and then as it gets bigger like we just saw we get to four columns and to get a better understanding of what these breakpoints are again we can just hover over them and you can see that we've got the 1280 pixels as the Min width so as soon as it goes past that is apply an rcss so now that we've got our responsive Grid in place let's create some content to fill it so we're going to create a new component and we're going to call that home page card.jsx and again we're going to add that to index.js so just take copy foreign and we're going to use the snippet again so r e f c e okay so the idea behind this component is we want to create a reusable card so we can pass it a different title image and Link and it will be able to present them on the grid so as you can imagine if we hard coded all of those values we'd have the same card and the home page would look pretty rubbish what we're going to need to do is pass in some props to this component so we haven't done this yet so in order to do this we're going to add some curly braces into the parentheses and we're going to specify title image and Link and you'll see how these are used later okay so let's create the outer div of the card so we'll get rid of home page card for now and we're going to add a class and we're going to make the height of this div 420 pixels we're gonna make the background white and the card's going to contain three divs so add those and to start off let's just add title into the first div so we can test this out all right let's hop back over to the home page and we're going to import home page card into the home page okay now we got rid of those let's add a home page card underneath our div with the grid so we said we're gonna pass in some props and to do this we can specify that with the name and we're going to have our title we have a surprise for you so you can see that on the right already we've got the div with the 420 pixel high with a background of white and it's got a title of we have a surprise for you so we also said we're going to pass in an image and we're going to specify the path of this image so it's dot dot images and this is going to be home underscore grid one dot JPEG and we're also going to have a link and this will just be seed terms and conditions so again obviously you can't see the image or the link because we haven't done anything with them yet so let's hop back over to homepage card and sort that out let's have title on a new line and within the second div I'm going to add an image tag and the source is simply going to be image and already you can see that that's been updated in the third div we're going to have simply a link Okay so we've got all of that displaying on the right but I'm sure you'll agree it doesn't look great so let's add some styling to it so for the title we're going to add the classes text large and we're also going to specify our extra large break point and what we're going to do here is specify text extra large so the text will get bigger when the screen does I'm also going to specify that font is semi-bold I'm going to apply margin left so we can do that with ML and we can specify four I'm just going to bring that off the side of the card and I'm also going to do that for margin top two so margin top four so just brings everything off the top of the card okay so the title is looking a lot better let's add some classes to the image so the first thing we're going to do is specify that we want a height of 300 pixels and we're going to give it an all-round margin of four so you can see that image has now been brought into the center and now we're going to add some classes to the actual image so we're going to make the height a hundred percent and we're going to make the width 100 as well okay so these two guarantee that the height and width are going to be the complete size of the outer div but sometimes the images can look a little bit stretched so we can make up for that with object cover so you should see the image is looking a little bit better now and finally let's sort out the link again we're going to add some classes to this now we're going to add text to be extra small by default and when we hit the extra large break point we're just going to make the text small we're then going to make the actual text color blue and then we're just going to bring that off the side of the card as well similar to the title and there we go I'm sure you'll agree the card is looking a lot better now I'm going to hop back over to the home page okay with that done what I'm going to do now is create seven more home page cards but changing the title image and Link I'm going to speed this section up so if you're following along when it's finished just pause the video and copy all of the different title images and links okay so that's all finished like I was saying pause the video and make a copy of this if you're following along and you can see the result that we've got now so we've got all of these cards from the home page card that we just made and if we resize the browser we've got the four cards when the browser is bigger and then once it gets smaller you can see the cards go to free columns and also I just want to point out how great is this image happy dog Moody cat sounds about right now something that's worth pointing out is that when we go to this free column size we've got this Gap here so to plug this Gap we're going to have an advert and we're going to need a div for that and we're going to need a single image tag now the source for this is going to be dot dot images and it's going to be Banner image 2.jpg we've got another one coming up don't worry and this is the advert that's displayed now this looks okay but we're gonna have an issue when we expand the browser we're still going to have this advert so now as you've probably guessed Tailwind has a solution for us so we can add a class to the image which at the extra large break point we're going to specify hidden and what this is going to do is hide the image when it hits the extra large break point so if we go to the extra large breakpoint which we are now and I'm scrolling down I can't see the image and if I go over to the break point with three columns we've now got the advert which is filling the Gap so it's a perfect little solution and we're just going to make this advert look a little better so let's add some classes to the outer div and we're just going to say that we want an overall margin of free and we're going to add some padding which we haven't done yet but you can use padding with p and we're going to specify padding top so PT and we're going to do a and that's just going to make the advert look a little bit more normal amongst the usual cards that we have so I'm sure some of you had noticed that we have a problem with the home page and that is the fact that our cards sit directly below the gradient and it wasn't too long ago that I mentioned that we want the cars to sit over the top of the gradient now don't worry I got a solution for this and that is to add some negative margin top to the div so that would drag it up and it will sit on top of the gradient okay so that's better because it's sitting on top of the gradient but we do have a couple more problems and the first one is the fact that the cards is being cut off by the images so we can't see the top of the cards so let's sort that out if we hop over to the home page card and what we're going to do is add a z-index of 30 and what this does is force the cards to sit on top of the images so you can now see the top of the cards where we couldn't before and we're also going to add a margin for all of the cards of free and now we can solve the other problem of being able to see the gradient behind it so I'm sure you'll agree that is looking a lot better now if you visit Amazon's homepage you'll notice that they don't just have a grid of cards like we do now they have all shapes and sizes of cards and they have other content as well which as you scroll is endlessly generating content which obviously is outside the scope of this video but we are going to add some more content to the home page right now and this will involve adding carousels to some products and some categories so let's start with the carousel for the categories let's go to components and we're going to make a new component called carousel category.jsx and you guessed it we're going to add that to index.js and let's populate it with refce let's hop back over to home page and we're going to import that straight away so Carousel category and we're going to add it to the home page so Summit to be careful of here when you're adding it is we don't want to add it below the banner image because this is still part of the grid here so we want to make sure that we are putting it outside of that div so Carousel category and if we scroll down we can see it right in the bottom left okay so let's add some functionality to Carousel categories so we'll hop back over there and we're going to be using the same Carousel that we used in our main Carousel so if we head back over to Carousel I'm just going to take the Imports to save writing them all out again and I'm going to paste these over the default react import so for this Carousel just because we're displaying the categories we don't need auto play as we're going to want the use to actually scroll through and the background we're going to apply is going to be similar to the other cards which is white so it follows the same theme and we can get started by adding the outer swiper tags so we're going to add some config like we did last time but we're going to introduce a new one which is going to be slides per view so that defaulted to one last time but we're going to have five slides per view this time we're going to have the space between each of them 10. we're also going to enable navigation and obviously that means we're going to add the modules again okay so with that done that's all the config we're going to need let's add our first swiper slide we're going to add an image and the path is going to be dot dot images forward slash category underscore zero dot JPEG and if we scroll down we can see we've got our Carousel with one of the categories which is all deals so we're going to need another five of those so I'm just going to take a copy of that and paste that five times just sort some of that formatting out the category images go from zero to five so just update those accordingly and just quickly do a little refresh and you can see that's already looking pretty good so we've got all the categories all deals Amazon devices fashion computers and software home and kitchen and the final one mobile phones and accessories okay so that's looking pretty good so far but it's looking a little bit blocky as we've got an overlap between the outer cards here and on the left it's overlapping so if we add some margin to the outer div it's margin three that brings us in line with the cars it's looking a little bit neater and the final thing we're going to do in here for now is we're going to add another div and it's going to contain a title called sharp by category so there we have it but it's looking a bit small so let's add some classes to that so we're going to make the text extra large not just extra large 2XL so text 2xr we're gonna have the font semi-bold and we're just going to move it from the top of the card with some padding so P3 and that looks a lot better okay so we are going to revisit this Carousel later but for now let's go and create the one for products so Carousel product.jsx then we'll add it to index.js and then we are going to run the snippet and once again we're just going to add it to the home page straight away so we can see what is going on so carousel product and we're just going to add that directly above the carousel for the category okay so there it is appearing let's fill out the content of the carousel now again let's go to Carousel category and we're going to copy the Imports and we'll overwrite the default reacting port and this time we'll head back over to Carousel category and we're just going to take a copy of the swiper tag with the config 2 because it's going to be pretty similar so let's paste that in we also have the outer tag 2. it's going to be similar but we are going to make a slight adjustment so we're going to have seven slides per view for this Carousel now for this Carousel we're going to take a slightly different approach and we're going to generate our swiper slides using an array and we're going to specify array Dot from with some parentheses and we'll move that to a new line we're then going to specify some curly braces and we're going to specify a length of nine come outside the curly braces we're then going to have another set of parentheses with an underscore and I which is going to keep track of the number of iterations we're going through we'll have the arrow syntax and then on a new line we're going to introduce swiper slide like we have done and what this is essentially saying is run this nine times and give us nine swiper slides and in order to keep track of this array of swiper slides react needs to know a key so to the outer tag of whatever we're generating in this we're going to add key curly braces and that's just going to be I that way if react has to update delete or anything like that it knows where it is in the array otherwise it wouldn't be able to perform that operation now what this is going to allow us to do is we can have another image but this time we are going to have a source however there's going to be a slight difference with this one instead of doing the double quotes we're going to do the back tick and you'll see why in a second it's going to start off as normal so dot dot images forward slash product we're going to do an underscore and then we're going to use the dollar sign curly braces and we're going to finish that off with another underscore and then small dot JPEG and what we're going to put in the curly braces you can see the syntax highlighting in vs code it's it knows that we want some sort of variable to pass in so these are basically template strings that allow us to pass in a variable to a string and what this is going to do is generate a slide for each iteration of the array so obviously the first one will be zero so product zero small Etc we couldn't use this approach for Carousel category and that will become clear when we go back to it later on so if we scroll down to the browser we can see that we do actually have our Carousel we've got the images and we can and navigate to so it's not looking too bad but you can see that it's not following the format that we've laid out for the content on the home page so we're going to give this a background of white and we're also going to add the same margin as well to bring it in line with everything else okay so now everything's in line on the home page and we're also going to add a title to the product Carousel too so add another div and this one's going to be simply best sellers similarly we will add a class name we're going to have the same size text as the category Carousel and this is also going to be font semi-bold and we're we're going to have the similar padding as well so I think you'll agree they're both looking pretty good again we're going to revisit this Carousel 2 later on and add some more functionality to it but let's just pop back over to the home page and we're going to add one final thing before we move on the final thing we're going to add is just a banner image again it's just gonna mix up the content on the home page that we're going to have similar to the website but we're going to add another div and within that div we're going to add another image tag with a source and it's going to be a path of dot dot images and forward slash Banner image.jpg so if we scroll down we can see we've now got our Banner image but it's looking massive so let's sort some of the styling out for this so we're going to add classes to the outer div and we're just going to give that an overall height of 200 pixels so again square brackets Syntax for that and on the image tag we're going to add class to this and we're going to say we want the height to be 100 so again square brackets we want it to be 100 of our outer divs looking a little bit more like it fits in at the minute but we would like that to be centralized to our container not off to the left so we can do that with Immortal for margin Auto and that's looking a lot better now so we've got a bit of a variety of content on our home page now okay so I hope you'll agree that it's looking pretty good right now the home pages but the elephant in the room is that we don't have a navigation bar yet so let's crack on with making that so if we go to the components folder we're going to add a new file and that is going to be navbar.jsx once again we're going to add this to index.js and we are going to run the snippet refce now where we place this is going to be slightly different it's going to be outside of the components folder this time we're actually going to add it to app.js now the thing with the navigation bar is we're going to want that to be present for any route that we go down so we're going to have a few routes like obviously we've just done the home page but we're going to have a product Page search results and checkout and for all of those routes we're going to want our navbar to be present so we're just going to add it above our route so let's first off import it and then we're going to add the tag just above roots right so you can see that we've got navbar I'm just going to pop back over to home page and get rid of that testing as we don't need that anymore okay so let's head back over to navbar and start creating that so let's start with making the navbar then okay so the first one we're gonna do is replace the default divs because we're going to have header tags for the outer tags of this component we're then going to create a div inside of that and let's just keep navbar so we can see something on the browser okay so like we have with other components we're going to make sure the layout is set first before we do any more so the one thing that we're gonna make sure happens for the navbar is that it has a minimum width of 1000 pixels so again using the square brackets that's all the layout we really need for this we can let it expand as much as we like as we're going to use another feature of Tailwind which is flex and this is basically going to control how our content shrinks and grows so we're going to use flex's properties throughout this component so I'll explain it as we go along so for the outer div that we just created I'm going to add a class name of flex and the impact of adding Flex is that it puts everything in line which is going to be key for our navbar as we're going to want everything we add to sit horizontally but better than me explaining that why don't I just show you so I'm going to add three divs nested in the outer div and I'm actually gonna write a comment for left if you're following along you don't have to do this I'm just going to make it easier for you to see middle and then above the final one I'm gonna have right and this is just gonna make it easier for you to see what content belongs to which div and for this example I'm just gonna paste the word into the div so we can just see how Flex operates in Tailwind okay so it's pretty small right now but you can see that left middle and right but if I remove this Flex class you can see what happens to them they're all stacked so this is the way we're gonna want to develop this component with flex we're also going to need to add this Flex class to each of the divs themselves so let's take a copy of that add it to left add it to Middle and add it to write it doesn't make any effect now but when we add content to each of the divs it will do so another class that we're going to add to the outer div is the background that we added at the very start of the video and that is just going to be the default background for Amazon clone and you can see that that's taken effect now obviously we've lost our text there so let's make the text white so text Y and there it is it's reappeared I'm also going to give the navbar a fixed height of 60 pixels and this is just going to make sure all our content stays nice and rigid okay so let's add some content to the left div then I'm going to add a div and then two divs within that so just take a copy that within the first nested div we're gonna have delivered two and the second one United Kingdom and we're going to add some classes to these so class name and we're going to add we want the text to be extra small and for our extra large break point we're going to have small and we're going to add a class to United Kingdom and this text is going to be small by default and for extra large it's going to be text based probably can't see that well so I'm just going to hit Ctrl B to close the project window for now that's better and we're also going to add font bold to the second div all right so that's taken effect okay next we're going to add an image tag just above that div we just created and this is going to have a source of dot dot images forward slash Amazon dot PNG this time so not JPEG and there it is already appearing it's rather large so again add some classes to this so we're going to give this a fixed height of 35 pixels again using the square brackets 35 pixels that's looking a lot more reasonable we're going to give it a fixed width of 100 pixels too as we don't want the logo changing too much and we're going to give it an overall margin of two it's looking a little bit squish so to our outer div of the delivered to United Kingdom I'm going to add classes of padding right four and padding left four and that just gives us a little bit of separation between the two now you can see that the content sits towards the top of the navigation bar we're going to want that to sit centrally so what we can do here is to the left outer div we're going to add items Center and there you go you can see that they came back down to the center so looking good and I'm just going to take a copy of the delivered to United Kingdom div and I'm going to paste it into right div so the third div and I'm gonna paste it twice as we're gonna do something similar there and the changes are going to be hello is it me you're looking for not really it's going to be hello sign in and then the second line is going to be accounts and lists and the div below that is going to be returns and the Bold is going to be orders and orders so there you see you've got it on the right so you can see that take effect in the browser again we've got the same problem as we did before so let's apply the item Center class and that's looking a lot better so with them two done we're going to add a third div of this right div it's getting confusing now but try and keep up and we're going to add some classes here and they are going to be flex and we're going to give padding right a free and padding left of three and what this div is going to do is it's going to hold our shopping cart icon and we currently don't have any packages for icons so we're going to install one now and the icons that we're going to be using are hero icons and they were also made by the makers of Tailwind as well we are going to just kill the dev server and we're going to do npmi for install and we're gonna do ah hero icons forward slash react okay so with that installed let's import the icon that we're gonna use so again IMD and then we're gonna hit enter so we're gonna import that from at hero icons react forward slash react forward slash 24 forward slash outline the icon is called shopping cart icon and that's that imported so we can include this in our div that we just created so add a component so with that imported let's kick off the server again npm star and we can't see anything so the reason for that is we're going to need to give it a height so we can see it let's add a class here and I'm just going to give that a high of 48 pixels and as if by Magic it appears okay so that's not a bad start but we'll just add another div underneath that and we're just going to have cart to symbolize that's a shopping cart in Britain we'd normally call them shopping baskets but most of my subscribers from the USA in India so shopping cart is all right so that's been added but it doesn't look great let's find a way of styling that so it looks a bit better I'm gonna add some classes to this the first thing we're going to do is add some margin top of seven and that has an immediate effect of bringing it to the bottom of the nav bar we're then going to specify the size of it so we're going to go with text extra small and then for our extra large break point we're going to have text small and we're also going to have font bold okay so that's already looking a lot better I think we could probably do with a bit of margin around the right div so add margin four separate everything and also for the left div we will add the same margin 4 to that too make everything just a little bit more spread out okay with that done let's address this middle div here which will come as no surprise that it's going to be the search box and for that we're going to add a new component so command B if you're using Mac to open the Explorer and you know the drill we're going to add a search.jsx component in the components folder we're going to add that to index.js and we're gonna run the snippet rafce okay with that done we're immediately gonna import that into the navbar component so IMD enter and we're gonna import from dot slash and we are going to import search and obviously this is going to go into the middle Dev and you can see that's appearing right now okay so now that that's done we are going to add a another feature of Tailwinds flex and this middle div is going to be different to the left and right so what we're going to specify for this div is that it's going to have the grow class and basically all grow does is it allows this div to be as big as it possibly can so I think it's pretty easy to see what's happened here so search is now taking up the whole of this Gap and our left and right divs have been shifted over we're also going to add a tag of relative and we're also just going to make sure that anything we put in there sits in the middle of the nav bar okay so let's head back over to search and start filling out some of this functionality and the very first thing we're going to do here is give the div a width of a hundred percent and we'll get rid of Search for now we're going to add another div and we're going to add a single input tag and there we can see that's appeared on the right I mean does it look very impressive at the minute but at least it's a search box so let's change that then so we're going to add some classes to the out div and we're going to specify Flex item Center and we're also going to do the same thing on the input tag too we're also going to make the height of the input box 100 we're actually going to make the left corner rounded you'll see why in a minute well I've just done left we're going to make any of the text that we want in the text box to be black and I'm just going to shut the Explorer panel so you can see that there and we're just also going to give the input box a type of text it's still not quite looking any better yet but it will do in a second the next one we're going to do is add a button and this is the reason why we've only rounded the corners on one side and within this button we're gonna have another icon so let's get rid of the react import and we're will do the IMD snippet and it's going to be coming from the same place as the shopping cart so hero icons react 24 outline semicolon and this one is going to be called magnifying glass icon and I'm going to put that right in the middle of the button tags so again single tag so we're just going to give the button a width of 45 pixels square brackets again so it's appeared now but it's still not looking great so let's give this a high of 27 pixels okay so that's looking a little better next we're going to move on to a drop down and we can Define one of these with some select tags and if we define various options within that that will serve as our drop down and we're going to use that to define a category that we're going to be searching for so for the first one we're going to have all I'm just going to paste this another six more times so the first category being all the second one is deals the third is Amazon the fourth is fashion the fifth is computers the sixth is home and the final one is mobile so they pretty much just relates to the Carousel category that we made earlier on so if we now click on this you can see we've got these options to pick from but still not looking great so let's sort this styling out so to this out a div I'm just going to give this a height of 10. and I'm gonna give it a background of Amazon clone yellow so this will eventually just show for the button pretty much and we're gonna have the whole thing to be rounded let's pay our attention back to the magnifying glass icon so we want that to be Central so we'll just add M Auto and it would look a lot better if the icon was in Black so we can use stroke Dash slate I'm going to pick 900. so that's looking a lot better next let's sort out the styling for the drop down so on the select tag we're going to add some classes I'm going to give it a bit more padding so p-2 we're going to give it a different background color because it sort of Blends into the search box so BG gray 300 and obviously we want the text to be black and we're just going to add a border to remove some of that yellow that was peeping through and the final thing is just to make the text a little bit smaller so we're going to have text extra small and for our extra large break point we're going to have text small now I'm sure you might be thinking okay it's looking a lot better but it's still not great and the reason for that is I left this bit of styling till last so we could have another example of what grow does in terms of flex so I'm going to add grow to the input box and we'll see that this will now take up the majority of the space okay with that looking better we're gonna head back over to the navbar and the final thing we're going to add is another div at the end of the one we already had in place and once again we want all of these things we're adding to be in line so we're going to add a class of flex and we're going to add a div that's going to have today's deals inside it and we've got that appearing already now we're going to give this a new background of light blue the one we defined earlier and also obviously text white so it stands out okay so that's looking better we're going to take a copy of this div and we're going to paste it four times and we're going to change these so the first one is going to be customer service the second registry third we're going to change to gift cards and the final one to sell we can see they're all sitting in line but they need a bit of work to them so we can add some space between these with a new attribute we haven't seen yet so we can do SpaceX free and they all have space between them and we're just going to specify the size we're going to go with text extra small again and for the extra large text small and we're going to give it a bit of padding too so I'm going to do an overall of P2 and just going to override that slightly with the left PL of six just to take today's deals off the side of the page okay so that's starting to take shape we're going to revisit these components later on when we're adding some more functionality but now let's add some navigation to our site so we're going to head back over to app.js and you'll remember that we added the default route for home page and we're now going to add another three Roots like I mentioned earlier that's for product Page search results and the checkout but we're going to need components for all of those for the element section so let's create those free now so the first one will be product page dot jsx the second one is going to be search results Dot jsx and the final component is going to be checkout.jsx and we'll just do this in bulk so it's easier and we're going to need to add all three of these so just copy that three times first I'll take a checkout second product page and the final one is a little bit easier because we've already got the search so we'll just add search results and let's just run the snippet for all of those so r e f c e and enter product page refce and enter and search results r e s c e and enter okay so let's head back over to app.js and import all of those so check out search results and product page just get rid of the Explorer panel all right now we've imported those let's take a copy of our initial route and paste it three times we don't need the exact for these let's just remove it to avoid confusion the first one we're gonna change for the element is search results and that's going to have a path of forward slash search the second is going to be product page and that's going to have a path of forward slash product although this will change later on but more on that later and the final one will be check out and we're going to have a path of forward slash checkout so now we've defined those routes we can test them out so let's go to localhost um first one will be search and we've got the search results component there we can change this to checkout and the final one is product okay so all those routes seem to be working fine now it's all well and good me changing the URL in the browser and going to the pages but we're going to need a way to do this programmatically in the code if we go back to the home page what we're going to do is set up a way of being able to click on one of these products and go through to the corresponding product page so let's Implement that now if we go back to the Carousel product so what we're going to do in Carousel product is import something from react router Dom and this is called a link so this is going to be the thing that's going to allow us to call the product root programmatically whenever a user clicks on one of our product images okay so now we've imported our link we're going to add it just within the swiper slide so make sure the image is in between those and essentially what this is going to do is it's going to allow us to define a root within the opening link tag and we're going to use two uh with the curly braces and with back ticks don't use the double quotes or it's not going to work and we're going to specify a root of product which we've already defined and what this will allow us to do is when the user clicks on the product image is going to be taken to the product route the one we just went to in the browser so let's give that a go then so you can now see that we've got the cursor pointer which shows that we can click on it so if we go on the Guinness Book of World Records we get to product page which is what we defined here so we've now got a way of programmatically navigating through the roots of our react application another thing to point out if we click on the back button we go back to the home page so this was going back to the browser router tag that we included earlier on now earlier on I mentioned that this product route is going to be slightly different to the others and that's because we're going to pass in the ID now the reason we're going to do this is that ID is going to be used to identify which product we're clicking on and we're going to use that ID to gather the detail towels for that product specifically so this looks something like this so obviously we're using the template string so we can do dollar curly braces and we're going to pass in I now you remember that this was the keeping track of the iteration which matches up to the product ID Okay so we've done that within the carousel product component but we now need to update the actual route that we defined in app.js so let's head back over there and we're going to change the path to include forward slash and the the way we specify passing in a variable to the URL is we're going to do a colon with ID so this ID variable will resolve to the ID that's being passed in and you'll be able to see it in numerous places so before we test this out let's quickly jump back into product page and we're going to make a couple of changes to this now what we're going to do in product page as this is the destination page we're going to come to through the product route we need to find a way of retrieving the I ID that's being passed to us so we can do that with something called use params which is again offered through react router Dom use prams and because we know we're expecting an ID we can dereference a call to use params with a variable of ID and let's just add this ID to the div so we can see it while we're going to do our quick little test so we'll go to the browser then and we'll click on this book here and you can see that we've got a URL of product forward slash four and you can see that we've retrieved that ID using the use params in product page so we've got product page four okay so now we've created that link from Carousel product on the home page to bring us to the product page let's start work on making the product page so the way the product page is going to work is we're going to call an API using the ID that we've just passed in as I mentioned in the introduction this video isn't going to have the API implemented we're going to do that in another video but we are going to put the API call in place and we're going to call the local data that we installed at the beginning of the video alright so for this then we're going to need to add a new folder to source and this is just going to be called utils and we're going to add a file to this called call api.js and all this file is going to do is handle generic API calls so in order to do this we're going to install a new package so let's kill the dev server and we're going to use axios to call our apis so in order to install this package we're going to need npm I axios okay so once that's finished we can run IMD again and we're going to import from axios and this will also just be axios so to start off with just going to have a single function and this is going to be call Api and we're going to use the arrow function here foreign asynchronously so let's add the async keyword there so this function is just going to take in a path or resource of the API being called so let's just call the parameter resource what we're going to return is data with the curly braces for destructuring it and we're going to use the await keyword as this is going to be a synchronous and we're going to use axios.get now the get function takes in two parameters which is going to be the URL and some config now we've already got the resource name but we're also going to need to have the path of the server as well so as again we're not implementing the back end I'm going to define a constant and this is just going to point to the local data file so to Define this we're going to create a new file in utils and this is just going to be called constance.js and this is just going to have so we're going to export a cons called base URL for this video we're simply going to have dot dot which is going to point at this data folder so if we head back over to call Api okay so let's import that constant then so IMD enter and we are getting this from the constants file we just defined so constants and this is going to be base URL so we are now ready to pass in the full URL which is the first parameter so we're going to need back ticks again and we're going to do dollar curly braces followed by a forward slash and dollar curly braces again since we're going to pass in the base URL followed by the resource and that will make up the complete URL path for the API that we're trying to cause the second parameter is config and we can Define that just above with a config object and all we're passing in to the config for now is some headers so let's define those and these are literally just going to be two key value pairs the first one being content type like so and the second one being accept and they both take a value of application forward slash Json so copy that to the next one and we are going to pass that as config we will then return the data from this function so we now have our generic function call okay so let's jump back to product page now before we call the API we're going to need an object in this component that's going to store all of the product information that gets returned from the API and to do this in react we're going to use the use State hook so let's import that from react so IMD enter and we already know we're important from react and this is called New State so like I just mentioned this is going to allow us to add a state variable to our component and how this works is it's going to return two things in an array so it looks something like this it's going to return product so this is the name of our state and then we also get a set function too so that will be called set product and we call the hook you stay with an initial state that we're going to pass in so we're just going to have null for now so the reason we get this set product function with the u-state hook is it allows us to call this function to update product and now that we've got an object for our product we're now going to call the second most popular hook which is use effects so let's import that and the syntax for this is as follows so we're going to have use effect parentheses with some more parentheses and then we've got the arrow syntax and curly braces now along with this we are also going to add an array as a parameter too adding square brackets as the parameter to use effects is the way that we tell it to run once when the component is first created at first glance this syntax can be confusing and it doesn't make much sense now but I'll explain more about it later okay with that defined we're going to need a function for use effect core so we've got another snippet now which is nfn and enter we've got a arrow function so let's call this get product and we don't need the parameter and we'll just move this to a new line so let's do that with IMD and we're going to specify the utils folder that we just created which is upper level so we're going to need the dot dot and we've got the utils folder there and we've got call Api and obviously we want the call Api function and we can now use that in our get product functions how we're going to call this is we're going to use call Api and if you remember we need to pass in the resource path so let's use back ticks for this and it's going to be data slash products dot Json and also if you remember we're calling this function asynchronously so we're going to use the promise syntax of then and again we're going to use the arrow syntax here and we'll name the return parameter product results so this is going to be the product that we're going to retrieve from products.json now let's have a quick look at this products.json file so we have a better understanding of what is going on inside it so remember we imported this earlier on so we got the data file and we've got products.json so obviously we're going to do it properly in the back end video but for now we're just going to call this object so we're going to specify the key and we'll retrieve this product data and we're going to store it so let's go back to product page I'm going to store it in the product state that we've already defined so the product results is going to tell you that object with all of the data in it and we're going to specify set product as this is the correct way to update product like we just went over and we're going to take product results and this is going to allow us to specify the ID as an index so we'll retrieve the correct product details based on the ID okay so now that that function is defined we're going to call that function inside use effects so again when the components first created you will call get product and it will do that just the once however we do want to put in some safety check to make sure that if we don't get a product retrieved that we don't want to display all the product details because we won't have any and the way we can do this is have an if condition that says if not product with a question mark just in case it isn't available title and then return some H1 tags that's just got loading product in between and finally we can put a safety check within here to just say we want to make sure the product is available and if it is available we're going to return the following code and instead of the ID to test this out let's do product.title so we're now calling the API we're retrieving all the products we're going to find the one with our ID and it should print our product page and the titles okay so let's test this out and see if it works and there we have it we've got product page followed by interesting facts for curious minds which was the book that we clicked on so we can test this out with Guinness World Records okay so now we've retrieved the product data let's find a way of displaying it nicely on our product page so the first thing we're going to do is Define some classes for the outer div so the first one is going to be H screen which specifies that the height should be the size of the screen we're going to give it the Amazon clone background and we're going to create a div within this div so let's just get rid of this for now foreign ER so we're going to use the same constraints for this container as the one on the home page so let's give these classes of Min width which was 1000 pixels and Max width which was 1500 and we're also going to want to Center that as well so we're going to have M Auto too and just so we can see what this looks like let's add a background of Orange which we'll see when we get some content so let's sort out the structure of the container we're going to have a div and what this div is going to do is it's going to act as another grid and this grid is going to have 10 columns but we're going to divide this grid into three lots so we're going to have three nested divs so one two three and I'm just gonna pop a comment in as well for left middle and right so the left div is going to take up three columns you can specify that call span free and let's just give it a blue background for now the middle div is going to take up five columns calls Cole span five and we'll just make that pink for now so we can see it and the right div is gonna take up the remaining two columns so Carl span two and we'll just make that green [Applause] so we can see that so if I add something into the left div like testing you can now see that the page has been divided into the grid list like we specified and if I maximize it you can see that we have our container all right so let's fill out some details then in the left column I'm going to add an image and for the source we're going to specify with back ticks we're going to have the dollar and curly braces and we're going to specify product Dot image and then already you can see we've got our Guinness world records book so this could do with a bit of work so let's just add some padding so p8 we're going to make the column rounded we're actually going to have a background of white and it would be nice to have a bit of separation between all of the columns and we can do that with gap two so now we can see the orange poking through which was the background of the outer div and the final thing we just want to do is make sure the image is always centered so let's just add M Auto okay so the middle column is going to be split up into two divs so let's define those [Music] so this first div is going to contain the bulk of the product details and we're actually going to make a new component for this because we're going to reuse this throughout our Amazon clone so let's head back over to our components folder and we're going to add product details dot jsx once again we're going to add that to index.js [Applause] and we're going to do the familiar snippet rafce so for the outer div we're going to add a class of margin bottom one so obviously this component is going to have product details so we're actually going to pass the product in as a prop and we're also going to pass in a Boolean which we're going to call ratings which I'll get on to in a bit so within our outer div let's define five more divs and these are simply going to contain product details so the first one will be product dot title copy this into the rest the second is going to be brand the third is going to be average rating the fourth is going to be attribute and the final is going to be badge now let's hop back over to product page and we're going to import this component IMD enter and we just need the dot dash and we're going to import product details so now we've imported that if we I'm just going to close the panel if we head down to our first div in the middle column let's add product details remembering that we are passing in the product there's a prop so product and we are also specifying ratings Boolean which we don't really need at the minute but we'll just pass it in and in the browser we can see that we have our product details component displaying some of the product details so so we've got the title The Brand the ratings The attribute and the badge okay so the product details are showing but they could look a bit better before we go back to product details let's just make some changes to the middle column so I'm going to give it some padding so P4 I'm also going to make this column rounded I'm going to give it its proper background of white I'm going to introduce a new Tailwind feature which is divide and let's divide Y and this is going to give us this nice little divider here and we're just going to specify the color of it so gray 400 is what we're going to have just a nice way of separating the content and we're just going to add one class to the product details div with margin bottom three just a bit of separation between the two okay so let's jump back to product details and sort The Styling out for this let's add some classes to the title so so first off we're going to define the size of it so we've got text extra large and then we've got the break point of extra large which is going to be text 2xr we want the font to be medium we're gonna give it some margin bottom of one so for the next two we can copy this and then make some slight tweaks to it and the tweaks will be the size so we're going to have small and then for extra large we can have base just take a copy of that and we'll take another copy for product attribute and this will be extra small and for the extra large and small in terms of the font weights for the following three we don't actually need font medium for these two let's get rid of that [Music] and we're gonna make the attribute font bold okay so this is looking pretty good already but we're gonna Jazz it up even more by adding another component so let's go to the components folder add a new file and this is going to be product badge Dot jsx with the usual scenario we're going to add it to index.js and we're going to do the snippet refce and what we're going to do with this component is we're going to take the badge as a prop and what we're going to return is going to be based on the value of this badge so we're going to have a series of conditions and what these conditions are going to look out for is for different values of the badge so the first one is going to be choice second is going to be seller third one is going to be Limited and if it doesn't match any of those we're going to just return an empty div so we're going to need a return value for each of the conditions so let's just copy this div in but it's we're actually going to be returning spans so let's copy that to the other conditions so the first is going to say Amazon's choice the second one is going to be number one best seller and the final one is going to be limited time deal okay so let's style the first one which is choice so the first thing we're going to do is we're actually going to put choice in its own span so you'll see why in a second and we're going to add some classes to this which is going to be first defining the size of them so extra small and with our extra large break point we're going to have small we can have a background color of background slate 800. just close the Explorer panel we're going to make the text white and we're going to give it a bit of padding so P1 the next thing we're going to do is add a class to the inner span and that is that we want the text to be orange 500. now obviously we haven't imported this to product detail yet so we're not seeing it displaying the browser but let's just carry on so we're going to add some similar styles to the Salas band so let's just copy these and adjust them so we are not going to need the Slate we're actually going to have a background color of orange 500. and we can also copy this again for the limited time deal and this is going to be a similar change we want red instead of orange okay so this is this component done we can get rid of the import and let's import it into product details so go back to product details so if we remove this import as well and we're gonna import product badge and let's add this component here and we're going to pass in badge as product badge and close this off and there you can see it that's our product badge component and it's worked out that this badge's choice so we've got an Amazon Choice badge so it's just a nice little touch so we're now going to add one more component to this so let's go back to the components folder and this is going to be called Product ratings.jsx so r e s c e and we'll add that to index.js so take a copy of this and we'll be adding product ratings and let's go back to product ratings okay so for product ratings we're going to pass in some props and we're doing this in the slightly older way than destructuring them in the parentheses but there's a reason for that and you'll see coming up so we're going to extract some of those props so we're going to have star number and that is going to be the average rating that we're passing in and then we're going to have the rating number which is going to be prop stop ratings so you've probably guessed that we're going to give the rating in this component and you've just had a clue that we're also going to give a number of stars from this component too so so we're going to need to import the star icon so IMD enter and we are going to import this from exactly the same place as the shopping basket came from so react 24 outline and it's simply called star icon now everything in this component we're going to want to be in line and we have a solution for that already which is adding the flex glass now the way we're going to achieve giving the stars is we're going to go back to a Technique we used in the carousel product and that is using array from so we're going to start with curly braces and we're going to do array from with parentheses we're going to do curly braces inside that and we're going to specify a length of star number which is the ratings average ratings we're then going to specify the underscore with an i which is the index you'll remember with the arrow syntax and we're going to have our star icon now obviously you remember from the other component that we need to add a key for this so we'll add that and we're going to add some classes to this too so the first one is going to be the color of the stroke so that is going to be the outline of the star so you can do stroke and then we're going to do the square brackets again and this color is going to be f1b61f which is kind of like a Goldy color and we're going to do the same color for the fill so let's just take a little copy of that and change that to fill and we're also going to give this a high of just 20 pixels okay so that's the field stars so this is going to give generate us a star icon for each one of the star numbers so say if it's three out of five we'll have three star icons that have a stroke of this gold color that are also filled by this gold color now we're going to take a copy of this because we're now about to generate the number of stars that the average rating doesn't have so for three out of five we're gonna generate the two that are not going to be filled so the way we're going to do this is we are going to make the length five minus star number so 5 minus three will be two and we're going to remove the fill so there will just be an outline of the gold star so as we've given the flex class as well they'll be in line so we'll have five stars three of them filled and the final thing we're going to do in this component is add a span and this is going to take the rating number followed by ratings and we just add a few classes to that so we're going to give it a bit of margin left and we're just going to make the text blue 500. okay so let's head back over to product details and import that and test it out so product ratings and let's close the Explorer panel and this is where we're going to use the Boolean that we passed in earlier so so the reason we're passing in a Boolean for Ratings is we don't always want to display it so to make this conditional I'm going to add the curly braces and I'm going to have that followed by ratings with the double amp sun will move average rating into this so because I specified false when I originally did this on the product page that's now disappeared but I'll change that in a second and we can now use the component product ratings close this off this is going to be average rating equals and then we're going to have ratings equals product ratings so let's quickly go back to product page and I'll change this to true and then we should see it displayed on the screen so the Guinness Book of World Record has 5 out of 5 Stars so let me just go to a product that doesn't so we can see that the ones that aren't filled and you can see this one's got four out of five stars so these are the stars that aren't filled but have a stroke okay so let's head back over to product details and we're just going to apply the finishing touches to Brand so we're going to add Buy and then we're going to add a span in here and we'll take a copy of product.brand I'm just going to add the class of text blue all right so we're ready to head back over to product page now that our product details is looking pretty good so now that we've got the product details let's look at the second div that's part of the middle column we're just going to add the product description and let's add some classes to make that look a little bit better so we're going to make the text Base by default and for the extra large break point we're going to make it large and we're also going to give it some margin top okay so let's tackle the final column of the product page okay so we're going to make it similar to the other columns so we're going to give it a padding of four we're going to make it rounded and we are going to replace the green with the background of white let's make an outline of the column that we want to create so the first div we're going to create is gonna contain product price the second is going to contain the old price we're then going to have free divs foreign s free delivery and in stock and we're also going to have a div that's going to contain the quantity of the product so this will be followed by a drop down so let's make the select tags with option so this will be one two and three for now and the final thing we're going to have at the bottom is adding to cart okay so this one really doesn't look impressive so let's get to it with the styling so let's do the text size for the price so we're gonna have text XR for the XR breakpoint we're going to have 2xr and we're going to make the font semi-bold I'm gonna make a copy of this and apply it to the old price but this is going to be base and large for the text sizes again we'll take a copy and we're going to apply it to free returns and the size is going to be small and base for the break point and it's going to be the same for free delivery too in stock and quantity we're going to take the base and large because that's what they're both going to take to so they're both base and large however quantity isn't going to have the font semi-bold okay so it's looking a little bit better in the browser still not great before we make the styling any better let's just address how the price looks so I'm sure you can imagine if you saw this on a website you wouldn't be very confident in how this website was ran if it just said 11 so we're going to need a way of displaying a price so let's go back to the constants file that we defined earlier and we're going to define a way of formatting the currencies okay so what we're going to do is Define export const and it's going to be GB currency uppercase so we know it's a constant and we are going to use Intel number format and this is a built-in number format for JavaScript so the first parameter is going to be engb and the second is going to be an object that's going to take style as currency and the second is going to be currency which is going to be GBP for Great British pound sterling so once this has been defined we can head back over to the product page and we can import this at the top so if I do IMD enter and I remember that we go up a directory for this so utils and constants and we can reference GB currency now if we come back down to the price product price so we can wrap the product price in the format so if we do GB currency dot format and wrap product price in parentheses now once you've done that you might have to refresh your page because I had to that we now have a price we've got 11 pound which looks a lot more legitimate we're also going to copy this for the old prize too so just take a copy of this and wrap this up also and we have a price of that too so that's good we now got 22 pound and let's add a little bit of color to each of these so for the normal price we're going to add text Red 700. for the old price I'm going to add text Gray 500 for the next two I'm going to add text blue 500 take a copy of that paste that and for in stock we're going to have text green 700. all right so that's looking a little better already for the prices we want to have them on the far right hand side so we can do that in Tailwind by adding text right and let's copy that for the old price another bit of jazzing up we're going to do is we're going to add a span within the old price so just take that and add that within there and before the span we're going to do RIP colon and the reason we've added the span is we can add a class that's going to be line through and what this is going to show is that this was an old price and we now have a new price okay so this is all looking nice but we need to add a bit of padding to all this so let me just stretch that out so you can see a bit better now for the free returns I'm going to add margin top three for delivery I'm going to add margin top of one same for in stock and the same for quantity two bring that back over and see how that looks yeah so looking a little bit more polished now now let's get started on quantity and the button let's add some classes to the drop down so we're going to give it a bit of padding first so P2 and we're going to give it a background of white I'm going to enable a border and we're going to make it rounded and we're gonna give it a focus so this is new that means when we click on the drop down we're going to say that we want the border to be indigo 600 so now if I click on the drop down we have the Border you can just see it there we go okay so let's add some classes to our button so we're gonna do BG yellow 400 for the background we're going to make the width the full width for the column we're going to add some padding with P3 we're going to make the text extra small but for the extra large break point we're going to have small we're going to make the corners rounded and we're going to add a new feature which is hover which is going to make it background yellow 500 so this is similar to focus but when we hover over the button we now get this background let's just add some margin top of three just to bring that away from the quantity section okay so that's that column done for now and we can just remove that orange background that we put in and let's add a bit of padding to all of the columns as well just to bring it off the top of the navbar being on the product page it would be really nice if we could hit the Amazon logo and be taken back to the home page so let's add that now if we go to the navbar component and the same way we used it in the product page we're going to use react routers link so let's import that now so IMD react root of dawn and we want link I'm just going to bring this import below the rivers and we're going to introduce that link tag just around the image tag we've got here so link paste in the image and sort the formatting out so here we're going to want to specify two and we're going to say forward slash which is our home page so we can quickly test this out now so if we click on to we've already got the cursor that we didn't have before and if we click on this we get taken back to home page brilliant and while we're in here we're going to add another link around the div for the shopping cart so let's paste that here and finish that off there sort of formatting out a little bit and we're going to add the root of checkout so let's give that a go then so we've now got the cursor pointer good start and once we click on it we get taken to checkout so let's just familiarize ourselves with the routes that we created earlier so we did the home page we've implemented the product page and we've got search and checkout so we're going to tackle search results now but before we're going to do that we're going to implement suggestions for the search box so let's head over to the search component now what we're going to tackle here is a way of getting suggestions when a user types into the search bar so if we had something like G we'd get the suggestion for Guinness Book of World Records now in order to present these suggestions we're going to have to have an object in search that is going to hold these suggestions so let's use the same method we did for product page and we'll import use state from react I'm going to create a state of suggestions with set suggestions and call the you statehawk and we're going to have the initial value of null for suggestions now similar to the product page we're only gonna render the content for suggestions if the suggestions object is present and populated we're going to store suggestions we're going to need some suggestion data and this is where suggestions.js as part of the data folder that we put into the public folder earlier so let's have a quick look at this now all the suggestions.json is an array of objects which has the product ID and the title let's head back over to the search component now again we're going to follow a similar approach to the product page and retrieve our data via the use effect hook so just quickly import that so parentheses parentheses again Arrow function and curly braces and we're also going to need the square brackets that are going to be empty for this component too we will need another function so we can do nfn enter and this is going to be called get suggestions and get suggestions is going to be called as part of the user fact function so remember we've got the empty brackets as part of this so it's going to be around once when the component is first created so again we're going to import the call Api function that we used earlier and the resource path that we're going to pass in is data forward slash suggestions.json again it's a promise so we're going to have then Arrow syntax we're going to have suggestion results and we're simply going to call set suggestions and we're going to assign all of the results straight to the suggestions object so this is going to return the whole array for our suggestions and store it in the suggestions object when I do the back end video we're going to call the suggestion API for every keystroke which is going to be making do for now okay so now we've got all the suggestions in an object we need to concentrate on generating suggestions each time the user types in the bar so like I was saying g u we need a way of whittling down those suggestions that are stored in our suggestions object now in order to achieve this we're going to need another object another piece of state and that's going to be called search term take a copy of that search term and we want to paste that here set search term now we're going to have this default State be an empty string and the reason we want this to be an empty string is this is going to be used to capture the search term as the user is typing so like I just did the G and U it will capture G when I've typed G and for the keystroke U it will capture gu so we're always keeping track of the search term and the way we can do that is add it to the input box and the way we do that is set the attribute value and then we'll have search term as the value now it doesn't look like there's been much for an update but if we change the default State search term to something else you can see that the we've now got something in the search box because it's using search term as the default state in the input box so let's just get rid of that for now now search term is just setting the default value of these input box but when we are typing we are not getting that updated search term so it might start off with something like I just had in the search box but as soon as I type gu we don't currently have a way of tracking those updates so we can do that with the on change function so I'm just going to close the Explorer panel again and on the input box we're going to Define on change equals and we're gonna have the curly braces now what we receive here is we receive the event we're going to have Arrow syntax and we're going to directly call this set search term function so this will update our state straight away and it will cause a re-render and how we update that value is we want to do e Dot I get and value so we've got our suggestions object full of suggestions we're tracking the search term that the user is typing now we want to find a way of filtering the suggestions we have based on the user's input and the way we're going to do this is in this condition here that we created earlier so let's expand on some of this now we're going to want our suggestions to appear below the search box within its own white box so let's create some of the classes that's going to create that effect so we're going to have a background of white we're going to want the text black we want the width to be full and again we're going to apply a z-index to this and we're going to make that z40 we just want to make sure that this sits on top of whatever it is going to expand over which we want it to expand over everything pretty much the final crucial class that we're going to add is absolute because we're going to apply absolute position into this box because we want to make sure that it fits directly underneath the search box so this has created the white box where the suggestions are going to appear it's now time to fill other suggestions based on the user input so we're going to have curly braces the next thing we're going to do is use the filter array function so suggestions dot filter the suggestions has an array of objects so we're going to leave the parentheses another parentheses and we'll just pass in a single suggestion with the arrow syntax and curly braces the first thing we're going to do is retrieve the search term so we'll have const current search term and that will be equal to search term dot two lowercase so we'll just have lowercase for everything to make it easier and the next thing we're going to do is extract the title from the current suggestion and we're going to also make that lowercase too so if you remember we're going to be filtering over each suggestion so we're fine to retrieve the title of the suggestion so we've got the current search term and the title and then we're simply going to return a condition so return with some parentheses and we're going to check that the current search term is populated we're going to check that the title starts with the current search term and we're also going to require that the title is not equal to the current search term and the reason for this is when we have a full title in the input box we don't want the suggestion box hanging around now following the filtering down of all of the valid suggestions we're going to slice the array and we're just going to return the first 10 elements just to ensure that we're not getting too many suggestions we're then going to do a map that is going to go over each of the valid suggestions so the map is going to take some parentheses the arrow syntax and this time we're going to have another set of parentheses and we're going to return a div and this will contain the suggestion dot title and don't forget to add this suggestion that we're mapping over and also don't forget that we're going to add a key like we have done previously with the suggestion.id so for this final bit we're just mapping over all of the valid suggestions that's been through this filtering and we're not going to have more than 10 and we're basically going to produce a div for each of those so let's give it a go so I'll use my previous example with G and there you go we've got Guinness World Records 2023 if I do I we've got interesting facts and it starts with us okay so it's not looking too bad however what I would like to do is if we click on one of these suggestions I'd like it to replace what's currently in the search box so if I clicked on it starts with us I'd want I to be replaced with the titles we can do that again with an on click function so let's just add that to this div here so we've got on click equals curly braces and we can just have empty parentheses for now we do not need to pass an event like we did previously and we're just going to set the search term to update the state of the search term to the suggestion.title all right let's see how that works for us so we've still got our previous example going and we're going to click on it starts with us and boom it's replaced the search term that we had previously so that's looking good another thing we need to consider is we do have this category drop down that's going to focus our search so we're going to need a way of storing the currently selected category so we're going to have another bit of State for that so that will be called category and we'll have set category as well now the default State we're going to use for this is actually going to be all as you can see that's the default selection when we go onto the page now because this is on change and not on click like we just did we are going to pass in an event this time and this is going to go straight to set category e.target.value right so we're keeping track of the category two now the next bit of functionality we're going to implement is the clicking of the search button which then kicks off a search so let's add an on click to the button so we can do on click with the curly braces and we're going to pass it a function we're going to call on handle submit and we're getting an error because we haven't created that yet so let's do this here and we'll use nfn snippet I'm going to change this to on handle submit we are going to pass an event as a parameter and the first thing we're going to do is use the event but we're going to call prevent default and all this does is cancels the default event if it can be canceled so if it was to submit a form we wouldn't want to do that so like I just mentioned we're going to have a category and a search term and then when we click the search button we want the products returned that match with the search term based on that current category and once that's done obviously we want to change the page and we want all of those products that match the search term within that category to be displayed on our search results page so in order to achieve this we're going to have to use a slightly different way of changing Pages than we have been using previously so it's still using react router but it's using their navigate hook and also creating some search params let's import those again IMD enter so we are going to react root a Dom is where we're importing it from and we're going to take the use navigate hook [Music] also create search params so we're going to initialize navigate underneath our state so use navigate [Music] and within our on handle submit we're going to create navigate with parentheses and some curly braces and this will Define where we're moving to and it's also going to allow us to take some special parameters so as we are navigating we're going to provide a path name and that is going to match search so we already have the search root and we're also going to provide search and this is where we're going to specify our search params so this can be a little bit tricky so watch closely we've got the bat ticks and then we've got the dollar with the curly braces and then I'm going to put them on a new line and we're going to call create search params from this with parentheses and curly braces once again and this is going to allow us to build some search params that we're going to pass on to our search result components in this as standard query param so like we just talked about we're going to pass category again we're going to use backticks for this and dollar and curly braces and we're going to pass in our category state that we've been maintaining and in the same fashion we're going to pass in search term so what the user's been typing into the search box and we're going to use the template string to pass in the search term that we've also been keeping track of but we're not quite finished here before we leave the page we just want to clean up after ourselves so we can do that by setting search term to an empty string like it was before we got here and also doing the same thing for category by setting it to all and what this is going to allow us to do if we've already done a search and we're on the search result page it's going to give us default options so we can then make another search on the search result page just a bit of cleaning up okay with that in place let's go to the search results component so the first thing we're going to do in this component is extract the search params that we've just built in the search component so similarly that react router has create search params it also has use search params so we can retrieve them we're going to react root a Dom again and we've got the corresponding use search params and we can retrieve these with the following syntax so const and single array and we're going to have search params equals use search params now even though we've changed to a different page and we have the category and the search term we haven't actually retrieved any valid products so we're going to do that using again use effect but this is the occasion where we're going to use this in a slightly different way so let's import use effects so IMD from react and we want to use use effect so we'll implement it to start with in the usual way parentheses Arrow syntax curly braces and for now we'll have the empty brackets let's define a function to calls nfm I'm going to call this get search results and we don't need a parameter and we're going to call this Within use effect now the difference with this use effect and I just kind of hinted towards it was the fact that we are not going to leave this array empty so what this array actually does is it tracks a list of dependency that our component may have and if the state of any of these dependencies change it will in fact call the use effect so if we leave it blank we don't have any dependencies to keep track of so we'll just call use effect when the components first created however if we pass in search params every time the search params change so anytime a search is made basically because we've just been through how that works we're retrieving the params based on the search that we make with the category we will then run use effect again and we're going to retrieve our products again similar to how we have so we've got the search.json in our data folder and this breaks down an array of products based on the category so we've got all which contains all products then we've got computers deals Amazon with their relevant products too so let's hop back over to search results and again we're going to use the call Api function so IMD and we want the utils folder and we want call Api [Music] call Api and we will be calling that in the get search results again in the same way back ticks data and we want search.json this time so again it's a promise like the others so we want then with parentheses parentheses again Arrow function and curly braces so again what we're doing here is we're retrieving all of the search.json again we different when we do the back end but we're going to whittle down the products now as we've received them now before we do any of that filtering what we're going to do is retrieve the search param so we can do that with const search term and we're going to use the search params that we defined above do a get and that's also going to be search term and we're going to do the same for category as well and this is going to retrieve the search term and category that we had as search params so given that we're going to whittle these products down to the relevant ones that we care about we're going to need somewhere to store these products so once again we're going to use State and create a state object so import use state above and we're simply going to call these products and have our corresponding set products function and we will use the use State hook with a value of null let's finish off the functionality for the API call so we're going to pass some search results and the first thing we're going to do is Whittle down the category results by taking the search results and splitting it by category to remember we had the key value so that would be if it was all we'd get all the products that are related to category or this is where it becomes a little bit more involved than the other API calls we've done so we're going to check if we actually have a search term because the user may have just click search with nothing in it so we want to return everything for that category pretty much and if that is the case then we can just set the products to be the category results as we don't need to filter anything down because we don't have a search term however if there is a search term included we're going to have to do some a bit more involved and this is return some results from category results and again we're going to do a filter with parentheses and we're going to take each product that's in our category results with the arrow syntax and we're going to do product dot title I'm going to close the Explorer panel and have dot to lowercase and we're going to say dot includes we're going to pass in the search term and we're also going to make sure that the search term is lowercase as well I'm going to retrieve all the products for the category is going to filter each product it's going to make the product title lowercase and we're going to see if the title includes the search term while also making that lowercase and we're simply going to do set products for the results based on that filtering okay so with that plumbing done let's create the outline of the page so we're going to change the outer div so we're going to start off with defining the minimum and maximum width but they're going to be slightly different to the ones we've had before because we want this to be slightly wider so we're going to have the minimum width as 1 200 pixels and the max is going to have 1 300 so not a lot of difference between them and we're also going to want the results to be centralized so we're going to have margin Auto too now as you can probably imagine we're gonna want a div for each one of our search results so we're going to include the curly braces and we're going to have a check for products because we don't want to render this if our products object is null and if it isn't we're going to do products.map with parentheses and then we're going to have another set of parentheses with the arrow syntax and some curly braces so just sort the formatting up so just indent that slightly now for each one that we map over we're going to want to return with the parentheses and we're just going to have a div for now and once again we're going to apply a key that we don't have one yet so we need the parentheses of product because We're looping over each product and we're also going to keep track of the key so we can then add that to the key of the div and then we'll just for now add in the product title so I appreciate that was a lot of coding without actually seeing what we were doing so after doing all that make sure you restart your Dev server or this may not work but if we go to the home page and I'm going to type G we will have Guinness World Records 2023 and if we click search we get the title now let's go back and let's do I and let's search for this so we should at least get two responses from that but we may get even more because for the suggestions we're just looking for the this if it starts with i whereas this can contain I in any place so there we go we've got a list of products which all contain I I'm not going to go through each one to check but let's check this specifically so we'll just go back and do fire and enter and we get Fire TV stick light so seems to be working now let's quickly demonstrate something I was talking about earlier with user effects so we're on the search results page I'm gonna search for Guinness and we get the result so what happened there was I searched for Guinness World Records I hit submit and the search params changed and because I use effect is looking out for this change for search params it then re-ran the get search results function and we retrieve the products that we were looking for which was the Guinness World Records now the reason that all worked is because we were looking for the search param in our dependency list if I remove this and I searched for fire for the Fire TV stick you'll see that we don't get any results now the reason for this is we are currently on the search result component so when remember we've used this a couple of times when we've got an empty array the use effect function only runs when the components first created but we're already on the search result component it's already been created so this is the reason why we can't search for another product when we're on the search results page which is obviously wrong we want to have it so we can always make another search no matter what page we're on so that is the reason why why we include search params in our array because it's a dependency we want to listen out for so when it changes we can listen out for updates and retrieve the products we're after okay so now we've got our search results let's create the outline of this page one of the first things we're going to do is import link and the link tags are going to become the outer tags for each product within our search results and we're going to make sure that the key belongs to the outermost tag for each of the products and the reason we're doing this is we want to make sure that for each of our products that we get in the search results we want to make sure that we're able to click on them and it will take us to the product page that we just developed we're going to have two and back tick and then we're going to have forward slash product and then we're gonna do dollar curly braces and then we're going to pass in the product ID we're also going to make a set height for our search results so that's just going to be 250 pixels and we're gonna make the background purple just so we can see it at the minute all right so let's test out our link so if we click on the Fire TV stick we get taken to the Fire TV stick product page all right so that's looking pretty good now to divide the content for each of the products we're going to use a grid once again and we're going to specify grid calls 12. we're going to make each of these entries rounded close Explorer Pane and we're going to give some margin top mt1 and some margin bottom to divide each of the entries create our inner divs so we can get rid of the product title for now and we're going to have a div and we're gonna have another div so the first div attach some classes to that we're going to have coal span 2 and we're going to have our image in here so single image tag and the sauce is going to be product dot image small and there it is now we want to make sure that this sits in the center of that column so we'll add M Auto and we want to make sure that the column has some overall padding as well so we'll give it P4 okay that's looking a lot better for the for the other column we're going to have a coal span of 10 to make up the remainder so let's just quickly sort the backgrounds for these out so we're going to remove the BG purple for now for the first div with the image we're going to have gray 200 and for the second column we're going to have 50. now this second column is also going to have a border and the Border color is going to be gray 100 and we're also going to specify hover BG gray 102 and that should leave something like this so once we hover over we've got that shadow all right so let's sort out the product content then so we're going to need a div underneath the second column and we're going to give it some classes we're going to start off by giving everything inside font medium I'm gonna make the text black and give everything an overall padding of two the next thing we're going to do is import product details so we can do that with IMD and we just need to reference the index.js like this and we're going to have product details so then we can just drop this in our nested div for the second column and obviously we need to pass some props to this and those props for a product which we're going to pass in the product and we also had ratings which was a Boolean so we're going to set this to true and there we go how easy was that we are we reusing our product details component um not for the last time either so obviously we want the ratings because we are trying to entice the user to click on one of these and you know give some confidence that this is a good product click on me so the next thing we're going to do is import our number format so we can include the price so we Define that in the utils constants and we are importing GB currency so once we've done that we can create another div and we're going to add curly braces GB currency dot format and it's going to be product dot price we're going to add the classes to that so we're going to have the text size as text extra large by default and for the extra large break point we're going to have 2XL and we're just going to give some padding to the top so pt1 and the final thing we're going to do is add a bit of padding to the very top to take it away from the nav bar alright so that's pretty much everything done how about we hit search with this and then we can see what multiple products look like so that's what it's looking like so it's looking pretty good okay with that all looking good let's hop back over to the home page using the logo and you'll remember during development of the home page I mentioned that we were going to add some more functionality to the Carousel category so let's do that now so we'll hop back over to Carousel category and what we're going to do is reuse some of the functionality that we used in the search and search results components so what we're going to do is we're going to use the navigate and create search params that we used fire react router so reactor Dom and we're gonna do a similar thing that we did on the search component and Mrs semicolon there now we're going to need another function so we'll do nff enter and this is going to be called search category and this is going to take category as a parameter this and we're going to take a copy of the navigate from the search component so if we just take a copy of this and hop back over to Carousel category and we can paste that right into the search category function the difference with this is we are still going to go to the same path the same route of search but we're going to remove the search term and we're going to leave that empty and we are going to pass in a category that we are already going to pass in and that will go down as the categories so from here we use the search path which will in turn call the search results component with the search param of category and without a search term now the way we're going to do this is we're going to have on click functions attached to all of our swiper slides so we want on click and curly braces and we just want parentheses with the arrow syntax and then we simply want search category function we just made and we're going to pass in a category so for the first one we are going to include deals and then we're going to repeat that for each of the swiper slides I'm going to fast forward this but when it's finished pause it if you follow along and do the same all right so that is deals Amazon fashion computers home and mobiles and one thing that the errors reminded me to do is Define the navigate the same way we did in the search component so let's do that so cons navigate and we want the use navigate function there and before we finish off there is still one problem with react routers link we get a cursor pointer when we hover over it and you can see when we're using navigate we don't now with the products we can tell that we're actually going to click on that so um not to panic what we can do is add a class name and I'll close the panel can have a class name and that is going to be cursor pointer and this is going to give us the same value so for the first one you can see I've got it and I'm just going to copy this to the rest of them again I'll fast forward that and there we are so we've got the pointer for all of them so if we click on some of these so we go with fashion we get the men's t-shirt if we go with Amazon's devices we get the Fire TV stick and if we go with mobiles and accessories we get an iPhone we are searching by category with no Search terms okay so we're going to be creating the final page which is checkout I hope you're still with me let's get going so someone that's going to underpin how we use checkout is the fact that we're going to be implementing a state management tool called Redux and for those that don't know redox is probably the one of the most popular state management tools however there are many out there but we're going to stick with Redux for now so earlier on we were sharing State between components by passing in props however as our application grows we're going to need a more sophisticated way of sharing State and that's the reason we're going to be using Redux now this video is long enough as it is already so I'm not going to go into create an in-depth explanation of what Redux is but there is a handy GIF on redux's docs which tells the story of redox in a very simplified way so what Redux does is it keeps all of us stay in Us in something called a store so all of our state will exist here what this allows us to do is we can subscribe to this state via the UI so in this example here you can see we've got a balance of it starts at zero when an event occurs on the UI we can trigger via a dispatch and action and this can take an effect on the state that we have which will in fact call one of the reducers that are in the stores and this will have an effect on the state very briefly in this example you can see we've got zero then the UI it clicks deposit of 10. this goes to the event handler which does a dispatch which has an action of deposit with a payload of 10 so deposit in 10 and this state goes back to the UI to update it to ten dollars so let's start implementing it and I'm sure you pick it up as we go along so just get rid of that let's kill the dev server and we're gonna install Redux so we're gonna need two installs so npm I for install and we're going to have react Dash Redux and the second install is going to be mpm I for install and we're going to have at Redux JS forward slash toolkit and in our folder structure we're going to create a new folder and we're going to call this Redux and within this we're going to create the store.js and this is going to be the store where all of our states going to live like we just saw in the example so let's import some of the things that we just installed so the first one is going to be using at Redux JS toolkit and we're going to be importing configure store and we can Define that below so export default configure store parentheses and curly braces so our store is set up for the moment but we're going to need to go all the way back to index.js so we're also going to need to make a change here and what we're going to do here is make an import from react Redux and this is going to be provider what we're going to do with this is we're going to wrap the provider around the app let's put that on a new line so it looks clearer [Music] what we're doing and the reason we're doing this is the provider is going to expose our store so therefore our state to the app component which is the entry point for our react application therefore we're also going to need to import our store which is coming from Redux store and we just need store we're then gonna pass this to the provider so store equals curly braces store so great we've set up our store and we've made our react app aware of our store and therefore our state now like I've just mentioned the reason we've implemented Redux is we want it to control our shopping cart behavior and what Redux allows you to do is divide up different areas of our state into something they call slices so you can have slices for each part of your state so we're going to have a cart slice that's going to deal with our shopping cart so in the redox folder we're going to create a new file and it's going to be called cart slice dot JS and we're going to make an import from at Redux JS toolkit and this is simply going to be create slice and similarly we are going to export that as a cart slice and we're going to use the create slice we just imported there so with the initial setup done we're going to give this slice a name and that is going to be car and then we need to provide this slice with an initial state so in our example we saw on the redox docs it was a balance of zero dollars let's create a initial State object just outside of this so you can do const initial state and this is just going to be an object and this is going to contain two things so this is going to contain an array of products and it's also going to contain the products number which will start off as zero and we can add this as initial state so the slice knows about it and the final thing we're going to add is our reducers so as we saw in the diagram these are the things that modify the state once and action has came in so we're going to set the outline for two of these and the first one is going to be add to cart and the way the reducers work is they take in state and an action it's followed by the arrow syntax and curly braces and the second one is going to be remove from carp [Applause] stay in action Arrow function and curly braces again so we've created the outline of the cart slice and we've added some reducers now we're going to Define some actions and these are going to be the things that we call in the UI which will eventually come to the reducers and then we can take the appropriate action based on whatever's been called so let's do that beneath the cart slice so we'll do that with export const and the curly braces and we'll have add to cart and remove from cart and then we're just going to have car equals cart slice dot actions and we're also going to export the cart slice reducer we've created our cart slice but one thing we've still not to do is we need to let the store know so if we go to the store.js we're going to import what we just created so IMD and we're going to take cart slice and we'll import that as car reducer and then we're going to Define reduces in our store I'm gonna have car and cart reducer so now our store is aware of our slice all right so now that's all set up the first thing we're going to do with redox is set up our product number and we want to have that show in in the shopping cart at all times basically so let's head over to the navbar component and we're going to import something from IMD enter we're going to import that from react Redux and this is use selector and what this use selector is going to allow us to do is basically subscribe to some state that we have in the store so it's not the official terminology of it but it's basically what we do so we will be able to retrieve the value and it will also be privy to any updates that occur to it too so we're going to do const cart equals use selector which is going to retrieve State followed by the arrow syntax and we're going to be looking for state.car which is our cart slice and products number and now we've got that we're going to add it to the section for our shopping cart so we're going to add a div underneath the shopping cart icon and we're going to give this a class name of relative and a nested div within that is gonna have class name of absolute as we're going to need to be able to really fine tune where this number goes which you'll see in a minute and we are simply going to include carp within curly braces so let's restart the server and see what that looks like Okay so we've got something there but let's make it look a little bit better so we're going to add some classes to the inner div we just created we're going to get very specific now and add Rye of 9 pixels and that's brought it across we're going to make the font bold we're going to add margin two and we're gonna give it the text color of orange and because we've added the absolute positioning it's going to stay there while we resize so that's looking pretty good now with that added and with subscribing to the state let's try updating the product number within Redux and seeing if the navbar gets the updated values all right to order to test out the product number we're going to head over to product page and here we're going to import a couple of things so the first is going to be the action that we've just defined in the cart slice so dot dot to go up a directory we're going to need Redux and it's going to be cart slice and we're going to import add to cart and we're also going to add use dispatch from react Redux and again we saw this in the diagram from the Redux docs so the dispatch is what sends the action to the store and to the reducers and we can initialize dispatch here when someone clicks on add to cart we're going to have a dispatch function that's going to eventually call add to cart so let's add our on click function so on click followed by the curly braces some parentheses with the arrow syntax followed by Dispatch and add to cart followed by parentheses so this is going to dispatch the action that will go to the reducers so let's go to the reducer because we haven't implemented any functionality yet so that's cart slice and this is where we are eventually going to end up so I'm just going to temporarily put something to demonstrate that it's working so we're going to have States products number equals state products number plus one so when we call add to cart we are literally just going to add one number to the products number so let's give that a go and there we go you can see in the top right we've got an increment of the number so do that again we get one we go to a different page we still got the same cart number if we go on a different product we can add the cart there we can do it as many times as we like and we've still got the number of products in the car so that was just the outline of how this is going to work but how we're actually going to want it to work is going to be a little bit more complex so let's just quickly go over what we're going to want to happen so when we click on the add to cart button we're going to want to take the product that we're on so Guinness World Records and the quantity of the product and we're going to want that to be added to the array of products and we're going to want the products number to increment but this isn't going to be as simple as just adding one and adding the product to the array because there are some conditions for example if the product already exists in the array then we don't want to add it again maybe we're adding the same product but we've got a different quantity so if the product existed in the array we could just increment the quantity for that product whereas if obviously if the product isn't in the product array then we can just add it straight in and also another thing worth pointing out is the products number isn't the number of products actually in the array it's the accumulation of each of those products quantities so that's quite complicated to say but let's say if I had free Guinness World Records and free of another book that would be a total of six products in the basket but they're technically only be two products in the product array so two products but with a quantity overall quantity of six so in order to keep track of the quantity we're gonna have to make a change to product page so let's revisit that and similarly to what we've already done we're going to track the quantity with State and we're gonna have set quantity we have quantity and set quantity and the initial State we're going to pass it is one similarly we're going to add an on change function to the select drop down on change equals curly braces and we're passing in the event this time remember which has the arrow syntax and then we're calling set quantity straight away e dot Target dot value so every time this changes it will be assigned to the quantity state that we have in our product page component now we're also going to need another function so I'm just going to add this below get product so nfn enter will give us that so we're going to call this function add quantity to product and this isn't going to take any parameters and in here we are going to call the set product so if you remember that product is a object that contains all of the details for the Guinness World Records products that we have in our product page component and we are going to say product dot quantity equals quantity and then we are going to return the product and what we're going to do is we're going to add this function to the dispatch call just in here so this looks quite complicated but it isn't really so all we're doing is adding this quantity that the users selected to the overall product that we're going to send to the store we'll go into this function we will assign the quantity to the quantity that we have in the drop down and we're going to return that product and then we're going to do what we've just done which is dispatch the action for add to cart which will eventually go to the reducer so by the time this product goes to the reducer it's going to have the correct quantity that we want to add another thing that we're going to want to happen after this button has been clicked is we're going to want to automatically go to the checkout to encourage the user to spend some money so we're going to do this again with our old favorite of Link so we've already got react root Adam up here so we can just add link on the end of that and all we're going to do is add the link tags and they're going to surround our button so don't worry all of our function calls will take place before we navigate to our next route so this is simply going to point at checkout so two forward slash checkout so now when we click on add to cart we're currently going to get it incremented and we are in the checkout okay so everything is set up on the product page but we still don't have any logic in the cart slice for Redux so let's Implement that now so the first thing we're going to do is something I've just gone over and that is we're going to check if the product that we've received is already in the product array so we're going to do that with const add product exists so the product we're adding exists and we're going to do state products so the array and we're going to use the array find function and we're going to Loop over each of the products we need the arrow syntax and we're simply going to say does the product ID equal the action dot payload ID so the action.payload ID this is where the product is going to live which we have sent to the reducer so when we click on add to car the Guinness World Record product is going to be within this action and you're going to see this clearly later on so we'll we'll come back to this so we're checking if the product exists in the products array and we're going to have a condition so we're going to want to do something different if the product exists already and obviously if it doesn't we're going to want to do something else now if the product already exists what we want to do is take that product so add product exists Returns the product if it exists so if Guinness Booker World Records is already in the product array this will be that product here so we're taking that and we are specifying the quantity value of that product and we are going to sum the value of it against the action dot payload quantity but we're going to do pass in first and we'll do action.payload dot quantity so if the item exists just find that item and sum the quantity so we've got an updated quantity and if it doesn't exist then we're simply just going to add it to the array so that will be state products dot push parentheses I'm gonna need the curly braces as well and then we're going to take the action.payload which will be be the product object and we are going to specify the quantity using using pass and again is of action Dot payload dot quantity so just simply adding an object which contains the product and the quantity now irrespective of whether the product exists in the array or not we're going to need to increment the product number so we're going to do that with state products number and again we're going to have that equal to products number so we maintain what it currently is and we're gonna add that via pass int once again that is going to be the action dot payload.quantity okay so let's test this out so now we should be able to so we do a refresh and we've got zero in the car we should be able to add multiple books and have the car update so if I do add to cart we've now got free and we currently don't have any way of seeing if products are in the basket and this is what can make Redux a little bit difficult to work with at times is that you can be in a position where you're not 100 sure what is going going on in the store didn't mean to rhyme there but I did however Redux has some brilliant Dev tools and you can add a Chrome extension so I've added that to Chrome and as part of the Chrome Dev tools you can add some Redux Dev tools and what these do is they allow you to track your state so you can see here that products number has gone from zero to three so the update is from zero to three and we've got the Guinness product in the products array so if we look at the different view we can see the whole object that we passed in so we've got the typical stuff that we've already seen from the Json and we've also got the quantity that we added so and you can see it's recording so if we do some more let's go back and we'll just go a bit wild and we'll add a few so we'll add one of these and we will add three of these and interestingly enough we'll add another two of these and see what effect that has so let's follow them one by one we we looked at this one this was our next one so this looks at the actions in isolation what was added so we've got the this book The curious mines and the products number has gone from three to four we then added the space Boy book with a quantity of three so the products number has gone from four to seven and then all that's changed here so bearing in mind that we've just added the same book so remember I did three of these and then two of these you'll notice that the quantity for product two has gone up to and the products number has gone up to so it's just a really good way of having an overview of your state so we're currently on the diff if you wanted to see the overall State at any given time we can have a click on State and you can see all of the products in the cart so we've got free because I added this twice and another nice feature of it is you can click on this chart down below and it will show you the chart of the of how the state has transformed and the really nice feature is that we can replay it so you may go from using redox with almost you know with a good guess of what's going on in your state to having a really really fine-grained idea of what's going on so thank God for the dev tools anyway let's crack on now that we can see that we've got products in our basket let's create the last page that we're going to do today and create checkout so we've already created the component so let's jump over there and I'm going to close the Explorer panel so let's start with the outer div we're going to add some classes to that and we're going to set the outer div to be the height of the screen and we're going to have our Amazon clone background we're going to have a nested div in here and add some classes to this and we're going to set the familiar container so Min width of 1000 pixels and the max width of 1500. we obviously want a center that as well and we're going to bring this off the top of the nav bar with PT with some padding top of eight again we're going to have another nested div and this one is again it's going to be similar to the others we're going to have a grid so we can split some of the details and this grid is going to have eight columns and it's going to have a background of white the inner div from this is going to have is going to take or a coal span of six and within this we're going to have a div where we're going to have title for shopping cart and give this class name and we're going to have text 2xr and for our extra large breakpoint we're going to have text free Excel make it nice and big and we're going to give it some padding so margin four now the next thing we're going to create is we're going to create the remaining div that is going to take up the next two columns call span of two and I'm just going to write a comment here because it might be a bit confusing so this is going to be products and this is going to be check out let's just finish this column off for now this is also going to have a background of white and it's going to be rounded also one difference here is we're going to have a fixed height of 250 pixels and we're gonna add a gap between the two columns and it's going to be a gap of 10. so that's the overall outline but we are going to need to import our products from the store so again we're going to use the same approach we did last time we did something similar that's with the products number we're going to import from react Redux and this is going to be use selector so we can Define const products and use selector with parentheses and we're going to pass in state with the arrow syntax and this will literally be State cart products gonna contain all of the products in the car let's iterate over each of them here so we can display them in the product section so if we do products.map parentheses we can take a product Arrow syntax some curly braces and we're going to return a div once again we're going to need the key like we have in the past and that will be the product ID now let's print out the product title and we'll do a little experiment to see if that's working all right so so to test this out we might need to restart our Dev server so let's do that Ctrl C to kill it off and npm start to bring it back up so if we go to the home page and let's add no plan B with a quantity of three and we see the products number updated and we've now got no plan B in our car all right so now that's working let's make this look better to do this to start off with we are going to create another grid and this is going to be within this product array and the grid is going to span grid calls 12 and then we are going to create another div inside that which is going to spam 10 of these calls call span and we'll do the other nested div which is obviously gonna spam two now this is going to get a little bit more complicated but within this first coal span 10 we're actually going to make a grid inside of this column so it's like grid section and this is going to be grid calls eight so this is also going to have two columns inside it so we're going to need two divs so I'm just going to steal this one and paste it twice and these two are going to span two and six to make eight okay so that's a lot of grids and a lot of columns let's start implementing these so it doesn't get confusing so for the inner Cole span 2 we're going to add a link so we're going to need to import that from react router Dom and we want link so this is going to contain our image so we need a single image tag and this is going to the product page so again we need the back ticks for this and it's going to forward slash product and forward slash again so we're going to need the dollar sign and curly braces followed by the product ID and the source for this is going to be product dot image small and there it is and let's sort out some of the styling so we want to give it some padding so let's say P4 and we want it to be Central so we'll do marginal O2 okay let's deal with this coal span six so the second innermost div and we're going to start off by adding another div and we're going to specify that everything in here is going to have font medium and text is going to be black and we're going to have a bit of margin top so mt2 we're also going to reuse the same link because we want to go to the same product page [Music] and what this link is going to wrap is the product details component that we've already used a few times so let's import that so I've got semicolon add that in IMD and we are going to be getting that from the index such as so we just need dot forward slash and product details so let's drop this in here product details and remember that we're passing see reminding us we need to pass in some props so product product and for Ratings this is the first time we're actually going to say false so we don't actually want the five out of 5 stars and ratings because at this point we've already got it in the baskets we're already convinced it's just about getting us to check out and below this div we are going to add another div [Applause] and this is going to contain a button called delete the next thing we're going to do is add some quantity buttons so again another div and we're gonna need three nested divs inside this two three and what these divs are going to contain is a minus and a plus and the middle is going to have product.quantity so it's going to allow us to control the quantity and you can see the formatting is not great so we're also going to add a mini little grid to this div with a grid calls are free and that's better they're all in line now but they could still do with a bit of work so going to make the overall width of 20 and let's deal with some of the styling of the actual attribute so the text is going to be extra large and for the break point it's going to be 2XL and this is going to be the same for the plus button and for the quantity it's going to be slightly smaller let's just copy this and this is going to be large and extra large for each of the operations we're going to have background Gray 400. copy that to the plus and for the actual quantity we're going to have background gray but we're just going to have 200. so it's looking a bit better but we could still do a bit of work so for the plus and the minus we're going to make the corners rounded soften it up a bit which looks better and to finish it all off we just need to add text Center to the outer div and there we go we've got our quantity controls there now to make this easier to read I'm just going to close these two divs so we've got a bit more room we are now in the Kohl's Band 2 and what we're going to do is add a price so again we're going to need the currency so IMD and this is coming from constant so that is upper directory so we've got utils and constants semicolon and that will be GB currency so once again we're gonna have a div and within the div we are going to have curly braces same as we had in the other ones the GB currency format and within there we're having product.price and there we go we've got our 11 pound showing let's add a bit of styling to this so for the class names so we're going to introduce text large and the Excel breakpoint is going to be Excel I'm going to add a bit of margin top my mt2 we're going to bring it slightly off that right hand side so mr4 and we're going to make the font semi-bold now if we had multiple products in the basket I mean in fact let's do that so let's add this book to it'd be nice to have a way of separating these at checkout so we can do that pretty easily so again we can separate these with divide so if we go up to the very outer div of the grid cars 12 and we want to divide Y and we are going to make the color divide gray 400 and take a copy of this because we want that to extend to this product section too so we're going to copy that on the next line down which is grid pulse 8 and we've now got a nice little separation for the each product and it'll be nice to just bring all of this over to the left slightly so margin right four so the final thing we're going to do on this initial section is come below the curly braces and we're going to add another div and this is going to contain the subtotal and we're going to add the number of items eventually and we're also going to add a span within this which will default to zero for now so we've got that in the bottom left hand corner so let's style this before we add the functionality for the subtotal so the text size is a large and extra large so we'll just take a copy of this above we're gonna want all the text over to the right so you should see that shoot over exactly like that yep we're going to have margin bottom four and margin right four bring that over and we're also going to add font semi-bold to the subtotal now what we're going to do here is we're going to add some logic to add up the subtotal of our basket we're going to have the number of items and the subtotal so let's start off with the number of items which is going to be very simple we're gonna copy this and we're going to change the products to product products number and we'll take items number and we will put that in the parentheses with items so we now have subtitle for four items so you can see we've got three plus one four and now the next bit we're going to do is we're going to work out the subtotal for all of the items in there so this will be a little bit more complicated but we're going to start off by defining subtotal so let's get started by taking a copy of the above and what we're going to do is use the reduce array function so what reduce is going to allow us to do is it allows us to take an initial value which for us is going to be zero as that's the default subtotal and it's going to allow us to do an operation over each of the products which for us is going to be summing the subtitle as we go so we're going to do that by passing the subtotal which starts off as zero and we're also going to have a product per iteration and then we are going to have subtotal again Plus product dot price multiplied by product dot quantity so product.price will be 11 pounds and the quantity will be free so that'll be 33 pounds that will add that to subtotal we will then go on to the next one which will be 10 pound 90 and the quantity we won so it will add the 10 pound 90 to 33 pound so to see this working we're simply going to need to add this to the span so again we're going to be using it in the same way so we add the curly braces GB currency dot format and we'll simply need subtotal and there we go we got 43 pound 90. so that's worked very well okay so with that done let's finish off this final section of the checkout page so we're going to add another div and inside that we're going to have your order qualifies four and we're gonna have a span and then free delivery in capitals and then full stop delivery details so for this we're going to add some sizes to it so that'll be text extra small and then extra large break point it will be small we're going to make text green 800 so we're going to make it quite dark and then for this span we are going to have a class of font bold so it stands up and the next section we're actually just going to take a copy of this subtotal so the div above here and let's paste that below here we are just going to change the size of this though so we'll have base and large we're going to get rid of the text right and the margin right as well and the final thing we're going to add is the proceed to checkout button now before we sort this button out let's add a bit of padding to the overall column just to sort the lookout a bit and also just realized I made a slight mistake with this so I need to remove the background white from the grid calls 8 and I need to add it to the curve span 6. that way we've got the division properly for each of the columns sorry about that and we're just going to add a bit of margin bottom to the delivery message now for starting the button I want it to look exactly like the one on product page which is like this now it would be kind of wasteful if I just copied the entire classes over to the checkout burn well luckily Tailwind offers a way of reusing some of the classes they do want against it because it kind of goes against the grain of what tailwind's about we don't want to have Global classes or anything like that but in certain cases it does make sense to have some reusable classes so the way to do that is we can go to the index.css and we're going to Define layer components and within there we're going to create our own Global class called dot button and for this we need to have the at apply and we're going to go back to product page and I'm gonna copy the classes from the add to cart button this one back to index.css and this will now be applicable via the button class so let's test this out by going to checkout and if I go to proceed to checkout and do the class button you can see that we've now got exactly the same styling as the product page and it seems as we've made this let's go back to product page and we'll get rid of all that and we'll add in the button class that we've just made double check that that's okay yeah if we've got add to cart and then we've got the shopping cart so it's all looking good now the very last thing we're going to do for the checkout is we're going to style the delete button and we're going to add the remove from car functionality to read up so we can remove items from our cart so let's do the Redux first so we're going to cart slice the remove from car is going to be the action and reducer that's going to get called so let's just clarify that what we want to achieve in doing this action the first thing we're going to do is we're going to find the product we're removing from the array then we're going to want to remove the quantity of that product from the product number then we're going to want to find the index of the product we're removing and finally we're gonna use that index to remove it from the array okay so let's translate that to some actual working code we're going to have the product to remove and we're simply going to take a copy of this because we are finding the product to remove but very important that we remove the ID because when removing from the car we don't need to pass the whole product we're just going to pass in the ID so the payload will be the ID next we're going to remove the quantity from the products number so we can do state products number again minus product to remove [Applause] dot quantity as this will be a fully fledged products because it would have found it from the find function so we can do stay dot products dot find index and then we can take a copy of this it's doing the same thing again that's ID and once we've got the index even though we've found the product we don't know where it is in the array when it was added that sort of thing and the final thing we're simply going to do to remove it from the array is state.products dot splice we pass in the index and we specify that we just want one element removed from the array so if we go to checkout so we've got a couple of things that we need to import so some of the things we've already done so from react Redux we also want use dispatch and we're also going to want to import the action that we want which is removed from cart this time so Redux and we're going to want cut slice remove from cart and this is going to be a lot simpler than the add to cart so I'm gonna have to expand call span 6 again and we are going to sort out the delete button so let's do on click we're going to have parentheses similar to last time so Arrow function and then we're going to have dispatch wrapped around remove from car and we're gonna pass in the product ID so when we're doing these checks for the index and to find out if the product is in the array we're going to need the index for that and once again we need to Define dispatch like we did last time use dispatch and while we're doing this we also need to add a bit of styling to delete because it's not looking very good at the minute so the last styling we're going to do so we've got class name and we're going to have we're going to have text small and for extra large we're going to have text base font semi-bold you can have it rounded we're gonna have the text blue I'm gonna have some margin top and margin bottom as well okay so before we test that out make sure you have killed your server and you are restarting it again and let's go to the home page so let's add a couple Guinness World Records we'll add a plan B and we'll add Jamie Oliver with two of these so if we go to the cart we can see that we've got a total of five books and the subtitle is 54 pounds so let's remove the middle no plan B and that will take off one book so that will go to four and we should also get a subtotal of 43 pounds so if we click delete we have both of those things then take off Jamie Oliver's box again that'll be 26 so we will just be left with 17 pounds and two left and we can delete the final box so the delete functionality is working you'll have noticed I haven't done anything with the quantity buttons this is going to give you an opportunity to go away and figure out how to implement this yourself it uses Redux you're gonna have to implement the on click that kind kind of thing the solution will be in the GitHub repo so if you get stuck just have a look but this will be a good way of you testing out what you've learned and there's also going to be some other suggestions too so that is the run through there are a couple of things I didn't go over completely like I didn't add the alt attribute to all the images because I didn't want to waste more time than I had to for this room through but again that is done in the GitHub repo so yeah so make sure you check out the GitHub repo wow if you made it this far you deserve a medal I mentioned this at the beginning that I was going to give you some suggestions for extending the Amazon clone on your own so some possibilities for this are finishing off the implementation of the quantity buttons on the checkout page the buttons are already there so this will just require Redux changes and a way to trigger the actions on the button presses however if you do have any issues the finished version of this is in the GitHub repo so check that out some other suggestions are creating the functionality to add a review to a product adding a sidebar for the checkout subtotal while on a non-checkout page similar to this you could also add an image gallery on the product page that lets you zoom in and out and scroll through all of the photos the great thing about cloning such a popular website is there's no shortage of things to add now I hope you've enjoyed this video and learned something new if you have please leave a like on the video as it helps out a lot genuinely thank you so much for watching let me know where you're watching from in the comments as it's nice to see where you are around the world and make sure to subscribe for part two as we're going to do a deep dive on the back end which will involve spring Boot and SQL and the final thing to do is watch this video here as you can take the same steps in that video to deploy your react app to AWS

Channel: Jonathan Davies

Views: 16,348

Keywords:

Id: pnnblIo1iO0

Length: 190min 27sec (11427 seconds)

Published: Wed Apr 12 2023