Complete E-Commerce App with React, Strapi, Stripe | Shopping App Tutorial for Beginners

Hello friends today we are gonna create a complete e-commerce application using react strappy headless CMS and stripe this is the home page we will create this beautiful slider without using any Library here we have some featured products when I hover over this component it shows a different image there are some categories trending products and other components let's choose any category here as you can see it's fetching all these data from our database and we can filter products using this left menu I can choose any sub category I can sort by price or select a price range let's click one of them and this is the single product page I can change any image increase or decrease this quantity and I can add it to my cart as you realize as soon as I do that this number increases and the product is in my shopping cart right now let's add another product and it's immediately here because we are using Redux toolkit and it updates the card State instantly and also even if I refresh the page my products are still here so you will learn how to purchase the state using Redux I can delete any item I can empty my cart and finally I can check out using a credit card to do that we will be using the stripe payment gate after entering the user information and credit card details the payment process will be completed and we will be able to see the customer payment in the stripe dashboard it's a great project to learn react and headless CMS it's really important because headless technology is gaining more and more popularity every single day probably in the future we won't have to deal with back-end apis and authentication we will just design our applications and use any headless CMS to manage our contacts last week I asked you to choose any content management system for this project and you have chosen strappy actually it's a great choice it's a free open source project it's really easy to learn it has a nice admin panel as you can see this is the scrappy dashboard we will run this on our local machine and we can create any table like products categories after that we can directly start adding new items using the contact manager also you can choose any database MySQL postgresql light SQL whatever you want and finally we will deploy this application using hostinger it's the sponsor of this video and there is a great deal special for Black Friday on hostinger.com it offers an 84 discount for premium hosting that includes a free domain and SSL certificate also if you use the link in the description below and La model coupon code you will get an extra 10 percent discount you can deploy a hundred websites on this hosting it can be static websites any JavaScript application or react application that uses a cloud database service like Firebase but if you want to create an application that has its own local database and rest API server like this project you can consider buying a VPS server there is also a great deal for virtual servers actually it's a perfect time to buy if you need a server because it's the biggest discount of the year for this project any of these plans will be more than enough and don't forget if you have multiple applications you can deploy all of them in a single server using different port numbers and it's a good opportunity to learn server management nginx and some production security rules OK I want to get this premium shared hosting also because I want to use this free domain and SSL choose the time period and don't forget to use the code here after entering your payment information and purchasing you will see the hostinger panel let's claim our free domain and right after that we can set up the hosting this process is really easy I will choose my new domain and that's all it's gonna set up the configurations and after that you will be redirected to the hpanel in this panel you can set up an email manage your domains and there is a daily backup option here in case of any mistake and here is the file manager where you can upload the files of your application so if you are ready let's create our applications and deploy them using hostinger foreign folder and inside this folder I'm going to create two more folders first one will be our client site and one more folder and it's going to be API basically it's gonna include our strappy API that we can create new products new categories or whatever and using this react application we are going to show them on the browser let's open up our terminal I will say client and I'm going to install a react application to do that of course you can use create react app or any front-end tool but I recommend you to use my GitHub repository and find this branch in this case we won't have to delete any unnecessary files it's going to be ready to use I'm gonna come here copy this URL I will say git clone single branch Branch name here I'm gonna paste this URL Dot and enter as you can see they are here but we don't have libraries yet yarn or npm install and during this process let's check what we are gonna have as you can see this is our home page we can check any category here and we are going to be navigated to this endpoint and we can see any product to navigate between those pages we are going to be using rear cradleton as you can see we are going to create our routes here and for the home page for example we are gonna call the home page component for the products page we are gonna call the product list and we will do the same thing for the single product page so let's install this yarn at we are Groudon and after that I'm going to open my app.js let's shrink this and as you can see it's totally empty there is nothing unnecessary we can directly start our application let's import those components here and we should wrap our application using this router provider and let's create our router I'll say const rather and I will say create rather browser and inside this array We Are Gonna Write Our routes and the first one will be our home page let's say the main URL and when we visit this page let's write here something home page and let's duplicate this products and it's going to be our categories so we can write here any category ID and finally a single page and the product ID see we don't need this by the way I can relate I'm going to open my terminal and start my application I'll say yarn start I shall choose another part that's because I'm using 3000 for this application and it's going to be three thousand one and as you can see it's our home page if I go to products and any category ID here as you can see and single product perfect it works like that so instead of those texts let's create our pages I'm gonna come here and say pages first one will be hope products product let's create our components I will say products Dot jsx I will do the same thing for others okay let's create our functions home page single page and category page okay we can use them here I'm going to call the home page products as you can see it's exactly the same thing okay but there is something important here for the home page category page and a single product page we are going to be using this Nail Bar and this footer so instead of writing them for each component separately we can handle this using reactor to do that we are going to be using Outlet component and we are going to create a layout which includes this Nail Bar and footer and between those components we can call our home page category page or product page you're not going to understand better right now but before let's create our components I will come here and say components new folder will be now bar Hooter and I'm gonna create my functions like that okay let's call those components here and create a layout I'll say cost layout and it's gonna return a main View let's say class name app [Applause] and in this layout we are gonna write another bar footer and between them we are going to be using react router Dom Outlet basically it represents our different pages so we can write here anything we want I'm gonna come here and delete those routes and instead of home I'm gonna call my new layout and I'm gonna create here children of these layout there is a comma here by the way first one will be our home page it's going to be the main URL and element will be the home page let's create other children products and ID products page and products as you can see this is our home page it includes our Nail Bar and footer let's go back to categories as you can see and a single product oops like that it's that easy guys by the way there are many features of the new reaction if you want me to create a tutorial about this rear Crowder Dom just let me know in the comments because it has some awesome features like loader or data fetcher okay I'm gonna close here and let's take care of this Nail Bar first as you can see we have three sections here this left Center and right side we can do this quickly using flexbox if you are watching my videos you already know how to use it let's create quickly I'm gonna close everything here and open up my never let's give a class name here by the way we are going to be using SAS I'm going to open up new terminal here and I will say yarn at SAS I'm not using a plain CSS that because we have many components here and I don't want to give any class name for every single HTML element using SAS will be much more easier so I will say no bar and let's say left Center and right but before those sections I can create here a wrapper that because I'm gonna give some padding here let's see proper and I'm gonna wrap my sections okay we have six items here let's create and as you can see we are going to be using some icons here and for this one and for the right side of course you can use any images but I prefer using mui if you open up mui.com and material icons you are gonna see this page and as you can see there are many icons here we are going to be using them of course to do that we should install mui first let's copy this and paste here and also we are gonna need this Library yarn at material icons okay let me make this bigger and I'm gonna write here Arrow okay we are going to be using this icon for these ones let's copy this let's copy and paste those icons also like that as you can see search icon person favorite icon and this card icon but as you realize we have an image here let's create a folder and store our images there I'm going to open my menu here and inside this public folder I'm gonna say images I'm gonna drag and drop my images as you can see we have two images here this flag and this footer image as you can see it's here so we can use them I'm gonna close and create my first item it's going to be this flag image image folder finally these icon let's copy this and paste here let's see okay icon is here but we don't have our image okay it's here so let's create other items also I will say item USD and same icon here and finally our links to use those links we are going to be using react router Dom let's say new item and inside I'll say link and it's going to be woman we are going to be navigated to products remember it's our category and let's say category number one let's import this link from yatradoodle like that let's see if I click here it's going to open up this category page and let's do the same thing for others men and let's say children number two number three what about this Center is going to be only our logo I will say link llama store and when we click on this text it's going to open up our home page like that okay what about this right side we are going to have four links here and those icons let's create other links I'm gonna copy this item home page about page contact and stores of course we are not going to create those pages but for the UI purpose we are just going to add those links and finally those icons let's create a view here and I will say icons our first icon will be this search icon person favorite icon and finally our cart icon but as you realize we have one more item here we chose the number of the products inside our cart so I'm gonna create different div here first and it's gonna wrap this icon and this span let's say cart icon is going to be our mui icon and finally let's say span and zero for now as you can see they are vertical let's use a flex box and make them horizontal but first I want to give a height for this Nail Bar by the way let's create our CSS file here Nepal dot as CSS our first div which is now bar this one by the way I should import my CSS file here Now power Dot scss okay I'm gonna close my menu and I'm gonna take this CSS file here so we can see better let's say height 80 pixels and inside we are going to be using our wrapper as you can see we can write our items inside its parent and it's the one of the greatest feature of SAS let's give a padding here 10 pixels from top and bottom and turtle from left and right if I say display Flags they are going to be horizontal I'm Gonna Save here and okay left side Center and right side let's separate them I will say justify content and space between as you can see we are separating them like that let's do the same thing for left and right side I will say left Center and right I'll say display Flex like that perfect as you can see they are not centered vertically to do that I'm going to be using align item Center okay and I can give some space between those items so let's say 25 pixels like that and right now those items are not centered let's create here our item div I'm writing this here that because it's not only in the left or right side it's a common class name I'm gonna say display flex and light item Center and right now they are centers okay let's increase those item font size and these logo font size I'll say full size 18 pixels and for the center I'm gonna say 30 pixels it's gonna be bigger and I'm gonna give some letter spacing oops something is wrong here left side oh I said Center of course it's going to be item okay let's enter those items also I'm gonna be using the line item Center and perfect and as you realize we have a default link color and text decoration here let's get rid of this to do that I can create a common CSS file that because we are going to be using those links everywhere let's open up app.js here and I'm gonna create app.scss scss and if you remember we have a class name here we can use it and it's going to wrap all our application here in this case we can use our links anywhere I'll say import app.scss let's say app and I'm gonna say link class name and color will be inherit and text decoration will be no basically we are going to delete those underlines and this custom colors let's use them in our links I'm gonna come here and choose my links and I'm gonna give a class name right now it looks much better so what about those icons let's make them horizontal also I'm going to close here I will say icons display Flags I'm gonna give gap between them and color will be this gray color and cursor will be pointer and what about this cart icon remember we have a div here inside icon steel I can create my class name and let's take care of this plan I will just say span let's decrease this font size I'm gonna give some width and height and it's going to be a circle to do that we are going to be using border radius and 50 percent let's give a background color is going to be this blue background color and text color will be white okay it's here but what I want to do is to move this span onto our card icon somewhere here to do that we are going to be using position absolute in this case for the parents I should keep position relative otherwise it's not going to work and I can give any position right now let's say right -10 and 12 minus 10. and as you can see it's here perfect let's enter this number display Flex align item Center just by front and center it's gonna Center vertically and horizontally like that and nail bar is ready let's take care of this footer let's see what we are gonna have as you can see we have two parts this top section and bottom section and for the top section we are going to have four different columns those links and some text here and for the bottom side we are gonna have two sections left and right let's create I'm gonna close everything and open up footer let's give a class name I will say top button we will have four items and the first one will be this H1 tag and those links I'll just copy paste them there is nothing important here as you can see H1 and some spans I will do the same thing for the second one for the text items we have again H1 tag and span there is nothing different I'm just gonna copy them like that and it's going to be contact and what about this button as I said two sections left and right is going to include our logo and this copyright text and right side will include this image it's that easy foreign which is our logo and one more let's say copyright llama store and this copyright text I don't know how to make this copyright sign so I'm gonna paste here for the right side we are going to have our image image folder payment dot PNG thank you they are here let's give some style for them of course to do that we are gonna create a style file twitter.css let's import by the way and for the consistency I can make this capital f and here okay let's take this here and give some Style firstly I'm gonna give some margin here as you can see we have margin from left and right from top and a little bit for bottom so I'm gonna say margin top right bottom and left like that of course we cannot see our button that because we don't have enough content yet but trust me it works and inside I'm gonna say top bottom inside this bottom remember we have left and right sides and inside top I will say display flex and cap between each item will be 50 pixels let's create our items as you can see our items are not the same size but in our example they are exactly the same to do that we can use Flex here if I say one they are going to be exactly the same size like that let's make those items vertical to do that we can use again display Flags but Flex direction will be cool basically it's going to be vertical and between each item is going to be tampixas by the way I can change this text align it's going to be justify and as you can see it looks much better I want to decrease this font size it's too big let's say 14 perfect and I can decrease this H1 tag also let's say 18 pixels one bit will be 500. and color will be a little bit softer for those pens color will be great okay what about this bottom it's going to be horizontal again display Flags align items justify content space between but I want to give a margin here between this top and bottom so let's say margin top 50 pixels let's make this display Flags align item Center like that and for this logo remember here I'm gonna change its color font weight will be bold and font size will be a little bit bigger like that and for this text copyright I'm gonna give margin left I'm gonna separate them like that and decrease this font size and color will be Gray as you can see this image is too big I'm going to say image height will be 50 pixels okay awesome let's check as you can see it's exactly the same right now we have our common components let's take care of our home page okay let's check by the way I can close them and as you can see we are going to have a slider here let's create I'm gonna close everything and open up my confidence folder and I'm gonna say slider let's create our slider jsx file and CSS file I'm going to create my function and right here a class name firstly I'm going to create here a data which includes three images and we are going to be using them in our slider to do that firstly we are going to create here a container and when we click on those buttons we are going to move this container on the x-axis of course we are going to need a functionality here if you watch my previous video understanding this part will be much more easier I've created this slider using a plain JavaScript we are just going to transform this into a react application it's going to be similar if you think you have some problems with JavaScript I highly recommend you to watch that video you will be able to improve your JavaScript skills and it will help you to understand this video okay that's right here our images first in which will be data and first element of course I should wrap this second image and third image of course at the beginning we are gonna see only the first image it's going to contain all this screen but when we click here we are just gonna move our container and we will be able to see other images let's create those icons after this container I'm gonna say icons we'll have two icons let's import them I don't want to search for every single icon we already have an example here you can see what kind of icons we are going to be using first one will be this left icon and second one will be this right icon let's write them here and the second one East okay of course we should import our slider into home page that's right here a class name home and inside slider by the way let's import CSS files for those pages single product s okay let's import home.s CSS for products and a class name here finally for this one okay I can close everything and open up my slider again let's see right now oops of course uppercase okay let's Cassie our images are here so what I want to do is to give a height for our slider component I'm going to open up my CSS file and I'm gonna say height calculate 103h but minus 80 pixels and which will be full bit like that and let's create our container which will be 300 that because we have three images and I'm gonna make them horizontal let's import this and let's see okay as you can see it's overflowing but because we didn't give any height or width for our images I'm gonna come here and say image this will be 100 VW it's going to contain our screen and how it will be a hundred percent of course if you are using percent you should give for parent also let's see okay and our other images as you can see they look a little bit weird that because we don't have any object with here let's say cover and it's gonna cover our component like that so what I'm gonna do is to show you how we can move our container if I say transform translate X and let's say minus 500 pixels and as you can see we just moved our slider 500 pixels so instead of 500 if I say 100 VW as you can see it's gonna show our second image if I see 200 it's our third image and finally for the zero is going to be the first image again of course we are not gonna write it here instead we are going to be using our jsx file and we are going to make our slider Dynamic when we click on those buttons we are going to be using this transform effects by the way let's move them somewhere here to do that we can use position absolute and as I said if you are using absolute make the parent position relative and after this container I'm gonna say icons position absolute I'm gonna Center this if I say left 0 right 0 and margin Auto is going to be horizontally centered but if I do that as you can see it's still here that because its width is a hundred percent right now if I give here any width for example 100 pixels as you can see it's centered let's make them horizontal okay and I can change this bottom position let's say 100 pixels perfect and for each icon I'm gonna create a border remember our icons are here I'm gonna give some width and height and some border my pixel solids and let's make this gray and I'm gonna Center those icons remember how we are doing this by the way I can give some Gap but if you remember we said 100 pixels I want to change here it's going to just fit our content okay I can give cursor pointer so we can click and that's all of course I'm gonna change this image and it's gonna look better okay whatever let's change our images I'm gonna show you this and I want to create here a used State hook and it's going to provide us which in which index we are on at the beginning is going to be index 0. so we are going to see this image I'm going to say const current slide Set current slide I'm gonna say you stay took at the beginning is going to be zero and we are going to create here our functions when I click on this icon on click event we are gonna see the previous slide like that and when I click on this button we are going to see the next slide let's create them I will say const previous slide and next slide so basically when we click on this button we are gonna decrease our slide number but there is something important here if we are in the first slide it shouldn't be -1 when I click as you can see it's going to last image so I should consider exactly the same thing here when I click on this right button it shouldn't be number three it should be number zero again it's zero right now I will click one two and when I click it shouldn't be three it should be zero and for this one when I click it shouldn't be -1 it will be the last image which is number two okay let's write this functionality I will say Set current slide and I'm gonna write my condition if kernel slide is zero I'm gonna make it two basically the last image if it's not I'm just gonna decrease it current slide -1 of course you can use here previous like that so I will do the same thing for here and I'm gonna check my current slide if it's two it's going to be the first in which if it's not I'm gonna increase this number and right now I can come here and write an inner Style instead of style file we are going to be using our JavaScript file and I will say transform and translate X it's going to be exactly the same thing but we are going to be using this current slide remember it was minus and I'm gonna write here my current slide multiply by 100 VW if it's 0 it's going to be 0 100 and 200 as I showed you here let's save and see I'm going to open my app I will click as you can see second image and third image if I click the first image if I click here the last image it's that easy guys by the way I can give some animation here I'm going to open up container and transition will be for all effects it's gonna take one second and timing function will be peace like this okay awesome so I can close here and let's see what else we are gonna have as you can see after this slider we are gonna have these featured products let's create a new component featured products new file my function and style like that and finally class name okay it's ready let's open up our home page and call it here featured products now as you can see we have two featured products here it's exactly the same component but we are changing this title it's trending and It's featured we can send them using a type here I will say featured and let's create one more and it's going to be trending okay so I'm gonna create here my fake data of course after our API we are going to change it but for now as you can see we have products which have different IDs images title prices and this Boolean here which writes here a new season like that so we are going to be using those properties not before let's write here a top container and bottom container and create this H1 tag and this p-tech I will say top button is going to be H1 tag we are going to write here our type products of course I should take this prop here like that and a random text here I'll just copy paste P tag and this is our text and what about here we are gonna have four different cards here and also we are going to be using those cards for our category component category page as you can see it's exactly the same so we can create our own component here I will say cards I will create them quickly okay so what I'm gonna do is mapping through this data and for each item inside this data we are going to call this card component now say data dot map for each item is going to be card components and we are going to pass this item and remember if you are using map you should write here a unique key and it's going to be our item dot ID each item has different IDs okay let's see we have four cards let's take care of this style and after that we can create our cut I'm going to give some margin here from top and bottom and left and right for the top is going to be horizontal align item Center justify content space between but as you can see they are too close so what I should do is to give different sizes for this item and this item let's check here as you can see this item is a little bit bigger than this item let's use a flex I'll say H1 tag legs will be two units for the P tag Flex will be three units like that and I can capitalize this first letter I'll say text transform capitalize like that let's change this font color it's gonna be Gray okay I have all those cards top is ending here I will say button it's going to display Flags justify content will be Center and let's give 50 pixel space okay of course they look a little bit strange but then we create our cards it's going to be much better by the way I can give a margin here let's say margin button 50. so let's create our cards I can close here and here and I'm gonna take this item firstly I'm gonna create here a link that because when we click on those cards we are going to go to the product page and here I'm gonna write my item ID this product ID let's import this link yeah crowded on like that inside this card let's see as you can see we are going to have this image container and it's going to include two images when I hover over we are gonna see the second image let's create here images or just image and I'm gonna create image and it's going to be main image and number and it's going to be second image let's write here item dot image item dot in which two and after that we are gonna have this title and I'm gonna create here a container which includes the alt price and the current price after this image I'm gonna say h2 tag item dot title and after that let's see prices H3 tag dollar sign and iTune dot old price and the normal price okay images are too big but as you can see our title old price and the new price so let's take care of them by the way I'm gonna give here a class name and it's going to be link and let's open up our CSS here and I'm gonna give a bit first and it's going to be display flex but remember now we are making them vertical Flex Direction column and I'm going to give a gap between them of course we should handle our images first let's come here and say image what was the component name okay image it will be a hundred percent and height will be let's say 400 but I just want to see one image here so I'm gonna say overflow of hidden so we are gonna see only the first image but when I hover over it's gonna show us the second image we are gonna do this part before that's right here image size with a hundred percent right 100 percent so it's gonna contain our parent div and object that will be covered okay they are too small let's increase this okay better so how I'm gonna show the second image here firstly I'm gonna make our images position absolute of course remember position relative for the parent our images positions are exactly the same they start from here and they contain all these container div but as you can see it shows the second image right now if I come here and say main image see index one is going to be over the second image but when I hover over this image container I'm gonna increase the second images the index so it's going to be bigger than first one in this case we are going to see the second image so I will come here image container and I'm gonna write hover when I hover over this it's going to affect our second image and Z index will be two okay perfect it works as we expected so what about those texts by the way I can write here S Pen and I'm gonna write here a condition if item is new actually spam will be here let's delete them and it's going to be new season after those images I can write it here position absolute let's say 5 pixels left 5 pixels I'm gonna give a background color it's gonna be white text color will be this green color let's give some padding inside okay we cannot see that because it's Z index is zero let's make this three so it's gonna be on top of them by the way this top is 50 is going to be 5. okay and I'm gonna decrease this font size and increase font weight 500 and 12. okay perfect so let's take care of our Title Here H2 attack on size will be smaller font weight will be thinner for the prices this container it's going to be display Flex and gap between them and for each item inside one size will be a little bit bigger font weight 500. okay and for this first item I'm gonna change its color and also I'm gonna add this line to do that we are going to be using the first child let's say color gray and text decoration line true like that okay awesome let's check here as you can see it's exactly the same and between those items we are going to create these category components let's do that I'm gonna close them new component here let's say categories okay our function and CSS file is ready let's see what they are gonna have as you can see there is a grid system here of course you can use CSS grid but for the consistency I'm gonna be using flexbox and you are going to see how easy to use create systems using flexbox you don't need CSS Grid at all firstly let's decide what we are going to have as you can see we have three sections here three columns the first one second one and the third one and the First Column has two rows Row one row two and second column has only one row and the third column has two rows again those items and this one and for this row it has two different columns man and accessories so it's all about columns and rows you are going to understand better right now let's create our columns three different columns but for the last column I'm going to add one more class name and it's going to be column large its size will be twice bigger than other columns let's create our rows inside First Column I'm going to create Row 1 row two let's write inside for the second one we are going to have only one row uh for this one we are gonna have two rows and inside the first row as I said we are going to have two more columns and they have only one row and if you are familiar with bootstrap it's going to be easier to understand but if you don't know don't worry as I said it's all about columns and rows just calculate what you have three columns first one of them is bigger than others and for each column just calculate how many rows you have okay so that's right here so six and I'm gonna open home page and between them I'm gonna call this category okay let's come here so firstly I'm gonna make this display Flex and I can give any height here let's say A to B H it really doesn't matter you can get whatever you want for each column I'm going to give some Gap and I can give some margin for this container as you can see there is a space here and let's see as you can see first second and third column and for each column I'm gonna use Flex one but as I said if it's column and large Flex will be two let's give here display flags flags Direction column and gap between each row will be 10 pixels there is something wrong oh it's going to be margin okay perfect it's bigger than others and for each row I'm gonna do exactly the same thing Flex will be one okay and it's gonna be display Flex also and gap between each item like that perfect and let's give our images inside we are gonna have an image for each row I will paste my source here and after this image I'm gonna add a button and it's going to be category name so I can create here a link let's say sale class name will be link let's import from real gradleton and then we click on this we are going to be navigated to products and let's say one for now let's see okay let's give size for images inside row I'll say image with a hundred percent height a hundred percent an object that will be covered so I can do the same thing for other ropes I will just copy and paste them Row 2 will be this image and woman Row three four five and six let's see okay but as you can see it looks strange that because our buttons shouldn't be there they should be in the middle of the parent row to do that I'm going to come here and say position relative that because it's the parent and I'm gonna write here button it's gonna be position absolute let's give minimum width 100 pixels I'm gonna give some height a padding inside and I'm gonna write here my position let's say top bottom left and right and if I say margin Auto is going to be centered but in this case their width is a hundred percent I'm gonna say with fixed content okay I'm giving this minimum width that because if I don't do this as you can see those items are real small to parenthesis is going to be minimum 100. let's say cursor pointer I'm gonna delete those borders I'm gonna say background color white and I'm gonna make them uppercased so text transform is going to be uppercase and front page will be 500. okay perfect but there is something wrong here this image is overflowing overflow of hidden and as you can see perfect so when I click on them it's going to open up our products page by the way there's a typo the first one let's try back okay before this category page what else we have let's check as you can see we are going to create this contact component let's do that quickly I will close them open up my menu new component is going to be contact okay it's ready Let's see we are gonna have a wrapper here that we can give some padding inside and here we are gonna have three items this text this email section and those icos I will come here and say proper plan I've got to copy this text and paste and after that this mail section which includes an input let's give a placeholder let's see enter your email and a button is going to be join us and finally we are gonna have icons and we are going to be using material icons let's import them I will not waste your time there is nothing important here like that let's see of course we didn't import this let's open up home page after these categories or after this product I'm gonna say contact okay let's open up our CSS I'm going to give a background color it's going to be this blue color and font color will be white let's give some padding like that of course it's going to be horizontal to do that we can use our wrapper I created here a rubber that because in our example as you can see we are going to have some space here for the left and the right side basically I can give here a width it's going to be 50 percent it's going to be smaller let's Center this wrapper foreign like that and let's make this horizontal display Flags align item Center justify content space BP okay perfect what about this input I'm gonna give some padding I will delete this border just put a bit long and I'm gonna give all the radius in our example as you can see we have both the radius for this side and this side and this top right and bottom right will be Sharp and we are going to do exactly the same thing for this button let's do that I'm going to open my app here I'll say five zero zero five for our button again 10 pixels font color will be white and background color will be this dark color and or the radius this time it's gonna be zero five five zero and I'm gonna delete its border also okay and for those icons I can give some gap between them I will say icons display Flags cap let's say tap oops it's going to be icons not icon okay and that's all for the home page it looks really nice by the way as you can see it's overflowing because of this slider I forgot writing here overflow hidden let's open up our CSS file and I'm gonna say overflow hidden so let's take care of our category page here let's check so as you can see we have two sections this menu and our content and for this content we are going to have this image and we are going to have product lists of course we will be using our cards here so let's create them I'm gonna close them open up products left and right and inside this left we are going to have three items categories filter by price and sort by price so I will say filter item and three of them and first one will be product categories filter by price and sort by okay as you can see we have two inputs here let's write here input item and it's going to include an input which is a checkbox and I'm going to create a label here it's going to represent our input so let's give an ID here it's going to be one and its value will be 1 and label will be one let's see okay of course it's not one I'm sorry it's gonna be our category name let's say shoots okay when I click here it's gonna choose our checkbox so let's create one more or two more I don't know let's say skirts coats Maybe I'm gonna change its ID like that okay so we can choose any category here and what about this filter by price as you can see we are going to be using this range input again input item and we're right here zero let's say 1000 and between them I'm gonna create an input and it's gonna be range you can give here any number minimum zero maximum let's say 1000 that and finally two radio buttons here so we can choose only one of them I will say input item is going to be input and its type will be radio let's say ID value and I'm going to give a name here it's going to be a common name and let's say price and finally let's create a label it's going to be our input ID and let's say price lowest first and one more I'm Gonna Change here and it's going to be highest first okay perfect and for this section we are going to have this image and a list let's say image I'm going to paste my source and class name will be category image and after that we are going to have a list to do that we can create a new component using this component we can show our cards okay I'm doing this that because we are going to fetch different products according to our filters so it's not gonna be like in the home page so writing time in a different component is a better idea so using this list we can fetch our data but for now we are going to be using again this fake data after our API we are gonna delete this let's see data.map for each item we are going to call our card component and I'm gonna pass my item here and also a key don't forget that item dot ID okay let's import this okay so I'm gonna call this list here and of course we are gonna pass our filters first one will be category ID which is this ID so when we open this page it's gonna fetch our data according to this category ID to do that we are going to be using rear Gradle Dom I will say const is going to be use paramsuk and let's see what we have inside and as you can see it's an object let me zoom in and it includes our ID it shows this because of real graduation so we can use this ID but as you realize it's a string so I should convert this into an integer so I will say ID use params.id and I'm gonna convert this to integer okay right now we have our ID let's say actually category ID and I'm going to create a use State here I'll say const maximum price set maximum price let's say 1000 of course we are going to change it and whenever I change this range input I'm gonna update my maximum price so let's say on change set maximum price and it's going to be event Target and value so instead of this I can write here our maximum value sorry maximum price as you can see it's one thousand and I can change here perfect for this sort closed sort set sort new state at the beginning it's going to be null we are not going to sort anything but when we change here we are going to update our state so I'm gonna say on change event set sort and it's going to be ASC I will do the same thing for other one like that so I can set them using this list component I will say category ID maximum price and sort as you can see they are here and let's give some style I'm gonna open up CSS I'm gonna give some padding here for left and right it's gonna be display Flex oops sorry it's product it's going to be products like that and let's give it for this first item and second item I mean left and right so it's gonna be three times bigger than first one so I will say Flex three Flex one for category image is gonna be a hundred percent otherwise it's gonna overflow and let's give any height here of course object fits and margin bottom will be 50 pixels what about this list let's give display Flex quickly I'm gonna open my list CSS display Flags justify content space between and I'm gonna write here flag strap and it's gonna be wrap so if we add here by the way I can give margin here for our cards margin bottom let's say 50. okay perfect this is how we are using flag strap if I move this as you can see it's only three items two items and one item so it's perfect for creating responsive design by the way there's a warning here that because we are using same key I just copy and paste same items let's delete them okay what about this left side let's close everything here I'm going to open up from scratch and what I'm gonna do here is giving a position sticky for this left side I'm doing this that because let's check our example when I move my page as you can see it always stays here it's not moving to give this effect we are going to be using position sticky of course if you are using position sticky you should give any height here and my position will be top 50 pixels so after 50 pixels it's gonna stay there it's not going to move perfect as you can see also what about those items let's separate them I will say filter item I'm going to give some margin button let's say 30 pixels for titles 400 and again margin button 20 pixels like that it looks better and for each input item input item margin bottom let's say 10. and for those labels they are to close each other I'm going to separate them so margin left let's say that okay let's check as you can see it's exactly the same and what about single page I will click we are here and let's check what we have as you can see again two section left right and for the left section we are going to have two parts those images that we can choose any of them and this main image and after that we are going to create this content let's open up products I'll say left and right and inside this left we are going to have images container let's say image and we are gonna take those images from this fake data let's say image of zero and one so I'm gonna create here an index and when we click them we are going to change the index number and after that we are going to show the main image let's create here main image there and we are going to write here images array but index will come from our use State let's say const selected image for example set selected image new state at the beginning it's zero it's going to show the first image and when I click here on click event is gonna set my selected image and it's going to be zero and for this image it's gonna make our index one and according to this selected image we are going to update our main image let's see as you can see the first image if I click here it's Gonna Change okay let's give some Style I will say product let's give some padding top and bottom left and right it's gonna be display Flex I'm gonna give gap between my items for left and right side let's create my items here left right for the left side we have images container and Main image container let's give Flex for left and right side they are going to be exactly the same width so for X1 Flex one and for the left side this mainly will be five times bigger than these images so I'm gonna come here and say Flex one and flags five let's write here our images a hundred percent height will be 150 and object fits and we can click them so I'm going to write here cursor pointer and I'm going to separate them I can give some margin like that and what about this main image again with a hundred percent and I'm gonna write here a maximum height it's going to be a limit here if it's more than 800 pixels it's not gonna change and object with color of course I didn't give display Flex for this left side landscape gap between them also perfect I can choose any of them it looks pretty nice what about this right side let's see we are gonna have this title price description and we are going to have a div here which includes those buttons and this number and after that this button and other details here let's start and we can check time to time I will shrink this and I'm going to come here and create my title and the title doesn't matter we are going to change this and expand here let's say any price we are going to have a description let's say A P tag I'm gonna write here any random text and what does let's check this quantity container and it's going to include a button minus Plus and between them I'm gonna write here a number let's actually create here a use state and at the beginning it's going to be zero I'm gonna write it here like that and when we click on those buttons we are gonna update this let's say on click I'm gonna set my state I'm gonna use previous minus one if you don't know why I'm doing this you can check my use datehook video I highly recommend you to watch it it's a really nice video that you can see your mistakes and you can learn how to use your state properly and it's going to be -1 let's see I'll click okay but there's a problem here as you can see I can go under zero it shouldn't be like that so I can write here a condition if previous is one is gonna stay at one it's not gonna change if it's not it's gonna be minus one let's see I'm gonna refresh at the beginning of course it's going to be one if I click it's not going under one okay and not us we have this button after this container I'm gonna create a button and let's give a class name and as you can see we have an icon here and we have two more icons this one and this one let's import them I will come here and import and first one will be this icon inside this button and I will say add to cart let's say links container and it's going to include those items to items inside like that and the first one will be this icon and add to wish list and other one this icon add to compare um what about those they are not that important I can just copy paste I think they are just for UI purpose after this link I will paste them as you can see we have some information texts and details texts they are not functional we cannot click on them but it looks nice so let's take care of our style I can make this bigger I'm going to open up right container and I will say display Flex is going to be vertical column and gap between them so we gave space perfect so what about this price there is our item here I'm gonna change this class name because we have mini span I don't want to see any conflict so I'll say price font size will be a little bit bigger I'm gonna give our blue color here and phone weight will be thicker and not about this p-tack it's our description remember one size will be a little bit bigger but front fit will be thinner and text align just fine remember how we are using this if it's a long text it's gonna look better and for this component this container remember Kennedy display Flags align item Center and gap between them we have a button but before let's take care of those buttons I'm gonna give some padding and delete this border let's say 50 pixels I'm gonna Center them and we can click on them and finally portal like that what about this button actually we have a class name here we can use it I'm gonna give with let's give some bedding I'm gonna change background color it's gonna be blue uh font color will be white like that let's enter them Gap to any and we can click on them like that by the way let's enter horizontally also just right contact center perfect I can delete this border and let's give font weight 500. okay awesome what about those links here links display Flags cap like that and for each item again display Flex and I'm gonna Center them a line item Center and space between them okay I'm going to change their color it's going to be blue and font size will be a little bit smaller like that okay what about this information it's gonna be vertical after these links column space color will be Gray one size will be 14 and I'm gonna give margin top that because I'm gonna give some space here and finally those details here actually it's exactly the same thing so I can delete this I think and right here info let's change this HR Tech we have an HR here and inside this info let's take care of this one first I will say 200 pixels and I'm gonna change this border it's gonna be one pixel solid and light gray maybe a little bit softer it's close to White like that and actually I can do the same thing for other HR after this info but I'm gonna delete this with it's going to be bigger okay awesome so one more thing we are gonna need and it's gonna be this cut when I click here as you can see this card component shows up so let's create cut component okay so to open this component we are gonna need a functionality for our neighbor component so let's open up nail bar and I'm going to create here a use statehook I will say const open set open basically we will be able to open our card component or close it back I'll say you stay took at the beginning it's going to be false and when I click on this cut button so click I'm gonna set my state if it's true it's gonna be false if it's false it's going to be true and after that I'm gonna write here a condition I will say if it's open show here card component let's see I will click as you can see it's here I will click and it's gone perfect so let's see what we have we are gonna have this title let's say H1 after that we are going to have this item actually let's take one of these items I'm gonna copy this and paste Here Comes data like that let's take one more okay we can use those I'll say data map for each item I'm gonna create an item div and don't forget writing here item ID and inside we are going to have its image item dot image what else we are going to have those details its title description quantity and price let's say details H1 tag item dot title P attack item dot description but there is something important here this description can be really long but I don't want to show all these text here so basically I'm gonna give a limit here to do that we are going to be using JavaScript substring method and it's gonna take only first 100 characters by the way it's gonna be lowercase okay and price and now I'm gonna write this actually that's right here item dot price and finally this icon I will copy and paste here after this item I'm gonna use this icon let's give a class name that because I'm going to change its font color so let's say just delete actually it's going to be inside this div that because for each item we are going to have this icon and we will be able to delete them and after this item we are gonna have total price button and this text let's say total we are gonna have to spend first one will be subtotal and I'm gonna write here a total price let's write here something doesn't matter we are going to change it later and after this div a button checkout button and finally a span which is reset reset cut okay it's not working that's because we don't have any description here let's create and also you can give here a question mark If there is no description it's not gonna work I'm gonna open back of course image is too big and what I'm gonna do is giving a position absolute for this container and top will be 80 pixels remember this Nail Bar is 8 pixels and right will be let's say 20 pixels because this margin is 20 it's going to be exactly the same let's come here position absolute right 20 top 80 I'm going to give a z index let's say any big number here in this case is going to be the first item we are going to see and let's give background color it's gonna be white I'm gonna use some padding and let's take care of this image quickly otherwise we will not be able to see properly I'm gonna say image let's say 80 pixels it will be a hundred and object fit okay we can see better right now by the way I can give a box Shadow for this item I will just copy and paste you can Google box Shadow generator and you can arrange your own box Shadow and let's take care of this H1 tag first inside card I'm gonna say H1 I'm gonna give some margin button color will be gray font rate will be thinner and font size will be 24 like that and for this item they are going to be horizontal let's say display flex and ion item Center and cap and again margin bottom I'm gonna separate them like that perfect and remember there is a details container here we can change our title P tag and this price team after this image I'm gonna say details its details or detail let's check oops it's never okay details I'm gonna say H1 tag this is our product title remember 18 pixels front rate will be 500. and for the P tag it's gonna be Gray I'm gonna give some margin between top and bottom like that actually let's give only bottom and font size will be smaller and for the price container I'm just going to change its color it's going to be our blue color like that and for this icon remember its class name is late it's going to be just red and I can make this bigger font size and I can click this so I will say cursor pointer and what about this let's check what was the name I will close this now bar okay this div it's gonna be display Flags justify content will be space between so I'm gonna separate them font weights all size will be bigger and I'm gonna give margin bottom so it's gonna give a space between these texts and this button and for this button I'm gonna do exactly the same thing to remember so I will just copy and paste it's nothing different I'll say button and like that perfect and what about this I will say reset color will be red and font size will be small of course we can click and awesome so we have our home page components our cards we can click and see our product we can change image this number we can see our cards and our categories here okay our UI design is ready so let's take care of our backend server let's open an internal here and I'm going to open the API folder I will say CD API and inside this folder we will be installing a strappy application to do that I'm going to open strappy dot IO I will copy this code MPX create strapper app but I don't want any folder I want to install everything in my API folder so I will say dot and enter as you can see there are two options if you choose the quick start it's gonna use an escalate database but in my computer I have a myoscale so I'm gonna choose the custom section we'll be using JavaScript you can choose any database you want I want to use MySQL let's give a name I'll say store I will enter and the username will be root and my MySQL password we will not be using SSL connection for now I will say no and it's going to create our application and after this installation we will see our database here by the way if you don't know how to use MySQL workbench you can watch my MySQL video of course we are not gonna write any SQL code or something but I just want to show you how it creates a database here and how it makes all those crude operation using mysgrad okay it's ready let's start our application I'm going to say yarn and develop oops there's a warning here it says there is no store database I thought it's doing this automatically but we have to do this here I will say create schema and store let's apply okay it's here so I will run back and as you can see this is our dashboard localhost 1337 so let's sign up I will say lamadeaux an email address here and password and let's start and that's all it's that easy guys we have a content manager that we can add our products categories but before of course we should create our tables using this type Builder and in this section we can upload an image there are some plugins and Marketplace that you can find some useful plugins and finally a setting button that we can configure our user roles API tokens and some other stuff here we are gonna see them later on but right now let's create our first table I will create a collection type as you can see by default there is a user collection I'm going to create a new one here and it's going to be products as you can see there is an API ID here which we are going to use as an API endpoint so when we say localhost 1337 API and products it's gonna fetch all data inside this product collection okay I will continue right now we can choose any type here first sum will be our title it can be a short text so let's create others another field this time it's going to be a long text that because we are going to create a description we are going to have an image so I will choose media here let's say image but make sure that you are choosing single media that because we will upload only one image here I will finish another one if you remember we have one more image so I'll say image two single and we are going to have a price so I will choose number and it's going to be a decimal so we can use any number like that I'm gonna use Boolean and it's gonna decide whether our products is new season or Not by the way in the advanced settings you can give any default value I will say false and that's all for now of course we are gonna have our categories and subcategories but before writing them let's create new collections I'm Gonna Save it's gonna restart my application and I will create new collection and it's going to be category and it's going to have a title description foreign we have a category image here let's choose any category here so I'll say image I'm Gonna Save and one more and it's going to be sub categories I'm going to create a title foreign and right now we can create our relationships I'm going to open up products and add another field and here I'm going to choose relation it's going to be our category and you can choose the relationship type here I want to choose menu to many relationship that because our product can have different categories and also a single category can have multiple products I will finish and one more and it's going to be sub category actually let's make them plural is going to be made up to mini and I'm going to choose subcategory here let's change this oh it's plural okay we don't have to change it and let's save let's open up category and as you can see our products is here so we don't have to create from scratch if I open up subcategory products is here so creating tables and relationships are that easy guys you don't have to write any single SQL code strappy does everything for you so I'm gonna create one more relationship and it's gonna be between category and subcategory it's going to be many too many a category has multiple sub categories and a subcategory has multiple categories I will finish and Save and that's all guys right now we can create our first item using this content manager I'm gonna choose here products create new item and I will say test product and description I'm going to choose any image here actually if you have any image collection you can directly drag and drop here let's do that I want to upload everything first I will track and drop my images and we can choose any image right now and I will say upload these images and you can choose any image right now let's choose this one for example I will finish it's here and our second image will be this one let's write a price I'm going to choose a category but we don't have yet let's save this but I'm not gonna publish yet that because we don't have any category let's create I'll say woman category I can choose any image here I didn't prepare anything but let's choose any image for now I will save and publish let's create others I'll say man and category any image here and save and publish okay 12th time is enough let's create some subcategories I will say hat and it can belong to man or woman I will save and publish another one let's say t-shirt foreign man or woman and last one it can be sweet and its category will be only men okay I can change my test product the category will be woman and the sub category will be t-shirt okay so and publish okay guys we have created our first project using a category and subcategory and we don't have to handle any authentication we don't have to care about any route any controller everything inside this dashboard let's create another product I'll say actually let's choose our Image First it can be this hat another one foreign hat let's give it price is new will be true for example and the category will be woman and sub-category will be hat I will save and publish okay right now we can use our backhand API to do that I'm gonna open up settings API token section here and I have to create an API token otherwise I will not be able to reach my tables and items I'll say create a new API token I can give any name here my API you can give in a token duration here it's going to be Unlimited and here you can customize your token type it can be only read only API and it's great if you are only fetching data but in our application if you remember we have a payment Gateway here so we have to create some orders after this process so basically it's not going to be only read only so I will say custom if you are choosing custom you should come here and choose your security rules for example for category it's going to be only find or find one we can fetch all categories or we can fetch on a single category but we cannot create update or delete any category using an API I will do the same thing for products of course it doesn't mean you cannot create or delete any product it means you cannot do this using API you have to come here in your dashboard and create in this panel subcategories it will be the same and that's all I will save and as you can see we have an API token here let's copy this and I'm going to open my react application and I will create an EMV file here let's see Dot eme react at API token let's paste it this is a secret key that's why we are using emu file you shouldn't reveal your secret keys in your application you have to create an emu file let me close this and those files actually we should create one more thing here and it's going to be our backhand API URL I'll say reacts app API URL and it's going to be localhost 1337 and API basically this is going to be our endpoints when we want to fetch our products it's going to be like that we can fetch any single product like that and I'm gonna show you how you can filter your items using this filter parameter but we are going to handle them later let's delete here I'm going to save and let's open our terminal I want to restart my application that because we have changed our emu file okay I can close here it's already here and let's try to fetch our first data but we can fetch let's come here we can fetch these featured products for example by the way in our products I forgot creating this field let's add another field here and it's going to be enumeration basically it allows you to create some options and the value of this field can be one of these options let's say type and it can be normal products featured products or trending products I will finish and Save let's change one of our products I'm going to open content manager products and I want to change this one its type will be featured products let's change other one test products and it's going to be let's say trending okay right now we can fetch our data to do that we are going to be using react axios let's create another one new terminal CD clients yarn at axios using this Library we are going to be using our backend API I have hatch data and also we have to send our token secret and using axios we can do this easily you are gonna see right now I will close here and let's open up our home page okay as you can see we have this component and we are going to fetch our data using this component featured products okay right now I can delete this data but before let's see how we are going to use axios and fetch our data to do that I'm going to create a used State here let's say products set products few States and at the beginning it's going to be an empty array we don't have any product yet but when we visit this page we are going to call this use effect and we are going to fetch our data of course you can use react query or some other libraries but we are fetching only data we are not going to use any post methods so we can use use effect here we don't need any Library so I will say const patch data it's going to be an async function I'll say try catch block if there is an error we are going to write it on the console of course we are going to change it later and let's fetch our first data I'll say cross data await and axios it's going to be a cat method and I will use my ADD Point here it's already inside our emu file remember so I'm going to be using process emu file and react app API URL that was the name let's check okay API URL and we will need this token I will copy and I'm gonna set this as a header property and this property will be authorization and I'm gonna write here better and I'm going to use my eme file react app API token this is how we are fetching data using strappy don't forget this is important you have to send this header otherwise your API is not going to allow you to use your items okay let's import this axios from axios and let's see what we have here I will say console log data and of course I should call this fetch data function here I should write here my endpoint and it's going to be products so it will fetch all products let's see I'm gonna open my console and there's an error here and it says it's forbidden let me make this bigger as you can see it's not allowing us to use this API there must be something wrong of course it should be headers I should write first headers and inside this object it will be authorization let's try and right now as you can see it's successful and we have a data here and inside this data we have our pagination details as you can see it says there is only one page and it's fetching maximum 25 data per page of course we have only two data here let's see first one and it includes its ID and its attributes which includes every detail of our product everything is here title price description so we can use this data and change our cards let's do that we don't need this data anymore I can delete I can actually make here data and I can set my data here set data is going to be response data dot data oops it's gonna be response okay right now we have our products and we are sending it to our card component like that if I do this as you can see they are gone but we can see that we have two items here let's open up card component and I'm gonna make some changes here firstly it's gonna be item dot attributes dot is new and as you can see our second item is new I will copy here and change this title and its price as you can see they are here we don't have any old price I can do it here or you can say if there is a all price write it here if there is no old price use the normal price and add it here maybe 20 more dollars I know this is strange but everybody knows every brand uses this tactic okay what does we have an image here but there is a problem not because by default it's not sending our images here if you want to see your images your media you have to come here and say a query here and it's gonna be populate and all like that right now let's see data right now as you can see our image is here and it includes a data folder and inside this data folder we have image ID and its own attributes and we are going to be using these URLs of course to usds URL we are gonna need our strappy URL which is localhost 1337 let's write this into our emu file API URL and it's gonna be let's say upload URL let's restart our application and right now we can use those images here so I will say item dot data dot attributes dot URL of course it's gonna be image and I will do exactly the same thing here and to see those images we are going to be using our emu file process here we react app [Music] laud URL of course there is a DOT here thank you let's copy this paste here and let's see as we can see there is an error here oh I forgot here attributes I know it's a little bit strange but this is how it works as you can see they are here perfect actually I can give here some question marks in case of doesn't have any image or something foreign but as you realize we have exactly the same products here but how we are gonna filter them if you remember one of our product is trending product and other one is featured product to do that we are going to be using strappy filters let's open up our documentation here we are using a rest API as you can see this is how we are using our endpoints to fetch data or to use post put or delete methods and we have a parameters here and as you can see we can filter our data let me make this bigger I will zoom in a little bit okay and this is how we are filtering our items we will write a query filters key and we are going to write our field in this case it's going to be type and it's gonna equal we are going to be using equal operator here and value let's do that by the way we can use equals less than is going to be really useful for our application because we will compare prices contains null not now between and also we can use or and and operator we are gonna see them later first let's create our first filter I will come here and if you remember we have a prop here which says our type we can use it I will say one more query is going to be filters I'm gonna write here the field name it's going to be type and equals our type prop to do that we can use here back take it's going to be easier and I'm gonna pass it here I will say type and right now as you can see there is only one product here and if I scroll back as you can see this is our second product perfect it's that easy guys and we are going to be fetching our products for this featured product page category page and a single product page so writing this use effect for each page is not a good idea what I'm gonna do is to create a use fetch hook here I'm going to create a new folder it's going to be hooks it will include our custom Hooks and I will say use fetch let's create a function here use fetch it will be async and we will be sending our add Point here and using this URL we are going to fetch our data let's copy this paste here and I will create my use state const data set data it can be empty array or you can write null whatever you want and two more is gonna be loading and error and at the beginning there are going to be false and we are going to change them here let's use axios actually I can also create another file for this axios and we can create an axios instance what I mean by that let's come here and say make request dot JS I will say export const make request we are going to be using axios and I will say create and here I can write my base URL so I don't have to write this process eme and API URL for each time basically we are going to be using these base axios instance and it's going to automatically write this data and headers authorization barrier and our API token by the way it's going to be colon of course and that's all so we don't have to write the same thing again and again I will come here and instead of this axios I will say make requests let's import from make request.js so we don't need this URL anymore it's gonna be the URL which we are gonna send here and before starting this fetching process I can set my loading State it's going to be true and after this operation is going to be false and I can set my error here set error is going to be true and the dependency will be of course our URL and that's all let's send our data I will say we turn data booting and error and also I'm gonna return this use fetch hook and it's going to be export default let's use it I hope everything is okay I can delete here foreign State and I will say const data loading and error take this from use fetch hook and send here our URL and it's going to be products populate and our filters type equal and this type I will make this package so I can delete this axials use effect and State and I can use this looting I'll say if it's looting right here and the loading component or just this text if it's not use this data it's already in our make request function we don't need that of course okay still not here okay copy and paste as you can see is not a good idea so I will create from scratch we have data loading error at the beginning it's now false false I will say use effects we will call these use effects whenever our URL changes oh I get the reason I think this is this async it shouldn't be there let's take this back we already have async function here we don't need that and right now it's here okay it was just a silly mistake so I can close here and I can use this error also I will wrap here and I will say if there's an error right here something went wrong or you can show your error message if it's not show our data okay so I can do the same thing for this category section as you can see there's an error that because our list is using still this dummy data we are going to change it so let's come here and comment this out for now like that okay as you can see we have some categories here what I want to do is to fetch my sub category according to my main category this is our main category ID and in our application remember its ID is 1 and it means we are in the woman category and using this ID we can fetch the subcategories let's do that I will delete here and I'm going to open up the category page products const data loading and error I will say use patch hook and I'm going to send here my endpoint which is sub category like that and I'm gonna be using filters categories field and it's a relationship it's not a text so we can use its title its category ID and in our application we have a category ID here we can use it so I will say categories and its ID will be equal to this category ID of course I will use backtick let's see and it's not going to be slash it's going to be question mark it's a query let's see and they are here hat and t-shirt so we can use them here I can delete those items and I'm gonna map through my new data for each item I'm gonna call this input item container like that and instead of this label I will say item dot attributes dot title and they are here and there's a warning here we should use a unique key I'll say key iTune dot ID and let's change this value is going to be item dot ID and I can do the same thing for this ID and html4 okay but now we can choose any ID here any subcategory ID to do that I can create new view State here and it's gonna be select it subcategories and set selected subcategories and at the beginning is going to be an empty array I will say use State empty array and whenever we change this input we are gonna set our state here let's do that I will come here and say on change and let's give a function handle change let's create this function const handle change of course we are gonna need events here and we are going to try to take this value I'll say const value events Target and value and also we should check whether this checkbox is checked or not like that that because when we check an item we are going to add this category ID inside a list and when we uncheck we should delete this from our list this is why we are using this checked let's say is checked actually that because it's returning true or false and I'm gonna set my subcategories I will say if it's checked right here selected subcategories and add here our value if it's not okay I'm gonna filter our selected subcategory item and it's going to be not equal to Value let's try I'll say console log select it subcategories as you can see it's empty I will choose here one one and two subcategory IDs I will uncheck as you can see it's only one perfect it works so we can send this information to our listive this component here remember we are sending our category ID maximum price and sort and also we will send this selected subcategories actually let's just say subcategories and that's all let's take it here maximum price and sort and we are going to need this category ID that because at the beginning we are graph hatch all products according to this category ID let's do that I will actually copamp paste here and we are graph hatch all products I will delete here and we are going to need our images and I will use filters I'll say categories and its ID will be this category ID let's send this data right now I'll say including show here this loading text if it's not show my data okay they are here perfect so how we are going to filter our items when I choose this hat this subcategory we should see only this product so what I want to do is to add here another filter unfortunately we cannot send an array directly using strappy instead as you can see we are sending our item one by one using filters it tries to find multiple restaurants with those IDs and sending them like that instead of using an array but anyway it's not a problem we can do that so what I will do is using a map here I'm gonna write here subcategories and map and for each item inside we are going to create a new filter let's say filters of course it's going to be and and subcategories let's check what was the name products okay with underscore it's correct and its ID will be our item which is our sub category ID I will save I will click here and as you can see only heart if I click here t-shirt if I take this back only t-shirt perfect and other filters for example this price if you remember there is an option to use here we are going to be using less than or equal to it's going to be our maximum price let's do that so I will come here and say one more filter price and it will be less than or equal to our maximum price let's see I'm gonna change this as you can see Zero and they are here okay of course using this price range like that is not a good idea it looks awesome but if you have thousands of products it's gonna make your application really really really slower what you can do you can create here a button you can change the size this price and when you click on that button you can re-fetch your data but if you have just 20 30 products using this like that is not a big deal okay one more filter here and it's gonna be lowest or the highest price to do that we can use sort methods it's here sort and pagination as you can see we will be using this sort query and we will be passing our field name here in this case it's going to be price and also we can send those parameters for the lowest or highest prices let's do that I will see sort is going to be price and I will write here my sort prop if you remember this had this state using those inputs so we can use them here let's see lowest first as you can see it's here highest first and that's all perfect if you find this query a little bit confusing you can also use any Library let's check here what was that Library I don't remember okay this Library basically it allows you to create filters objects instead of writing them as a string you can create an object and send it here it's gonna look much cleaner but this version is also okay it's not a big deal and foreign that's all for here let's fetch our single products using this ID we can fetch our product let's do that I will copy here let's delete this console log and I'm going to open my product page let's come here we don't need those images use patch hook let's play it here it's going to be products and we are gonna send here our product ID but we don't have yet that's a const ID is gonna be use params and our ID let's set this here instead of those images I'll say data attributes by the way don't forget writing here populate otherwise it's not going to affect your images dot image its data attributes and URL there is a typo let's give our question marks and use it here and it's going to be image 2. let's wrap this component actually I will say if it's loading right here loading if it's not write this left and right component of course we should use here react fragments that because we have multiple items here like that okay so what about this main image as you can see we have selected image here so instead of this number I can write here image and it's gonna show us data attributes and we are going to change here it's gonna be dynamic to do that I will just use an array and it's going to be selected in which of course let's select this question mark so if it's image is going to show the first image and then we click here we are going to set this selected image to image tool and when I click here it's going to be image back let's see of course I forgot writing my upload URL let's copy and paste and here perfect if I click as you can see it's choosing the second image oh so let's change towards information I will copy here it's gonna be title price description and that's all okay so what I want to do is to add this product into my cart to do that we are going to be using react Redux we are going to create a card state which includes those products of course at the beginning it's going to be empty and when we add any item we are going to pass it into that products state and also we will create those plating and resetting functionalities let's do that actually I'm going to come here close everything and I'm going to create a folder and it will be Redux so inside this Redux we are going to have a cart reducer and also we are going to have a store here basically we are gonna store here our card details and using this reducer we will be able to add any new products or delete or reset to do that I will open Redux toolkit website and in the documentation let's see how we are going to install this we will use this Library of course we need Redux first I'm going to open my terminal I will say yarn at retax and Redux toolkit and after that let's check what's inside as you can see we are going to create our storage like that and we are going to pass here our cart reducer now we are going to wrap our application using Redux provider it's going to come from react Redux yeah at react relax and we are gonna send our storage using this provider in this case we can reach this card store in any component in our application let's do that I will come here and open up my index.js and wrap my application using provider and I'm gonna pass here my store and let's import this and that's all but what we are going to have inside this store basically we are going to create here an initial State and it's going to input our card products at the beginning it's going to be empty as I said and we are going to create our actions to add new item delete or reset let's do that as you can see this is how we are creating our our reducers let's copy this and you are going to understand better right now and I'm gonna change its name let's say card slice and its name will be cart and as you can see there is an initial State here I'm going to delete this and I will say products and at the beginning it's going to be empty and using these reducers we can create our first action and it's going to be add to cards basically using those actions we can change our state here and in this action we are going to add a new item to take this item we are gonna need our action here basically we are going to use this action in our products page and we are going to dispatch this action by sending this product and we are going to take that product and add it here so I will see States dot push action and payloads but there's a problem here if I add the same product again and again it's gonna keep adding those items like a different product to prevent this I'm gonna write here a condition firstly I'm gonna check whether we have this item in our products if you already have we are just gonna increase its quantity if we don't have it we are just gonna push let's do that I'll say const item we are gonna try to find it we are gonna check our state and products and find I will say look each item and if item dot ID equals our payload ID action dot payload ID it means we already have this item so let's write here a condition if there is an item take this item and increase its quantity I'm not gonna say one that because we can add multiple items here so I will say action dot payload dot quantity so if we have it inside our card when I add this it's gonna be five and if it's not we are just gonna push it by the way guys if you are using a plain Redux you cannot push your items directly like that or you cannot change your object property like that but Redux toolkit is using a library called immutable.js This is how we can do it like that and it's the one of the best feature of Redux toolkit it makes everything much easier okay if you want to you can watch my Redux toolkit video by the way if you are not familiar and that's all for this action let's create the second one and it's gonna be remove item again we are going to take an action and we are going to send a product ID as a payload for example when I click on this button we are gonna send this product ID as a payload action and we are going to filter our products let's do that I'll say state DOT products and it's gonna equal state DOT products dot filter and I'm going to check each item and item dot ID will be not equal to action dot payload basically we are going to delete this item and last one reset cart basically state DOT products will be empty again so we don't need any action payload okay right now I can send here my actions add to cart remove item and preset cut and remember our slice name is card slice and we are going to return our reducer here so we can use it in our store so if I say cards equals cart reducer in this case we can reach this products array everywhere in our application let's try I'm gonna open the card component and right now instead of this data we are going to fetch our store to do that we are going to be using use selector hook I'll say const products which is our state and I will say use selector hook and we will take the state the common state this is our state if I say State DOT card we will be able to reach our reducer and if I say cart dot products I will be able to reach this data so I'll say state DOT cards dot products let's import this use selector from react Redux so I can use it here as you can see it's empty and let's open up product page and try to add item into our cart okay I'm gonna write here click methods and here I'm gonna dispatch my action to do that we are going to be using use dispatch hook I'll say closed dispatch use dispatch it will come from react relax and using this function I can dispatch my action which action I will dispatch it's gonna be add to cart let's import and remember we are sending action payloads and it's going to be our product information ID will be data dot ID title description I will send image let's send the first image data attributes dot URL and finally its price and one more thing we will send and it's going to be this quantity we can send it directly like that because we have you state here we are changing it and let's see I hope everything is okay I'm going to open up my console and here I will choose Redux extension if you don't have it I highly recommend you to install I will click here there is something wrong I said state DOT push it's going to be state DOT products push and as you can see we just call this action and right now our product has changed and we have an item right now let's see as you can see it's here perfect of course we cannot see our image because we don't have process eme like that perfect if I add more item as you can see it didn't add our item back instead it just increased its quantity it's not one anymore it's five of course we didn't write it here let's change it's going to be item quantity and here okay what else I can do I can calculate this item I'll say const total price at the beginning is going to be zero and I'm gonna map through my products and I'm gonna increase this total number any scrubby item dot quantity multiply by its price and finally I'm going to return this total but if you remember we are using a decimal here to prevent any conflict if you do that you can see many characters after the dots to prevent this I'll just come here and say to fixed it's going to be only true number after dots let's use it here let's add to cart okay it's not showing something is wrong I gave here exactly the same name let's say total price and it's going to be a function of course and like that as you can see after dot it shows two numbers and let's add other product here this one foreign so what I want to do is when I click on this button I want to call the delete method let's come here and find our icon it's here I will say on click event and I'll say dispatch and remove item and we are going to send our item dot ID of course we don't have this patch let's do that I will just copy and paste from here foreign you can see our action here let's do the same thing for this reset cards I can copy here and paste and it's going to be reset cart and we are not gonna send any payloads let's do that I will click and perfect it works as we expected by the way I can increase this number let's copy this and open up nail bar I will import and I will say products dot length okay one item if I add one more item like that it's not going to increase because it's exactly the same product if I add this one and as you can see it's two okay awesome so we have finished the main part of our application we can fetch data we can add them to our cart by the way I forgot to purchase my items if I refresh the page as you can see it removes all those products to prevent this we are going to be using Redux persist Library let's import this and as you can see we are going to make some changes in our store we are going to give some configuration here and using this configuration we are going to create a new reducer new persistent reducer and we are going to store this in our storage let's do that I will copy here and let's paste like that I want to leave this card reducer let's delete this root reducer and app you don't need them we are gonna wrap our app using index.js and we don't have any other reducer we can drag the pass here our cart reducer and we are going to be using this in our index file I will say exports and let's open up index file and I'm gonna pass this process gate and wrap my application using this gate and it's going to load our previous data we can write here any component I will just say loading and persistor will be the processor that we have exported let's see it says we couldn't export our storage okay I will say export store there's a problem here and it says there is no products that because we are not sending our cart here I'll say cart is going to be persisted reducer right now we have our cards let's see I'm gonna add this product I will refresh the page and as you can see it's still here also I can play item reset card it works perfectly okay right now only thing we should do is using stripe payment let's open up stripe.com and its documentation and I'm gonna click here my dashboard of course you have to be logged in first if you don't have any account just create and after that you are gonna see this page as you can see there is a secret key here we are going to use this key in our backend API to make payments but first let's come here and create one more call Action here and it's gonna be order and it's going to include a customer email and we will add here stripe ID after a successful payment we are going to store its ID here let's say long text in any case and what else we can add you can add whatever you want you can add your product ID for example or directly you can add products let's do that actually another field and I'm gonna choose here JSL format so we can send our product title description or whatever we want and its name will be products okay I will save and we are ready let's open up this documentation here and I'm gonna search for prep build checkout page as you can see we are going to use something like that when I click on this button it's going to redirect us to this page and we will be able to enter our information and and make our payment to do that we are going to need a backend server that because we have to validate our payment you cannot do this using only front end it should be secure so I'm going to choose here no chairs and it shows here an express application but we already have an back-end server so how we are gonna use it basically we are going to be using our strappy API and if you look at this Source folder you are gonna see this API section and inside we have our table names and inside them we have controllers routes Services it works like an Express server so if you want to make any complex operation we can use its controllers and we can write additional functions like what we are gonna do right now let's open up controllers and here can be a little bit confusing that because normally we are making our crude operations here but the payment operation is really important we have to do this in our backend server so basically first we are gonna make a stripe payment using this session by the way it's too big we are gonna create Skype session and we are gonna send our items their prices quantities whatever we want also user information and after that if everything is okay we are gonna take this session ID and products and add them into our order table here let's do that firstly I'm gonna open up this emu file and I'll see start key and just copy your secret key here and paste like that and I can call this drive function right now let's see what we have as you can see stripe requires stripe of course we have to install this first I'm gonna open up new terminal here CD API yarn at stripe and after that we are gonna call this stripe function there is our order here I will close everything here actually okay let's paste it here and it's going to be process yeah we and stripe key and as you can see there is a core controller here which handles our crude operations but I want to create here one more function so whenever we make request it's going to call this function also we are going to take strappy here and I will say async function because we are going to add a new data to our DB create context of course we should return this like that and I'm gonna take my user information first I'll say closed user email and our products you can take whatever you want user address any information but remember we have this email and products and we are going to add this stripe ID later and it's going to come from request and body if you are familiar with Express server you already know and after that I will create here a try catch block and we will make our payment if there's an error we are gonna send it as a response I'll say context response and the status is gonna be 500 server error and we can send our error okay so let's create here a stripe session we are going to be using stripe and check out and create a session let's check here as you can see we are creating a session mode will be payment and if it's successful we can send our user any page in this case it's going to be our localhost and 3000 and you can create here any success page but I want to just use my home page maybe we can write any query here let's open up our eme file and I will say client URL and it's going to be http localhost 3000 let's use it first has Dot eme our URL and if it's successful we are gonna see this query here is going to be true if it's not it's gonna be false okay and that does as we can see we need a line item array here which includes our price quantity and also we can send our product data we are going to need that data that because when we click here as you can see it shows our product name so what I want to do is to create here line items I will say 08 and I'm going to be using promise all that because we have more than one product and for each product that we sent we are gonna try to find the product in our DB of course you can directly write here these products and their prices their names but it's not a good idea that because user can change this price never ever use a client-side price you have to find the item in your DB first and after check its properties so I will say oh wait strappy and service I will say API product just like here and which request we will make is going to be find one it's just like mongodb and I will pass here my product ID I said weight is going to be async and I will move this here of course like that and we are going to be returning a function basically for each item that comes from front end we are going to search for that item in our backend let's say const item equals weight and this finding operation and after finding our item we can use its price its name its price whatever so I will return a price data let's see here as you can see inside this price data we can send any currency we can send our product information like their names we can send our price like that and after this price data we can send our quantity and many things here stripe is a really complex API it's not hard it's a great documentation here but it has many features so if you are struggling to understand here don't worry it's totally normal just use this documentation and get help when you need okay I'll say price data I will send currency it's going to be USD I'm gonna send my product data for example its name is going to be item dot title remember we are storing this like that and we can send unit amount and it's going to be item dot price multiply by a hundred you have to write here a hundred that because by default Skype take your amount as I sent so you have to multiply this by a hundred and after that we can send the quantity and it's going to come from our item dot quality okay by the way I said product is going to be item of course let me shrink this and okay it looks okay we can send these line items right now it's gonna be like items and line items and we can ask for any shipping address not because we are sending some clothes I will say pink address collection and we can give here any allowed countries so if you are not sending your products worldwide just right here the country code like us or Canada whatever you want and finally I'm gonna send here to payment method and we are going to accept payments using only credit cards and also we can send here if everything is okay finally we can write this information to our database so I'll say oh wait strappy I'll say service I will do exactly the same thing but this time it's not going to be find one instead we are going to create a new item I will say API order create and I'm gonna send a data here and it's going to be the products and not what's the name foreign ID actually we can delete this email if we have this stripe ID we are gonna already see all user information in our stripe dashboard we don't need that we can just check the stripe ID and according to this ID we can check our orders here so we don't need this email will just send products and stripe ID is going to be this session and its ID and finally if everything is okay if there is no error we are gonna return a response and it's gonna be stripe session and session I hope everything is okay let's check our card component and for this button I will say on click methods handle payments I will create this function and I will make a request here I'll say catch if there is any error you can show it in the card component or just console log and it's going to be an async function so let's see how we are going to use our stripe method here okay it's here okay this was our backhand and for the front end we are using react let's see okay it's not here let's search for react application so we are gonna need those libraries first let's copy and paste them I'm going to open the client-side yarn at stripe and after that we are gonna load our stripe provider and after that we are going to be using our public key remember it's here this publishable key and finally we are gonna make backend server request and if everything is okay we are going to go to start payment page actually let's call this here and I'm gonna change this publishable key you can share this anywhere it's not a secret key don't worry about this and right now I can call this promise here I'll say oh wait stripe promise I can create here stripe and after that I'm gonna make my request I'll say const response we are going to be using axios make request function but this time it's going to be a post method our endpoint and remember we are sending our products if you want to you can create here a form input and send the customer information like mail or shipping address but we don't need that as I said we are going to be using stripe dashboard we don't need to store them okay and after this I'm gonna call stripe and redirect to checkout page and we should provide here a session ID and it's going to come from our backend server data and what we are sending let's remember we are sending this stripe session and we are going to take its ID and if everything is okay it's gonna redirect us to Our Success page let's see I will click oh that because in our application remember we have a API settings here by the way there is a problem here oh I used the same name let's say products using this product and its ID we are gonna find our item and using this item remember it comes from rdb okay we are using this item let's start I'm going to open settings API tokens and if you remember we are using a custom token type so I have to come here and give a create permission I will save let's try foreign I forgot here the second column and let's check here okay it's correct and let's check one more time if everything is okay or not okay I didn't use await here Skype checkout and sessions order and I'll click and it redirects us to stripe page as you can see our product title it's quantity its price and the total price as you can see there's a email section here shipping address without them we cannot make this payment let's write here a fake data and test our application and a shipping address here foreign okay for this information let me make this bigger you should write here 42s and any future date like that and any three numbers I will pay as you can see it's successful and it redirects us to our success page as I said you can create any component here and let's check our dashboard here and as you can see the price is immediately here of course I'm using different currency but our payout is here perfect of course it's a test data we didn't send or take any money but in the real world project it works like that okay awesome let's check our API here order and as you can see we have stripe ID that we can check in our dashboard and we can see what the customer actually ordered and that's pretty all so what I want to do is to deploy this application into a hostinger premium hosting and deploy this strappy application into our backend server let's close our applications and for the react application I will just say npm Round field and it's gonna create our application static files in this folder as you can see it's ready we have our images JavaScript and CSS files and index HTML here so I want to take all of those folders and files and move into my hosting server as you remember I mentioned this file manager I will click here and there is a public HTML here I will click and this is our default page let's check our website as you can see this is the default page I will just delete this and I'm gonna drag and drop my folders and files and it's ready let's check and it's here of course we are not connected to our backend server we are gonna change our EMV file later that because we don't have a backend URL yet but when we create our server we are gonna write it here but basically this is how we are creating static web applications so what about our backend server let's come here and check our VPS here so let me show you how you can install Ubuntu in your VPS server I've done this before to test my account but I will do everything from scratch I'm gonna delete everything and install back so what I want to do is to choose this operating system and here you can choose any control panel like Santos cyber panel direct admin or plask but I recommend you to use a plain operating system only Santos or only Ubuntu that's because we are gonna install nginx for our servers and we are gonna do everything manually so I will come here and choose Ubuntu the latest version and if you haven't installed before it's gonna write here install the operating system if you have already created and if you want to change your operating system just click here so it's gonna delete everything and install back as you can see it's gonna take a while and after that we are going to deploy our application and during this process let me show you which documentation we are going to follow it's in our GitHub repository just find my repository is going to be in the description below and find this Branch man deployment and it includes everything you need to know about VPS servers you can deploy your react applications in your node.js application like strappy Express server whatever you want and if you didn't watch my VPS deployment video I highly recommend you to watch it because I'm not gonna explain everything from scratch in that video I've explained how to create VPS server and in this video I'm just gonna follow this documentation I will just make some copy pastes let's see okay it's almost ready the first step is to connect our VPS server to do that I'm gonna go to overview and as you can see our VPS server is running I will click here and this is our dedicated IP address if I try to reach this address as you can see it says we are using Ubuntu and Apache server so this address will be our backend server's address of course you can use any domain instead of this IPA address but we don't need it yet using this address is totally okay if you are using Mac or Linux only thing you should do is using your terminal if you don't have if you are using Windows you have to use this software to connect your VPS server as I said you can watch my previous video about VPS server I've used Windows operating system in that video but right now I'm gonna be using my Mac so I'm going to open my terminal okay the first thing I should do is to create an SSH key I'm going to create this key you can give any password here or you can leave just empty doesn't matter and it generated a key right now I'm gonna copy my key using this code and I'm going to open hostinger panel and here I'm going to choose settings and SSH keys I'm going to add you can give any name doesn't matter and I will paste my key as you can see it's here after adding we are ready to start let's clear here and after that I'm gonna say SSH root and my IP address here SSH root and IP address I will say yes and right now we are into our VPS server okay so the first thing I want to do is to delete this aperture server that because we are going to be using nginx server let's do that firstly I'm gonna stop my Apache server I will disable and finally after disabling I will just remove it like that I'll say yes and I want to delete all Apache dependencies using this code and after that I'm gonna update my Ubuntu server everything will be up to date it's going to take a while and as you can see there is a folder here and this folder is where we deploy our applications let's open up I will say CD wire and www if I say LS as you can see there is a file here basically this is the home page of our VPS server but we don't need this anymore we are not gonna show anything here so I will just remove it and after that we can create our nginx server the reason that we are using nginx server because our backend server is using different port number if you remember it was localhost and this port number but we are not gonna use it in our server like that it's not a secure way to connect your API basically using nginx server we are gonna create a gate so even if we write here a plain domain name or IP address we will be able to reach our applications we should create a firewall I will enable and this is going to be our security rule okay and those folders are where we are going to write our server configurations as I said writing those server configurations we will be able to reach any port number using any subdomain or any subfolder this configuration is the most important part of nginx so let's delete those default configurations all right now we can create our own configuration I will copy here as you can see it says Netflix that because in that tutorial I've just deployed a full stack Netflix application but in our case we can change here it can be API or whatever you want that's a API this is going to be our location where you want to see our application in this example it was a react application and it uses domain URL and for example for the backend server as you can see its location is API so basically you can use any subfolder or subdomain in my case I want to use just the main URL let's copy here and paste and I'm Gonna Change here we don't need any root file we are not running any index file I can delete them or here but I want to write here a proxy pass and this is going to be our admin panel address localhost 13 and 37. we are using this address that we calls by default strappy using this I can write HTTP also like that so I'm gonna save this file Ctrl s and Ctrl X and right now I can upload my files to do that I'm gonna create a new directory here it's going to be API and in this directory we are going to create a strappy app of course to run this application we are gonna need node.js by the way I forgot this line we have created this file but we don't have enabled sites and this code takes everything inside this file and pastes here so I'm gonna paste oops it's gonna be of course API okay let's clear here actually and as you can see I've just tested here any index HTML file but we don't need that I just want to install my strap application and using a node.js we are gonna run our application let's install this node.js and I'm gonna install npm and right now we can create a scrappy app to do that you can install your existing application or you can create a new one but remember if you are using any database different than sqlite database you have to install it to your VPS server first so I want to create my strappy app from scratch I'm gonna copy here and paste and I'm going to install everything in this folder let's quick start by the way if you already have an application in your GitHub repository firstly you can install git and clone your project into your VPS server after that you can install libraries using npm install okay it's ready but it's not our local server so we are not gonna run this right now I want to make some changes first I want to change some configuration in my server.js let's open up config folder and let's see okay server jazz is here I will say Nano server.js and I'm gonna write here my new URL I will say URL and let's check our IP address and I'm gonna pass it here basically it's going to be our home page I will save and exit and right now let's check the documentation there is a deployment section here firstly we should build our application otherwise we won't able to see the admin panel I'm gonna come back it's gonna take a while and after that we are gonna start our application but before I want to reset my nginx that because as you can see it shows 404 not found so I'm gonna reset my nginx and let's check if everything is okay or not okay it's active and it's running perfectly and let's run our app production mode npm and start but if you do that of course you won't be able to create any table that because it's a production mode but I just wanted to show you okay it's ready let's check I'll refresh this page and as you can see our server is ready let's open up admin panel right now I can create any user here foreign let's check as you can see in this mode we cannot create any table we can only create a new entry the reason that we cannot create any collection here that because after creation it has to reset our server and in production mode you cannot reset your server whenever you want so if I stop my server that's clear here and I will say npm run develop let's refresh and right now as you can see I'm able to create any collection here let's actually create them quickly okay guys I created my tables and a test product right now I can create my token find find one create and find let's save of course we need a duration it's going to be Unlimited and this is our API token let's copy this and change my API token and the API URL will be like that and upload URL okay right now I can run my application and move them here right now I can run my server foreign I will refresh and right now our image is here okay awesome so that's all guys I hope you liked it if you learned something new today please like the video if you have any questions just let me know in the comments and don't forget to follow Lama Dave's social media accounts you can support lamade by using the link in the description below or by joining to channel I hope I will see you in the next tutorial goodbye

Channel: Lama Dev

Views: 369,905

Keywords: E-commerce, ecommerce, commerce, ecommerce app, react ecommerce, strapi ecommerce, react stripe payment, shopping app, e commerce app, shopping cart, react redux shopping cart, redux toolkit tutorial, react, react tutorial, react full stack app, full-stack e commerce, lama dev, strapi deploy, vps deployment, react strapi

Id: BCkWFblNLKU

Length: 210min 39sec (12639 seconds)

Published: Fri Nov 25 2022