React Node.js E-Commerce App Full Tutorial (REDUX - Stripe - JWT ) - MERN Stack Shopping App

hello my friends today we are gonna create this awesome full stack ecommerce web application using react node.js mongodb and stripe this is the home page when i click any category here it displays all products of that category we can filter items [Music] and we can sort let's explore the item we can choose the color and size and add it to the card and it shows up here immediately because we are using redux let's add one more item and check the card all items are here and we can also check out using skype payment method after verifying client and credit card information we are gonna see the money in skype dashboard right away and of course we are gonna have an admin dashboard we can see the latest users orders some analytics they all come from our nodejs api let's check the products there is an awesome data grid here we can delete them edit them and we can create a new product and you don't have to use any link for your images they are automatically being uploaded to google firebase storage during this tutorial you will learn how to integrate react and node.js how to use redux how to authenticate your clients and provide security using jwt google storage stripe library react router dom hooks and more it's the last part of the e-commerce series if you didn't watch the design part and the api part you might be confused so i recommend you watch them first and that's all i hope you will enjoy if you want to see more tutorials like this please like the video and subscribe and you can support the channel by using the join button or the link in the description below it helps me to create more free open source projects like this okay if you are ready let's get started okay guys firstly we have two folders here first one is our api our nodejs api and second one will be our client site which is react ui and later we are gonna create admin folder also but for now we are gonna take care of our api and client site and if you don't have these two folders you can go to our youtube channel github repository and here if you write shop and you are going to see our node.js api and react shop ui you can just clone these two folders and after that if you directly clone your api and client branches from github don't forget to create your emv file here because it contains all our secret keys and here you should provide your own mongodb access key if you don't know how please just watch the previous videos it's really important guys if you don't want to be confused please follow the first and the second part then come back and watch this video and during this video we are gonna make some changes in our api and client side for example if you remember in our models and products we just store our size and color as strings but it's no sense to store them like that because products can have more than just one color and size so i'm gonna change them and they're gonna be array and also i'm gonna add here one more thing and it's gonna be in stock and i will say type boolean and by default it's going to be true okay that's all i will save and i can open my terminal and i'm going to open one more terminal it's going to be api site so i will say cd api and i'm going to run my application i'll say yarn start and backhand server is running and db connection is successful apps i will do the same thing here cd client and start and it's here okay before starting i just created some products here eight products or something you can do the same thing just give title description image and sizes color something like that of course later we are going to add them in our admin panel but for now for showing inside our client side it's necessary just create some of them and we are going to show them here okay so firstly i want to show you how to root your components by your url to do that we need react rule to dom library let's open here react router.com and as you can see we need this library first and after we are gonna import these components and finally we are gonna lose our components for example for this root is calling about component for users user component is gonna work like that let's import this first i'm going to open new terminal i can close here and it's going to be cd client again and inside i will say yarn adds or npm install react bluetooth so let's close this product and let's open up our app.js inside client folder source and app.js okay so let's copy here and paste you don't need link you can delete it and after we are gonna use root component here and after our switch block and inside roots let's do that i will delete home page here i will say router and inside switch and finally our routes okay first route will be our home page and i'm gonna provide here my url and it's gonna be path and just slash which is home page let's see i will save i can close here and i'm gonna refresh the page as you can see it's still home page so i can duplicate this and here for example products and i'm gonna call my product list component remember it just shows our product list so i will save and if i write here products as you can see it's still home page that's because before product work it just sees this slash and automatically it renders this route to prevent this only think usual 2 is writing here exact in this case as you can see it's our products list by the way we can add here any parameter for example all or woman t-shirts something like that to do that i'm gonna write here one more slash and column and category basically if you write your column and sound word it's going to be your parameter so if i write here woman as you can see it's still our list have so so let's do the same thing for single product i will delete here and instead of category it's going to be product id so let's change here product page i will save and let's play it here of course i forgot id you can write here any id and as you can see it's our single product perfect it's really easy as you can see so let's copy this cards login and register cart it's gonna be our card component oops wrong place it's gonna be here cards login it's going to be logging component and finally register let's see i'll say card first okay login and register okay perfect it works but there is a problem here if we have logged in user we shouldn't see this register or login page because we already have a user to prevent this for register and login root i'm gonna write a condition of course we are gonna use redux for login process but for now we can just write a dummy variable here and see how to root our components so let's say const user is gonna be true we are gonna delete this later so for login page i'm gonna write a condition i'll say if there is a user if there is logged in user they are going to be redirected to home page so i will use redirect component the url will be just home page if there is no user we can just visit our login component there is no problem i will delete here of course i shall close this tag okay it didn't import this so i will just copy and paste here let's see i will try to go to login page and as you can see it redirects us to home page not because we have user i can do the same thing for register if there is a user we are going to home page if there is no we can visit register page okay in our home page as you remember we have categories but we can't click any of them when we click this component we are gonna go to our product lists so let's do that let's open here and inside our components as you remember we have category item and we have container here and image inside and finally item title and shop now button but as you remember we are fetching this data from this file as you can see we have slider items categories but here we don't have any category name so let's add here some categories i'll say category and it's going to be woman for others let's say codes and maybe i don't know jeans okay that's enough so i can use this category right now i'm gonna open category item again and here after container i'm gonna create my link and it's gonna come from our react router dom i'm gonna close and i'm gonna cover my info here and inside my link i can write my url it's gonna be products and it should be a category name here so i'm gonna use backtick here instead of code and i will cover with color brackets and inside i can write my category which is item dot category there is something wrong here ah it should be here of course our slash okay let's save and see as you can see on the bottom left we have products and women code and jeans i will click and we are going to products and women perfect and here as you can see we have static products so how i'm gonna use this category name fetch data from our api firstly let's open up our products list which is product page components pages and here product list okay but we have here category title filters we can choose color size and also we can sort by their prices okay and after that after these filters we are calling products component and if letter and footer let's see what's inside components and products it's just a container which contains our cuts so basically we are going to fetch data here but before we are gonna need our filters category here and this sorting value we should import this filter sort and category from parent page so let's do that products list and here firstly i'm gonna take my category name it's really easy the only thing we should do is using use location hook so i'll say const location and it's going to be use location hook and let's say console log and location if you open up your console by the way there is some error inside our select tag that because selected belongs html instead selected we can use default value as you can see we have disabled and selected methods here we are gonna change this later but it's not important for now let's take care of our object here as you can see this is our location and we have path name here and inside our key after our main url products and woman so i can split this string if i write here location and path name and i will split it's gonna split from slash and i'm gonna take second element let's see right now and as you can see it gives woman if i change here code it's gonna give me code okay so i can use it it's gonna be my category so i'll say cons category and it's gonna be this value right now i'm gonna take my filters when i change any of them here and here we are gonna create an object and we are going to change values inside this object to do that i can use use statehook so i will say const filters and set filters and it's going to be use state hook and at the beginning it's going to be an amp to object and after that whenever we change this color or size we are going gonna update this state how i'm gonna do this i can delete this by the way to prevent this error okay and after that for this select methods for color and size i'm gonna write on change event and it's gonna call handle let's say filters but as you realize color and size use same function how our function is gonna recognize which select is changing we should write here name and it's gonna be color and for size it's gonna be size so basically we are going to verify our select tags by their name okay let's create our function const i'll close the name handle filters and inside of course it should be event here because we are going to take value from our select methods from our options so i will say const value and it's going to be event target and value so let's set our filters so i will say set filters and it's going to update like color red and size medium to decide this we can use their names it's really easy to do that i will say run target and it's gonna be name by the way it's target okay so basically we have chosen our name and it's gonna be our value here which we created let's console lock this filter and see better of course it's gonna be some problem here i'm gonna show you i'm gonna open my console it's still here that because we didn't change this sort product select okay it doesn't matter as you can see it's an empty object for now i will choose black and right now color is black and i'm choosing medium for example and as you can see it updates only size there is no color inside to prevent this problem so we can use spread operator here and we are going to say filters oops filter i will save [Music] i'll refresh the page it's empty right now and i'm choosing blue for example as you can see color blue and medium right now blue and medium i can change here i have some it works so our category is ready filter is ready one more thing we need and it's gonna be sort let's change here sort set sort and at the beginning it's gonna be newest items even if we don't change here it's going to be just newest items so let's change them i'm going to create new unchanged method here for price i can delete here by the way okay for select i will say on change method or change event and here i'm gonna set my state directly here so i can use event and set sort it's going to be event target and value but as you can see we don't have any value here it's going to take these strings and it's no sense we can just write here some shortcuts so it's gonna be value let's say news and for others is going to be ase and dese so are all filters and category and sort are ready so i can delete here and i can use all of these values inside our products here category is going to be category that we created filters is going to be filters by the way why i write here filter it's going to be filters okay and finally sort is going to be sort filter okay let's see and let's open up our products component here and i'm going to take those props so i'll say category filters and sort let's write them here console.log and let's see i will refresh the page as you can see our category code we don't have any filters and newest is our sort product here i'm gonna change this color for example as you can see still caught red and used and it works awesome perfect guys right now everything is ready to fetch our data and i can relate this console.log and i'm gonna fetch my data here firstly i'm gonna create you state and i'm gonna define my products so i will say const products and set products is going to be your state and at the beginning is going to be an empty array and after that i'm going to create one more product state but this time it's going to be filtered product and set filters products i'm using this because whenever we change our filter we are gonna update these filtered products and we are going to show by those filters let's create here use effect i'm going to create function i'm going to write my dependency which is category so basically this means when the category changes just run this function which function we are gonna run we are gonna just get products from our api so however i'm gonna make get and post requests to do that we are gonna be using axios library so i will say yarn add oops again add an axios we can use javascript hatch also but axios is really easy to use and more advanced for me so we are going to use it okay let's create our function here it's going to be const get products and it's going to be async function that because we are making requests to our api so it's going to be try and catch block okay i'm going to take this error and it can stay we are going to take care of this later so let's write here const response is going to await our request and we are going to use axios here as you remember node.js api we are fetching our data using cat method and inside remember our url api url http localhost and 5000 and our endpoints which is api and products by the way we should import this here import axios from axios after fetching data let's console log this first and after we are gonna update our products response okay it's not here that because we didn't call our function get products by the way there is a typo here products 5000 and products let's try again and as you can see we have an object and inside data and our all products are here i have some let's look inside our api api folder and roots and products we have create methods update delete get products and get all products and as you remember we can write here any category as a query to do that we are going to use request query and category so let's do that i will come here and after products i can write here my query so for example if i write here category let's say code for example i will save and as you can see this time we have only three products and they are codes i have some it works but there is a problem because in our homepage remember we are listing these products also here so it doesn't have to be any category so i can write here a condition let's close here i will come here and say if there is a category use this url and inside instead of this static string we are going to use our category which we took from our parent okay if there is no category just fetch data from this url so it's gonna fetch all products okay right now i can delete this console.log and update my products set products and it's going to be response and data so we have products right now we can use it and whenever we change any filters we are gonna set our filtered products to do that i'm gonna write here one more use state sorry use the fact my function and my dependencies will be category and filter sorry filters i forgot again okay so i will say if there is a category set filtered products and we are going to set them by using filters so i will say products it's going to be our dependency also and i will say filter and take each item and we are going to check whether our item includes those filters or not it can be a little bit confusing if you don't know javascript filtering we are going to choose our filters and look inside each key and value for example color yellow and size is medium and in this case our keys are color and size and our values are yellow and medium and after that we are gonna try to match them with our product items if any item includes those filters those keys and values we are gonna display them so i will see objects and entries and i'm gonna choose filters here and for every item i'm gonna take key and value and after that i will say if item key includes the value we are gonna filter it i know it can be confusing for the beginners but i highly recommend you to learn how to filter objects and arrays in javascript is going to be really useful for you let's see i will say console.log or we can just directly display them i will come here and after container and here instead of popular products from our dummy data i'm gonna write filtered products let's save [Music] as you can see all products inside our db i'm choosing medium here and as you can see it's filtering i will choose yellow okay it's not showing because inside our db is just lowercase and we are gonna do this i will come here and so we can update them black and i'm doing this like that because in my db our colors are lowercase and sizes are uppercase it was a mistake but i don't want to change db right now basically you can come here and say to lowercase but in this case our sizes will be lowercase that's why i'm doing like that in your project just save your products lowercase and right here to lowercase function okay let's see again i will refresh the page medium we have three items and i will say yellow and we are going to see only this code i have so so what about this sort let's do that i'm going to create new use effect use effects and my dependency will be sort value it's going to be a condition i will say if sort is newest we are gonna set our filtered function again filtered products so basically i will choose previous filtered products and after that i'm gonna sort it i'm gonna create new array here previous so basically it contains all items inside our filter products so i'll say sort and i'm gonna write here my sorting algorithm it's gonna be a and b or whatever you say basically it's gonna just compare two items inside this array so i'm gonna look at created add dates created at minus b dot created at if first one is greater it's just gonna display the nearest items by the way of course it's a condition like that so i can do the same thing for other conditions i'll say elsif if it's asc this time we are going to check prices and finally as we don't need this anymore this time it's gonna be lower price i will change here okay of course it can be more shorter and complex function but i don't want to confuse you anymore after this filter and here is going to be price okay let's see newest the lower price and the most expensive apps it works medium and yellow perfect but there is still problem because of our homepage let's see here as you can see we don't have any products here that because we don't have any filtered products so i can write here condition so i will say if there is a category use this filtered array if there is no i can copy here and if there is no category this time it's gonna use products array but it will be still problem that because we just display here eight items only thing i should do is slicing this array so i will say slice and 0 to 8 and after map to the array let's see okay as you can see we are going to have maximum eight items here if we have a category we are gonna able to filter these items perfect okay let's write here our category name and give a link for this search button for product list i'm gonna change here it's gonna be category [Music] like that and for this button i will come here not products it's going to be product component and for search button i'm going to write here link let's cover this button and i'm gonna write here my url and it's gonna be products and of course backtick and curly brackets and here i'm gonna write my product id it's gonna be item dot id let's see i will click and we are in the product page and this is our product id i can take this id again i will do the same thing like we did here location and category i can copy this and for the product page here let's close everything actually and open products okay so i'm gonna paste here my location and this time it's gonna be product id we should import use location hook import use location and it's going to be react router okay right now i can fetch my product using this id let's create use state and use effect i will say const product and set product it's gonna be use statehook and at the beginning it's gonna be object or you can write null doesn't matter and after that i will say use effect and my dependency will be product id and here i can write my function i will say const cat product is gonna be async function and inside try catch block and i will say const response i'm gonna be using axios again by the way we can create axios instance we don't have to write axios and url again and again so i will come here and inside source i'm gonna say request method or methods so let's import axios here and after that i'm gonna provide my page url and it's gonna be http localhost and 5000 and my endpoint is api don't forget this okay export const and first one will be public requests it's not gonna need any jwt inside our header so i will say axios and create let's write here base url and it's gonna be our url here base url okay and i'm gonna create one more here and it's gonna be user request in this case we are gonna need header here and it's gonna store our token remember previous lesson we created jwt token and we are gonna write here error and here it's going to be our token we don't have yet because we didn't login but we can create here for now let's say token let's open postman and login and we are gonna take this token and here remember it's our shop collection so i will choose login and i'm gonna login as admin i will send and as you can see this is our access token i will just copy this and paste here okay in this case we can use this token i will say backtick and here my token okay also of course we are doing this manually but after login process after using redux we are gonna take this from our storage and paste here okay and for fetching data which one we are gonna use it's gonna be just public request because to fetch any product we don't have to be user or admin so i will plate this and paste my public request let's import i will choose my folder here request methods and here i'm gonna paste my function okay so it's gonna be get request and i'm gonna write here my endpoint this time we don't have to write http localhost it's gonna be only products and find remember our api products here are roots to fetch any data we are just writing find and its id let's do that i will say id and after fetching data i'm gonna set my product i will say set product is going to be response and data i will call my function here and i can use my product let's change this image it's going to be product dot image let's see if it works or not okay something is wrong let's check can't read image okay we couldn't fetch any data let's see oh i forgot slash here and i forgot wait here let's check again and it's here i am so so let's take care of this description title and other things okay it's gonna be products and dot i will copy this and title let's paste here and description is going to be price and for color remember we have color array so i can delete these two and i can map through my colors so i will say product dot color and i will say map and for each color i'm gonna return this component filter color and instead of black i'm gonna write the actual color which is c and also we are using map here remember we should indicate our key unit key is gonna be c again because each color is unique we don't have any id here let's see okay as you can see we have only blue here i will do the same thing for size let's delete them and it's gonna be products size and map and for each size i will cover this and here i'm going to write s which is our actual size and here i will say key it's going to be size again our unique key and they are here awesome so what about this quantity when i click this nothing is changing let's create a function and handle this quantity but before i should use another use state and provide a quantity here let's do that i will create one more use state it's going to be quantity and here and at the beginning it's gonna be just one let's add this here quantity okay so i'm gonna add click event for this remove and add buttons so i will say on click and i'm gonna write here any function let's say handle quantity i'm gonna write here a parameter and it's gonna be decrease let's copy this and paste here and this time it's gonna be increase let's create this function const handle quantity and here we are going to choose our type increase or decrease and after that i will say if type is decrease and set quantity it's gonna be quantity minus one and i will say as set quantity actually i will just copy this and this time it's gonna be plus one [Music] okay there is something wrong so i can write here if there is size so i can write question mark i will do the same thing here let's see and i'm gonna choose another product here for example this one and as you can see color is yellow and we have small medium and latch okay let's try this quantity i will click and as you can see it's increasing and here but there is a problem we can go under zero we shouldn't do that let's add here a condition so i will say if quantity is bigger than one i will refresh and i'm clicking and it's not going under one perfect so a user can choose any color and size let's take care of them i will use two more use state here and they are gonna be null at the beginning or just empty string and here i will say color and size okay let's set this color and size so when i click this color filter we are gonna choose any of this color inside our array of course there is only yellow here for example for another product we are going to able to choose any of them so i will say one click event and i am going to set my color set color and inside i will say c okay so what about this size remember it's our select tag so i can write here on change method on change and i will write event and set size event dot target and value okay when i click this it's going to be yellow and when i click and often it's going to choose our size and after choosing quantity we are going to able to add this product to our cart so let's write our own click event for this button i will come here and say on click and it's going to be handle click const handle click and here update our cart of course we can write here axios and post method and we can update our cart or create new card but doing this here is not a good idea that because we are going to be using redux fetching products or lists are not important here we can fetch them directly but when it comes to cart it's really important that because we are updating our cart inside different component so when i click this we are gonna update this number and transition should be instant if you didn't watch the redux explanation video i highly recommend to watch it that because i'm not gonna deep dive into every little pieces if you don't know why we are using redux or how we are using you should go watch it and come back here so let's create our first redux to do that i'm gonna add here two libraries it's gonna be yarn at redux toolkit and also react redux okay let's delete here and let's create our redux folder inside source i'm gonna say redux and inside i'm gonna create card redux dot js and here i'm gonna create redux slice to do that i will say import create slice and from redux toolkit so let's create our first slice it's going to be const card slice and i will say create slice and inside i'm going to create my first object name let's say cart and my initial state and here what we are going to have firstly we are going to have some products products and at the beginning is going to be an empty array and after that we are going to have quantity it will be zero basically it indicates how many items inside our cart in the example it's four but at the beginning is gonna be zero and finally we are gonna have total price and it's zero again because we don't have any product okay and after that we are going to have reducers and again if you don't have any idea what i'm doing please watch the redux studio and come back here so which reducer we are going to be using first one will be add products we are going to add some products inside our cart and we are going to increase quantity and total and here i am going to take my state my previous state and action after that let's open an object and let's update our state firstly state.quantity will be plus one because when we click this button we are gonna increase this quantity number so it's gonna be plus one and after that we are gonna update our products state dot products and it's gonna be push and action dot payload so what's this payload it's basically our new product and finally state dot total i'm gonna increase this again and it's gonna be action dot payload and price actually i can say here product and we can separate this price also you're not gonna understand better right now don't worry by the way we can do this only for redux toolkit if you are using normal pure redux you cannot mutate your state like this so okay let's use this initial state first inside our number here it's gonna be zero and our products will be an empty array to do that firstly i'm gonna import my reducers and my default function so i will say export const it's gonna be add product and i will write here card slice and actions and one more export is going to be export this time is going to be default because we are going to use it inside our store and it will be card slice and reducer okay so how we are gonna use this actions and reducer i will come here and create new file is going to be store.js we are going to create a global store and after that we will be able to use this store in every pages and components let's do that i will say import from redox toolkit and it's going to be configure store and let's import our reducer import let's say cart reducer card redux okay let's create our store i will say export default and configure store and here let's open new object and inside i'm gonna write my reducers we are doing this that because we are not gonna have only just one reducer we are gonna have users also so we should indicate here are all reducers first one will be cart and it's going to be our cart reducer to use this store we should wrap our application with a provider to do that i will open index.js and here i'm gonna import my provider and store i'll say import provider from react redux and after that redux folder and store let's write here store okay let's delete here and wrap our application with provider and i'm gonna pass my store here store equals start okay i've already explained all of these things in the redux video i will close here and here okay let's open up our number here as you remember we have a patch here and it represents our cart so how i'm gonna use this card it's really easy we are to use an absolute hook i will say const cart remember in our store we have cart we can use it so i will say use selector hook let's import this use selector from react redux okay so firstly we are gonna take our state and we are gonna choose our card inside this state so it's gonna return us state dot cart let's see what we have here console log and cut i will open my console and as you can see our cart is here and it's our initial state perhaps so inside our number we are using only this quantity so instead of cut i can choose only this quantity let's write here quantity and instead of all cards i will choose just this one let's see again as you can see it returns only zero perfect we can use this here let's delete here and instead of 4 i will say quantity you are going to see how easy to use redux let's come here our product i will close here and right now what we should do is calling our action add product action and passing our product and price as payload what i mean by that i'm gonna call add product action and i'm gonna pass my product you can write product equals products or you can just leave it like that after ex6 and also i'm gonna pass here my quantity remember we already have here i can pass directly okay but it's not gonna work that because we have to dispatch this action our application doesn't know it's a redux action or not so how we are gonna do this we are gonna create one more hook here i will write here one more import and it's gonna be react redux and use dispatch okay by the way we are not using axios we can delete it okay let's use this dispatch here so i will come here and i'm gonna say const dispatch and it's gonna be use dispatch hook so let's use this dispatch and wrap our action i'll say dispatch and i'm gonna wrap this let's delete this semicolon okay that's all i'm gonna close here and i'm adding two cards and it's one as you can see i will add again as it works so if you open your console and choose here redux if you don't have i highly recommend you to install this chrome extension it's also for firefox and you can see your redux states here and difference and you can trace them there are many options here and let's check our products as you can see let's open state actually our cart we didn't pass any total let's come here and action payload and price let's write your price and it's going to be product dot price we have price here if i multiply this price with this quantity we are going to have our total so multiply by quantity let's refresh and see again i will say state as you can see card and it's empty i'm adding and total eighty nine dollars and quantity is one and inside there is only one product which is our yellow code here i will add again and quantity is 2 and it's adding this price to our total price it works like that but we had mistake here that because in our products let's see we have all products information here title description image but actually we didn't send which color we have chosen or size and we didn't send our quantity if i increase here and add to the card we are not gonna see this quantity actually so instead of sending product quantity and price separately i'm just gonna send one information here and it's gonna include my all product information and also its quantity product quantity is not cut quantity don't forget and also color and size so basically we have title description image price and also its quantity which we are increasing and decreasing here its color and its size in this case i should change here in this case we have only one i can delete here and i'm gonna calculate my total here we have action and payload and price and also we have action and payload and its quantity again don't mix this quantity with this quantity it's called quantity number okay let's see again and state let's check okay it's empty i'm adding as you can see card quantity and also inside our products all product information and additionally it's quantity here which is one let's add one more time it's gonna be five products i'm adding a new product is here let's check as you can see quantity is five and our card quantity is 2 and our total number is 534 and let's decrease this and choose color and size i will add again and as you can see color yellow large quantity is 3 and it works perfect so what about our cart page when i click this button it's gonna show cart page here let's add link i will open navbar and here for this menu item i'm gonna write link i'm gonna wrap this menu item and here i'm gonna write my url which is cut let's click as you can see card pages here okay let's fetch our all card items from redux state i will close here and here and i will say card component okay let's use use selector again i will come here and i will say const card and it's gonna be use selector and we are gonna take state and we are going to return state dot card okay i can use my products inside our info container we have product here and one more product here we can just delete it and we are gonna use map and list all products here so i will take this product and wrap it curly brackets and i'm gonna say card.products and map of course card here and for each product i'm gonna return this component let's move this here under product let's save nc and as you can see we have three items but they all say that we are gonna change it we have our products we can change this to product title and here product dot id product dot color size will be size we didn't change this image let's change oh it was really long one product dot image what else we have we have a month here product.quantity and price let's see maybe let's change this total price however i'm gonna do this it's gonna be product and quantity okay perfect they are same product but we can change it maybe it's gonna look better so i will choose new product this one color yellow medium two of them and add to cart okay it's here let's turn back this one maybe color large add to cart and one more color size let's say four and add to cart okay let's click again as you can see they all are here have some so let's change here order summary it's really easy i will just change here it's not product this time we are going to be using our cut and total again same here let's see as you can see is the total number i have so right now we are gonna be using react stripe checkout in the previous video i've already explained that how to use react stripe checkout and how to create our buttons then we click checkout button we are gonna see here a beautiful payment method and we are going to give our information card information and we are going to purchase our products let's add this library i will say young add and react stripe checkout if you skipped stripe section in the previous video you should check it first that's because i'm just gonna copy and paste some pieces so let's import our library first import stripe checkout from react stripe checkout and here we should write our stripe public key to do that let's create here our key and it's going to take our public key from react app stripe inside our emv file but we don't have yet let's create inside client folder i will say dot emb and inside this file key and it's gonna be our public key let's open stripe page and copy our public key if you go to skype dashboard and test and developers you're gonna see your publishable key here let's click this and copy and i'm gonna paste here okay and right now let's go to our checkout button here i'm gonna delete this and i'm gonna paste my stripe component as you can see it includes our brand our image and blink and shipping address will be included and after that we are gonna write here total amount and we are gonna multiply this by a hundred because strife works with stands if you write here only a hundred for example it means it's one dollar okay we don't have own token function let's create i will say const on token and it's gonna get token from our stripe and finally we are gonna set our token to do that let's create here use state const stripe token and set strike token it's gonna be you state and at the beginning it's gonna be just no after taking token we are just gonna set this stripe talk okay let's see what we have console log oops talking okay so let's check i'm clicking this button and as you can see it displays this beautiful component i'm gonna write here my test account and payment info and here let's write test accounts i recommend you to check this on stripe website that because they are updating this time to time so for now it's going to be like that if i remember correctly and i will say pay card number is correct and as you can see it returns this token we are going to use it as you remember inside our api and stripe.js inside our emu file we should add this strap key and it's gonna be our secret key here let's just copy this and paste here okay right now we are able to make this payment post request what we are sending here remember source and it's gonna include our token id it's gonna be a month and finally currency which is dollar and if everything is all right it's gonna send us our response which includes our order order date shipping and billing address so let's try remember stripe and payment sorry checkout and payment so after taking our token i'm going to write here a use effect and dependency will be our token stripe token and here let's write our function i will say make request it's going to be async function and try catch block and inside this block i will say const response is gonna be await we are going to make user request what was the name request methods and yeah user request okay let's import import user request from this folder and request method and here my endpoint which is checkout and payment and here i'm gonna send my token id which is stripe id and amount and it's gonna be card.total and a hundred why it's ah it's type talk sorry okay in this case after our response we are gonna go to order page or success page to do that we can use use history hook let's write here somewhere const history and it's going to be use history after response i will say history dot push and we can go any page let's say success we don't have this page but we are gonna create by the way it's inside axios request i will take this here okay by the way it's gonna be card.total and history also okay right now i can call my request here my function let's try of course we should create success page let's say success.jsx i will just say successful and by the way we can pass any parameters inside our history so let's say data and response.data of course object and i'm gonna use location here const location it's gonna be use location hook [Music] and let's see console.log location i'm gonna save and we are gonna try again i will refresh the page of course we don't have any product but still we can do that test i will pay oh it's not checkout let's see index.js inside our api okay api checkout and payment it looks okay but oh i forgot here post request let's try one more time but it's making this request instantly it shouldn't do that that because we are calling this function in any case we should write here our condition if strike token exists we are going to call this function let's refresh again [Music] check out test a24123 and i'm pick okay and there is an error okay email it request error what did you send token id oh i forgot writing here id because stride token is an object and we are sending just an id i hope it will be last time check out now console okay okay ready oh our total is zero we cannot send zero it should be more than one so for now let's change here it's gonna be five dollars maybe and also you can write here other condition i will say if card.total greater and equals one not for now i'm gonna delete here that because it's zero but we are gonna change it don't worry we are not seeing anything that because we didn't write any root i think i need a break i'm making a lot of mistakes i will just show this one and i'm gonna take break and we will create our admin template let's create here one more route if it's success it's gonna be success page okay it's here and this is our location and inside as you can see we have states and we sent this data and all informations are here so what we are going to do inside this page we should create our orders remember inside our api we have order root and we can create new order and finally you are gonna see all these orders inside our admin panel and we can ship the products to the user okay so after this data we can create use effect and we can create an order and also we are going to send our products to success page that because we are just sending response and data which is our stripe information additionally we can send our products we don't have to send amount and address because our stripe information already includes this data amount and address okay i'm gonna take a short break and i'll see that okay guys let's take care of our login process so i'm gonna create one more redux i will just copy this and paste again and i'm gonna change the name it's gonna be user slice and here i will change this name user slice and name will be user and initial state let's say current user it's gonna be null at the beginning and again it's fetching it's gonna be false and error and after that i'm going to create three reducers here first one will be login start and state action actually we don't need action we are not gonna send anything at the beginning it's gonna be login success and login failure i'm doing this because it's going to be an async function we are going to make api request and if it's successful we are going to take action and payload and we are going to update our current user so what i'm going to do here at the beginning i will say state. is fetching and it's going to be true and we are going to make api request we are gonna try to login by sending our username and password if it's successful state.fetching will be false we are gonna add fetching and state state. current user will be action and payload semicolon here okay so what about here if our username or password is wrong or there is something wrong with our api our db is fetching will be false and error will be true okay let's change here user slice and i'm gonna write my reducers here actions login start login success and login failure okay let's use this inside our store it's gonna be one more store and let's say user is gonna be user reducer let's import user reducer from user redux oops we set slice here it will be it can be sliced also doesn't matter actually but let's say same thing here redux [Music] okay so we have actions here but we didn't make any api request you can write this here somewhere here but also you can create api calls file api calls js and here i'm gonna write my login function so let's say export const it's gonna be login i'll say async function and we are gonna take dispatch and user information which is username and password and this dispatch is gonna come from use dispatch hook after that firstly we are gonna dispatch our login stat action in this case its fetching will be true and nothing else will be changed after that i will say try and catch block if there is an error we are going to dispatch login failure action oops i forgot here arrow function like that okay so what we are gonna try let's say const response is gonna be await and we are gonna make public request let's import public requests from where was our folder okay request methods and it's going to be post method and my endpoint will be auth and login finally remember what we are doing we just sent our username and password we are gonna take this from login page and we are gonna make post request after that if it's successful we are gonna dispatch our login successful action and here remember we are sending our action and payload it's gonna be response and data which is our user information our name email image or whatever okay something like that let's open up login page [Music] and here we are gonna call this login function remember we have username and password let's create here quickly to use states const username set username it's gonna be your state and at the beginning it's going to be just empty string i will do the same thing for password set password and again empty string let's write here on change method it's gonna be event and i'm gonna take this event and set my username i'll say set user name event target and value let's copy this and paste here for password it's going to be set password it will be the same thing okay right now we have username and password we are able to send them right now let's write here on click event and it's gonna be handle login or click let's create this here [Music] const and i'll click i will take event that because we are going to be using prevent default function that because when you log in when you send any input form okay we can't go by the way not because we have user in our application let's make this false i will try again okay now you click this button as you can see it's refreshing to page to prevent this we are gonna write event and prevent default i'm gonna save and let's try again i'm clicking as you can see it's not refreshing to page okay apps so after that i can use my login function from redux and api calls and remember what we are sending we are sending this patch and user let's create here quickly dispatch let's play it here and here and i'm gonna import this from react redux okay let's set this dispatch and our user which is username and password and that's all let's see i hope everything is okay i will open up my console here and redux panel our user as you can see it's null let's write here admin i don't remember my password but i hope it's correct by the way we can see this password [Music] if you come here and say type password it's just gonna hide this password i have some let's try i will login and as you can see login start and login success and right now our all information is here id username email is admin and our access token have some if i write here something else and login as you can see login start and login failure so how we can use error and is fetching it's really easy remember what we are doing we are using use selector hook const is fetching and error is gonna be use selector hook and we are gonna take our state state dot user and right now we can use them what i'm gonna do basically i can write here a condition i'll say disabled if it's fetching i'm not gonna create another button for disabled but we can change a little bit let's come here for our button i'm gonna write here if disabled color will be maybe green and i will say cursor it's going to be not allowed let's see i'll log in and as you can see [Music] it's working if i come here in the network section and here i will choose slow version so it's going to make our connection a little bit slower and we can see better i'm clicking and as you can see it's disabled i have so [Music] let's close here and what about error maybe after logging i can say or something went wrong let's create this i'll say const error and it's going to be style.span for example oops styled and color will be red like that so i can write here my condition i'll cover this and i'm gonna write here there is an error let's refresh the page i'm sending and as you can see something went wrong have some i hope you understood it was really easy so right now we can go to app.js and we can update our user so i will say use selector and i will take states and i'm gonna choose user and current user let's see again i will say admin my password i will login and as you can see we are in the home page because we have user but the problem is when we refresh the page [Music] we can still go login that because we don't have user it turns back to initial state so how we are gonna persist our state let's open redux toolkit redux toolkit and usage guide and i'm gonna search for persist and it's here as you can see we are gonna make some changes here inside our store.js i'm gonna copy this functions and paste inside our store here and as you can see we have persist config and persisted reducer let's paste here and as you can see we should indicate here our reducer which we want to persist it's going to be user reducer i'll say user reducer and finally we are gonna add this persisted reducer here instead of user reducer and don't worry about this guys i'm gonna make a redux persist tutorial soon and i'm gonna explain everything here but for now you can just copy and paste them after reducer and finally we are going to export our persister we should pass here our store [Music] like that and finally we are going to use persiscate inside our index chairs and we are gonna wrap our application we have already done here remember but we should also add this persist gate to do that we should export this persister first let's say export here and let's open up our index.js [Music] actually i can import this from here and persister and i can make this export like that here and write maybe store and it's gonna be configure store function in this case i can send this here okay let's try of course i forgot this person's gate i will wrap here like that and of course to do that we need redux purses library i forgot just installing here let's do that yeah and add redux persist and after that i'm just gonna import this here and it's gonna be ready soon okay why it warns us we didn't use this here ah persisted okay let's see i hope everything is okay let's try to login again admin password i will say plugin and we are in the home page i will refresh the page and i will try to go to login and we are still here as you can see because it's persisting as you can see our persisted user here even if i refresh the page it's going to be still there like that i have so so what if i want to purchase this card also to do that we are going to be using combine reducers function combine reducers and here somewhere here let's say const root reducer we can say root also here and it's going to be combine reducer and here i will say for user it's going to be user reducer and for cart it's going to be card reducer so i can use this here instead of user reducer and finally i can delete here and write persisted reducer let's see i will refresh okay let's try i will choose this item and add to cart okay it's here so i'm going to home page for example it means i'm refreshing page refreshing application and it's still here let's try again perfect so what else we can do here it's almost done okay i don't remember anything else but if you want to let's create our admin panel if i find out i missed something here we can turn back and take care of them okay guys i just created one more folder here which is admin and inside i just clone my github branch where you can find this folder if you go to lamadev github account and if you write here react admin you can find this folder so how you can clone this just open up your terminal and write here git clone and we are going to be using only this branch so you should write here single branch and b and you are gonna write here the branch name which is react admin and after that just give a space and copy this main url this main repository url and paste here and finally let me just close this right here your folder name which is admin and that's all if you do that it's going to create this folder and all these files that you are gonna be missing node modules to install them just right here yarn or npm install and after that you are gonna get all these files and finally we are gonna run our application and it's here after all this process you are gonna see your admin panel right here and right now we are gonna make some changes firstly we don't have any login page let's create that i will open my source folder and here pages and i will say login by the way if you didn't watch this admin panel video i recommend you to watch it that because i'm not gonna explain any component here in a design part we are gonna just directly use it i will say login.jsx in the admin panel video we are using css here but i'm not gonna do that it's gonna be a really simple login page i don't wanna waste time of course you can create your own fancy login page but for now i'm just gonna create just a small page which includes just inputs okay so i'm gonna create my function i will say input type will be text and placeholder let's say username and one more it's gonna be password and type will be password also because it's gonna hide our text and after that i will say button and let's write login or sign in okay so how we are gonna send our username and password let's create here use statehook i'll say cost user set user sorry username you can create also an object which includes username and password use state and at the beginning it's going to be empty string let's do the same thing for password okay let's change them on change and it's going to be set username e.target.value let's close here okay that's all let's copy this and paste here and this time it's gonna be password and finally we are able to send our username and password i'm gonna write here on click and it's going to be handle click let's create our function here const handle click it's going to be e and i'll say e dot prevent default remember i'm just trying to prevent refreshing the page so i will say prevent default okay and after that we are gonna send our data to our api but i'm not going to do this here that because we are going to be using redux toolkit let's create our redux folder i will close here and inside source i will say redux let's create our user slice i'm passing here quickly that because we have already done inside our client side so it will be a little bit faster so store let's create our first slice but before we don't have necessary libraries like redux toolkit react redux or even axios let's import them i will say yarn add axios redux toolkit and react redux i will enter ok they are ready i will do exactly the same thing so i will come here inside client and i'm gonna copy my user relax here use redux let's copy this and paste here by the way i set user slice it could be user redux as remember we have two reducers here start success and failure let's create them i will say api calls and js [Music] and again let's come here and copy everything inside our api calls and it's almost ready one more thing we are missing and it's our request methods we have request methods and we have public request and user request let's copy them by the way we are gonna change this token it's gonna be dynamic don't worry about that so let's close here and create request methods here and i will paste here we are going to handle this token but before we should log in and persist user to local storage and after we are going to be taking all user information including token and we will be able to use it here okay for now i'm just gonna close here and we don't need that we can create our store and again we can just copy and paste here store and i'm gonna paste here admin store let's close here and we are going to make some changes that because we have cart user but we are not using it here so we don't need that and for now we don't need root reducer either that because we have just one reducer so i will just comment this out and i'm gonna write here user reducer okay by the way we forgot installing redux persist i think let's install quickly yarn add redux persist and after that i'm gonna open index.js and wrap my application with redux store and persist let's open up i'm gonna import my functions and after that i'm gonna wrap my application and i'm gonna provide my store here store equal store and persiscate don't forget about that otherwise you cannot process your redux states so i will say persist gate and wrap this application again and finally loading null and persister is this persister which we created inside our store here okay let's see i will create here logan function to do that we need dispatch so i will say const dispatch and it's gonna be use dispatch from react redux let's import ok so i can dispatch my actions only thing i should do is calling login function from api calls login it was login or what was that yes login let's import this also redux and api calls okay right now i can send my dispatch value here and also my user which is username and password and let's see i hope everything is okay and to see this login page i should add my login route here we have home page user page product page and also let's say login and i'm gonna call login page here i will say login but there is a problem here that because if we are not logged in we shouldn't see this sidebar or this number we should be totally clear login page it's happening that because our switch block inside this div which includes sidebar and also top bar is the same level with rd so that's why we are seeing them so what we can do we can move this switch here and like that and i can move this login route right here let's see let's enter those items and instead of any css i'm going to use in our css here so i'll say style and double curl the brackets and inside i will say display flex align item center and justify content center and also i should give some height because it's not a hundred percent let's say a hundred percent or a 100 vh let's see okay they are here but i can display them in the same column so i will say flex direction and call okay let's give some padding for this inputs i'm gonna say style and padding 10 pixels maybe and also i will say margin bottom and it's going to be 20 pixels let's see okay nice so what about this button let's say style and padding 10 pixels maybe it can be longer let's say with 100 pixels okay it's enough i think it doesn't have to be beautiful we're just gonna log in and let's try i will say admin by the way let's open up the console as you can see this is our persisted state and it includes our current user which is null right now let's try to login i will write my password and i will say login and as you can see we have user here username admin email is admin every information here and this is our access token so right now we can use this access token instead of writing just string let's open up request methods and here i'm gonna delete this talk we don't need this anymore i'm gonna fetch this token from our local storage here how we are gonna do this let's open console and see what we have inside our local storage let's leave it here empty for now i will say console.log and i will write here local storage and get item and which item i'm gonna get it's gonna be root that's because it's our key if i do that it's going to return me this value and let's see persist root and as you can see every information here but as you realize it's just a text it's a citric how i'm gonna transform this to a json file json object it's really easy if i come here and cover this and i'm gonna write json.parse and as you can see right now it's a json object but there is still problem here if we call this current user let's see let's try as you can see it's a still string so basically i should do the same thing here so if i cover this again and if i say json and parse and right now our user is an object perfect let's take this access token and it's here perfect i can use it of course it's not the best way to do it but it's just a beginner project i know some of you say while you're not using reddis and cookies just calm down we are gonna do all those projects we are doing step by step okay let's use this token by the way inside our storage redux and store we are using only user reducer so we are taking this user directly but what if we have multiple reducer like here user card or whatever so instead of writing like that let's open this and i will just let this cart we are gonna add our products or any other things later for now it will be just a user so i will change here and i'm gonna save let's clear our route and i'm gonna refresh the page and right now as you can see it's inside user first we have user and then current user right now i'm gonna delete here let's see what we have first i'm current user here and finally access token okay perfect right now we can use this here i will delete this code and paste here okay perfect so i will do the same thing for client side let's come below and request methods i'm gonna delete here and paste my token oops we already have let's play it okay house let's close and everything is ready so let's close everything ah we can see our home page i think we should write here a condition if we have user let's go over here by the way we should write here react fragments that because we have multiple components here and i will close my tag okay i'm gonna write here a condition if we have user we'll be able to see other pages so what can i say here let's say const admin and i can use the same thing here okay some pairs and instead of access token i'm gonna say is admin and i'm gonna write here if there is a user if there is an admin you are gonna see all those components like that now so okay i think we are ready let's take care of our components and let's integrate with api for those components i think we don't need redux it's not vital that because it's just fetching data we are not changing anything we are not deleting here but for the users page for example or products page we are going to be using redux so let's fetch customers first new join members so i'm gonna open this small widget component components widget small and this jsx file okay let's first create our users const users and set users and use state and initial state will be and empty array and after that we are going to fetch our data let's write here use effects and i'm gonna write here my fetching function it's gonna be const cat users i will say async function and here const response i'm gonna be using user request await user request let's check again i always forget this name yeah user request but why it's not showing this folder okay anyway let's import here request methods and user request okay it's gonna be cat method and i will say users and remember we can use query here and it's going to be new and true in our api root we can fetch all users and also we can fetch new five users okay and after that i'm gonna set my state set users response and data and by the way you can write here try catch block if you want to catch your errors but we are not going to handle that if you want to you can set your errors and if there is an error you can just print that error here but anyway and finally i'm going to call my cat users function let's use it image will be user start image it was image or profile picture or we didn't create any api and user model okay we didn't create any profile picture i will say image and type will be string okay and it's not gonna be required okay let's close here and i'm gonna say if there is no image use no avatar picture i'm just gonna copy and paste here i just found this on google let's see what we have okay something like that of course we can delete other users here we need only one of them so let's delete other allies okay and i'm gonna write here users dot map and for each user i'm gonna call this component this ally okay of course it's gonna be user not users and here i should provide my key unique key is gonna be user dot id so let's take care of this name it's gonna be user dot username we don't have any job title we can delete here and it's gonna be display button let's see okay they are not here something is wrong let's open network tab and i'm gonna refresh page again ah we can't fetch we are not authenticated it's not using this token something is wrong there let's open up request methods it's not able to take this token i think let's console look and see token yeah it's here what's wrong by the way this error comes from our table here it's not important we are gonna fix it but our token is here why we can't do that and we are in admin let's open postman ah it will be a header siding not header let's see i refresh okay they are here it was just a slim mistake okay as you can see there are last members we have only three members right now so what about here this biggest one i can copy here and paste for widget large and this time it's not going to be users it's going to be orders use state let's import and use effect let's see what we have inside order model i will open up here we have user id products a month address and status and also created ad time if you wish you can fetch users user name and image here by using user id but i'm not gonna do this i'm just gonna use user id let's import this user request and set orders and it's gonna be get orders let's change here orders okay let's use it again i'm gonna delete this additional trs here we need only one and after that we are gonna map through this one item so let's do that i will say order and orders and map and for each order we are going to return this component this tr so let's delete this image and instead of name i will say order dot user id and it's gonna be created at time order dot created at order at amount and button type will be order and status okay something like that but our date looks a little bit ugly so there is a useful library for this we can use yarn at timeago.js so we are going to see our dates more readable instead of order and created at i'm going to write here format and it's going to come from our new library i will say import format from time ago let's see again it's more readable so what about this status as you can see we don't have any color that because let's open up our css our class names start with capital letter let's make them lower case and let's see again okay perfect let's take care of this user analytics this chart if you remember when we had user stats it returns us the month number and total user for example this is august and this is september how we are going to connect them to month name so we don't need them anymore if you open up your chart component if you watch the admin template video we are taking title data and data key props from parent and what's our parent here it's our home page here we are sending our data and title and data grid but we are taking this data from dummy data file let's see what's inside as you can see january active users 4 000 february something like that so we are gonna convert our array like that september active users october active users something like that okay let's do that first here i'm gonna create your use state const user stats set user stats it's gonna be you state and at the beginning it's gonna be an empty array okay so right now i'm going to create an array which includes our most name i will just copy and paste here as you can see mounts and all mounts names and by the way we are going to be using use memo that because when we create here a user fact these months will be our dependency but it's never going to change so i will say use effect i'm going to leave here empty and you will understand better right now so let's say const get stats it's gonna be async function not equal okay and i will say try catch block and inside const response and now wait i'm gonna use user request again and it's gonna be get method and remember our endpoint users and stats let's take our response and data and i'm gonna use map and for each item i will say set stats user stats here and take the previous and spread this previous items and finally add new one name months are months array and it's gonna be item id remember it's our month number and finally it's going to be -1 oops not here for example if it's 9 which is september nine minus one will be eight and eight item inside this array will be september zero one two three four five six seven eight as you can see it's going to be september and additionally i'm going to write you active user or new user whatever you say and it's going to be item total by the way i can delete here and as you can see it warns us it says you have missing dependency which is mons we should add this here let's call our function here and let's see what we have user stats console.log user stats i'm going to open console there is something wrong it's empty by the way we can delete this jwt and also we should give unique key for our maps they are not important we are going to fix them but something is wrong oh okay i forgot slash here and as you can see we have august active user 2 and september active user 1. so we can apply this to our chart i'll delete here and it's gonna be user stats and perfect august active two users and september only one absolute it works so let's delete this token here console.log token okay for widget small okay we have key here widget large okay we don't have that's at it's going to be key and order dot id okay so let's take care of this revenue we are gonna take care of only one item here that because we didn't create any cost model in our api it's inside our featured components i think here let's open okay quickly i'll say const income and set income and it's going to be your state and at the beginning empty area quickly use effect and i will say const get income i think maybe i should copy and paste but i don't know maybe some of you just wanna see again and again so i will say const response and it's gonna be await user request it's gonna be get again by the way i forgot here catch okay why it's not importing interesting request methods and user requests okay i'm going to write here order sorry orders and income remember it returns the income of this month and the income of the previous month and after fetching data i will say set state and it's going to be response and data i'm going to call this function here and let's see what we have [Music] income by the way we didn't fix this table but we are gonna do don't worry about that as you can see again month number and total so we are gonna write here the latest amount latest sales and here we are gonna compare the latest sales and the previous sales and finally we are gonna write here the percentage to do that let's create one more use date and at the beginning it will be zero and i will say percentage so let's set that also i will say set percentage response and data m1 latest sales and i'm gonna get the total 200 and i'm gonna compare it 150. how i'm gonna do this it can be confusing if you don't know basic math but for others it's really easy i think it's gonna just divided by the previous total response and data and previous and finally total if i say minus a hundred it's gonna give me the percentage let's write here percentage and see what we have as you can see it's 33 percent more than the previous month i can use this percentage and this income i will come here and i'm gonna say it's late here take the previous sales which is income and one and it's going to be total like that so what about here i can delete here and write my percentage like that of course you can use math library to prevent long numbers so i will say math floor and it's going to be percentage and as you can see it just flows our number our float so what about this negative arrow we can write here a condition also i will say if percentage is smaller than zero we are going to use the negative one which is arrow downward and negative if it's not if it's greater than zero it's going to be this positive one upward let's use it here and i'm going to close here and save my file and let's see and as you can see it's positive right now perfect i hope you understood so finally we finished our homepage as i said you can take care of other widgets here let's open up our products page as you can see we are using this beautiful data grid right now we are gonna fetch products we are gonna edit them delete them and add new one to do that we are going to be using redux let's create second slice okay i will close here and i'm going to open up redux folder let's close here also for now okay i will say product redux so i'm gonna paste the default slice here let's close and let's see what we have it's exactly the same thing we have create slice function and we are creating our product slice its name is product and our initial state will be products pending or it's stretching doesn't matter whatever you say let's write is fetching actually for the consistency and error at the beginning our area will be empty and after that we are gonna have reducers and we are gonna export them so what kind of reducers do we have firstly we are gonna fetch our data so it's gonna be get all first we are gonna start fetching our data if it's successful we are gonna update our products if it fails we are gonna update our error it's gonna be true to do that firstly i will say get products and start i'm gonna take my state i'm not writing action here that because we will not have any action payload so in this case we can update our is fetching property here it will be true and error will be false and after that let's duplicate this it's going to be product get product success in this case we are going to have action and payload so i can write here action comma here okay so in this case if it's successful it means its fetching process is completed so it can be false error was already false so we don't have to write here what i'm gonna do is updating my products it was an empty array right now it's gonna be action.payload what if it fails that's right here failure and again we don't need any action and payload if you want to you can update your errors like action and payload but i'm just gonna make it true error okay so right now i can export my reducers here start success and failure okay they are going to be our actions and we are going to dispatch them to do that i should create a function here let's copy and paste and it's gonna be get products and it's gonna be on the dispatch we don't need any other parameters here and i will say get products and start and i will make api request which is products will play it here it can be public requests and finally if it's successful i will say cat products and success if it's not get products failure so i can use this function right now let's come here and open our products page product list firstly i'm gonna import react redux use dispatch i can create here use effects and whenever we open this product page we can fetch our data empty array and i'm gonna say get products from redux and api calls and here only thing i should do is sending my dispatch but we didn't create here let's create cons dispatch it's gonna be use dispatch hook let's send this dispatch in this case our dependency will be dispatch and let's see i'm going to open up my redux tool here as you can see it's working start and failure why it fails let's see refresh ah we sent post methods let's make it get and by the way we didn't update our store let's do that it's gonna be product reducer from product redux and i'm gonna use it here by the way you don't have to persist you can use on the user and you can store your products normal in normal way but i prefer writing here so i'll say product and product reducer okay let's see i will refresh the page and not memory redux and as you can see get product start get product success and our products are here awesome let's see here as you can see title description in which everything is here so how can i display them here it's really easy if you remember we are using your selector hook from react redux we can use it use selector and i will say const products and i will say use selector and take the state and return me state dot products and all products inside that state and after that i can use it here in this case we don't need any dummy data i can delete here or it can stay we are going to handle this later and we are going to delete it later and after that i will come here for my data grid and it's going to be my products but if i do that it's not going to work console and as you can see data grid requires unique id for each item but we don't have here that's because we are using id here but in rdb underscore id in this case i should provide my new id here it's going to be get row id and it's going to be row and take row dot underscore id let's see right now okay as you can see it works but we should edit here some more properties are missing and some columns are really small let's take care of them firstly i'm gonna make this 220 maybe like that and we have image palm throw name it's not going to be named it's going to be title perfect and here our row name is stockpot in db remember its name is in stock it returns as a boolean let's see okay perfect and we don't have any status field i can delete here okay perfect as you can see are all items are here so how i'm gonna delete them when i click this we should dispatch our delayed method but we don't have yet let's create it will be easy i will just duplicate this and it's going to be delayed let's write here delayed product start success and failure and again is fetching true error false and here is switching will be false but however i'm gonna delete my item if you are using redux toolkit you can use splash method for the regular redux it's impossible to do that that because it means you are mutating your state but for toolkits we can do this so i will say supplies and i'm gonna write if you don't know this function in javascript basically you are providing here an index let's say two and second parameter will be how many items you want to delete after this index for example just one so basically let's say we have an array one two three four five six this is our array if i say splice and index number is 2 and desired deleted item number is 1 so it counts here 0 1 and 2 and starts from this index and deletes just one item which is 3 like that so it's really easy but there's a problem here we don't know item index firstly we should find it it's really easy nothing complex i'll say state dot products which is our previous array and i will say find index and it's gonna be take item check for each item and say if item dot id equals action.payload.id and after finding our index you can write just one here and it's going to delete this item i will save and failure will be the same let's make our api call i will copy and paste and it's going to be our delayed method delayed function i will say delayed product and i'm going to write here id and dispatch but we didn't export them i think let's do that delete start delete success and delete failure okay i can import them right now delayed product start success and failure let's import them delete okay in this case we are gonna start first and after we are gonna make the late request and it's gonna be products and additionally we should write here the product id so i can use backticks and here i will say id by the way it's not going to be a public request that because we should be admitted to later products so i will say user request here okay if i do that it's going to delete the product from our db but i don't want to do that that because we have only couple items i don't want to delete them and any game to show you so it works trust me yes i'm not gonna do that and after that if it's successful i'm gonna write here my id and it's gonna take this id and update the state in this case i don't have to write here id is just action and payload i'm sending just one item here so let's try i hope it will work i'm gonna open product list again and for handle delete function we don't need this anymore and this data and this product rows let's clean here okay what i'm gonna do is calling delete product from api calls and sending id and dispatch let's see i'm gonna try to delete this one oops oh it's not deleting this id everything looks okay but something is wrong we are sending id here oh okay it's not id it's underscore id let's try again i'm gonna delete this one and as you can see they are gone perfect if you open your redux here you are going to see delayed product start and success yes so what about product page here okay firstly let's select product from inside the state i will close all of them and i'm gonna open product page here okay if we turn back and hover over edit button you're gonna see on the bottom left it says product and undefined we should provide product id instead of undefined let's see what's wrong there product list not css here we should correct this it will be underscore and right now as you can see it's our product id okay perfect so let's take this id and select our product i'm gonna open product again and remember what we are doing we can use location again cons location is gonna be use location i will import this here okay after that i'm gonna select my product id const product id and it's gonna be location and path name and i will split this slash and two okay we have id right now let's select our product const product it's gonna be use selector and it will be state and state dot products and products remember it's our array and i'm gonna try to find my item i will say find for each product check the product id dot id if it equals our product id it means it's our product don't be confused it's really easy inside our product array we are trying to find our product by using its id okay we can use it right now we have image here let's change it product dot image product dot title id of course underscore id we don't have active property and in stock will be product dot in stock let's see okay perfect it's here so what about here let's do the same thing product id sorry title in stock yes or no i will change them true or false we don't have active section that's late and by the way i can add description here and price let's say product description and price product dot price let's see okay nice what about this image let's change quickly product dot image okay so what about this chart as you remember we have income chart here in the home page but there is something wrong okay it's not reading total let's open up our featured info and and here i will say if there is income let's see and as you remember it's our orders and income so i can do exactly the same thing for products here but we don't have this option in the api let's fix it it's really easy i will say order from api okay it calculates our last two incomes so what i will do is write in here a query i'll say const product id it's gonna be request query and let's say product id pid so what i'm gonna do is if there is a product id i'm gonna add one more condition here it's not going to be only created at date so i will say and i want you to focus on here that because it might be new for you this is how you can create conditional objects i will just use spread operator and i will say if there is a product id create new condition products because remember let's open up order model we have user id and products array so i can make a condition and say if product id includes my request and query and product id so what i will do is writing here element match and it's going to be product id you can be confusing because it's exactly the same name you can write here product id equals product id if they are in same name you don't have to write like that it can be like this okay let's check i will close here and here i hope everything is okay and i'm gonna write here product stats using use state will say const product stats and set product stats and i will write use state and at the beginning it's going to be an empty array and after that i will create again my months that's right here maybe under our selector like that and i will import use memo and then i'm gonna create again to use effect like that i just created a function it hatches orders and income and it's going to be our product id and finally we are going to choose month's name like so and finally i just created one more property here and it's going to be item and total so let's use it here our data will be product stats and data key is sales that's why i write here sales and title will be sales performance let's save i will refresh and as you can see september and august a hundred but agus should be here and september here let's do this i will just sort my data what i can do i can say const list and response and data i'm just gonna sort this data i will say take a and b take two items and compare them and return a dot id minus b dot id so in this case it's gonna work properly let's change this okay let's see okay this time august here september is here okay i'm not gonna show you how to update your items here because we are gonna do the same thing in create page we are going to upload our images we are going to change these inputs and we are going to create new item so it's going to be exactly the same thing here but if you want i can show you how to edit your product redux and after that it will be much more easier for you product redux and we have too late here i'm gonna duplicate this again and it's going to be update let's change those names updates and let's replicate this and change names again okay so what we are gonna do here start will be the same actually if you don't wanna write this again and again you can create new action here and you can say just start or something you don't have to use it each time but anyway and after that if it's successful his fetching will be false and how we are gonna update our item it's really easy you can do like that for and if you just write here it's index and if you say equals for example 10 it's going to be updating to item which has index id 2. so in this case it's going to be 0 1 and 2. so we are going to change this it's going to be 10. it works like that so what i'm going to do i'm going to find my index again but we are not gonna use supplies so i can delete here and what i will say is find my index update this using action and payload and new user let's say user in this case we are going to be using two payloads so i will update here it's going to be id so it's going to find your item and update with new one okay so what about adding new item let's say add and i will add here okay it's really easy only thing i shall do is coming here and saying push and action dot payload that's all perfect basically it adds new item to our array let's create our api call i will duplicate this and update product and add product it's gonna take a user new user which admins enter here and after that it's gonna be updates product actions and finally we are gonna give an object here which is id and it's gonna be by the way we can't say user id that because when you enter here something it's gonna include on the title description price and image so it means we should take id also so id will be id and user will be user as i said before if you are using same name you can write it like that okay let's import them this three will be updates and these will be at okay and of course you're gonna update your item using axios user request and here we are gonna take user from by the way we are not in the user page it's gonna be products i'm so sorry let's change them products okay here is normal what about our redux products and okay we set user here it's gonna be product okay so i'm gonna send here product and dispatch and we are gonna dispatch our add product actions let's open this comment and i will delete here it's gonna be post method oops post and we are gonna send our product okay if it's successful we are gonna take this response and data as a payload and we are gonna dispatch this okay let's close everything and open create new product page okay product here let's click here and let's see what we have firstly we have image name it's going to be title in stock active let's change them image is okay it's going to be title it can be airports it can stay here maybe i can change here it can be true or false so i'm gonna be using select and option first one will be true and false let's write here yes or no and after title by the way we can add our price and description description and price like that no we don't have this section let's delete it here i'm gonna delete this section and that's all i think it's really easy to take those items those inputs and call our add product function from api calls but what about this image where we are gonna upload this when i click this button we are gonna choose any image and after that let me create our item it's gonna upload this image to firebase it's gonna take the response which is image url and finally we are gonna complete our object product object and we will be able to send this through our api call to use firebase i just open console.firebase.google.com and also firebase storage documentation we are gonna upload our image like in the example here but before if you want to let's take care of our inputs title description by the way we forgot here our categories let's add that also after price maybe it's gonna be categories and placeholder jeans and maybe skirts and don't forget it's going to be an array so let's create our use state and take care of our inputs i'll say const products or inputs set inputs i will say use state at the beginning is going to be an empty object and after that one more use state it's going to be our file let's say file or image and finally i'm gonna create my categories i just separated them for that because it will be an array so we should split our categories first category string and after we are gonna create an array and at the ending we are gonna combine all these states okay i'm gonna create on change event for these inputs so let's see not for image it will be different for title on change it's gonna be handle change let's copy this for description price and select okay so what about these categories i will say handle categories and for the image on change but this time i'm gonna directly set my state events and set file event.target but this time it's gonna be files i'm gonna take just one file because it's a single file okay let's create them const handle change handle file and categories actually we don't need file we are already done so it's going to be categories okay let's update our inputs i will say set inputs take previous inputs and return the one i will say previous and even target dot name it's gonna be event target and value but we don't have name this is our target target target but as you can see we don't have names so let's create i'll say name title it's gonna be description price just make sure that those names are exactly the same names inside your db in product collection and stock okay let's see console.log and inputs as you can see title is here description price and in stock okay by the way price will be number not text so i will come here and change this number okay so what about categories we are going to separate our categories using comma like that and we are gonna take these two items and create an array it's really easy only thing we should do is using split method so i'll say set categories and event target dot value and let's use split and comma let's see as you can see they are separated perfect so we are done we created all of our inputs right now we can create a click event and send our data to db let's say on click it's gonna be handle click let's create this const and i'll click event and i'm gonna say prevent default okay and after that i'm gonna upload my file and call my api call so let's create our firebase project i will say create new project it's gonna be oops shop okay i don't want any analytics it's gonna create soon and after that we are gonna import those functions and use inside new product component by the way i'm going to create firebase.js firebase.js and it's going to include all our firebase configuration but before i should import filebase library let's say yarn at firebase and during this process we can initiate our firebase application so i'll say continue and here let's create our web application app nickname let's say shop again it really doesn't matter and after that it's going to provide us our configuration let's copy this and paste here and i'm going to export my application export default and it's gonna be app okay right now i can use this application inside my component let's close here but firstly i just wanna give image name for my file let me show you console.log and file and when i choose any file here there is a mistake here let's fix it set file target files oops it should be here let's choose again and as you can see we have file here all those informations and additionally we have file name but if we use this file name whenever we try to upload same file not same file but a file with same name it's just gonna overwrite this file to prevent this i'm gonna try to give a unique name let's come here and say const file name and i'm gonna use the current date i will say new date it's gonna return me a timestamp get time and after that i will say file.name so it's gonna take our name here and it's gonna add the current date here a timestamp so basically it's gonna be a unique file and after that let's use get storage rev and other functions here and upload our file i will say cons storage it's gonna be get storage and i'm gonna provide my app let's import this also import app from firebase okay so it's ready to upload i can create my storage graph const storage ref and it's gonna be rev my storage and my file name it's a capital letter okay if you look at here you can just follow from this page actually i can just copy and paste okay it warns us that because there is no default i think okay it's gonna be storage rev or it can be just like that okay basically we start our uploading process here and you can write here if you want you can delete doesn't matter it just show us our progress bar in the console if you want to you can create another use state and say percentage for example and you can set your percentage here and show to user as you wish and after that if there is no error it's gonna give us our image url but before let's open up our console and storage here i'll say get started as you can see each storage has a rule and it says allow read and write if the user is authenticated but we are not using firebase authentication so we don't need that i'm gonna change it i will click rules and i'm gonna delete here or if you want to you can just say equals if it's null it means even if there is no authenticated user he can read and write let's try actually i will choose one of them and i will say create as you can see it shows the percentage and finally it gives this url let's see this is our image perfect so instead of printing this url we are gonna create our user sorry product and we are gonna send this product to rdb so if i write here inputs i will spread this and for image this download url and for categories it's going to be cat let's see what we have i will choose new file let's write here something i will create after uploading file as you can see we have the complete product title price stock image description and categories perfect so what i'm gonna do is writing here const product and it's gonna be this object and after that let's say add products it's not the correct name let's check api calls yes add products but it's not importing no it's here okay and finally what we are sending remember our product and dispatch product and dispatch of course we don't have let's create here const dispatch use dispatch okay isolate this by the way it's ready i think let's see i hope everything is ok i will choose file let's open our redux tool by the way we can follow here title red skirt description llamado and price a hundred categories skirt maybe woman in stock will be yes okay let's create where's our redux tool okay here i will create a failure let's see what's wrong network api products post let's see okay user requests post ah i don't have to do that that because we are already sending an object let's try again create and as you can see it's successful let's check here add product start and success have some and as you can see my score is here and my skirt let's check products and it's here awesome it works if i try to edit we haven't sold yet but all those informations are here awesome i think you're understood i don't have to create update it will be the same your inputs your image after taking all these information only thing you should do is dispatching your update actions but we already created here i think yes here only thing is calling this function and sending your product id and product and for the user page let's see it's exactly the same thing nothing different so i'm not gonna waste your time and my time you're gonna fetch data you can create client redux and client slice and after that you can fetch them delete them edit them and create new user i hope it was a good tutorial and again this project is not completed it's just homework for you just handle these users and update your products and also you can create as i said your costs sales and you can calculate your revenue and take care of all others features remember it's just a tutorial it's not a complete project sometimes i see people say in the comments why you didn't add comments why you didn't add logout feature or something if you really understand this tutorial it's probably the easiest thing here your user redux you will say log out and state and state dot current user and it's gonna be an empty object again and that's all or null here you can say null and that's all you just logged out please see this tutorial as a learning path how to use redux how to create components how to combine api calls with redux how to fetch data how to make crude operations you're gonna have tons of errors but just be patient and follow instructions if you get any error just ask your questions in the lamadair social media groups and that's all i think so we finished our project if you want to deploy this app you can watch the free deployment video or do vps deployment video i hope you liked it if you learned something new today please like the video and leave a comment and you can support the channel by using the join button or the link in the description below and don't forget to follow lamadev's social media accounts you can find inspiration there and you can ask your questions so that's all i hope i will see you in the next tutorial goodbye you

Channel: Lama Dev

Views: 57,218

Rating: 4.9951205 out of 5

Keywords: e-commerce, e-commerce app, react e-commerce, e-commerce website, mern e-commerce, full stack e-commerce, node.js e-commerce, mern-stack app, mern project, react, react.js, react course, react project, react tutorial, react redux, redux, redux toolkit, full stack shopping app, shopping cart, learn react, react for beginners, react hooks, react jwt, jwt, node react, node react mongodb, node.js, node.js tutorial, stripe, node stripe payment, react stripe payment

Id: y66RgYMAgSo

Length: 192min 7sec (11527 seconds)

Published: Thu Sep 30 2021

Reddit Comments

[u/bansalmunish]

this is awesome.