Building Amazon Clone with Nextjs 13 (ReactJS, ReduxToolkit, Stripejs)

hello everyone whenever today's video we're gonna create this a beautiful looking Amazon clone website as you can see this will be our entire home page with the products now first of all we will have our header in the header we have our logo and where to delivery and also we have the search bar and by the way it will fully functional search bar you see the product is available and once you click on that product it will take you to that particular product with like a title and other details and also you can add your product on the card and by the way you can see the card and is already added let's go back to our home page and here we will have the sign in button and then we will have our favorite and also the card button and this is our slider going on like the carousel you see is automatically sliding and after that we are having our product and in the product what we have on the Hoover in the product we are having our curved add to card button and add to favorite button and both of the button is working as you see on say click the card is already added if I add in favorites as you see the favorite is also added and this all the details and by the way if you click on that image it will also take you to the particular page with the product details and let's go back to home and add some more products and now let's go back to our cardigan as you see this is all the products we have been added now we can actually increase the product details from here as I increase as you see the product is available and by the way we cannot go to the proceed to buy as you see is happening here the place login to continue and here we can reduce the product we can remove the product and if you want to receive the card we can reset if we click as you see we are having an alert and as you say are you sure you want to reset your card items if you want to cancel you can cancel or if you want to receipt if you receive all the product so now you can go to shopping so now let's add some more product because we want to create a checkout over here and let's go to our cars and now we cannot make the checkout so we need to go to sign in so let's click on the sign in as you see we have a different provider like Google Facebook GitHub and gitlab let's click on the sign in with Google and now it's giving me the option whatever option I want to choose or which account I will choose to sign in GitHub is working because in the GitHub you cannot use two URI callback URI you need to use one because of this production build I use that GitHub so I cannot like redirect in my localhost so now once I sign in I have my image I have my name I have my email and there is one sign out button also working so now we will be able to create our payment so let's go to the proceed to checkout so now once we just click on the proceed to check out I will be able to create a checkout payment in that with a stripe so first of all let's go and click on that proceed to buy and as you see it's taking me to that page now let's go to the default value over here that will be my admin email let's give my name and just put any of the details and default one is four two four two so that will be the default value for this type payments and CVC just put any random tree number so now if I click on pay and as you see the last payment is 970 so this payment is 337 3.19 let's pay so now it's a processing and as you see the payment is done and after payment it will redirect me to a page where is the success page so thank you for shopping in nextamazon.com so I can just go back and go back to shopping again so as you see this payment is done so let's go back to stripe just create a hot reload because it will take a time to generate that and after reloading you see that is the particular payment we have been done right now if we just click on the details as you see this is the payment we did with the stripe and it's a very simple we're gonna create that application from the scratch and by the way if we just finish everything we can just click on sign out it will just uh Let It Be remove everything and it will create its sign in again for that and by the way this page is fully responsive so if you are a beginner developing or in you are if you are in working in a production build feel free to follow to create that application and by the way if you are a new in my channel as you know previously I have been built with a very exclusive designing pattern for this Amazon clone and of course this one is fully functional except the payment method which you can follow through in this video and you can add up over here and I'm gonna send all just give all the video links in the description just there is I think four or five parts of that video and that will give you an exact idea how you can play with the designing Patron when cleaning when creating any of that e-commerce website so feel free to follow that and for our today's video as you see this is the portion I already have uploaded so that's also fully functional and for this entire build whatever the tech we're gonna use let's just give you an uh description for it we are going to use uh the next JS and the next JS version it will be a 13.4.7 and then we're gonna use that type script fully type script it will be available there we're gonna use statelu in CSS for styling our entire design it will be using the talwin CSS we're gonna use that Redux toolkit to create the state set up the user and set up our store and then we're gonna use the next alt there next auth for our creating that uh as you see the three directing for sign in and everything for or the user we're gonna use that next out and then we're gonna use this stripe you already know what it what it before used and we're gonna use that react responsive Carousel to create that uh very beautiful Carousel over here and then we're gonna use that react Spinners when we are just particularly when we are going to any of the single uh product as you see this spanner it will be coming from that react spinner we're gonna use that react icons to cover up all the icons and then we're gonna use that uh versal to deploy our application in Forex production build and by the way we are also gonna use that git and GitHub to create everything from the scratch so along of that I'm gonna just close all other okay all other tabs because it's time to build our application we will just keep that one for our like uh to just to see what you're gonna do and now let's create so first of all we're gonna use that next chat oops next chess and let's get started and by the way I'm not gonna use that app router I'm gonna use that a page router both are working pretty much fine recommending the app router because it's new but I'm using the page router because there is a collapse in between with the stripe API and this app router which is a little bit tricky so I don't want you to be get you much more complicated that's why I'm using that page router so let's open our terminal over here and let's get their installation guide let's copy that let's paste it and we're gonna give a name for it so we're gonna just next Amazon byte and this enter so now after entering as you see it's already explained over here whatever the things it gonna pop up for you as you see let's pause it and it will be 13.4.8 you see it's changing rapidly because I use 13.4.7 now it's eight and yes we're gonna use the new one and I'm gonna use the type script I'm gonna use the eslint and television CSS and I'm gonna use the source directory because everything it will be inside the One Directory no need to go looking something for elsewhere and I'm not gonna use the app router I'm gonna use the page router and now it gonna go and get whatever is need to install and build our projects sometimes it may take a bit of time because of the internet issue but just give it a time it will just install every single thing to run your application perfectly so now as you see everything is installed so let's just go to our file so CD next Amazon YT so now it's time to open it in our code editor and we are going to use that our vs code editor so just let it more bigger and now here this is our directory over here and inside the source folder we have our Pages we have our style folder and every single thing gonna come back from over here so first of all let's go and spin I'm gonna just make a little bit bigger so you can see it perfectly in my terminal I'm gonna use the git Bash and this npm run Dev in that side and it gonna start in localhost 3000 okay okay first of all this is the default home page coming from the next.js so what we're gonna do we're gonna clean that page we are not going to need that one so I'm gonna take another main dip and put the H1 tag this is the store so now as you see that is change but there is some kind of default Behavior some setup is going on and it's coming from the style dot uh this global.css and this defines CSS we're gonna remove and as you see we are getting a clean slate application so now it's time to build our own application first of all let's see the structure what we're gonna have so I'm gonna close that first of all we're gonna have that our header we're gonna create our top header our bottom header and then we're gonna create our footer because this three part will be available for every pages and then we're gonna wrap that in a root layout then we're gonna create these other things so let's go build our header and to create the header what I'm gonna do inside that Source folder because I have a source folder so every single thing will be inside in Source folder so now I'm gonna take a folder which will be components and inside that components I'm gonna create my header and by the way there will be two parts for the header so I'm gonna take a folder for header and inside that folder let's create header.tsx and TSX because of the type script I'm gonna use for our 2DS build so now this header I'm gonna import over here go in the header so as you see the header is updated and first of all let's go and grab all the images from my file and these images will be available in the description the link I'm gonna provide you also so I'm gonna paste all the images I have been used for that for the card for the logo and also for my slider I'm using that local image for it so let's go back to my header first of all I'm gonna take the logo import logo from and it will be in the upper level because I am inside that components so I need to go out of the component let's get images and it will be logo.png so this will be my like the parent dip so in here I'm gonna keep that image so first of all Let's uh take me another dip and then I'm gonna create the image and for that image I'm gonna just go and uh give you the source and the source it will be logo and also given all tape it will be logo image and now I'm gonna go and give that class name for it so the class name for the first big and even though if I save it I'm gonna see one image it's uh as you see it's a very big and other part is not visible because I need to give uh some kind of partition for that so in the top label oops it will be class name it will be full and I'm gonna give a height of a 20 and the BG and by the way for the background and other purpose I'm gonna like create some a custom color and font and for the custom color what I'm gonna do I'm gonna remove that one first of all I'm gonna uh take some screens because I'm gonna make it responsive but the way I feel it better so I'm gonna drop my screen sizes over here which is a bit defined by me I Define that one and also for the colors I'm gonna take another properties and it will be so it's uh not showing so it should be here okay let's colors and for the colors I'm gonna uh just uh let's go and I'm gonna use four colors one will be Amazon blue and Amazon light Amazon yellow and for the light text and also I'm gonna use the Box Shadow to generating some box Shadow and I think we we're fine no need to use that and also for the phones I'm gonna go and grab my phones from the Google phones by the way in default you are having or we are having already earphones interfont but if we are not rendering in the server side that font is creating an issue so I'm not gonna use this font and what I'm gonna do I'm gonna go Google phones and this will be my phones and I'm gonna use that Poppins as you see it's already uh selected so what I'm gonna do I'm gonna import that font and let's import it and just to remember what font currently we have let's just put some text okay we can create that background okay BG Amazon blue as you see we can see the other things so instead of creating that uh hello and if we just uh okay the text will be uh okay text White I just want to show you the phones how we're gonna change it as you see if we just click on phone details is the default font for uh coming up from the vs code and from that next.js but we want to use that our this font over here the Poppins and to do that I'm just going to go in our style global.css and over here I'm gonna paste it and now in the Italian CSS I'm gonna make that phone family and that font family it will be name as a body font and that body font will be combining the font which we're gonna use for this one the font family for Pins by default or sensory if something collapse so now this will be our phones but now where we gonna adopt that phones and to adopt that the best way I find it better is to you can either keep it here so what I'm gonna do I'm gonna inside that component I'm gonna take it deep and it will work just fine and let's go and give a class name and font it will be oops not found it will be text body font and I believe it will change like that but didn't change it let's make a Reload okay still no change so we uh we are having some issue so that one should work I think the font or yeah I think phones which will be the body font yeah now it's working so you need to actually uh say which kind of things it will be there so the font it will be the body font and now we are having that our phone Poppins available for to build so let's close that and in the header we're gonna just run our image over here and for the image let's go and give some class name for it but before giving it what I'm gonna do uh for that one let's text it will be light text and um and it will be sticky and from the top zero and the Z English which will be 50 because once we are scrolling that header it will be sticky on the top so we need to create in that way and for the image it's just getting thick out so what I'm gonna do I'm gonna just give a weight of a 28. an object it will be the cover oops it's not the fill it will be cover and as you see that image is available over here but it's in the very top so what I'm gonna do and it will be I'm gonna give you a height of full and weight of full and MX in Auto I'm gonna make it in inline of flex an item Center justify a between because we're gonna add some more items and I'm gonna give a gap of one for this parent dip and mdl the gap which will be uh entry and padding in xx6 it will be four so I'm gonna give this uh like a in an all together because see now it gonna make a hell lot of sense so now we are already giving the image and we are having a d for that image so now this image actually cross the ball let's just combine how we gonna make that one so let's just cut it let's comment we're gonna have a logo and that will be the our logo and after the logo what you're gonna have you're gonna just uh make and after the logo we're gonna have delivery and then we're gonna have oops it will be search bar and after search bar we're gonna have this sign in option after signing we're gonna have our favorite [Music] and then we're gonna have our card so those are the things we're gonna create and to create that that image all together I'm gonna take inside the div because we need to create that cover effect alongside and uh so that we can actually make this one so to create the Hoover effect what I'm gonna do in this the parent dip I'm going to give a class name which will be padding in x axis is 2 and I'm gonna give a border but the Border it will be uh transparent but whenever we are hovering the Border it will be white and of course the cursor it will be pointer and the duration it will be 300 to give a duration and a flex item Center justify Center and the heights We're not gonna give a full height of the parent tip we're gonna give a 70 percent of height for the parent tip as you see on suho over is happening but the images looks a bit of off and it's because the image is a slight bit of a top wave so what I'm gonna do I'm gonna just give it empty one to take the image in the middle as you see now it looks better so now we are having our image now what we're gonna do I'm gonna having that delivery and the same way I'm gonna take another dip and inside the dip I'm gonna take a p-tech deliver to and then I'm gonna take another Pizza which will be USA so let's save it and by the way we also gonna have one this one over here because we make justify between that's why so this one we're gonna having icons and so we need to install the icons and we're gonna having react icons for our today's build first of all we need to install the icons over here and I'm gonna use another terminal let's open it okay let's paste so it gonna install that icon so if I just go and search for the location icon you can see all the icons is available for you in that way I'm searching the icon so I'm not gonna waste the time to search the icon because I know which icon I use for my build so what I'm gonna do I'm gonna get the icon the available icon I use for these pages okay let's see if install here is already installed and this icon it will be uh like the search icon location icon or carried down icon so first of all we need to use that search icon and to use that I'm gonna wrap this entire thing inside another dip and in the top of that div I'm gonna use that as a location pin icon so let's go to our as you see this is available over here so first of all in the top label of the deep what I'm gonna do this entire class name and by the way you can wrap that class name and take it to the other folder like in the global CSS give it a name and it will work just fine but I'm not gonna do that right now so as you see the Uber effect and other things is working just fine and by the way for making it responsive by default it will be hidden and whenever we are hitting in the Excel devices it will be inline Flex so we need to remove that Flex over here and also we're gonna give a gap up one for it so this is the things happening and now we need to actually make these things to looks better and I'm gonna give a text of extra small and in the padding and the last p uh which gonna be text of white and the font it will be oops it will be bold and it will be uppercase by default so this is the things as you see that looks much better so now this is the uh this done for our deliver two now it's time for our search bar so let's go and take that and in this for the search bar we need to have input and in the input type it will be text in the placeholder watch we're gonna what we're gonna do it will be a search next Amazon YT products as you see this search bar is available to just to make it looks better what I'm gonna do in the apparent label I'm Gonna Give You Flex one as you see is coming in the other side but it not looks the way it's supposed to be I'm gonna give a height of a 10 for it and by the way it will be a hidden End by default so mdn it will be inline Flex to just come in whichever the bigger devices an item will be Center justify a between and we're gonna make it as a relative because the icon we are going to use that one will be an absolute icon so let's go and now in the input we need to make it designed for it and the weight will be full and the height will be also full and round it it will be empty as you see this is our now is taking the full weight and let's just specify some more things for it and first of all give it a padding in x axis 2 to text the text should be looks better and the place oops it will be placeholder text it will be I believe let's give it SM and the other text it will be a base and text will be oops black yeah black text and the Border it will be I'm gonna give it three pixel of a boulder as you see now the border is there but it's uh not looking in that way so by default the Border it will be transparent we're gonna give a transparent Boulder and also we're gonna give that outline remember whenever we click there is that outline because of that the border is in well it will not be seen in that way so what I'm gonna do we're gonna make that outline as none as you click as you see that outlines is no more visible so now remember we already giving a border so now what are you gonna go Focus visible whenever in Focus invisible we're gonna give it that that border it will be Amazon yellow by default there will be no border whenever we want to type something we're gonna focus on it in a visible land we're gonna see that border so that's the point for it and after that input I'm gonna take another span tag and then I'm gonna use that high outline search as you see that's the search we need to make it looks in a better way so first of all let's go and give some class name with a full uh not the full sorry weight will be 12 and height it will be the full height of the previous thing and the BG it will be Amazon yellow as you see is taking that and the text it will be black now you can see it much better and now also I'm gonna make a little bit bigger giving a text of two axle and uh not the Border oops and to excel okay looks better I'm gonna make it a flex item Center justify Center to keep it in the middle as you see it's inside the middle and uh also what I'm gonna do because it's it should become here not here so first of all I'm gonna make it absolute okay and after doing that absolute all right it will be zero so as you see it's taking on that way but as you see the border is rounded but that one border is not rounded and to keep that around it what I'm gonna do uh round it top I think the top right portion which will be MD and also round it uh or the right portion which will be MD as you see that looks pretty slick so now we are having our Amazon deliver 2 we are having our uh search bar and it's time to create our hello signing portion which would be our sign in and to create that this go to after that sign in portion we're gonna create that one so first of all let's go and take another dip and inside that uh deep what I'm gonna do I'm gonna take a p-tech which will say hello sign in and then after the p-tech I'm gonna take another P which will be say accounts and oops and after that we're gonna have an icon which will be bi card down icon so as you may see this the things is already here now we need to make it looks better first of all what I'm gonna do I'm gonna go in my uh previous part where we are using all of those things I'm gonna just copy those and I'm gonna put a class name I'm gonna paste it here okay now it will uh okay okay okay I believe it will be likes in column portion okay or instead of doing that what I'm gonna do just not going in uh too much in that way uh I'm gonna just create from the scratch text it will be extra small text and the text it will be uh grade three uh not three hundred I'm gonna give a gray Hub 100 to be off flex or Flex it will be in our column size and then justify it will be Center and PX it will be two and by the way it will be border and the Border it will be transparent the same things and Hoover border it will be White and cursor pointer duration it will be 300 and height it will be 70. persons as you see but these things is not actually working that much fine because of that P tag what I'm gonna do for that P tag the class name and the text it will be whiteboard.ptag and also font it will be a bowl to look like much better and a flex item Center as you see that is slick so that's working out so much better so after that we need to create our two more button two more uh one will be the favorite other will be the card and for the fabric I'm gonna take another dip and inside that dip it will be one it will be I will be marked and another it will be um that will be just type and Fabrics so now this will be our favorite one so in the top level of that I believe it will be the same class name for it just copy and paste that one ah that looks good so now and also what we can do and just keep it the same in the top and the class name the second one it will be a text white font s looks better and now we need to have our card a card and I'm using a card icon to looks like a bit with Amazon so let's import icon from the same folder it will be images and that will be the card icon we are going to use and to use that card icon let's go take it deep and then I'm gonna use that image and Source will be the card icon which will be the card image and let's go and give the class name for that and it will be also defined with an object oops it will be object it will be the cover and height it will be eight after saving that as you see our card is available so we are having the card let's go in the top label of that the same way what I'm gonna do I'm gonna give a flex item Center px2 and border and by the way instead of typing so much things what I'm gonna do I'm gonna just grab this thing and you can Define it in uh in your global.css and then you can do it as the way I already described it in so many videos feel free to do that but I'm gonna go in that in a very simple way so after saving that is our card so now in that card what I'm gonna do I'm gonna make reality for that card because we need to have the text for it and the text it will be let's go uh P tag it will be the card as you see okay and now I'm gonna give a class name which will be text access oops it will be extra small and the text it will be white and formed it will be the Bold phone and mt3 to commit a little bit Lower Side so this is the hour card so now we need the value for that and first of all the value it will be a zero later on we will get the card items value so and that one it will be absolute and the text it will be um Amazon yellow text let's see the text is available and the text it will be Xs and from the top it will be 2 and from the left I will just make it as 29 pixel just see how it looks okay it's in the middle and also the font it will be semi bolts and okay let's make the text as SM no text with small okay so now that looks better okay so even we are coming through in that as you see that's getting responsive in the way along the way because we did it in that way so now we are having our header and after the header we're gonna also need to have another file which will be bottom header.tsx rafce so now it's time to create that one the bottom header and to create that also again we're gonna keep it inside our index file right now oops it will be bottom header and this bottom header is available so let's go and you can keep it header bottom or bottom header the way you like so first of all what I'm gonna do I'm gonna take the icon because I'm gonna use a menu icon for it so I'm gonna just grab that icon so this icon I'm gonna use and this will be very simple first of all let's see the class name it will be like the weight will be it will full and height which will be 10. and then BG it will be Amazon light and text SM text it will be white and PX of 4. so that's the things we are going to create so now we make it uh yeah we need to make it Flex Plex and item Center so the item it will be in the center axis so now what I'm gonna do I'm Gonna Take A P tag and inside that P tag I'm gonna pass that to loom menu first as you see the menu is available and after the menu what I'm gonna do I'm gonna pass that oh okay so for the first one it will be a little bit tricky so give a flex item Center as you see coming all together the Gap it will be one and height it will be the full height or not the full height it will just take the middle height of it and because we will give the border and by default the Border it will be transparent and Hoover the Border it should be white and cursor pointer duration it will be 300 as you see on the hover is coming in that way and by the way we will also give a px of oops the PX of 2. otherwise the hover effect is not look so good as you see that looks much better and now as we have been done uh I think leave a class name for that make it Excel icon should looks a little bit much bigger so after that we're gonna have another p-tech which will contain today's deals okay so now we need to create all the effect from the beginning and by the way uh okay class name by default it will be hidden it's gone and whenever it will be in mb devices it will be inline Flex so it will be available and and now what I'm gonna do I'm gonna grab all the things available for the other way Okay so I'm gonna remove that Flags because you already defined the flex and the Gap no need because this only will be a single item so in that way we're gonna have some more items so after today's deals I believe it will be the customer service customer service okay after customer service it will be oops okay registry and then it should be scarce and then coming is sell okay and after the sale we're gonna have the last one which will be sign out button and by the way as you see in this way over here first of all the sign yet button will not be available once we sign in only that time the sign out button will be available so that you need to keep in mind that by default the sign sign out button should not be available so ons or you will create that functionality lecture but for right now we will just uh we'll just create that sign out button later on we're gonna just remove that as the way we want it okay so now in over here the because the sign out button it will be a different class name so I'm gonna oops I'm gonna cut this class name I'm gonna make item Center and the Gap it will be one actually it's much more the same so I'm Gonna Keep it in that way uh so first of all in the Border it will be uh rate 600 and the text it will be um uh text it will be Amazon yellow text as you can see okay okay and whenever we are hovering on it the texture will be changed over the text uh it will be that rate for hundreds okay so that's it and also if you just combine it it will be responsive for all the devices and now it's time to create our another part but before going that what I'm gonna do I'm gonna take a deep over here and I'm gonna make it just p y of 10 and VG gray of 300 because we need to show what is available now we will just make a simple footer so you can make it complicated the way you want I already told you I have a video where you I show you how you can actually make a from this scratch everything Pixel Perfect but for this video I'm focusing especially for the back information is type payment formation that's why I'm not going to cover those things so let's take that filter now the footer is available so for the footer it will be uh the simple things gonna be happen uh let's go to footer and inside that footer um I'm gonna take that our image which is Gonna Come From the next image I'm I don't know why it's not importing from the next image and then we're gonna import the logo so let's import our logo from it will be the images and the logo we are using so for this one which I'm what I'm gonna do I'm gonna just give a source and that Source it will be our logo and ALT it will be logo and also for the class name I'm gonna just make it as a weight 24. we cannot see it up properly because uh we need to give that a background color to see it the way we supposed to be and now to do that let's go in the top level of the day let's give a class name with a full and height of 20 the same height and BG it will be Amazon light and then the text it will be a gray 300 clicks of course item Center justify as Center and the gap which will be four and as you see we can now this is appearing in over here and after that image I'm gonna use another P tag which will be that all rights reserved and after that I'm gonna use an attack which will be my website the official website reactpity.com and in that href it will take us to that [Music] and the target will be blank so now if we just click over here it's gonna take to my official website so now what I'm gonna do is give some class name for it that text it will be SM and minus empty it will be four now it looks better and also href let's give a class name Uber it will be the text White and Uber it will be underlined and then the decoration the underlying height which I'm gonna give you one pixel and that cursor will be a pointer the duration it will be 300 as you see that looks like so now over here if we go to our curve page our header photo everything available in our home page everything also available so we need to implement that one but how we can do it and to implement those things there is a very simple procedure what I'm gonna do I'm gonna use that root layout dot TSX rafce inside that short layout I will Define that header filter and every other things which will be combined for other Pages because if we just go in other Pages it will not be available right now like if we create another page inside that Pages let's create a cards.tsx it will be rafce which will be the card page so now from the localhost if we just uh navigate through the card page as you see we are just viewing that card page we cannot see the header and footer and to combine with that inside that root layout we're gonna just create That Trick and what we're gonna do inside that shooter layout I'm gonna just take an empty braces written an empty basis and inside that braces what I'm gonna do I'm gonna combine my header and also I'm gonna combine my bottom header and then my footer and because these three things is available but as you see that in the middle of the things we need to pass that as children so to pass the children I'm gonna pass as a props children so this will be responsible to pass all the value as children but as you see once I keep the children my type script is giving me the error so we need to pass that as types and the intervals it will interface it will be the props and the type for the children it will be that react element and of course don't forget to uh import that one from the react otherwise it will not work and now we're gonna pass as a props as you see typing script is working fine so now where we gonna Implement that one we're gonna Implement that one in our Android score app.tsx that's the file it will be inside on page.tsx so over here I'm gonna take everything and I'm gonna pass that root layout and now I'm gonna pass that component as you see now I can see my card page and other things so it's better to go back there using the link so in our logo in the top I will make it as a link and also I'm gonna import it from next link and href it gonna take back to us in the home so let's go back to the home and here is everything double is because it's a very simple issue we didn't remove over here so this is the home page so we didn't remove that so what I'm gonna do I'm gonna remove the header I'm gonna remove the folder folder and also I'm gonna remove that import for it so now as you see that looks fine and also in our header let's combine with that too link href which will be the card so now we can toggle through the card this is the card page and we can toggle through also in our home page so these are pretty much it so now it's time to create that beautiful looking as slider and to create that let's go to our uh react responsive Carousel which we're gonna use to implement that one and just copy that and what I'm gonna do I'm gonna just import all the dependencies for it and I'm gonna okay let's close that also that and inside that component I'm gonna take a component called banner.tsx rfce so inside that Banner we're gonna create that one okay so on the banner and by the way we need to import that Banner in the index.tsx so what I'm gonna do now uh okay that's our main one so we need to correspond something so in our main dip after the main what I'm gonna do I'm gonna take a class name for it so class name I'm gonna give you next week which will be screen in two Excel and I'm gonna make it inside Amex also so this will be our main dip and inside over here I'm gonna use that Banner hey so now as you see okay it's uh not yet I can buy Max with the screen to excel MX Auto okay because 2XL is same the width of my screen if I make Excel as you see it's happening so in yeah 2XL is uh same like my screen sizes if I just inspect this for my previous one as you see and now if I just make a saturation it's a little bit uh make a 50 percent now if I go you see there is a max weight which which is happening for the 2XL but if my screen size is like the same same width of that that's why you cannot see it proper way so I'm gonna make a default in actually to Excel and MX Auto so now in our Banner uh in a very simple way we can use that one also if you just go to the documentation you can find every single thing first of all we need to take their CSS we need to import that CSS and that CSS we need to import also in here that's on the rescore app.tsx so that will be responsible for every single other things and now what we need to do we need to import that uh carousel this file so import the cursor we import and after that we need to take this entire properties so let's take this one so now Carousel is will be available of course so first of all let's go to our page as you see uh okay okay there is uh something some issue is happening first of all okay initially y does not match render on the server let's just reload okay adjust having some Network issue so as you see the carousel is working uh fine first of all let's go and take all the images which we're gonna use so the images is available over here inside the slider folder all the images I'm gonna provide the images for you the link will be the is in the description and by the way I'm gonna give everything for you all the dependencies everything you're gonna get it uh through the GitHub don't survey so let's get slider I'm gonna make that same name and rescue one image and uh from it will be that oops it will be the images folder and also the after the images to the slider and this one so total there is a three images and I keep the same the name in the same way oops okay okay so now what I'm gonna do I'm gonna just change this to name and okay it will be three so this is the images I'm gonna use and first of all I don't want to use that legend for it so I'm gonna just remove that Legend and now in the images I'm not gonna use their images which what I'm gonna do I'm gonna use that uh our next image okay so also I'm gonna remove this other two deep I hope it will give an error so I'm gonna remove it later and for that one um The Source it will be that slider image one and the else it will be the slider image and by the way if I not giving widen height it will work just fine because it's gonna take the entire weight of that as you'll see so it's the uh depends you can give Widow fight but for me I think it looks better so I don't want to go through all of it so this will be our first image and after that so now we can remove these two thing and we will just copy these two so it will be the second image and that will be the third image as you see the image is available and that looks good actually uh so now there is some dot which we don't want so for that Carousel I'm gonna make it as autoplay it will be in auto play and it will come with the infinite Loop so it will always play after finish it will just look back and it will follow through and show status I don't want to show any status so it will be the false and that indicators remember in the top in the bottom so the show indicators I don't want to show any indicators so it will be the false also and after that um show thumbs also it will be the false and there is another property which will be make the interval I'm gonna make interval in every three milliseconds so now this is it we are having that as you see that looks good okay so we are having the carousel but there is another a tricky thing so what we're gonna create I'm gonna give a class name I'm gonna make it as relative so in the bottom way I'm gonna take another dip and in that deep let's give a class name we do full and height I'm gonna give it 40 and the BJ it will be gradient from the top and uh from gray I think 102 transparent and I'm gonna make it in absolute and the bottom it will be zero Z index it will be twenty and what it gonna do uh you can see the effects okay uh yeah that's the effect if I just uh close that as you see that is looks pretty sharp but if I and there is a shadow going on like if I just remove that uh okay let's give it 600 as you see now you can see it in proper way so that's the things we're gonna we created so I'm gonna just keep a angry of 100. okay what I have been done okay so now that's done okay where is our third image okay slider image three okay image three something wrong we are not getting our third image okay one two three give a hot reload one two three ah okay but why this one is coming as empty something is weird happening so this one okay ah okay because that one is getting everything as a image as an image so I believe we okay we make it relative of course it should work and we are making it as an absolute bottom zero okay that's me let's figure it out okay that issue is happening because we are keeping that inside the carousel what we need to do we need to just remove it down of the car bottom of the carousel so now in that way we can see it over here as you see that is now actually visible so it's just a little bit debugging uh don't be freak out just try to uh fulfill the things you want so that will be our Carousel so now in that way our Banner is done so now we need to create our product so for that I'm gonna use another let's just use another components which will be products.tsx course inside our index we're gonna import that so now as you see that product is available the components so we need to fetch the product and then we need to pass the product to our component and how we can do it we're gonna like if you just go back to the next chess and on their documentation because we are using that page router and in the data fetching there is a lot of other way we are gonna use the get server side props in that method we're gonna paste the data from the by the server side so how we can do it we're gonna keep it in the below and that will be like server search rendering or data paging so now over here what I'm gonna do export it will be the const and that it will be get server side props and it will be a sync because it will wait until it's get the response and now const response it will await and then it gonna pitch and it gonna fetch from where so I'm gonna having one like inside my API if we go back to our website which will be the fake store API if we go over here we are using that fake history server so now over here that will be our that tick that will be the API we're gonna use so it will be there in the description link uh link will be in the description and just uh that it will be https fake store uh API server.redded.com Tech so we gonna get that one to fetch all the our today's data and after fetching data what it oops not that what it gonna do product data it will be just a wait for the response dot Json and then it gonna return what it gonna return it gonna return a props props and inside that pops are you gonna pass that collect data so now we are having that product data but we need to pass it through our components and to press that one what I'm gonna do I'm gonna just make it as a uh oops it will be this structure is the product data and then we can pass console.low let's see if we can see the product data if this is everything fine the data will be in the console.log okay we now need that okay it's showing that's undefined let's just give your host fill out okay it's just loading and after load happen you see the data is available over here now there is one more things as you see we are looking at the console that image with that there is should be I think the first image the image in the slider which is coming from the banner I'm going to give that image as parity oops uh not property it will be priority okay so now that will be in our priority so that it will not be having giving any effect so whenever you're gonna render that like whenever you want to reload we're gonna having our product data over here and then we're gonna pass in our product data as a props in our main component and also we can pass that product data to our as you see this is the product data we are having so now you can set that in a state then we can pass or you can pass it directly the way you want and uh by the way as you see our having we are having an uh typescript error so what I'm gonna do to Define the types I'm gonna take another file uh in the in our root directory in the road file so we're gonna declare the product data like the product props for that product data and to declare that we're gonna Define the types so now first of all of let's see what kind of product we have we have brand category description image is new which is a building Value Old price with a number of value prices a number value title and others is string and ID also as a number value so we need to pass Define that one to strictly type that one to define those things so we're gonna export that interface as a product props because you're gonna use in several other ways so we better to render it in a separately so first of all we're gonna have a brand which will be string then we're gonna have a category which also will be string and then description string and after that image which is also string and then is new oops which will be Boolean like true or false then old price it will be the price it will be number and also the price it will be number and then we're gonna have a title which will be also a string and then we are having underscore ID which will be the number so we are exporting that product crops now over here we're gonna declare the interface to get that product props and now is interface oops interface and which will be the props and now product data which we are passing we are passing we're gonna pass it as a product pops and inside over here we're gonna Define it as props so now as you see the problem with that is gone so now we can pass the data to that products so let's make that product data as a product data and there is an error because we need to catch that product data and by the way all the method I am using it will work just fine as you see we are using that neges 13.4.8 the latest one so don't freak out try to use it it gonna work definitely and inside our products we need to catch that one right and to do that what I'm gonna do I'm gonna just pass that as a product data because we know what is coming I'm gonna pass it as any value because we know how it's gonna render and what it's gonna do so let's make another uh console.log and this time this will be rendered from our product page so as you see it's coming from that products so now we are having our products so now is the time we can actually create that we are having that product array so we can show the products the available products over here so first of all what I'm gonna do after the main dip I'm gonna make that product data.map just type that item and I'm gonna just just take a P tag which will be item Dot title so right now okay nothing is available okay so oops because I need to note that Curly braces we need to return that properties otherwise it will not uh it will not pass the value uh okay I think I messed up so I'm gonna return and that P tag which will be item Dot title now as you see we can see all the titles available for us but in our product we want everything should be a work in a proper way and to do that we need to predefine as you see this is the product so we need to keep in the value in that same way so first of all um let's go in our product because I want to uh remove that error because we know what will come in the product right we're gonna having ID we're gonna having the title and other things so I'm gonna take it as in a simple way I'm gonna have it in the title brand and then category description image and then we're gonna have is new and also price price and those all the datas it will be as the product props we defined previously so now we are no needing having that item.title we can just type the title or we can just type anything we can type description it will be available so that's very simplistic way so let's go to our index we will just make little bit uh what I'm gonna do I'm gonna just take it inside in a deep and then I'm gonna paste it and now I'll make that Thief as relative because the products it will be absolute in some way so now the in mb devices it will be oops not M it will be minus empty of 20. LGL devices it will be minus empty of 32 and Excel devices it will be minus Mt of 60 as you see it gonna come little bit uh forward on the top level that's the things I'm gonna creating right now and the Z it will be 20 and MB it will be 10 to those two things is happening to make it little bit in a sloppy way so I'm gonna remove the console.log from there oops and now in the products the game will start so first of all in the top label of the product I'm gonna give a class name for it the wheat will be full BX it will be uh x uh it will be 4 from uh or we're gonna give a 6 to make it a little bit more inside away and I'm gonna make it agreed and by default it will be great calls of one and whenever hit that MD screen it will be great calls of two Excel it will be great calls off um I think four yeah four and the Gap it will be six so now as you see that looks pretty sloppy so this is the done and now what I'm gonna do I'm gonna take oops not that I'm gonna tap everything inside the dip and after that deep I'm gonna take that image from the next image and by the way on that deep we need to pass a key and that key will be ID okay and that image The Source it will be image and ALT it will be product image and it will not be available as you see the width and height we need to give otherwise we cannot see the image so the weight it will be 300 and the height it will be 300. we're giving that but as you see we need to give that host name because that image is rendering from that IBB so we are wherever I am uh like uh like uh what you call that posting my image as you see that's the hosting platform I'm using to host my image so I need to highlight that particular domain in my next.js.comfig so for that let's go to images and now domains I'm gonna just highlight the domains over here you can close your terminal and can open or you can just make a hot reload it's gonna reload and show you the actual things over here but it's gonna render so it will take a bit of time okay and actually my server automatically just shut it down and it's because we are using in that our uh in our next config.js so it's just a freaking out so better to whenever you are typing something in that next dot config.js you need to uh like close your terminal and then open it and it will be work just fine so now it will render everything up from the beginning as you see and we're gonna have our image so as you see the image is already available now it's time to make it looks a better so in our top level of the day that's the Deep we are using so let's go we're gonna give a class name we're gonna give a width of full and VG it will be white to make it in a look in a good way as you see and by the way there will be a background in the back as you see this background we need to initialize and that will be initialized from that app.tx which we're gonna be VG grade of 300 so all the background it will be on that way okay so that's fine now in the product we are having a video of why the text it will be all the text it will be black and we're gonna give a padding of O and then we're gonna make a border border gray let's do the same you can Define as the way you want and then we're gonna give a rounded of LG as you see the rounding is okay and then I'm gonna make it as a group because once you hover we're gonna having some interactivity and then um overflow which will be hidden so that is the thing now that image what I'm gonna do I'm gonna take this image inside another dip uh oops inside another dip because we need to create uh we will create that part in one way that part in other way so that we're gonna have that interactivity all together so this is the localhost now for our image we need to go and give some more class name for it though it will be defined already defined and hide also defined the same width and height and then object it will be cover to looks it a much more a better and then scale we're gonna make a little bit in a shorter scale and whenever we're gonna Hoover scale it will be the full skill oops holy scale and transform the transition gonna be transformed to coming in a smooth way so as you see on C hover is giving a very smooth transitioning and also in our top level of the deep what I'm gonna oops it will be last name I'm gonna give away the full and height of Escape 260 pixel and I'm gonna make it as relative so now as you see the image is in the top and also Hoover we're gonna having an effect and looks much more better so now what we need to do after the image what I'm gonna do uh I'm gonna take an HR path tag over here so this this is the image is uh finish over here like the entire div of the image deep and now I'm gonna make an HR as you see that's the line is happening so this is the line the same line we are having here so now we need to create those part once we hover as you see these two things is coming so these are two things we will create right now and before creating let's go and grab those icon for it uh okay okay we're gonna use that one card icon and another icon so these two icons we're gonna use so under the image okay we're gonna use another dip and inside that dip we're gonna use that span tag and inside that span tag we're gonna use that one and then we're gonna use there so I think it will be visible as you see and by the way we are giving a overflow hidden that's why the other one is just pull away as you see that's the one is available over here and better to keep it as uh okay okay okay okay we remove I remove all the parts that's why so overflow hidden as you see these two parts so these two part we need to work on first of all this entire div we're gonna customize so what I'm gonna do giving a class name weight of 12 height of 12. and then I'm gonna make it in absolute and from the bottom it will be 10 and it will be in the right side as you see it's coming in the right and after doing that we're gonna give a border which will be one pixel and then I'm gonna make a bolder Gray 400. background it will be white or you can make it transparent because the previous one is already white and that around it it will be empty Flex X in the column and okay pretty much right now that part so now we need to make the other things looks much better so height not 12 it will be the 24 so that in that way we can recirculate all together so now in the expand tag it's gonna take a full weight and full height and of course uh the boulder it will be the similar border okay that's the Border it gonna use as you see one is more uh like bigger one is smaller and this one it will be border B the bottom part and also it will be border B the bottom border so it will not be overlapped the other purse now it will make Flex item Center justify Center to keep the icons in the center and then the text axle to let the icons looks much more bigger and the BG it will be transparent background and Hoover it will be a Amazon yellow background and a cursor pointer and duration it will be 300 as you see on C Uber but it's getting overall every single thing is because the same class name because we make it Flex so it's taking uh the okay what he made wrong I think nothing wrong okay so now as you see on C hover we are having that effect but right now we need to keep it outside the box right so also you hover it will come in the play so now what I'm gonna make translate X I'm gonna make it as 20 as you're gonna see it's gonna be out of the deep so now as you see in the parent is already group so whenever we hover and on that group it gonna be translate X in zero and the duration it will be 300 and of course we need to Define that transition where it will be transition it will be transformed as you see it's over here this is entire device a group so now it's giving me that and also we're gonna make it as overflow hidden an AC that's giving a very cool effect and by the way if you just come over here is super responsive okay you can just make some padding and other things it will be simple so now we are having the first part so it's time to create our second part after that HR portion and before the HR portion is done what I want to do I want to create another portion which is that if there is new is available and only then I'm gonna generate one P tag which gonna be give us save and that's it um minus something whole price minus price okay so as you see the save 30 is available and also what I'm gonna do gonna give some class name I'm gonna make it absolute and from the top it will be zero right it will be a zero the text it will be a margin of blue and then font it will be a medium text extra small and the tracking it will be oops not that one it will be tracking white and then okay let's see this is happening over here and we're gonna use an animate which will be bounce so the people can see it very quickly like the same way but as you see our uh the price is not working the way it's supposed to be and to do that what I'm gonna do I'm gonna create another a component to actually uh declaring the format of price formation and to do that let's go to the components take another file which will be four methods price dot DSX rafce and over here we're gonna declare how the price it will be so first of all we're gonna take a props which will be an amount and interface uh props amount will be the number okay so we're gonna declare as oops props and over here we're gonna declare how the price look like so the cost for method amount it will be that new we're gonna take that new number and inside that new number in the parameter we're gonna take that amount as a new number then we're gonna make it to local string and that local string it will be that English and of course it will be an us because we want to pass the dollar one and then we're gonna pass that style and that style will be currency and that currency it will be USD and of course we need to make a minimum of fraction of digits which will be 2. and now instead of taking it in a div I'm gonna take it in his house not that I'm gonna take it as any span and inside that span I'm gonna pass that oops I'm gonna pass that formatted amount now our amount should be easily passed on over here and it will give you the looks like the dollar Mark and with that dollar Cent so let's go to product so instead of making that one what I'm gonna do I'm gonna just bring that formatted price and if we save it will be an an because the value is undefined and to Define that we're gonna pass that amount all price minus price as you see now it's better so this is the top part so now is the bottom part where will be our all other things we're gonna create it also to create that bottom part let's go back to our core and after that HR tag I'm gonna take another dip and inside that deep I'm gonna pass other things so now let's pass that category and you see okay the category is available over here so now in that deep let's make some class name for that last name the padding in xx6 it will be a four and then are padding in y axis it will be a three I'm gonna go flex make it a flex call because the other things also will be available and the Gap it will be just one so now in the PTEC what I'm gonna do I'm gonna make it extra small text and then the text it will be a gray of a 500 and then I'm gonna make it as tracking white so this is the things we are doing for our category and after that category I'm gonna take another P tag and then I'm gonna pass our title and for the title we want to make it looks much better so people can easily identify and the text it will be the base and the font it will be medium so it looks much more better with that and now after that after the title we're gonna give the price and for that price let's see how we have been created we're giving one okay we are getting in that way so for that I'm gonna take a span Tech and remember we are giving that formatted price and that amount will be first one it will be the old price as you see well price is available and the second one the same way inside that is pen tag we're gonna have our the new price okay and also in that P tag we're gonna have some you can take a div also that not be an issue a flex item would be a center and the Gap it will be two as you see giving a gap with that and now for the first span I want to make that text as small and it will be line true so there will be a line in between in the middle and for the other one which will be uh okay the text it will be Amazon blue text and font it will be semi Bolt as you see that is a very visible but other one is just a little bit demotivated to see so after giving that P tag it's time for our description but it's a very long description so what I'm gonna do I'm gonna make it because in the actual single Pace we're gonna give a full description but over here I'm gonna make it as a substring and inside the server string I want to pass only 120 words so this is the worst I want to pass and I want to make it uh text access sorry Xs and then the text Gray of 600 and text justify so now this is the text and after that we're gonna have our button and for the button it will be add to cart and now let's go and give some design for our button the class name it will be height we're gonna give you a height of 10 and we're gonna make it the phone it will be a medium and background it will be Amazon blue and the text it will be white as you see it's it's a visible right now but let's make it more perfect on that way and around it it will be a medium rounded and whenever it we're gonna Hoover it gonna be Amazon yellow and whenever we're gonna Hoover the text it will be black and duration you're gonna give a duration of 300 and margin of top we're gonna give it two so now as you see on the hover wow that's giving an effect and by the way both other things also available over here so now those everything is uh looking perfect so we are having our other Pages uh we are having our card pages and others so we need to create our store okay so where whenever we click in the card where the product we want to save so now we're gonna use uh that uh what do you call that Redux toolkit we're gonna use that Redux toolkit to create our store for our 2DS build to create this store let's install let's go to our quick start in the Redux toolkit so we need to install that Redux toolkit and react Redux so let's go in our terminal okay we're gonna install both of it now after installing how you can follow through we need to create one app is which will be stored and we need to create that slice so in our source folder uh what I'm gonna do I'm gonna take another folder where we're gonna keep our store so first of all the first thing we need to create that store.ts not TSX so now over here what we're gonna do we're gonna just uh Implement that import configure restore and then we need to Define that configuration and use different see over here I'm gonna just copy paste that one so now this is our store but as you we go over here and now if we just go to our Redux these things is coming from my previous build it's a caching data so let's reload that one I suppose it should go no it's staying so ignore that one because that's the data is coming from the previous so we need we are already defined our configure store so what I'm gonna do I'm gonna go in uh that underscore app.tsx so now we need to link that one uh oops Yeah we need to link that with our provider the provider it will be coming from that react Redux so let's go to our over here and we're gonna import the oops we're gonna import the provider and um in the top level we're gonna wrap everything with that provider and for that provider we need to pass a value with store and the store we have been just created we're gonna pass it as that store value and as you see after doing that it's gonna just re-render and you see it's in it it's ready to roll but others did the previous state all have been gone so now what we need to do we need to create the slice so we're gonna make next slice dot yes now in here we need to Define all the slices and first of all let's go and import that import slice yeah we need to import create slice from Redux toolkit and then we need to Define our initial state initial State uh which will be okay there will be a three a four state which will be product data first and it will be an empty array the first one and then we're gonna have a a favorite data which also gonna be an empty array and then we're gonna have all products which is gonna be an empty array oops gonna be an empty array then we're gonna have our user info because once anyone is logged in it's gonna be in uh first it will be null because whenever someone logged in we're gonna pass that user info over here we're gonna save it in our store okay now we need to create our slice so now export const next slice and we're gonna pass that create slice and under that create slice we're gonna pass everything as an object we're gonna take name as next and also we're gonna pass that our initial state by default and then we need to declare our reducers so reducers you're gonna pass as an object first one it will be add to cart and over here uh we're gonna take a two argument instead and action and these two argument first of all uh state DOT product data so whatever the product data it will be that will be action dot payload that will be the product data for available data so let's see first create that one uh if we combine and if it's working or not then we're gonna create the other one and then we're gonna make export const and inside that add to card we're gonna export it from next slice dot actions and after that we're gonna export default and the default value it will be uh next slice dot reducer that's the default value we're gonna pass so now we're gonna connect interconnect.1 with our store and what we need to do we need to First import that one so import next slice from the next slice sorry sorry it will not be the next slice because we need to import that our next reducer not uh ready slice and it will be from the next slice and first of all we need to give it a name uh oops it will be next and that next it will be the next video sir so you are passing that reducer over here so you're gonna reload that one and in the instead as you see we're gonna have all four instead available over here so product data favorite data all products user info so everything is available but we created two one only one single slice which is will be the app to card just to test if it's working or not and that add to card gonna be effective once we on click on that add to card button right so let's go inside that add to card button and Implement that one first of all we need to go to products that's the one over here and we need to create another things which will be cons dispatch with uh we and we need to import it from that okay it's not coming dispatch uh okay why is not uh showing comes dispatch use dispatch it uh supposed to show because we need to get that uh dispatch from react Redux so let's just do it manually import ant react Redux yeah okay uh okay I think something wrong when you install that one uh area codex is already installed okay but it's giving the error use dispatch oh okay okay sorry sorry it's not uh use dispatch it will be so now with that we can dispatch the item wherever we want actually and the brand didn't use but we need that brand later on so now over here we can dispatch that one and that ditch Dispatch we're gonna create using that on click event so now what I'm gonna do I'm gonna create an on click event let's make that function and inside that on click even you're gonna dispatch and what we're gonna dispatch we're gonna dispatch that action which you're gonna be add to card and inside that add to card what we gonna pass we're gonna pass ID as ID oops ID and we're gonna pass that brand as the brand we is available over here we're gonna pass that oops category as category and also you're gonna pass the image as image description as description is new as oops is new and then old price it will be the same old price it will be the price and then the title okay the title and remember we don't have any quantity how many quantity we want so first of all we need to Define that quantity that we want to pass a single item a single bunch of quantity whenever we pass the item so now as you see there is no more item in the product data once you click in the add to card it's supposed to send the data in that product data but it's not giving let's just make a hot reload okay something is wrong we cannot see the value so let's go to our store and inside that store okay reducer we give a name of that uh okay okay I think we we have some issue over here uh that would be yeah we need to give a name okay we give the name as the next as a counter we are passing that counter reducer so as a okay you're going to reduce your rear passing from the next slice we're passing the next reducer and in the next slice add to card initial state dot product data equal to action Dot pellets okay oh in that sense what's could go wrong what I'm gonna do I'm gonna just make another reload because sometimes it can be a network error okay first let's see where we create that one click event inside the products button add to card okay uh we are passing the same value we're passing IDs ID that should be fine okay so far we did everything right I think something wrong with our code as you see on can play it will be on click so that's the name we made in a mistake just a silly mistake so now if we click as you see the product data we are having a product data but if we click another one as you see it's replacing but we don't want to replace we want constants to upgrade with the data and to do that what we gonna do let's go to our next slice and over here inside here what I'm gonna do first of all we're gonna get that existing item existing products I'm going to find the existing products so that product it will be state DOT uh from their product data dot find and it gonna find from that item and then what we're gonna do uh item dot ID equal to action Dot build so that will be our existing item and by the way that item will be the similar uh for that actually we need to define a props and that props it will be responsible to Define all the types for or that store product so let's go to type.d.tx so we're gonna copy that other one we're gonna give a name of that uh oops it will be store our product and what we gonna do we're gonna add just one quantity which will be the number because we previously we doesn't have any quantity so now uh we can actually use that store border that one as a type so that is our existing item if uh there is in the product okay what is going on in the type error uh properties of undefined uh this one is coming okay this error is coming from nowhere okay so now that will be our existing item and now we need to pass a condition so if there is an existing I existing product is available so now uh what you want that existing product dot quantity uh it will be a plus equal to so with that quantity it will be that action dot payload dot quantity so it's gonna match through with a that quantity okay uh whatever I testing a product we have so now uh there is a no type which uh is a mass matching for that and else otherwise state DOT uh sorry it will not be all products it will be product data dot push we're gonna push that action dot payload so now that action quantity it's not gonna match because we need to predefined our all over the state over here and to make it predefined what we're gonna do we're gonna make interface it will be next uh state State and inside that state we're gonna Define that product data which will be that store products it will be a store product or an empty array and then we're gonna make favorite data which also gonna be store products and coming with an array oops which will be a comma and then we're gonna have that all products which also gonna be stored product and by the way and then we're gonna have one another uh user info uh and it can be null or can be as string so we can pass in that way so that initial instead it gonna pass as a next steps as you see after doing that all the error is gone so we are just defining what the state will be initially and also if you come over here if we add one product as you see is coming a single product with one ID and if we eat another product it's just adding that ID and if we adding the same product again uh okay that is uh okay there's a 544 so if we add the same product I don't know why it's replacing that something wrong again so now if there is an existing product existing a product dot quantity action.payload dot quantity okay so now const existing item is test.i state.productdata dot find we are finding from that store product item.id action.payload dot ID we need to match that with that ID so just because we are just uh replacing with that product it should be matching with the ID so now we have p055 if we have that adding the same product as you see we're increasing the quantity if we add another one okay just adding another one so now we are having that hour at 2 car so what I'm gonna do let's go and uh create all the uh like reducers over here slices over here then we're gonna Implement in that one so now then we're gonna make it at two favorite and add to fabric also it gonna take a State and action and then also we're gonna pass that method which I'm gonna get that a favorite item and instead of uh product data we're gonna pass that to the favorite data we're gonna just uh rotating through it and then what we're gonna do if uh there is a favorite that the same data the same conclusion we gonna come we're gonna pass that in the same value okay and after that favorite data we're gonna have another one which will be increa increase quantity okay so increase quantity what it gonna be it's gonna be the same way State and action so and inside that actually this is the same behavior it gonna pass all over you can uh write it and keep it in a simple way the way you find it better so now in that increasing quantity what we're gonna do we're gonna pass a method which will be that uh that quantity because sometimes when we are increasing the quantity we want to increase one by one so to do that okay uh we are not passing that like if we have that existing product existing products uh you if there is existing product then what we're gonna do existing product dot quantity plus plus if there is a product available whenever we click on the increase button it will increase the product so now we need to create that decreased quantity uh the ECR decrease quantity and also it gonna pass that state and action and now we need to find that existing item because now we need to defer a method because you can add after one two three but whenever we are closing down like minus two one then you're gonna come minus one minus two we need to stop that one so to stop that what we're gonna do if existing a product dots of course the product will be there quantity if that quantity is equal to 1 so if there is a single product available the existing product dot quantity equal to it will be the one the single product or else if there is is more than like one or more than one then then the existing product dot quantity it will be minus minus and by the way it will not be the it we need to Define it as it will be available not in that x uh question mark so now we are defining our existing increasing and decreasing and after that what we also need another one which will be uh responsible for the leader product and for that we need to make oops and now for to delete the product because we will delete that product data so now uh that state that product data and then we're gonna make the state DOT product data we will use that filter method to wipe out whatever the ID we are passing so now we are passing that item and that um a Tim dot ID it will be not equal to means it gonna be removed so whatever we're gonna pass in on that action because we're gonna pass an ID on that action of course and whatever we're gonna pass in the payload it gonna pitch that ID and it's gonna remove Whatever item is matched with that it will unmatch and it gonna remove it and then we're gonna have that uh receipt card and inside that receipt card we're gonna pass one a single state and that is it it's gonna be responsible uh like it that state DOT product data uh it what it gonna do it gonna just empty that all the product data previously available it gonna remove all the product data and make an empty state so that will be the reset card and now we're gonna get another one which will be the add user and is it and action then state DOT user info equal to action dot payload so that is our ad user and also that remove user it will be the similar and we need that state only the state we require so whenever we are calling that remove user just need to put a comma uh we need that state dots user info we will just pass it as a null value and now we will pass another one which will be set all products be careful what I am typing because later on it gonna when it is gonna go through an action you will really feel how cool it is and for that one state DOT all products we're gonna pass it action dot payload so whatever we're gonna pass inside the payload because we're gonna give all the products inside the payload and now we will need to pass that so add to favorite increase quantity decrease quantity and then uh Delete product receipt uh oops Racing Products and then add user remove user and also set all products so we are passing all other things and now it will be in action so let's go we are all we are just only uh having to make only one so also what we're gonna do we're gonna pass that method to our another one as you see there is another icon available which is for our shopping cart icon we're gonna pass that method over here too so now if we just click you see that also adding the product so now we are having the products and everything is uh because also once we just reload the product is removing so to not to remove that one what we're gonna do we're gonna use that persist we're gonna use that Redux persist to save the product in real time because I know there will be no issue with uh the item whatever we are keeping that reducer so what I'm gonna do and PM install we're gonna use that redox persist to save the product in real time and how we're gonna Implement that one uh over there we need to import all other things I'm gonna post that because configure history have been done we need to make that purses get and others so let's go and import that okay after the next video sir we're gonna use that one foreign we need to import that I believe okay we need to implement that and inside the root reducer we're gonna pass that as an extra user and as you see we are having already this bar so I'm gonna copy that and I'm gonna Implement that one here and inside that a persist I'm gonna pass the name as the next and also we need to export that so we are exporting the persist and now we need to use that persistor as a within the persist gate so let's copy that versus get and remember where we declare underscore app so we're gonna Implement that one over here and after the provider we're gonna pass that purchase get and that versus gets it will take as a persistor and that uh per sister we're gonna Define already and then it gonna be loading null so now if everything is right we will be able to save our products in real time so the person's gate is not required here so this will be responsible to save our products in real time so now if we just add one two three ah nothing is happening we made some error I think okay yes no it's happening it just takes a bit of time to load and also we can if we add some product from here okay the product is saving in real time so now we need to get that product to show the products in the header so that we can know that product is adding and to do that first of all uh let's head back to header and here we're gonna get our products we're gonna get two products one will be the filter product uh sorry one will be the uh like favorite product and other products so as we everything gonna get from there so what I'm gonna do a product data and uh favorite product I believe favorite data or favorite product memory data let's see what we Define over here via favorite data and we're gonna use that use selector you don't know why it's not giving me the Auto Import use selector that will be the state DOT next and we're gonna import that okay let's go and use we're gonna import it from react Redux okay now if we just make console.log it will be product data so if everything right we can see the product that as you see okay let us give the time to reload that product data is app level but once we add the product that we are having another error with that state if we just type State as any state the error will be gone but I don't want to type any any state because we can Define the instead to Define this state let's go to that our type.d.ts and again we're gonna export another interface from here and it will be that State props and first of all the product data which are gonna be an array and February data also gonna be an array and then user info it's gonna be null which is oops which is string and next it can be anything so now if we go to header we're gonna pass it as a state crops as you see video is gone and if we use that February data it should come okay uh what's going on over here as you see so now we are having that product data from the card but we don't have any favorite data because we didn't create anything for that once we click so let's go to our product value now over here I think the bottom one is for that on click we're gonna make it dispatch and I think add to favorite yes and we're gonna pass that same method the same things so I'm gonna just take those things now our favorite value is empty as you see nothing there but if we click if we click as you see we are having two favorite value so it's time to show that value inside our card and favorite and show it to the card is a pretty simple uh wherever we have we are having that our card icon uh okay shopping cart that's the icon um okay let me find out we're having our image then we are having our add to card what actually we need to find it in the header yeah we are looking in the wrong way so I'm gonna just remove that console and now that will be our favorite so we just gonna pass a simple method to just to Define if we have the uh like if we uh what will be whenever we are having a product what it gonna show if we don't have the product what it gonna show so now if we have the product data so it will be the product data dot length and otherwise it will you pass zero so after saving as you see we can uh see our product I don't know why it's loading too much okay and now we can also need to show our favorite item so to do that it will be uh we need to go to inside our favorite item that is our favorite and now we will create another span over here span and inside that okay not first is pen so first of all we we will pass the condition because we want to show it on the favorite data dot length is bigger than zero only then it gonna show otherwise there will be nothing to show and then we're gonna give a span span which will be that a favorite data dot length so that will be our favorite data and now we can actually redefine that span tag anyway so first of all we're gonna give a class name I'm gonna make it as absolute as you see you can see that item is over here so we're gonna make it in absolute and then from the right side it's gonna be two and from the top it will be two and wait four and height also it will be a four and then Bolder it will be 1 pixel and that border gray and I'm gonna give you 400 Flex item uh oops it will be item Center justify a center text it will be extra small and the text it will be Amazon blue and after saving that we're gonna see our the result we are looking forward as you see ah okay because we need to make that div as relative because we are making a that one that is pen as absolute so we need to create that div as relative as you see we are having a favorite data if we add more if we add more we're gonna have now once we click we can go through that our card page now we need to show our card items because uh items available there's only then we can re-render everything so let's go inside our card page so inside that card page we're gonna just fetch everything up from the top so to do that cross the ball remember how we do that our product data we use that product data we're using uh I don't know why it's not showing that selector and that is state it will be uh State props yes and that will be state DOT next and we need to import that you selector oops it will be from Korea Redux okay so now if we just make the console.log we can see the product data and we are having all the items available here so I'm gonna remove that and now what I'm gonna do first of all in the top level of the deep give a Max width of uh screen.2 Excel and it will be Auto PX it will be six and first of all it will be a grid pattern and then it will be grid course of 5 to make it looks in a bit good way and then I'm gonna give a gap up 10 and padding in y axis it should be four so that will be the probably everything for our card page for the designing in the top level so now what I'm gonna do I'm gonna make a productdata DOT map and inside that uh not the map actually oops it will be product data Dot length if there is product data is a bigger than zero so we need to find the length and then what we're gonna pass and if it's not then what we gonna pass so these two things will be available so first of all if uh okay okay where is uh showing that bigger than zero it gonna pass so first of all uh there will be one D and there will be another dip so if there is no product data what we want to pass we're gonna pass one H1 Tech which we're gonna give your card is empty and then we're gonna give a button which will be make go to shopping so this will be available for uh that so we're gonna come back later on just to keep it in that way and now what we're gonna pass inside that product data so first of all Let's uh if there is the product data we're gonna just put an empty braces because we're gonna make some styling uh things over here and we're gonna pass one deep and uh they're not gonna pass another dip then we're gonna make a p-tech which will be bus 22 will be a shopping cart and as you see it's available there and in the top level what I'm gonna do give a class name and uh BG it will be white and all this pen you're gonna give this pen a quality span of four because we give a five so we're gonna take a call this band of four and the padding we're gonna give a padding of four and then we're gonna make it rounded at as LG so that's the things we create because this will be the shopping cart there will be the payment option so these two things you're gonna create simultaneously and the other one Flex item Center it will be justify a bit and that border B it will be one pixel and the Border B it will be the gray and the gray it will be 400 and padding in B it will be one as you see that's the portion and for that P tag what we're gonna do give a class name text to axle Bond it will be not the sorry semi bolts and the text it will be Amazon blue so that will be our text board that and another one it will be subtitle which will be the other site because it's the already the flex of between and for the subtitle portion let's give a class name text LG and then on a semi Bolt and the same way [Music] text Amazon blue so that's the two things now we need to re-render our product so after that div we're gonna initialize our products so take a oops not the dog it will be oops it will be deep and inside that dip we need to render the product data so product data dot map we need to pass an item and the item it will be that store our products the types for that product it will be that and then we're gonna pass it deep and inside that div I'm gonna pass a b tag and let's just pass item Dot let's just give a brand as you see we are having a five product so it's giving other five Brands and now we need to pass a key which will be the item dot ID and also we need to give class name for it last name which will be the padding from the top oops top it will be two give a little bit a bit of room and then a flex Flex call gap which will be two so this will be that and now we need to render another thing so what I'm gonna do inside the component I'm gonna take another one which will be the card product.tsx rafce now we need to render that card product instead of this one so let's add card product okay card product and we're gonna pass item as item now we can find whatever happening what's happening inside that third product so inside that card product what I'm gonna do remember we are passing that item as a cardboard as we are a passing initially in the page props so it will not be work in this previous way so what I'm gonna do I'm gonna make an interface which will be the item and inside that interface we're gonna have ID I think let's go back to our oops here so we're gonna just get everything and I'm gonna pass it here and then interface which will be our products props and then we're gonna pass that item s item oops items item and then I'm gonna pass that as card order Buffs as you see the error is gone so now in the Deep what I'm gonna do I'm gonna give a background of uh gray is 100. and around it it will be oops LG and then it will be a flex item Center Gap it will be for so now instead of this one I'm gonna take an image from the next image and the source it will be item dot image and it will be product image as you see it will not be available because we need to give width and height for it wait it will be 150 height it will be 150 and after giving that you're gonna see that product is available I'm going to remove that so that's the product Mark is happening now after giving that image also we can give a image some class name which will be object over you just put it in a safe way and now after the image we're gonna take another deep and inside that div we're gonna keep other things so inside uh I am I think inside that dip okay let's see what's the design we are having that let's add some car okay okay we're gonna have that design portion so to implement that inside that div I'm gonna take another dip and then I'm gonna make that item dot title so this is the item.title and first of all let's go in the top table of the D and the class name I'm gonna make it Flex item Center and padding in xxx2 and the gap of or okay and inside that div X Flex call and the Gap will be one so first of all we are having the title and then another p-check which will be that item dot description as you see that now holding the details uh for the first one it will be the text it will be LG phoned it will be semi bold and text Amazon blue so that's the first one and for the P tag for the description text SM text Gray Escape as 600. so this is the for the text for the p-tech and now for another P which will be the unit price and in the expand Tech which we have that we're gonna pass that formatted price and that in the amount we're gonna price that item dot price and also in the top level uh we're gonna text SM and the text Gray of 600 but over here for the price we want to emphasize the price last name font semi bolts and text it will be Amazon blue as you see that looks a bit of similar with that here is much similar so now we need to create this portion that uh effect for the button so after that dip we're gonna take another dip and then inside that I'm gonna take another dip because we're gonna pass a two portion for that first of all we need to have two icons so I'm gonna get that to icon which I'm gonna import from that correct icon so first of all let's go inside over here in the Deep so what we're gonna do inside that div I'm gonna pass it bentek first of all it will be plus icon and then it will be another oops where I am okay oops span it will be item dot quantity and then another item so sorry span and then minus icon so in that way it will be these two icon as you see that is happening in a very other way so I believe this entire portion oops Yeah that entire portion it gonna be over here okay that knot looks the way it's supposed to be uh let's be get it through after the P tag I believe I think it will go to after the p-tech yes after the p-tech not over here okay so after the P tag it will be available so now in that deep we're gonna make it Flex item Center and we're gonna give a gap of six as you see is coming up in place all together and now what I'm gonna do I'm gonna pass all together inside the div right now and in that deep I'm gonna work in that way so the class name X I add in Center justify Center and empty in it will be one so uh from the top it will be a little bit a lower side and justify between oops now as Center it will be the between okay order Boulder gray off 300 padding in x64 adding in y axis one okay that looks better coming in a ship and around it it will be a fully rounded and width will be 28 it will be Shadow it will be LG [Music] which will be Shadow Gray and we're gonna give a shadow of three hundreds so now if we just look at over here you see now we need to create that effect with each and other button and to create that we're gonna create it inside that span so let's go and give a class name which will be width of six height of 6. Flex item Center justify Center rounded it will be a full and text the base text which is happening and BG it will be transparent BG Uber BG gray off 300 cursor pointer and the duration it will be 300. the first one is happening the same procedure it's gonna be happen for the other one so in that span tag we're gonna do it and now after having this portion as you see we're gonna also um having a delete button right and to keep the delete button what I'm gonna do I'm gonna take another oops why I'm putting dough okay I'm gonna take another dip and inside the Deep it's not giving me the giving me the Auto Imports so what I'm gonna do I'm gonna just give that icon for that close icon which I'm gonna use to make that remote product let's Implement that which will be iumd close as you see that is available over here and after that I'm gonna having a P tag let's see what it's gonna show as remote and for that one I'm gonna give it empty of uh 2 pixel to just be coming in a top level because what we're gonna do we're gonna make it Flex item Center and text it will be SM font it will be medium text Gray of 400 Uber tax rate which will be oops uh not 700 we're gonna give it 600 parser pointer and the duration it will be 300. so now as you see it's giving me that effect so now and after doing that there is any other thing and we need to have that subtitle price so no Supply a sub total price sorry so we need to having that soft total price so for to do that what I'm gonna do I'm gonna give another dip and inside that dip we're gonna pass that formatted price as and the amount it will be item dot price into item dot quantity as you see that price is available over here please go and grab some class name for that text it will be LG phone it will be semi-bolt and text it will be Amazon blue so now we are having that so now we need to implement that uh three things three dispatch we're gonna create over here so to create that dispatch it will be use dispatch [Music] so it will be use so first one we're gonna create as increased quantity and to create that we need to go through with that plus and let's go and create that on click which gonna be dispatch and that is Bridge it will be increased quantity and inside that increased quantity we're gonna pass the same value as we have been done before so let's go to products we're gonna pass the same value from there so are you gonna pass it but their name is different over here so we need to implement that it should be item dot ID and others and the other one which are gonna be decreased quantity that's the one dispatch decrease quantity and we're gonna pass that same math for that okay by the way I'm importing all the other things you see it's importing from the next slide so you need to uh find out if it's importing or not so let's add okay okay okay uh okay something is showing wrong with my next slice okay inside the next slice what is showing over here if products existing product dot quantity equal to one it will be existing product equal to one else existingproduct dot quantity so the quantity it will be available and then it will be minus minus so what's wrong with that okay let's just give you a hot fill out sometimes it's okay no okay existing product is uh cannot type undefined reading quantity okay okay existing products store product in that store products we have that quantity yes okay okay where we are missing something comes existing products uh okay okay because we are having we are we made a mistake because we need to find that product from that product data not from the favorite product because fabric product some it may be empty because we need to find that with our product data not from the fabric product it's a silly mistake so now it will add as you see and let's go and create that remove product and to do that dot products and we're gonna pass that inside our um so remove the product which we are having that over here we're gonna pass that we're gonna pass it dispatch which will be uh Delete products and there we're gonna pass that item dot ID so in that way it will match through the ID filter through the ID and it gonna remove that as you see we can add we can remove and now we need to create another portion which will be our like that uh remove the entire product right and to do that we need to create that receipt card and that receipt card it will be after that and what we're gonna do uh oops it will gonna inside the components it will be receiptcard.tsx rafce and now I'm gonna import that brexit card so this is the receipt card over here so now let's go and work with that receipt card so first of all what we're gonna do inside that reset card it's gonna be a button and it will be receipt cards and let's make that button as a designer purpose so the class name oops it will be a 44 and height it's gonna be 10. born it will be semi Bolt BG it will be a grade of 200 rounded LG and it gonna be ensui Hoover the BG it will be red 600. and Uber oops text it will be white duration it will be three hundredths as you see now there is some gapping issue we can affix it inside that card as you see on the curved level I think over here in the top we can make a class name with a padding uh top of two and actually that will not be that padding as you see oh this padding also will work so padding to up two legs black skull and the Gap will also be 2. so now that you see our receipt card finding the gap okay I think this portion is not be here uh yeah it will be here that's why this is not finding so now we need to click like uh make that receipt card whatever the thing will be there so first of all we'll create an on click function handle receipt card and to do that um handle receipt card okay first of all I'm gonna go to card products and then I'm gonna copy that because for some reason it's not working in my PC so now close dispatch use dispatch and by the way once we click in the received card we need to get that alert from the window and to create that one or you need to make that const ant confirm reset and that will be window dot confirm because that's the one coming from the window and they're gonna message will be are you sure to procedure cards oh no listed here items from the cards and now if the confirmation that confirm receipts whatever is coming so if there is confirm receipt then what we gonna do we're gonna pass a dispatch and then in the dispatch we're gonna make that receipt card okay so if that receipt is yes we're gonna receive the card if it's no it's gonna come in a previous section if we keep the cancel the card will be there if we just receive the card as you see your car is empty go back to shopping so now we need to create the other side whichever we are keep on painting beforehand as you see that's the one so background it will be white and height gonna be 64. and all the span Okay police span we're gonna give a full College span of five and then we're gonna make a flex Flex call Item Center justify Center padding in y axis of five and then round it it will be LG and then shadow oops also it will be LG as you see it's available over here and that H1 tag we're gonna make it as a text LG font medium so that's the text and go back to shopping which will be we're gonna just put it wrap it inside and a link object and it gonna take his href he gonna take us to the home and also for that one we're gonna give uh 52 height of 10. oops 10. PG imagine blue text White rounded LG text will be small text and font it will be semi Bolt and whenever we hover it will be the background it will be Amazon blue over text will be block so now we can so once you click and go back to shopping it will take us to there so let's add more products on the card as you see the products in the card so now what we need to do after the receipt one we need to create another dip and then we're gonna use that card payment so over here oops it will be payment.tsx also we're gonna link it scar payment so now you can see the card payment so what I'm gonna do I'm gonna take a deep and which will be a busy White and height I'm Gonna Give You 64 of height call a span of one and padding is gonna be a four rounded gonna be LG Lex item Center justify Center as you see and now we're gonna make these things with that our payment first of all inside that dip I'm gonna use one I like I'm gonna use one icon so let's go and grab this icon so that's the icon I'm gonna use and after that dip I'm gonna take another dip and inside the dip I'm gonna use that icon and that span as I mark it as you see okay that's still not okay that's the icon so first of all in the top table of the deep give a class name clicks next call and the Gap it will be oops it will be four and for the second one also gonna give a class name flex and the Gap it will be two so now with this span tag class name BG green of 600 rounded it will be full and then padding one height will be six it's six text SM and the text it will be white clicks item Center justify Center and empty it will be one that's the one we have been created and after that expanded we're gonna have a p tech which is gonna be saying your just uh passing a simple message which is a passing that your items is qualified for free shipping by choosing options or check out just a simple text which is gonna be decoration and the text it will be a small text as you see that is available and after that we need to find out the total price so we need to show the total price if you see in the card we are showing the total price the available price so to do that after that dip we're gonna take a p-tech which it will be total and then we're gonna make Hispanic uh the formatted price it will be the inside the amount we need to like put the total price and before do that let's just go and make some last name for that next it will be item Center justify between okay and the PX of 2 and font it will be semi boards okay and for the span Tech last name font bowls text Excel okay so now we need to find out the total item and to find out the total item first of all we need to get our item from the store so first of all let's get that const product data and it will be skipping me a pain okay let's just because we're gonna use that use selector and use dispatch both of that your selector and we're gonna pass that as a State and that is that it will be State props next dots no not the next it will be state DOT next so now we are having that product data so after having that product data we need to pass a value which will be const total amount and then let's just put total amount and then sit total amount uses State first it will by default it will be zero so now if we just pass the total amount as a value it will also show us as 0 because we are passing is zero so now what we're gonna do I'm gonna make it use effects and inside that use effect I'm gonna pass uh just uh get a variable let amount equal to zero and now what I'm gonna do I'm gonna go through that product data which will be same with the store product because we are gonna having that item there and after mapping all of that the amount it will be all the item plus the item dot price into item dot quantity so that will be the amount and we're gonna return and after returning that we're gonna get the set total amount as the amount you're having and by the way Whenever there is a change on that product data the total amount will vary as you see we're having that so now if we add and if we remove delete the item is changing so now that thing is done and now we need to create and after uh that a p-tech we need to create that another dip and another div and inside that dip we're gonna have a button which will say proceed to buy so after that text there will be another text which will be please log into continue and now to just go that through what I'm gonna do for that button we're gonna give some class name as you see because we giving away then hide and we are making a cursor not allowed because what do you want we want owns anyone is logged in only then they can access that button so we're gonna pass that message in that way okay and to make it all in between in the center what I'm gonna do last name Flex Flex call Item Center so now we are having that we're having our product we are having our button so now what we need to do we need to create our user and I will do it using next art and to implement our authentication we're gonna use that alt JS which is previously known as next out JS so let's go get started our first introduction okay that's their new home page and we're gonna set up with Authentication and first of all we need to install that one so let's go back to our terminal we're gonna uninstall our next auth and after that we need to create a folder inside our API so that's the API so the folder it oops it will be a folder not file alt and inside that folder we need to get that file okay and now what you need to do you need to import that all other things okay okay there will be I okay so now we need to pass those things to implement that and also we need to create one e and B dot local not DOT EnV dot local so now here we need to pass several things first one it will be our GitHub ID and then it will be our GitHub secrets and also we need to pass to other variable which is it will be for our the auth we are using the next auth URL and also we need to pass our next odd secrets okay the next URL will be the URL we are using if we go back to our home page the URL we are using that's localhost 3. 1000 and the other one you can just put any uh like any generated Port as you see the 64-bit if we just uh want to generate from here you can just go to that link and it will go gonna be generated one let it be generated so we need to having that and now we need to have that GitHub ID and GitHub secrets so first of all instead of generating I can type anything any number or any text it will be my secrets but we need to match that on so we are deploying okay it's already generating as Auto so just just put that here so now we need to have that GitHub ID and GitHub secret and to do that first of all I will go to my github.com and from here once you are going to your account go to settings and from the settings you need to go to the developer settings and from the developers developer settings you need to go to all apps and now up in the oauth apps I'm gonna get a new apps which will be next Amazon okay Amazon YT and that home page URL which will be localhost 3000 and the Callback URL which will be that localhost 3000 API callback GitHub and now I'm gonna register my account sorry not deck on my app so I'm gonna get that client ID as my client ID and also I'm gonna get my client secret which I need to generate and I need to give my password and by the way you can don't copy paste that one because I'm gonna delete that apps after I finish that project and now even the error is there so I need to tell the type script that this value will be available there so now I'm gonna having that variable two in work so let's close that let's go there so what I need to do I need to wrap everything that provider and others to use that one and where I can do that I can do that in my underscore dot app.js so I'm gonna close others and let's go to underscore app.js and first of all let's import that session provider paste it over here and now I'm gonna use that session provider after the versus reducer and now I'm gonna paste everything and inside that provider as you see over the page props we need to modify our page props so that is the page props we need to pass that value for the page props and for that session provider we need to pass a session which will be the session now let's go back to localhost and after doing that implementation we need to get this value that you session sign and sign out and of course we're gonna do it inside our components and then it will go back to our header so now first of all we need to find if there is a session available or not so to do that um we need to pass that variable okay and we don't want to see the status we just see the use session variable so let's see console.log session if there is a session available or not let's just make a Reload it should be shown here okay so you session is coming with us from the session as you see the session is undefined and null so there is no session available okay all is coming from the header so first of all what we can do to make that happen because we don't have any session right now so we need to create a session and to create the session we need to implement that signing option to do that implementation as you see we are having okay we will keep that console.log and that's the one I believe over here not the market uh account and list so we're gonna make that oops not on play on click and then we're gonna make sign in so that's the function will be responsible to create that sign in for our page now if we click it gonna take us to that a GitHub sign in and also we click it gonna redirect it will be C is asking me the permission I will authorize that one and now it's gonna be redirect me back to my page as you see I am having a user and I'm having a session so now I need to catch that session data as I am having that session and to catch that what I'm gonna do I'm gonna make and use effects make and use effects and inside that use effects I'm gonna pass that if there is a session available then what I'm gonna do I'm gonna dispatch a method of course I need to get the dispatch um there um okay I believe we take you selector okay I'm gonna pass also use dispatch it will not be use dispatch so whenever we have the session session we're gonna dispatch an action and that dispatch it will be add user and inside that add user I'm gonna pass that name and the name will be the session dots user oops dots name and that email oops it will be email session dot user dot email and the image which will be uh session dot user dot image so we're gonna pass that one and it's gonna be affected whenever the session is changing it's gonna be re-rendered on that same okay so if the session is changed the data will be changed okay so now we have the favorite data and our from that favorite data um can also take that user info so that items will be available also so now if we go to our Redux and if we just make it little bit bigger as you see we are having a user info data available which is coming from the session now we can re-render that properties and can make the way we want so first of all what I'm gonna do I'm gonna go through that entire uh user info that's the user info so I'm gonna copy that uh if there is user info and if there is no user info so if there is no user info it will be that one hello sign in if there is user info I'm gonna remove that on click even as you see if we click it will uh it will not redirect because I removed that so now we need to arrange that uh functionality over here so what I'm gonna do I'm gonna take an image I'm not gonna using the next image I'm going to use a normal image so user info Dot image it will be user image and that class name which will be 8 height it will be eight and that around it it will be full object cover as you see we're having an image and then after the image we're gonna take another dip and inside the dip it will be a P tag which will be user info dot name and another PTEC which gonna be con combine that user info Dot email as you see both values are all together there so in the top level of that particular dip what I'm gonna do instead of keeping the previous value I'm gonna just modify that value in a way now you can see it's coming all together let's give a text of X toy small and text of gray 100s Flex Flex call justify between so that's the one and for the first one the class name the text will be white for the name and font it will be so as you see now we can see that and also as you see the sign out we need to make that implicitly useful so how we can do that so let's go to our bottom header and inside that bottom header we need to implement that uh that procedure and to do that we need that same user info we are having so let's go back over here we will take that we're gonna paste it over here we just need that user info and also we need that and this button will be available so whenever the user info is not available this button will be gone so now on that button we're gonna make a functionality we're gonna make it as a button click handle signups and now what we can do first handle sign out first of all it will be make it a sign out and second it gonna be dispatch and that dispatch will be that uh remove user so it's gonna make uh oops it will not be in that way sorry I just okay I think I put that inside my sign out function okay so it gonna remove the user from there on it's gonna be signed out so if I click the sign out you see that user is removed and is redirecting to that page if I just click the sign in it gonna take me to the sign in with GitHub and then every single details is available and also we need to authenticate to that page because once we sign in we supposed to be uh like work with that right so let's go to the card payment and inside that car payment we need to modify that one so first of all in that button okay this is the button I'm gonna take all of these properties oops before going that we need that user info right user info so now let's cut that and if user info available what it gonna do if not available what it's gonna do so just we need to uh change uh some variable if there is user info we no need that text first of all you see the text is gone and now instead of the previous one we need to just um we need to allow the cursor I think that will be that position only as you see we need to allow the cursor and Vijay it will be Amazon blue okay okay okay let's go and grab me those things for it and I'm gonna pass that as variable so now as you see now it's able to create that opposite to buy so these things is able to create the checkout session so by the way we can go through with that uh whatever that we with the search input we're gonna go that so we're gonna create that page once you're going to create that search input but before that we're gonna already having everything done so we can create that checkout portion and by the way if you want to create another uh portion for that like the Gmail and others I have other video also where you can find the way just for this build I'm gonna use that uh because in in my other builds there is a lot of uh like sign in with Google Facebook and it just simply adding the app and then creating that uh credential for that so you can go through also like if you want to go through that Google uh you need to go through the Google search console and inside the search console you need to create your app so if I just come over here in my search console another Google search console actually it will be Google Cloud console so if we just come over the Google Cloud console from there we can take the hint so first of all what you need to do we need to uh get the provider it will be uh oops that's the GitHub provider it will be Google provider so we need to I build the Google provider uh okay let me grab these things okay uh that one it should be in that way Google provider and also we need to import that Google provider here and now we need to import that secret which will be the Google find ID and under it will be Google client secrets and now we need to create our application then we need to create this so we are here in the Google search console so let's go back to my console and then I will create another application the new project which the project name it will be next uh oops next underscore Amazon underscore YT so let's create that uh okay okay YT is create and after create we need to go through that so it's just creating not yet be done okay now next Amazon white is created after that you need to go to API you need to go to the creating Shields and inside that credential because by default we need to make that configure that consent skin screen and on that screen we need to change other things first of all let's make it as external create an app name it will be Amazon okay Amazon YT the mail it will be my mail okay give it that mail and the email okay let's create because you need to finish the setup otherwise it will not work and save and continue and then you can add user so by default I want all the users to do it so back to dashboard and after going back to dashboard let's go to again to the credential and now uh we will be able to create the credential or you want to create for that or odd client ID and now it will be the web application and for the URI what we want we want that URI to be passed over here remember that URI and let's just show how you can add that another URI so if we just get that client ID and you see that will be my Google client ID and that will be my client Secret of course I'm gonna remove that so even you copy paste it will not work so let's go to my over here and sign out and now we can sign in with the Google as you see once you click sign in we having an error because we need to get that URI to that Google so what I'm gonna do in that web client I'm gonna pass that URI as a callback URI so now if we just go back to my local host and let's sign in again wait that Google Now I can sign in with any of my Google accounts so it gonna do the same thing redirect and do other things it's very simple so other Auto authentication if you want you can do it but for right now that will be fine for me so now it's time to get with that stripe.js so let's implement uh the payment option with this type and to do that I'll go back to my dashboard and inside that dashboard if you have an account you can go to the dashboard and then what I'm gonna do I'm gonna create a new account and in that account which I'm gonna do I'm gonna implement the other things which will be next as on or actually I have already one M account which is next Amazon YT so I'm gonna use that one in same way you can create or you can use your existing account so I think the payment yeah I have been done some payment over here so what you need to do actually you need to get that publishable key and you need to get the secret key so let's go over here and inside my environment variable I need that toolkey one is for my next public and next public stripe publishable key and another is next public strike seated you need to write that with the next public otherwise it cannot get that it cannot fetch that key as an uh publicly oops I think I made some mistake so let's copy that let's paste it over here and let's reveal that key of course I need to give the password okay Let It Be notes and now I can reveal the key let's copy it let's paste it here so now I have the public key and I have the secret key so after having the public and other things what we need to do to implement we need to uh like we need to import that stripe.js and to do that we need to pass the ball let's go to our file it will be npm install which will be stripe stripe.js and then after this type.js we need to install the stripe also these two things we require npm install stripe so now it will be available to work with and by the way if you want to see how the things actually uh okay I believe is you can go from here also uh like okay or the documentation documentation you can go through the documentation and you're gonna find every single things is available over here how you can create a payment or you can create a payment checkout or how you can use it with the next JS and other functionality all the things will be available over here if you just go through the quickest chart and as you see getting the SDK for Java is cheap and for the next JS so you can get every single detail so I'm not gonna go with that to explanation if you follow through me you're gonna it will be worked just fine so it's as simple as it is so let's go back to my card payment and inside that card payment we're gonna create that checkout option so first of all uh in that card payment what we're gonna do inside that up button let's create an on click function which will be under checkout handle checkout and inside that handle checkout we need to uh make a lot of other things what is that we need to create that we need to connect our uh that stripe publishable key with that in our local like in our local server we need to connect with through that load stripe we need to reveal that uh stripe publishable key then we need to find that uh we need to pass also that secret key from the backend to collaborate with the front end with that way it will work so let's go and for right now just to make a console.log console.log which I'm gonna do process.env and let's see if it's actually working or not so what I'm gonna do I'm gonna just go with that next up so once we click it gonna give us that key it's inspects let's go to the console let's go to the card and if we click as you see that key is revealed so that thing is working much fine so now first of all type promise and that is type promise it will be load stripe and inside that Lorry stripe we need to pass that parameter as it gonna pass it as a promise and of course we need to mention that that e will be available there so now what we need to actually make it happen first of all we need the session data also so to just to work with that so the const data it will be session and then need to make that new session because we also passed that session data to the backend so first of all uh this checkout it will be an asset a synchronous checkout a synchronous function so let's uh a sync and now phones stripe and that stripe it will await for load stripe we are passing not the load stripe because we are passing that stripe promise so that it will wait for the promise and then we're gonna go with that response cons response it will be awaits and it gonna pitch but we didn't create anything to fetch what we need to do inside that API we need to create another file which will be checkout.ts so what it gonna do actually it's gonna fetch from that API checkout you're gonna fetch from there and then it gonna pass the method the method it will be post and after passing the method it's also gonna only do the uh declare declare the headers which will be the headers so it will be a content type the content type it will be application.json and now inside the body uh it will be uh I think Json dot stringify because you need to stringified adjacent data and we need to pass that items as their items it will be the product data and email it will be session user dot email so that's the things we're gonna pass and after passing those uh things we will get a checkout session [Music] checkout session and of course it will await for it and that response dot Json so you're gonna pass that as a checkout session now what it gonna happen if we having the checkout session okay so now if we are having the result for the checkout session we will redirect our user oops redirecting uh like user or customer to stripe checkout so if we get this type promise if we get our session and if we get all the data's available then we will redirect to our user to create a stripe checkout session so now const results it could be any result and then it will await for the stripe and it will make redirect to checkout and inside the tree direct checkout what are you gonna pass we're gonna pass the session ID it will be uh checkouts uh I think we need we didn't Define the checkout session really Define yeah that's the checkout session I think yeah we defined the checkout session check out session dot ID yeah that's the ID we're gonna use now here we have two other things if the result if the result is happening with an error what is gonna happen it gonna give us that alert and that result will be the result error and then we're gonna pass the message so now this is happening from The Fountains once we click in that checkout but inside that our API on that checkout we need to fulfill the promise we need to get all the things so first of all let's go and we need to import that next API request and next API response from the next and also we need to get that strike equal to virtual request as stripe and now we need to get the promise remember where we keep a process.enb we need to get that stripe selected key we need to connect that secret key over here that we can get the secret key from there and now launched default at default it will be an assign function oops function again give a name of Handler I think the Handler yeah ex actually uh it will not be caused it will be export default sorry and there we need to pass that as a request it will be uh that next API request as a response it will be the next API responses for the typescript and now remember we are passing the items but we need to modify the items by which we can pass the items to stripe because we cannot give that dump that items as the way we want so what we need to do we need to modify our items so the modify items items dot map and that items obviously you need to actually get that item first so that cost it will be that our uh items the items we are of passing and then we are having that email remember we are giving a session email and this is coming with that request.body so now we are passing that product data as items so we need to signify like we need to make the all items as different items so what we're gonna do we're gonna map to that item and that item is actually for the type script we can put that as a product store product and now what we're gonna return we're gonna return as quantity we're gonna return a quantity.item.quantity and after that also what we're gonna return we're gonna return that price data and also so that's the quantity we return and then we're gonna return the price data that the currents will be USD unit price will be item dot price in 200 because it's calculating by the cents and product data it will be the name would it will take three things one name description and image the product name we're gonna send description you're gonna send and show and we're gonna send that image so after that we're gonna create the session so now oops let's go session and that session it will avoid for stripe and then check out Dot sessions Dot create oops pay it we're gonna pass everything as an object and here what we gonna do we're gonna pass at that payment method types which will be now we can pass a several payment method types but for our one it gonna be as card and then we're gonna pass that shipping address collection hello countries be the USA Oman kanada and others and also we need to pass that line items and the line items it will be modified items and the mode it will be payment and now we need to pass that success URL like once the payment is done where it gonna take us once the payment finished fulfilled where it will go or if it's canceled where it will go so process.e and V remember we are already setting our auth as the next URL so it will be the next URL and slash success and also [Music] cancel URL it would be the same way you can if some ways canceled I want to redirect is with the checkout or you can just put a page which will be given us to that cancel URL so that's the one and for the metadata right now is actually not needed but you can pass the metadata also like metadata and inside that metadata we can pass our email and also images and inside that image because we are we need to make that as a stringify and that items dot map remember the image inside the item or you can just pass any item or you can pass the items with the props item Dot image and now if everything is happening everything is done we need to pass a response Dot status and it will give us a 200 statuses and then we're gonna pass it as a Json and inside that Json we will pass that ID which will be the session dot ID so now this session ID we're gonna pass it over there and before creating the checkout remember we are having already a pages so we need to create that Pages called that success.tsx rfce success page so right now if we just success we go back to success you see we're having a 404 I don't know it should be there okay let's go to okay let's go to pages and success as you double see it double s oh sorry I made a mistake over here it will be double C okay let's hit again and as you see we are having a success page and for the success page we're gonna just uh making a two uh like a few things uh over here in success page we're gonna take that dispatch function of course and inside that div what I'm gonna do I'm gonna just modify that deep I'm gonna give a flex Flex call Gap an item Center as you see is coming in the center and then we're gonna pass one H1 Tech thank you for shopping in next Amazon YT and then I'm gonna pass href uh oops it will be a link and then I'm gonna pass that take a B Tech continue shopping and that it's gonna be href into um okay I strap into there in the home and also are you gonna pass also you're gonna dispatch a function over here [Music] dispatch it will be use dispatch and inside that on click function we're gonna also dispatch and that dispatch it will be gonna pass that receipt card and that's the simple thing so now for that H1 tech let's go and give some class name for it as you see we're giving a class name text to excel found a little bit Bolder and other things and for for the other one for the button just keep it inside the link the simple text uh and now that you see I'll see Hoover we can go back to there it will take us to the home page right now see so now there's the things we need to implement so as you see if when it's time to face the truth now this is try payment we have previously one five four four so let's go back just uh do you want to get a clean start let's sign out and let's sign in again I will sign into it uh GitHub and after redirecting the localhost let's add some product in the car let's make a big bunch of payments okay it's working we're in the card page we can take more we can remove that product also we can add car so now we are having 7416 positive Y and by the way we are not getting that as you see post API checkout 404 not found so we uh I think we made something wrong API see that should be less rename CH E C K check out yeah so I made a mistake again so let's click okay let's give a Reload with that so now CH is CK or UT checkout and the curve payments API dot checkout so I think it should be done we're gonna go with that cons response and that response is fetching with that API checkout okay now let's proceed to buy internal server Arrow so it's not giving the valid Json I think we made maybe a silly mistake somewhere okay here is the content okay there is E1 is the content type application.json I think that will be the mistake only yes we are passing that now if we click no that's not that so let's just go through that body it will be json.stringify items product data email user dot email okay response dot ID I think I find the error and that error is happening from here as you see we are putting in an uh I think it will not be there it will be in that Curly basis as an object and it will be items email so now I believe everything is fine and if we just click on that proceed to check out oh as you still see uh okay okay I think after that because we are having some silly mistake over somewhere okay okay okay let's find it again I believe we keep everything fine okay ties to Define items item quantity everything we defined properly we are giving a station to create a checkout method we are stringifying it and just give a harsh reload I think it will work just fine sometimes it's having with a network issue let's click I will leave it to work yes it's rendering throughout a checkout because I think it is some of the portions sometimes the network issue giving me giving us that uh problem so now in that stripe we're gonna pass admin email we're gonna pass that okay okay we're gonna pass that poster hero and that go to four two or two and it will be 30 and 125 so now the amount is seven four one six point nine eight let's pay and as you see payment is done and it's taking us to our in the success URL we can go back to there and now if we just reload if everything is fine we're gonna having a payment section and you're gonna receive the uc74 16.98 is already paid so in that way we are now having this beautiful UI and by the way that will be our till today's build because if we want to implement the search field we can Implement that one also and the other field which I'm gonna take another day to build in the next part because it's getting a little bit bigger so feel free to reach out and I'm gonna give it in the next video but for today's build I'm gonna give you everything whatever is happening over here and to do that first of all what I'm gonna do uh we need to imp uh first of all what I'm gonna do I'm gonna just put it that uh get in it and I'm gonna make a git add dot so I'm gonna dot app and everything hit commits it will be our initial comment and now for you people what I'm gonna do I'm gonna open a repository which I'm gonna give you free to deploy it so whatever I created here you can have it in your basket also and to do that let's go Amazon next YT oops it will be YT and description yeah like it's going to be in public so let's create that Repository and now I'm gonna put that git remote add that Repository and now get push origin Masters uh it will be our master okay so everything is now here in the master as you see but what you need to do you need to add one process.enb file which is bit.nv.local that you need to implement that by the way I'm gonna give you also that file just give you a minute so what I'm gonna do let's go back to Verso to deploy that application we're gonna deploy it inside the versal but not into this build in our next build so what I am gonna do right now I'm gonna remove that all other things oops like I'm gonna remove my value so once you are adding your value uh you're gonna have that application running in your local machine so let's remove that no need this one okay hit save and from my git ignore uh okay what is the E and B okay so I will pass the EnV file also get at git oops it will not be that so now if you just clone that website you can have everything over here as you see I think dot ENB file should be available I don't know why it's not coming I pass that okay it's coming only the initial comment let's see what's happening with that foreign okay what do we have done yeah that process that env.local is available here so if you just put your credential you're gonna have that website for sure and everything gonna be run locally from your machine so if you having that give me a screenshot in the description then I'm gonna go and make it uh morally to create it more responsive and focus on with those things whenever we're gonna click we're gonna go to that particular page these things and also the search bar we're gonna create whenever we you are finishing that okay so if you are done with that please let me know in the comments below set a screenshot then I'm gonna create all other things which gonna really help you if you are going looking forward for a job or other things so feel free to do the things and then we're gonna start with the other things so we'll see you in next video

Channel: Noor Mohammad

Views: 20,108

Keywords: amazon clone, amazon clone 2023, amazon clone next js, stripe payment integration, redux, amazon clone using react js, next js, next js tutorial, next auth, next auth next js 13, creating amazon clone, build amazon clone, build amazon clone with nextjs, amazon clone with stripe payment, next js project, make amazon clone, build amazon clone in nextjs english, vercel deploy next js app, ecommerce website in react js, ecommerce website in next js, amazon clone new

Id: vviFia-Stqk

Length: 214min 38sec (12878 seconds)

Published: Tue Jul 04 2023