React E-Commerce App Design Tutorial | React Shopping Cart UI Design

hello my friends today we are gonna design this beautiful ecommerce web application using react this is our homepage we are gonna create this absolute slider without using any library categories products and other components for this project we are going to be using functional reusable react components react hooks and start components after this video you are gonna see how easy to create responsive react pages and you are gonna improve your ui skills and the next week we will create an airsome rest api using node.js and mongodb and finally we are going to combine that api and this design and we will complete our menstag shopping application i hope you will like it if you want to see more tutorials like this please like the video and subscribe to the channel and for future projects you can support the channel by using the join button or the link in the description below ok if you are ready let's get started ok firstly we are going to create our react application but to do that we are going to be using our youtube channel github repository so if you go that page you can find here the branch that we are gonna be using which is react mini and after that we are gonna clone this branch that because for new visitors i'm gonna explain again normally to create react application we are writing mpx creates react app but if you do that it's going to create your react application but all these unnecessary files as you can see there are many things here that we are not going to be using and inside our js files as you can see there are some default stuff here so that's why we are using our github repository so how we are going to do this let's come here you can fork and work on this github repository but also you can come here and copy this and inside your terminal you can write git clone and it's going to be single branch and i'm gonna write here my branch name which is react mini and after that i'm gonna paste my url and finally i'll write here dot that because it's gonna install whole files inside my folder it's not going to create another folder okay i will enter and it's here but as you realize we don't have our dependencies to install them you can write here npm install or if you are using yarn just yeah i will enter during this installation let's close here and let's check our font family we are going to be using this font family if you go to the phones.google.com you can find this font style and you can choose any style here by clicking select this style as you can see i've already chosen all of these styles and after that i'm gonna copy this link i'm gonna paste into my application and finally we are gonna be using this font family so let's do that let's open up our public folder and inside index.html and i'm gonna paste my link here okay after that let's copy our font family and paste inside our style css which is here and that's all let's open up our app.js and it writes just hello world let's run our application and display on our browser i will say yeah start or npm start and it's here so i can close here and our application is ready to work on it okay i can shrink this terminal a little bit and i can make this font size bigger okay you can see better writing so let's create our first page i will come here and create new folder and i will say pages and inside these pages what we are gonna have firstly we are gonna have home page jsx we are gonna have login page register page product page but we are gonna create them later so let's create our home function here there's an app some shortcut for this if you go to the extensions and here if you install this extension you can use function shortcuts okay let's close here and i'm gonna use this shortcut so i will write rfc and as you can see it created a function which is home and it just exports this function but some of you like me tend to use our own functions because it's more modern i think so you can write here raf and ce as you can see it just created an arrow function and exports it here awesome so you can use either way really doesn't matter and after that let's write here home page and i'm gonna call this first component inside my application so i will go to app.js and here instead of hello world let's delete here and let's call our first page i will say home as you can see it's here source pages and home i will import it okay it's here and i'm gonna close this stack now let's see and it has changed perfect so what we are gonna add inside our home page firstly i'm gonna add here a number and after that we are gonna have slider and our categories and products so let's create our first component which is nabar let's open here and inside source i'm going to create another folder which is components and inside let's create number.jsx and let's create our first function r a f c e okay let's close here and i'm gonna say null bar and if i go to the home page and here let's delete and call our navbar and let's see okay perfect it works so i can close my index.html and app.js and let's open here and take care of our top bar firstly we are not gonna be using css we are gonna be using style components that's because there are many advantages of using style components if you didn't watch my start components video and if you have no idea what this style component is you can definitely check that video out but it's really easy if you keep watching you're gonna understand better there is nothing complex trust me so firstly instead of div we can create our own style components so how we are gonna do this let's create here our first component so i will say const container instead of div we are going to create our container to use style components we should import our library first so i will expand here and i'm going to open new terminal and i'm going to add style components library to do that you can write here npm install and style components or yarn add style components so i will shrink this again and i'm gonna write here styled i'm gonna import this from my new library as you can see styled from style components and after that i will say dot and my html element which is div because we are using div here and after that i'm gonna use back ticks and inside i'm gonna write my style it's that easy for example let's say height 60 pixels and background color let's say black here and instead of 2 i'm gonna write here container and let's see what we have here and it's here so it's the exactly the same thing where you write your tier and class name and let's see container and when you open up your style file for example style.css you're writing here container height 60 pixels and background color black you can choose either way but i highly recommend you to use style components that because for example you used your container and let's come here home page and for example inside this div again you used class name and container if you create here your style and right here for example background color red your application is going to conflict that because you have container here and you have child and your child there is container also so which background color it's gonna use black or red unfortunately it's gonna use red to prevent this kind of problems we are gonna be using style components otherwise you should come here and firstly right here navbar and after that container for a small application it's not important it's totally okay but when it comes to really complex application it can be really annoying that because you have to write long and long class names again and again so the best way is using style components okay let's create our other style components firstly let's open up our browser and decide what we are going to have firstly i'm going to create here a wrapper that because i'm going to give padding and after that i'm going to split this container into three parts first one will include our language option and after that i'm gonna create here a search input and in the middle i'm gonna create here our logo and finally our login and register links and other stuff okay firstly i'm gonna delete this background color it's not gonna be black and after that let's create our wrapper i'll say const wrapper and styled it's going to be div again and inside backticks i'm going to write here padding from top and bottom 10 pixels from left and right to any pixels so let's write here i will say wrapper i'm going to cover this text and let's check as you can see we have space from left and top and from right and bottom also so i can create my other components let's say const left and styled is gonna be due i'm gonna replicate this second one will be center and this one will be right so let's write them here firstly it's gonna be left and let's see left and center let's change it and finally right and i'm gonna say right and as you can see it's not horizontal to do that i'm gonna use flexbox i'm gonna go to the parent which is wrapper and i'm gonna say display flex and as you can see they are horizontal right now so however i'm gonna split them it's really easy i'll write here justify content and it's gonna be space between and this time first element at the beginning last tournament at the ending and this is in the middle perfect but if i write here something really long let's say lorem and i'm gonna create this random text and i'm saving and as you can see there is something wrong here that because our left side is really long and center and right is here so how i'm gonna prevent this to do that i should give some sizes for this left center and right side and they should be even to do that you can write here width and if you consider the wrapper is a hundred percent it's going to be 33 percent if i copy this and write for them as you can see they have same size right now but it's not the efficient way because it's not a hundred percent in total to do that you should write here three three three three something like that and even like that it's not gonna be a hundred percent so what i'm gonna do i will come here and write flags one so i will do the same thing for others let's see as you can see they are exactly the same so if i write here for example 2 left and right side is 1 unit and our center is 2 units twice bigger than left and right side it's that easy ok so let's create other components inside our left side i will say const and let's say language i'll say styled and it's gonna be span because it's gonna be text for now after we are gonna change this with maybe inputs we can select our languages so let's say font size 14 and i will say cursor pointer let's see i will copy this and inside my left side i will paste here and inside let's say english okay perfect as you can see cursor pointer okay after that i'm gonna create my search input to do that i'm gonna create search container and it's going to include my input and after that my icon so what kind of icon i can use you can use font awesome and design material ui there are a lot of options but we are going to be using material ui it's the easiest way to use your icon sighting let's open up here material ui and icons and as you can see there are tons of icons here you can choose any of them first of all i'm going to choose search and we are going to be using this icon and as you can see we should import this library first but it's not enough we should also import material ui and core library otherwise we are not gonna able to use these icons so let's do that i will come here to my terminal and i'm gonna say npm install or yarn add at material ui firstly car and after that material ui icons and it's a really useful framework for your react ui and i created an awesome material ui tutorial by the way if you want to improve your ui skills i highly recommend you to watch that video okay anyway let's come here as you can see it's ready i will shrink this again and i'm gonna use my icon here remember it was just search i will say search here and as you can see it recommends us to use this element from this library material ui and icons and i'm gonna click this and it's here perfect i can use this icon right now let's close this tag and i'm going to create my search container where is our left side okay after language i'm going to create my search container it's going to be styled and div again and let's give some border first i will say one pixel solid and let's say light gray color let's see and it's here but as you can see is under our language so i will do the same thing i'm gonna use display flags here our parent i will say display flex they are horizontal right now but as you can see they are not vertically centered to do that i will write here align item center and have some they are centered so i can do the same thing for this search container let's come here i will say display flex and align some center okay so i hope you understood how to use flexbox to make your whole items horizontal you can use flexbox to center them vertically align itemcenter and to center them horizontally you can use justify content from now on i'm not gonna explain how to use flexbox as you can see it's really easy by the way i can center my left center and right side also let's go to the wrapper and as you can see we did right here align item center okay let's give some properties for this container search container and i'm gonna give margin left first i'll say 25 pixels maybe i can make this 0.5 it can be smaller [Music] and after that let's give some padding inside okay i have so let's create our input i will say const input it's gonna be styled and input i'm gonna open my tactics and inside let's don't write anything just copy and paste here and let's see okay it's here but as you can see this border doesn't look good let's change it i will say border none and okay perfect let's take care of our center side i'm gonna add here my logo i will say const logo and styled let's say h1 i'm not gonna use any image i will just say font weight bolt let's use it inside our center i'm going to open my tag i'm going to write my application name that's right here dot it can be fancy writing perfect but as you can see it's not centered to do that let's go to do center and i will say text align center okay awesome so what about this right side i'm gonna add my register and login links and after that i'm gonna create a shopping cart icon and we can use material ui page let's open up again and here i'm gonna find page and as you can see it looks really nice we can use one of them let's open up this code and as you can see we should import page from our material ui and core and after that we are gonna import our icon and we are gonna combine them like that it's really easy let's come here firstly i'm gonna create my links i will say after write const let's say menu link or menu item styled and let's say due and font size let's say 14 and cursor will be pointer okay let's use it inside my right side i will say menu item firstly let's say register i will replicate this it's gonna be sign in and finally i'm gonna use my page let's copy this and paste here i'm gonna import this page from our material ui as you can see material ui and core i will click this and here we are not gonna use this mail icon instead let's search for our icons and here i'll write it looks nice but it's filled with black i just wanna make this outline i'll click here as you can see it's better i will copy this name and only thing i shall do is pasting here and i'm going to delete last letter and write again and it's going to show this recommendation as you can see material ui icos perfect let's check here patch from core and shopping cart from icons perfect and here as you can see we can write any number it's going to be 4 for now and perfect let's make them horizontal inside right side i will say display flags and align item center but as you can see there is a problem here that because it's at the beginning how i'm gonna move this here at the end anything i should do is writing here justify content this time it's not gonna be space between or center it's going to be flags and and off to flexbox perfect so let's give some margin for this menu items i will say margin left 25 pixels awesome i can change this icon style to do that i'm gonna use inner style let's go to the search icon and i will write here style and inside i can write my color and font size let's say color gray and font size it's going to be 16 pixels let's see as you can see it's smaller and gray and it looks really nice so we finished our navbar let's create other components before adding here a slider we can create here an announcement and we can announce our sales or free shipping opportunity or whatever let's create our component i will open up my components and here i will say announcement oops i created folder let's delete this and create file okay i'm gonna create my function and let's create our container first by the way you don't have to import your react here it just creates because of this extension but we don't need that after react 17 anyway let's create our container i'll say cons container it's going to be styled i'm going to import this style component here and after that i'll say do firstly height will be 30 pixels let's give background color it's gonna be teal and font color will be white let's see first i will write here container and i'm gonna copy and paste my text here i don't wanna waste time okay let's see i will open up my home page here and before this number i'm gonna call my second component i will say announcement but make sure that you are using your components that because it recommends us to use material ui and icons we're not gonna use it we are gonna use our component enhancement from components perfect i'll close this and let's see and it's here also we can center this text and let's take care of this font style or something and i will say display flags and i'm going to center them vertically and horizontally and let's say font size 14 it's going to be smaller and font weight is going to be bolder 500 okay awesome it looks really nice right now we can create our slider i will close everything here and i'm going to create my new component which is slider i'm going to create my function okay firstly i'm gonna create my container as you always do i can delete here and i will say cons container it's going to be styled and div and i will say bit 100 percent and height will be 100 vh so basically it's going to be full screen slider and after that i will say display flex after that i'm gonna create two arrows that we can click on that i will say arrow it's gonna be our container and inside i'm gonna create my icon let's choose here i'll say arrow let's say left i will copy this and paste here of course i should import okay and i'm gonna need one more arrow i will duplicate this and it's gonna be arrow right outlined let's import this also okay they are here let's create our style components i'll say const arrow it's going to be styled and do and i'm going to say with 50 height 50 and background color it's gonna be white but it can be a little bit grayish something like that maybe okay we will try and i will say for the radius 50 that because it's gonna be circle let's see [Music] okay i forgot writing inside my home page after nurbar i will say slider again don't import from material ui is going to be our component okay and it's here perfect but as you can see they are not centered let's do that quickly i will say display flags align item center and just try content center okay perfect i will give background color for this container and we can see better writing let's choose coral maybe okay so how i'm gonna position this arrow left side will be somewhere here and right side will be here to do that i'm going to use position absolute and don't forget guys if you are using position absolute the parents should be position relative okay right now i'm gonna center them vertically it's gonna be in the middle of this container how i'm going to do this it's really easy i will say top 0 and bottom 0 and if i say margin auto it's going to center this vertically as you can see it's here by the way right side is also here that because their position are same so however i'm gonna separate them for the left side it's gonna be left 10 pixels for example like that and right side will be right 10 pixels to do that i should use props here we can use props inside our stack components and it's the one of the best features of the style components so what i mean by that let's come here in our arrow component i'm gonna give here a prop which is direction it's gonna be left side i will copy this and for this arrow it's going to be right side basically we can use this probes here inside our arrow component so let's delete this 10 pixels instead we can write here our javascript so i will say take this props so how i'm going to use this direction it's really easy i will say probes dot direction and i can write here my condition i will say if it's left it's going to be 10 pixels so i can do the same thing for right side that's right here semicolon okay and for right side we are going to check again our directions if the direction is right right will be 10 pixels let's check as you can see left side is here right side is here perfect if you are confused just watch here again and you are gonna understand there is nothing complex and after this i will say cursor pointer i just give this cursor effect coming okay perfect so i can change this opacity maybe i'll say opacity it's going to be 0.5 it can be a little bit transparent like this okay perfect right now i can add my slides to do that let's delete this background color first i'm gonna add wrapper here it's gonna include our images and when we click this left and right side we are just gonna move this dropper to left or right i will say const wrapper it's gonna be styled and due and i will say height 100 percent let's write it here between these arrows i will say wrapper and inside i can write my slides let's create slide container i will say const slide it's going to be styled and div and basically we are gonna add here our image and here we are gonna have our title description and button to do that i'm gonna create here two more tips this is gonna be image container and it's gonna be info container of course there are gonna be horizontal image and info so i should write here display flags and align item center i will give some spaces here okay so for the container image container flags will be one and this is gonna be same that because they are gonna be same size so after that i can create my image here i'll say const image styled image so before doing anything i'm gonna write here my containers and image info container it's not image it's like that i think okay and inside i'm gonna write my image let's write here our source it's gonna be this url and let's see okay like that but this image is really big and it's overflowing right now let's come here by the way i forgot this light after wrapper it's gonna be slight for the slide i'm going to give with 100 vw so it's going to contain all our container and height 100vh and for this container i will say height a hundred percent which is 103 h because it's this parent and finally for this image i will say height 80 percent and have some so for this info container firstly i'm gonna give some padding let's say 50 pixels and after that i'm gonna create my title description and button i'll say const title it's going to be styled and h1 this is going to be description and button okay let's write them here inside our info container firstly title description and button okay i'm just gonna copy and paste my texts and for button it's gonna be just short now let's see okay something like that let's change this styles for the h1 it's gonna be font size 70 pixels for description i will give some margin first margin 50 pixels from top and bottom and i don't want to animate you from left and right and after that font size will be 20. okay maybe font weight 500 and i want to change this letter space i will say letter spacing let's say three pixels okay it's better so what about this button i will give padding first padding 10 let's see okay i will give one size i don't want this gray background so i'm gonna delete it background color will be transparent okay and finally cursor pointer okay nice so this is gonna be our first slide so let's duplicate this we are gonna use dummy data after but for now let's duplicate and see and as you can see they are vertical so how i'm going to make them horizontal it's really easy let's go to the wrapper it's going to be display flex okay also they are like that right now but i don't want to see beyond this screen i'm just gonna move this slider when i click this button or this one so i can prevent this overflowing to do that i will go to the container and i will say overflow hidden by the way there is a typo here it's gonna be sale and let's change this maybe winter sale and let's say poplar okay by the way i can give some background color for these slides to do that i'm gonna pass them as props so if i come here and say background color first one will be this color which is light blue and i'm gonna copy this and paste for other slides and i'm gonna change them this is second and this is third one so how i'm gonna use this background i can take this props here inside my slide so i will say background color i will say take props and write here props dot pg okay we can't see here that because we forgot here hashtag so how i'm gonna give arrow functionality firstly i'm gonna create click event for this left side and right side and after that we are gonna handle that click so let's come here for this first arrow i will say on click event and it's going to be handle click but this is our left side so i should indicate here my direction which is left of course if you are taking parameter you should write your arrow function okay so i'm gonna do the same thing for right side i will copy this and for right arrow i will paste and this time it's gonna be right so let's create our handle click function here i'll say const handle click and it's going to take correction before writing anything here i just want to show you something if i go to the my wrapper and if i say transform and translate x that because we are gonna move this slider on the x-axis and if i say minus a hundred pixels as you can see it just moved on the x-axis a hundred pixels so if i say 200 as you can see it's gonna move like that so what if i write here a hundred vw as you can see this is our second slide if i say 200 here it's gonna be third one but i shouldn't say 300 that because we have only three slides as you can see it's empty right now in this case when i click it's gonna be again 0vw and same thing for the left arrow by the way we can see it we should give that index all this arrow but anyway when i click this left arrow it shouldn't be 100 v h that because it's gonna be empty again like that in this case it's gonna be -200 which is our last slide like that so how i'm gonna give this functionality at the beginning it's gonna be zero and let's take care of this arrows this is our arrow so i will say set index 2 okay perfect i'm going to create use statehook and we are going to decide our slide index you are going to understand battery right now don't worry i will come here and i will say const slide index and set slide index and at the beginning i will use use statehook it's going to be 0. that's because we are going to be using slide arrays and it's going to be our first element second element and third element actually let's do that i'm gonna move this i will come here and inside source i will say data.js and inside i'm gonna copy and paste my array and it contains our ids image title description and this is going to be our background color so we can use these slider items we don't need to write them one by one so i can delete these two slides okay i will say import slider items from as you can see our data so i can use this before this slider i'm gonna open curly brackets here and i will say slider items and i'm gonna map to this array and for each item i'm gonna write this light let's move this here okay so in this case we don't have to write by manually it's gonna be item dot bg and this is gonna be item dot what was the name image title description image title oops item of course and description something wrong oh okay i forgot just saving okay right now image oh it should be like that okay perfect as you can see it's exactly the same thing and our other slides beyond this right side you can't see them right now so what i'm gonna do when it's our first slide which means zeroth element of our array and i click this button our slide index will be 1. so in this case when i click this button it shouldn't be -1 that because it's our first slide we don't have any other slide before this one in this case we should go to the third one so when we see here our second slide our slide index will be one when i click this button it's gonna be two and when i click this button it's gonna be zero again and finally when we see here our third item which means slide index is two when i click this button slide index will be one and when i click this button it's gonna be zero again that's because we don't have any other slide firstly we have direction here when we click these buttons i'm gonna write here if else block firstly i will say if direction is left if it's left arrow i'm gonna update here my slide index it's gonna be set slide index so i'm gonna write here one more condition if it's not first item make it minus one so i will say set the slide index but if it's bigger than zero right here slide index minus one if it's not which means if it's our first slide like that we should go to the last item which is two so i'm going to do the same thing for right side i will say as which means your direction is left i'm gonna set my slider again i will say set slide index and right now my other condition i'm gonna say if slider index smaller than two it means we can go to the right side so we can increase our slide index so i will say slide index oops slide here [Music] and i'm gonna increase this number if it's not we should return our first light which is zero so in this case i can use this slide index in my wrapper remember we can just multiply this value for each 100 vw remember we are going to right side so for the first item it's going to be 0 and it's gonna be zero for the second item is going to be one and in total it's going to be minus a hundred and finally when i click to write again it's gonna be two and we are gonna see our last item so i can take this value as props let's come here inside our worker i'm gonna pass this props i will say slide index it's gonna be our slide index [Music] so basically i just passed this value okay let's use it i will come here and inside let's delete here and use our props i will say take the props and props dot slide index and multiply by minus 100 and of course i should write here vw and let's see i'm clicking right side and as you can see second one i'm clicking again third one and i'm clicking again and it's going to first run again perfect and this is our first slide i will click here it's gonna be our last item perhaps [Music] perfect but we don't have any animation here let's add that and it's going to look better i will say transition i will say all one second or when i'm half second and it's gonna be is timing function let's see again i'll click and as you can see we have an animation perfect it's really nice by the way if you want to learn more about these animations you can check the description below i have an app some animation course you can learn about these transitions transforms animations i highly recommend it okay so we finished our slider also it looks very nice so we can create our categories so before this category component i'm going to write here my fake data again i will just copy and paste as you can see we have categories id image and title so we are gonna have three categories so let's create our component i will say categories jsx and i'm gonna create my function let's write here container so basically we are gonna have three categories to do that i'm gonna write here another component and it's gonna be category let's say item and container again let's create them const container it's going to be styled and let's do the same thing for categories i'm gonna import styled and one more thing i'm gonna import and it's gonna be my category array here i will write here data okay perfect so i can map through my array i will say categories dot map and for each item i'm gonna call my category item component okay so as prop i will give my item so i can take this prop here and i can use inside my container okay let's close this slider and i'm going to open my home page and after slider i will say categories here okay so what i'm gonna do by the way we are importing this from material ui it should be style components let's check here too oh okay there's a mistake okay so firstly remember it's our categories not item i will say display flex because they are going to be horizontal and additionally i'm going to give some padding let's write here something and we can see let's check okay it should be without curly brackets let's check okay we have three hello here so i'm gonna separate them i will say justify content and space between okay awesome let's create our items i will come here and inside my container i'm gonna create first image of course we are gonna create later and after that we are gonna have some info this info container is gonna include our title it's gonna be item.title because remember in our data we have image title and our image will be here source item dot image i will close here and finally i'm going to create a button and it's going to say shop now let's delete this and i'm going to create my image info title and bottom here image is going to be image and info container it's going to be div and title let's say h1 and button [Music] okay let's see okay images are really huge and our title and button perfect let's make these images a little bit smaller and move this information on this image to do that i will write here flex 1 remember all these cards will be same size but if you do that it's not going to work that because we didn't give any size for our image so i will come here and say with a hundred percent okay perfect so i can give some margin between these images i will go to the container and i'm gonna say margin 3 like that awesome and i can use some height and they will be same let's say height 70 vh and after that i should write your height a hundred percent like that but as you can see our images are a little bit weird that because we didn't give any object with so i will write here object fit is gonna be covered so basically it's gonna crop these images and show us this covered version awesome so how i'm gonna move this information here it's really easy i'm gonna give position absolute but as i said before if you are using position absolute the parent should be position relative let's do that for container i will say position relative and for info position absolute okay so what i'm gonna do is giving width and height it's gonna be a hundred percent and a hundred percent basically it's gonna contain all our container and i should give my positions it's gonna be top zero and left zero basically it's going to start from here and contain all these container if i write here background color as you can see it contains but they are here so how i'm gonna center this as we always do i will say display flags align item center and justify content center okay awesome but they are horizontal i'm to choose flex direction i will come here and i'm going to say flex direction it's going to be column this time they are going to be vertical like that so let's take care of our title i'm gonna say font color white and i'm gonna give some margin between this title and button like that and i'm gonna change this type button style i will delete this border and i'm gonna do padding okay let's change this background color and font color i will say background color it's gonna be white and font color will be gray and finally i will say cursor pointer so we can click like that maybe a font weight 600 okay apps it looks really nice of course you can enhance these categories you can add more but for now i'm just gonna add three of them so right now what i'm gonna do is adding my products after these categories i'm gonna create one more component here let's close them by the way i can add my fake data here i will just paste here our products we have id and image okay let's create firstly we are gonna have products so i will do the same thing as we did here we are gonna have container which is products and each cart here will be our single product so i'm gonna create one more component it's gonna be product jsx okay let's create by the way i will save here rafc it's gonna be container cons container styled and do so i can do the same thing here this time it's gonna be products okay so i'm gonna import my data popular products here let's import popular products from data okay so i can map this products dot map for each item i'm gonna call single product and i'm gonna give my prop here which is item right now i'm able to use this item by the way i forgot doing something here if you are using any map you should indicate here your unique key so what's our unique key here inside our data as you can see it's our id it's one two three all these numbers are different so it can be our unit key so i will say here item dot id if you don't do that it's still gonna work but it's gonna warn you inside your console that you should use unique keys of course i should do the same thing for categories here our map i will say key item dot id again so what else we used here slider let's open up our map and i will say key item dot id okay so let's give some padding and make them horizontal i will say padding 20. it's exactly the same thing with these four categories so display flex okay but there's a problem here okay i'm gonna show you later just wait for that let's take our prop here which is our item and we are gonna use them firstly we have container second one i'm gonna do something different here i'm gonna create a circle basically we are gonna have a background color for this container and after that i'm gonna create another background which is circle so it can be a little bit fancier you don't have to do that but it will look better writing and after that i'm gonna create image and source will be our item dot image again we are gonna have info container and it's gonna include three icons so let's create icon container and inside let's choose our first icon it's gonna be cart again let's remember this one let's paste here and i'm gonna import from material ui okay so two more i'm gonna duplicate this and second one will be search icon it doesn't have to be outline but doesn't matter i will import and finally i will say heart okay this one is good favorite border i'm gonna paste here okay so let's create them but firstly again i will say flex one and i'm gonna give some margin between these all cards semicolon here and margin five and let's create other items here and we can arrange them later const circle is gonna be two image info and icon info is going to be due and icon will be d okay let's see but before i should of course write this inside my home page after categories i will say products okay they are here as you can see they are really big our icons perfect let's close here and let's take care of our image i'm gonna use here percentage to do that i'm gonna go to the parent and give some width and height i will say mean bit and let's say 280 and for height let's say 350 and finally for my image i will come here and say height 75 percent let's see okay nice now as you can see since we said display flex for our products they are all horizontal but i just wanna see here just four items so to do that i should come here products and i should write here flagstrap and it's going to be wrap let's see have some as you can see four of them are here and others are here so i can separate them i will say justify content and space between okay they look like that that because we didn't center them here for our container i'm going to say display flags align item center and justify content will be center okay also they are centered right now so i can give some background color for this container single product container here i'll say background color something like gray and blue like that and let's create our circle here our circle by the way i'm gonna separate them okay so let's say we do hundreds height will be the same and after i will make this circle so i will say border radius it's gonna be fifty percent background color let's say white and let's see okay why it's not circle ah that's because it's display flex and we see all items in the same row so anyway it's not important that because i'm gonna make this position absolute and it's gonna be here awesome so how i'm gonna see these products these images it's really easy we did before that index is going to be true it's going to be front of this circle perhaps so i'm going to do the same thing for this info with a hundred percent height a hundred percent and position absolute and top zero left zero and remember our parent let's go to the container and it's going to be position relative and i will give some background color let's say black for now so i will say set index is going to be 3 okay perfect let's change it and we can see our icons also okay they are here so firstly i'm gonna center them align item center justify content center okay let's take care of these icons i will save it 40 heights 40 it's gonna be circle again so i will say for the radius it's gonna to be 50 and background color is going to be white and again i'm going to center everything inside i mean our icons will be centered okay perfect so i can give some margin maybe 10 let's see okay right now i'm gonna show you how to add hover effect when i hover this i'm gonna change this background color and maybe make them a little bit bigger it's really easy only thing you should do is writing here hover and inside this object i'm going to write background color it's going to be this blue color i will copy and paste and i'm going to make this bigger so i will say transform and scale at the beginning it's just one so i will make this 1.1 so it's going to be bigger let's see as you can see apps so i can give some animation [Music] let's say transition and for all it's going to be 0.5 second and is timing function let's try again as you can see it's animated right now perfect so what else i can do it looks really strange i know we can change this background color it's not gonna be gray i will say rgba and it's gonna be black but i'm going to give some opacity here 0.2 so it's going to be something like that perfect but as you can see it looks a little bit weird that's because there is no sense to see these icons without hoving over any card so what i'm gonna do is writing here opacity zero at the beginning we are not gonna see them like that so when i hover this container it's gonna appear we are gonna make this opposite one again and we are gonna see this card so to do that i should give hover effect for our container let's come here and write hover column here but if i write like that i can only change my container so how i'm gonna use my info here it's really easy with style components only thing you should do is writing here your component name which is info but as you can see there is a warning here it says it's used before it was defined so basically i should copy this and paste here we should define before our whole effect in this case we can use our component what i will do is writing here opacity one let's see oh i didn't delete this oh okay sorry i will delete this one we already defined i will save and it's here as you can see when i hover over i can see my info perfect and again i can give some transition let's come here for our info i will say transition all 0.5 seconds and ease exactly the same animation let's try as you can see it's better perfect and i can give cursor pointer for this info so we can click ok awesome it looks really nice let's add our newsletter i will create new component not in source here newsletter let's create quickly our function container so it's gonna contain our title description and i'm gonna create here input container and inside this container i'm gonna write our input which we can enter our email i can close this like that and finally i'm gonna create a button and inside let's choose here some icon i'll say send i will say field okay this one is good import from our icons and that's all okay let's create them i'll say const container styles from style components don't forget that and after that div [Music] and title description container input button let's create title description input container input and button i will change them it's going to be div why i didn't use this okay it should be shortcut okay and title will be h1 so let's write here something it's gonna be newsletter and i'm gonna paste my description and for the inputs i can give some placeholder and it's going to be your email and that's all i think let's take care of our style components so i'm gonna give some height for this i'm gonna write here background color it's gonna be this color and display flex i'm gonna center everything align item center and justify content center of course i should try to reflect direction but before let's see how it looks it can be confusing if i write everything before seeing so i will write here newsletter let's open up okay it's here as you can see everything is horizontal so i will make them vertical so i will say flex direction it's going to be call okay i have some let's change this title font size will be bigger let's say 70 and i will give some margin between this title and description like that let's change this description font size 24 font weight will be 300 and again margin bottom 20. like that so what about this container let's take care of firstly i'm going to give some width and it's going to be 50 percent and let's give some height 40 and background color is gonna be white let's see okay right now i can separate this input and this button so i will say display flags and justify content space between okay it's here and it's here so i can use some border border one pixel solid and that's a light gray okay nice so i'm gonna delete this border from our input let's say border none on okay i have some but this input is too small and this button also so i can give some which for them or flex let's give flex it's gonna be eight units so if i write here flex one unit as you can see it's eight units and it's one unit you can change this as you wish like that but one is really nice let's give some padding for this that because it's really close to the left side i'm in this placeholder so i will say padding left to any pixels like that awesome so what about this button let's delete our border i'm gonna give background color it's gonna be something like teal and font color will be white really nice so it looks awesome and finally for our home page one more thing we should create and it's going to be our footer let's create quickly i will say footer.jsx i'm gonna create my function as always container i'll delete this and write my container okay and i'm gonna split this container left right and center left center and right side okay so they are going to be in the same row so i will say display flex let's separate them and i will give flex one for each flex and one okay for the left side i'm gonna create logo description and social media icons so let's create here first i will say left and others center and inside left firstly we are going to create our logo it's going to be lama and after that we are going to have description and i'm going to paste my description here and finally let's close here by the way i'm gonna create social container that because it's gonna contain our facebook twitter and other icons and they are gonna be horizontal so let's create first icon i'll say social icon and it's gonna be facebook let's check here i will write facebook as you can see it's here or in other instagram like that we are gonna be using them so i will say facebook and i'm gonna import and i will copy and paste this again this is gonna be instagram twitter [Music] maybe pinterest and that's all i think let's delete this one okay so let's create our elements here after left i will say const logo first styled it's going to be h1 tag description container and icon it's going to be p tag this is going to be icon container and social icon it's going to be div also okay let's check okay everything looks good and for the left side i will say display flex and flex direction will be call they are gonna be vertical and i'm gonna give some padding let's say 20. okay let's see first of course i forgot again our homepage and i'm gonna write here footage okay let's see okay perfect i will give some margin from top and bottom for this description let's close here and for description i will say margin 20 but only top and bottom okay so for this container it's going to be display flex they are going to be in the same row like that and for these icons let's give some style with 40 pixels height 40 pixels i'm gonna make this circle border radius let's say 50 i will give color it's gonna be white okay we can't see them right now because we don't have background color so we can take this background color as props so if i come here and for each icon i will say color i will just copy and paste them quickly okay let's use it i will come here and background color i will say take my props and look inside and find color of course i forgot hashtag here okay have some as you can see it's not centered let's enter them align item center justify content center okay have some maybe margin between each other i will say margin right 20 pixels okay nice what about our center i'm gonna add here a title and after we are gonna add our links i'm gonna create list and list items let's do that but before i will say padding 20. by the way it's gonna be heading two menu also for each card okay after that i will say const title i will say styled and h3 let's leave it like that and write our list styled and ul and finally list item it's gonna be list item okay let's write them first inside center i will say title will say useful links after that my list and list item actually i'm gonna copy and paste them there is no sense to waste time okay let's see something like that so i want to separate this list and i can delete these dots and give margin here let's do that for title i will say margin bottom it's going to be 30 pixels for this list firstly i'm gonna delete margin and padding because when you create ul it has its own margin and padding by default so i just deleted them also i'm gonna get rid of this list style it's gonna be none like that and i will say display flags and remember what we are doing i will say flex wrap it's going to be wrap of course to apply this i should give here a bit i will say 50 as you can see we have two columns right now perfect maybe some margin between each other margin bottom let's say 10. okay yes and for the right side i'm gonna add again a title and after we are gonna add our address phone number and other stuff it's gonna be title again that's right here title it's gonna be same so i will say contact and after that let's create your contact item first one will be our address and again i'm gonna duplicate this it's gonna be our phone number let's say something like that and finally let's write here our contact email contact at lamar. okay by the way we can add here some icons before this text let's come here and check for them firstly i will search for map and this is good before this text i'm gonna add this i will import from material ui okay and for others i will say phone it's gonna be this phone i will import and finally it's gonna be mail this outline one looks good let's add here okay and after that i'm gonna add here an image i will say payment it's gonna be image so i can write here my source here okay let's take care of them i will copy this contact item and here after right contact item it's going to be styled and due let's see first okay i forgot some payment cost payment it's going to be styled an image okay helps so right now i can give some space here and i can center them margin bottom 20 display flags and a line item center for this payment i can reduce this image size maybe let's save it a hundred percent okay perfect so what about this space between icon and our text to do that i will come here for room i'm gonna use inner style it's gonna be margin right and let's say 10 pixels let's copy this for phone and mail let's see okay so we finished our future also basically we finished our home page which page i can create when i click any category we can go to the category page so let's create here i will close components and for pages i will say product list so let's close everything and open up again okay so let's create our function as always i will create my container styled and dip i can use this container here okay right now i'm gonna open up my app.js this time instead of home page i'm gonna call my product list i will import and let's see it's gonna be empty screen okay let's come here i can close my app just let's decide what we are gonna do firstly i'm gonna create here my nail bar again and my announcement and after that profile list page we are gonna have a title here and after that we are gonna have here filter container we can choose our cloth size color or something like that and this site will be sorting filter and finally we are going to use again our product lists in our components we have products here we can use them again we don't have to create from scratch okay firstly let's say never i should import this import number from components and number let's see okay it's here and after that i can import my announcement okay it's not here again let's import oops typo okay perfect and finally let's create filter container of course it should be capital and as i said we are gonna have two filters first one will be our product filter and second one will be sorting filter so let's see filter for example but before i forgot my title let's say title it's gonna be traces so let's write here filter one filter two and we can create them later okay firstly title container and filter filter container filter and it's going to be h1 okay nice so if i make this container display flex we can separate this filter one and two and if i say justify content space between second one will be here let's do that display flex and justify content space between not around between like that okay so let's give some margin for them i will just separate them first okay i will say margin 20 and for this filter also each folder will be margin 20. okay nice and after that i'm gonna add my products why it's not up here interesting anyway i should import this manually and after that let's import our newsletter and finally i will say footer let's import them also products newsletter and footer let's see okay apps it's really easy as you can see when you separate your components it's really easy to use again and again we almost finished this page only thing we should do is creating our filters let's come here and after that i will say const filter text styles and i will say span font size 20 and font weight let's say oops wait 600 so i can use them inside my filters i will say filter products let's copy here and it's going to be sort products okay maps so i can create here select and options so we can choose our colors sizes and here we can choose our sorting method so let's create here const select it's gonna be select element and this is gonna be option let's create them first after this text i will say select and inside i'm gonna write my options i will just copy and paste here as you can see we have some options white black red and this is going to be our default option we can select this but we can see here let's see as you can see it says color and we can choose one of these colors we can't click here have some so i can do the same thing for size i will just copy and paste after this select as you can see option size small medium large and others yes so what about sorting i will come here after this text i'm gonna paste my select oops it should be price let's see okay color size and sorting i have some let's give some style here i will just give padding 10 pixels and i will separate them margin right to ready so i forgot giving margin here for our text i will save margin right to any eggy okay it looks really nice we can choose our properties and after this video we are gonna handle our products by using this select and options so we finished our list page let's create single product page i will open up my pages and here i will say product jsx i'm gonna create my function and again container styled and div let's change them i will go to the app.js and i'm going to import my product and we are going to create our elements here let's close here and firstly again i'm going to import my number and announcement now bar here and enhancement and again newsletter and finally footer i just import other product i think yeah it's components it should be pages okay awesome so between this newsletter and this announcement i can create my single product page let's close here and between them firstly we are gonna have a wrapper i will say wrapper and basically i'm gonna split this dropper left side will be our image and right side will be our information and purchase button so let's create them firstly i will say image container and inside we are going to create our image and source i will paste my image here and after that it's going to be info container what we are going to have firstly i'm going to create a title and then it's gonna be description our product description and we are gonna have price let's write here something 200. and my description and i'm gonna copy and paste my title okay let's create them first then we can take care of other things wrapper [Music] image container image and info container it's gonna be image and what does after this container i will duplicate again title description and price p and let's say spam okay let's see okay our image and other stuff let's give some padding for our wrapper padding 50 pixels and it's going to be display flex i will separate them okay for image container let's say flex 1 and it's going to be same for info container so basically i'm just going to divide this page from the middle but this image is really huge [Music] so i will say with a hundred percent like that okay maybe i can change this height also because it's really long image maybe height 90bh and object fit will be covered we are gonna just crop this image okay apps so let's keep padding for our info container i will say padding from top and bottom and from left and right like that apps so what about our title i will say font fade to 100 it's gonna be like that for description i can give space between title and price so i will say margin from top and bottom left and right okay so what about this price i can change again font weight it's gonna be a hundred and font size will be 40 pixels okay nice so what else i can do again i can add my filters my colors and sizes let's do that i will come here after my price i will say filter container again we are going to have two filters at this time first one will be color second one will be size so let's say filter let's delete this and it's going to include filter title and let's say color after that we are going to have filter color basically we are gonna have three colors and we are gonna send them as props so i will say color black i will copy this and it's gonna be dark blue and finally it's gonna be gray okay so after that we are going to have second filter and again filter title and it's going to be size and after that we are going to use select and options i will say filter size and inside filter size option first one will be x small i will duplicate this small medium large and x latch i can delete last one oops okay it looks a little bit messy here but we are gonna handle that okay after this price i will say const filter container styled and due what does we have filter filter title color size and option filter filter title filter color size and size option i will just change them select option and others will be do i think maybe this title is gonna be spam let's separate them and start after that okay so what about our container as i said we have two filters and it's going to be in the same row so i will say display flex and i will say just y content space between let's see okay maybe i can reduce this width so i don't want that space so i will save it 50 percent like that is enough i think maybe i can give margin between this price so i will say margin 30 pixels and zero pixel okay helps so what about these filters they look okay right now but after that i'm gonna give padding for this section deselect and they are not going to be centered anymore to prevent this i'll write here display flex and align item center and this title i'm going to increase this font size let's say 20 pixels and found to it will be 200. like that nice so what about these colors i'm going to create color palette here so let's say v20 high 20 it's gonna be circle again so for the radius fifty percent and again i'm gonna use my props for background color take this props and choose color like that okay let's give some space here margin zero and five pixels oops pixar okay it looks really nice i can give cursor pointer so we can choose them okay i have so so what about this filter size i can give margin again margin nuts time pixels and i can give padding maybe five pixels okay perfect it looks really nice so what else i can add i can add here product amount it's going to be 1 and we can increase or decrease and finally we are gonna have purchase button so basically let's come here after filter container i'm gonna add one more container it's gonna be add container oops it should be together okay firstly i will say amount container and we are gonna have remove button and add button of course make sure that you are importing from material ui icons remove also i'm gonna write my amount it's gonna be one at the beginning and after this amount container i'm gonna write button and it's gonna be add to cut okay let's create them add container div a month container and our text which is one and button it's gonna be span and it's going to be do let's see as you can see our buttons okay let's make this display flags quickly add container it's gonna be display flex of course let's enter them and again it's gonna be 50 percent and it's gonna be like our filters like that but i forgot writing justify content it's gonna be space between it's exactly the same thing as we did here okay so what about this container amount container again again i will center them i can give one to it here or under this or for this amount doesn't matter okay let's come here and give some border and size so i will say with 30 high 30 i will give border radius it's not gonna be circle it's going to be something like time pixels and after that i can give border i will say one pixel solid and let's say teal like that i can center this item align item center justify content and i will give some margin between our add and remove buttons icons so i will say 5 pixels okay nice so what about this card let's come here for button i will give padding and i will say one pixel solid and teal again and background color will be white and finally cursor pointer okay else maybe two pixels okay it's better i think i will give font weight to 500 okay it looks nice so when i hover i can change this color maybe i will say over and background color it's gonna be this color like that so we finished our product page also what about our shopping cart but before let's create our register and login page and after we are gonna handle our cart ok i will create register and login pages register dot jsx there's a typo here x and login okay let's create our function let's create our container quickly i will say styled from style components and d i will change here i will do the same thing for register i will change here register okay let's close here so firstly we are going to have background image and after that we are gonna create here small cart and it's gonna include our form i will open up my application and here i will say register okay let's create our cart here it's gonna be wrapper and inside this dropper i will say title and let's say create an account and i'm going to create my form and it's going to include some inputs i will give placeholder here and it's gonna be name first after that last name username email and passwords last name email username it can be here okay and password and finally confirm passwords okay after that i'm gonna create your agreement and i will paste here my text okay and finally it's going to be my button create okay let's create them wrapper form title input agreement and but let's change them quickly form h1 input let's say span and finally button okay firstly it's going to be full screen component so i will say bit 100 vw and height 100 vh and i'm going to give background color sorry background picture so i will say background and url i'm gonna paste my url here let's see okay i can center this image so here i will say center okay but it looks really sharp i'm gonna add here linear gradient so i will say linear gradient and my first color will be gray color but i'm gonna reduce opacity so i'm gonna use rgba it's gonna be this white color but opacity will be 0.5 i should indicate second color here because we are using linear gradient i'll say comma and second color and don't forget putting here comma also let's see okay as you can see it's much better so we can focus on our form so what about this wrapper it's gonna be our cart but before let's write here display flex and center just file content center so they are going to be centered okay so what about this wrapper right now i will give some padding inside 20 pixels but it is 100 here so i should give some bits manually so i will say 40 percent like that so i will give background color it's gonna be white okay helps so what about this title it should be here because it's before our form let's check yeah it's above so i'm gonna change it it's gonna be font size 24 pixels and font 3 it will be 300 okay apps so our form i will write display flex and flex drop is gonna be wrap as you can see nothing has changed that because we didn't give any size for these inputs so let's do that i will say flex one and i'm gonna give mean bit and it's gonna be 40 percent so i can give space for top and right side so i will say margin 20 pixels 10 pixels and 0 and 0. okay nice i can increase this height or i can just keep padding okay i just want to decrease this agreement font size so here let's say 12 pixels and i'm gonna give margin again from top and bottom and left and right okay and finally we can change our button [Music] i will say width 40 percent and i will delete this border it's going to be known i will give some padding 50 pixels 20 pixels let's see let's change this background color and font color i will say background color teal and font color will be white cursor pointer and it's ready perfect so i can do the same thing for login page i will just copy here and for login page i can paste and i can delete some elements here and change firstly i will say sign in and we don't need inputs it's gonna be just username and password and we don't need that and i'm gonna say login and we can create i will say link and first one will be forgot password so i can just copy and paste here and second one will be create a new account okay that's all i think so we can create our components maybe i can copy and paste and delete again we don't need that another scan stay and i'm gonna change this background image let's copy and paste here and let's create our links and add this login page into our application and we can see better after that i will say const link it's going to be styled and a tech okay let's go to the app.js and this time it's gonna be login okay as you can see it's horizontal we can change it let's go to login.js by the way i can change this background size i will say background size it's going to be cover okay it's better i think so i can do the same thing for register page i forgot i will just write here okay after that i will go to the form we don't need wrap anymore because we have only two inputs so i will say flex direction is gonna be call and i can decrease this wrapper it was 40 pixels sorry percent it's going to be 25. it's enough i think because it's just small component okay so for this input i'm going to change here it's going to be 10 pixels and 0. from top and bottom it's going to be 10 left and right i just deleted this additional space so what about these links i will come here and i will say margin again from top and bottom it's gonna be five pixels like that i will decrease this font size let's say 12 and i'm gonna add underline so i will say text decoration it's gonna be underline and finally it's going to be cursor pointer okay like that maybe 10 let's see why i can see this here maybe it can be 5 and i will give here margin bottom 10 okay nice so we finished our login and register page we can take care of our cart right now i will close everything here and i'm going to create new page and it's going to be cut let's go to app.js but before i will just create my function i forgot because we should import this first okay we can go to the app.js and we can call our cart okay again i will create my container and after that i will call my nabar and my announcement and finally we will write here our cart and after that i will call my footer okay let's create this container [Music] i will say const container and it's going to be styled i should import this not material ui it's going to be style components and it's going to be d okay it's here so let's create our wrapper here i'll say wrapper and inside firstly we are gonna have our title and i'm gonna say you're back let's delete this okay so we are gonna have text here our title and after that i'm gonna split my wrapper into two pieces one of them will be our top container and second one will be our bottom container in the top i'm gonna create two buttons continue shopping and second one will be here our checkout button and between them we are gonna write some text so let's do that after title i will say top now it's writing second one okay and here it's gonna be what okay let's create them it's gonna be wrapper sorry title top and bottom and this one will be h1 tag let's close here by the way okay firstly i'm gonna give some padding here i'll say padding 20 and our h1 going to be font way 300 it's going to be thinner a little bit and after that i will say text align center okay like that let's create our buttons but before of course i should create here flexbox align item center and justify content space between let's create our buttons const button let's say top button actually that because we are going to create another button later and it's going to be just button styled and button and i will say padding 10 pixels font weight 600 and cursor pointer let's create them inside our top tip i will say top button and inside let's say continue shopping and check out now let's see okay they are here and between them i'm gonna write some text let's say top texts and inside it's going to be to text top text and second one and it's going to be our shopping pack let's say 2 and our wish list ok let's create them also after button style two and one more it's gonna be spa and i'm gonna give some underline for these texts text decoration is going to be underline and cursor pointer let's see okay i will give some margin 0 and 10 pixels okay let's take care of these buttons but one of them will be with border and without any background color and this will be without border and background color will be black let's do that we can use our props our second one i will say not here our button i will say type it's gonna be filled let's take this prop here and arrange our border i will say props if props dot type equals field it's gonna be no and for background color and text color let's write them also and color and for background color i will say if type is filled it's going to be black if it's not it's going to be transparent let's add here our semicolon okay so what about color if it's filled background color will be black so in this case our font color will be just white let's see okay it looks really nice let's take care of our button by the way i can give some margin here maybe or padding for the top i will say padding 20. okay it's better i think so what about our bottom again i'm gonna simply this button first site will be product and some information and second one will be summary let's do that inside our bottom i will say info it's going to be our product info and summary i will say info and summary let's create them info summary and they are going to be due and after that i will say display flags because they are going to be horizontal again and i will split them okay like that so i'm gonna give some size info is gonna be three units and this one will be just one unit so i can use flex flex just three and it's gonna be one if i give background color you're gonna see better as you can see it's just one unit and other will be our information okay let's select this right now i'm gonna create my product inside this information let's create our first product and inside again i'm gonna split this container first one will be our product information like image title id maybe color size and second one will be our price and also we can increase and decrease the amount let's say first one product details or just detail and second one will be price detail and inside my product detail i'm gonna add my image product image i just found something from google i will just paste here my source and after that product name id color and other stuff here after image so i'm gonna say details and inside let's say product name let's write here something and i can write here product with both tag okay and second one will be our product id let's write here some random number and i'm gonna say id and i'm gonna change here product id and two more it's gonna be product color but it's not gonna include any text here we are gonna display only our color so i can close here and finally product size size and it's going to be let's say 37 and half okay after that i'm gonna create my price details i'm just gonna write here price and we are gonna take care of later because it's gonna be confusing if i write everything at the same time i think so let's create them products details image details everything here first one will be product product detail it's gonna be image details product name product id product color and product size so let's change them it's gonna be image detail okay others will be spam so this color can be there because it's gonna be just color circle okay okay i didn't create price details let's create that also okay it's information and it's going to be our price details so firstly i'm gonna make them flexbox let's come here and i will say display flex okay right now price is here and i'm gonna separate them just by content space between okay it's here right now i will come inside my product details and it's gonna be flags 2. and my price detail will be flex 1. let's come back here and i'm going to say display flex again and our all information will be here okay perfect so let's decrease this number image size so i will say bit 200. okay perfect so let's take care of our details i will give firstly padding and again display flex but this time flex direction will be column and i can separate these elements i will say just why content space between or around let's check first bitmin okay it's too much i think i will say around okay it's better let's take care of this color i'm gonna give some weight and height and i'm gonna make it circle for 20 height will be the same let's give border radius 50 percent and i'm gonna take my color as props let's come here inside color i will say color black let's use it i'll say background color and i will take my props and i'm gonna use props dot color okay perfect we don't need any additional thing here it looks really nice so you can change these font sizes colors or something but for me there is nothing to change it looks really nice i don't have a better idea it looks okay so what about this price let's come here price details and firstly i'm gonna center everything inside this container so display flags align item center just y content center okay but all elements will be vertical so i should write here also flex direction column okay after that let's fill inside our container i will delete this firstly i'm going to create my amount container let's say product amount container i'm gonna create some icons from material ui so first one will be add as you can see material ui icons and second one will be remove i will import this also and between them let's write our amount so i will say product a month it's going to be 2. okay after this container finally i can write my actual price product price okay let's create them after price details cost product amount container styled nd amount and product price and natural lighting we don't need them let's check okay that's all okay this is our emma container so i will make this display flex and i will say align item center okay i can change this font font size 24 and i will give some margin it's gonna be just five okay nice so what about this price phone size will be a little bit bigger and font weight let's say 200. okay maybe margin here for my container i can say my bottom to me okay perfect so what if i create another product it's really easy i will just come here just duplicate this product and between them i'm gonna create an hr but let's see before okay i'm just gonna create line here so i will say hr you can use directive but i'm gonna change a little bit so i will come here before this summary i will say const hr it's gonna be styled and hr let's change background color it's going to be ee and i will delete border and it's going to be known but before let's see i forgot showing you without any style as you can see it's really dark and it doesn't look good so i'm gonna change it open this again and after that i will say height one as you can see it's much better right now maybe i can change this image you don't have to but it's gonna look better i think and i'm gonna change here accord t-shirt and it's gonna be gray and size will be medium okay perfect maybe price also now of course after our full application we are gonna fetch this data from our database but for now it's totally okay it looks nice so let's take care of our summary firstly i'm gonna create title let's say summary title and it's going to be order summary and after that i'm going to create my items my text and price and i'll say summary item it's gonna include our text and price i'll say summary item text let's say subtotal and it's going to be our price so i will duplicate this item and second one will be estimated shipping let's say 590 and we can write here our discount let's say shipping discount and again but this time it's going to be minus 590 and finally total it's going to be 80 again but all these items will be same same size and color but this total will be a little bit bigger and darker so i will say type and it's going to be total and we are going to take this prop and arrange our style and after this summary these items i'm going to create button it's going to be our main button oops and let's say check out now okay let's create them summary title item item tags price and button item price and button let's change them also it's going to be two they are going to be span span and button okay so i'm going to give some border here border 0.5 pixels solid and light gray and i can give some border radius 10 pixels and some padding maybe 20 pixels let's see okay but i can see my border oh okay but i can change this size because whenever we add new products it's gonna be bigger and bigger so i can just limit this i'm gonna say height 50vh okay it's enough i think so let's take care of our title [Music] i will just decrease font weight it's gonna be 200. okay nice so these items [Music] let's say margin from top and bottom from left and right like that i can separate this text and this price to do that i will make this display flags and justify content space between like that so what about this total they look really nice but i can just increase font size of this total and font weight to do that i'm gonna use my props i will say font weight let's take our props prop store type if it's total it's gonna be darker which is 500 i will do the same thing for font size on size if it's total it's going to be 24 pixels nothing has changed let's check here oh wrong component so it should be inside our item okay i have so so what about this button i will say first with a hundred percent i will give some padding let's say 10 and background color will be black let's change font color it's gonna be white and front weight will be 600 okay awesome so we finished our card also maybe i can change this now bar a little bit it looks meh it's okay but it can be better anyway let's take care of our responsive design i will open up my console we are using phone right now and it's not responsive at all it looks really weird if we go to the home page as you can see our categories only thing normal here is these products and we are gonna take care of this responsive design right now so let's start with our number i'm gonna open up our now bar here okay firstly i'm going to show you how you can use media query inside your style components for example if you come here and say media and it's going to be on this screen and i'm going to write here my breakpoint it's going to be max with and it will be 380 pixels which is the breakpoint for mobile devices so inside i can write here my style properties if i say display none for example it's just an example don't worry about that so let's check as you can see it's disappeared let's make this bigger okay it works like that but we have a lot of components and pages and writing this each time can be a little bit tough and it can be a waste of time so what i'm gonna do is creating here new javascript file inside my source i will say responsive.js so inside i'm going to create my shortcut function i will say export const and for mobile device i'm gonna write here my parameter it's gonna be let's say props or whatever you say and it's gonna return us this media query so how i'm gonna do that i'm gonna use style component css so let's come here and import i will say import and it's gonna be css from style components okay so here i'm gonna return this css i will say css and backticks again and here let's write our media query okay of course it's not gonna be displayed on instead we are gonna use our props here i will say props and that's all of course you can write here other devices for example tablet and you can increase this number and for other sizes but i'm just gonna show you the first one you can create others for yourself or you can just leave it so let's import this mobile there's a typo here so i will copy this and i will close and i'm gonna import from i will go to the source and here responsive okay so instead of writing media query each time i can use this function i will write mobile and inside i'm gonna write my properties and if i write for example background color and red of course inside code and let's see as you can see it's red right now it works i will close here so only thing we should do is writing here our function and inside our style it's really easy so what i'm gonna do let's decrease this height for example height and it's going to be 50 pixels so i can copy this function and for wrapper for example i can decrease these paddings i will say padding it's going to be 10 pixels again from top and bottom but it's going to be zero from left and right let's see okay nice but right side as you can see overflowing so what can i do firstly i just want to delete this language option we don't need that here i will come here and say display no okay so i can decrease this input size let's come here our input i'm gonna say with 50 pixels like that so there's our placeholder by the way input well we didn't write okay placeholder it's gonna be search okay it fits inside perfect so what about our logo i'm gonna decrease font size so i will say font size 24 pixels okay nice as you remember for the right side our position was flags and we can just center them it's here so i will say justify content and it's going to be center so let's decrease this font size for each item font size it's going to be just 12 pixels and our margin left here 25 pixels it's really large we can just decrease this also margin left i'm gonna say time pixels okay it's still overflowing that because our each container here our left center and right side has flex one remember they are even what i'm gonna do is increasing right side flex so for the right side i'm gonna write here flags two so it's gonna be two units as you can see and others will be just one perfect so what about this slider i don't wanna see this so i'm gonna go to the slider and let's paste it here and it's gonna be display now of course i should import my function okay it's here i will save okay perfect so what about these categories as you can see it's horizontal but we are like that we are using flexbox only thing we should do is changing flex direction let's do that i'm gonna open up my categories here i can delete this padding it's gonna be zero and additionally i'm gonna write flex direction and it's gonna be column let's import our function and let's see okay of course i can decrease this image size let's go to the category items and here i will say height it's going to be 30 vh i will import and it's much better i think maybe 20 like that whatever you want as you can see our products look really nice we don't have to change it it's already flexbox and flex wrap so what about this newsletter let's open up let's check what can we change as you can see it's not centered let's change this description where is our description here i will import my function first and after i will say text align it's going to be center nice so i can increase this input size also my container as you can see it's 50 percent i will say it's going to be maybe 80 okay it's better so for our footer that's right here 75 i will say fit to window okay we can see better right now firstly i'm gonna delete this center container it just includes our links we don't need that i think i will save router and for the center here i will say display node okay we have only left and right side i can use again for the x direction let's go to container and i'm going to say let's action call okay nice maybe let's change this background color for the right side you don't have to do that but it's gonna look better i think background color it's gonna be light gray okay it's not light enough let's change it maybe more okay perfect as you can see it's really easy i'm not gonna deep dive into every detail every small detail i'm just showing you how to create responsive designs awesome so what about our login and register pages let's go to the login and i'm going to open up my app jazz by the way and i'm going to write here login instead of home page i will save and let's close everything here and i'm going to open up login page let's see first as you can see our width is really small so i'm going to wrapper here as you can see it's 25 percent i'm gonna paste my function and i'm gonna import okay it's not here i'm gonna import manually here i will say mobile and my responsive.js okay so where is our wrapper here it's gonna be with 75 percent okay awesome i will zoom in okay it looks nice i will do the same thing for register page i will copy this and wrapper will be 705 okay we don't have to show this it's almost same with login so what else we have we have product list let's open up of course first app.js and i'm gonna change this product list okay let's see what we have here okay our products look okay and other things only thing we should do is changing these filters i will go to the filter let's close here i'm gonna import my function and after that margin was 20 but as you can see too much space here maybe i can decrease it it's going to be zero from top and bottom and too many from left and right and also i can say display flex and flex direction column they are already vertical but they are not in same size so i will say display flex and flex direction it's going to be calm okay perfect i will zoom again so i can give some margins and we are gonna add this page also for the text as you can see there is margin right here it's gonna be zero okay they are in the same line right now and what about this select i'm gonna say margin we don't need write anymore but instead we are gonna give top and bottom match so i will say 10 pixels and zero pixel okay nice perfect so let's go to the product page i will open up my app.js and i'm going to write here products and i'm gonna open product page okay as you can see our image is beyond this right side we can use again for the extraction and after that we are gonna take care of this information so let's come here inside wrapper i'm gonna say like direction call and maybe i can decrease this padding also i will say pixels and flex direction call i will import okay it's here but it's very long let's take care of this image our image is a hundred percent and height is knight to bh we can decrease that i will say height it can be maybe 40. okay it's nice so for this container i can decrease this padding also and after that i'm gonna change these filters and these buttons our info container as you can see is 50 sorry pixels so it's gonna be 10 pixels and i will write here padding okay so let's change this filters filter container its width is 50 percent this time is gonna be a hundred percent like that i will do the same thing for this container remember it was our add container i think here it's gonna be again a hundred percent perfect let's check again everything looks nice okay that's all i think so what about our cart so let's open up our app it's gonna be cart and i'm gonna open my cart here okay we can delete this links and we can make them flex direction column again and it will be okay i hope let's try firstly i will say padding 10 pixels like that okay and i'm going to import my function okay let's delete these links top button and texts here i will say display none so for these containers let's give lex direction for them or bottom here i will say lex direction com let's see okay i'll check out this here right now so i will do the same thing for our information so i can copy this and inside products i will say flex direction column again okay perfect it looks really nice maybe margin here and i can increase this margin also for this number so where was it among container and here it was five pixels i'm gonna increase from left and right margin 5 pixels and let's say 15 pixels because we are gonna be using our fingers so that space is better writing so what about this price i will give margin product price let's say margin bottom and 20 pixels okay and as you can see it's really easy when you use flexbox only thing you should please changing your directions okay let's look at last time our cart our product product list login and register and finally our home page okay awesome so we finished our first part in the next video we are gonna build our rest api using nodejs and mongodb i hope you liked it if you learned something new today please like the video and leave a comment it really motivates me and you can support the channel by using join button or the link in the description below i really work hard creating project recording editing and just one video takes days to release i just want to help you and i don't want you to waste your money for nonsense basic courses so i would appreciate it if you could help me too okay don't forget to follow vlamadev social media accounts you can ask your questions there and interact with other users so that's all i hope i will see you in the next tutorial goodbye you

Channel: Lama Dev

Views: 53,733

Rating: 4.9781513 out of 5

Keywords: react, react.js, react course, react project, react e-commerce, react shop, react shopping app, react shopping cart, react website, react full course, react tutorial, react for beginners, react shopping app design, react shopping website design, react ui, react shopping app ui, react ecommerce app, react ecommerce app project, react ecommerce for beginners, react from scratch, react ecommerce project, react hooks, react components, react design, react website design, lamadev

Id: c1xTDSIXit8

Length: 178min 49sec (10729 seconds)

Published: Thu Sep 02 2021

Reddit Comments

[u/nesikim]

source code: https://github.com/safak/youtube/tree/react-shop-ui