Food Ordering App UI Design Using React Next.js | Responsive Restaurant Website

hello my friends today we are gonna design this beautiful pizza ordering application using next.js there's an awesome slider here we can see the pizza list and features of each pizza and we are gonna have a product page where we can choose our pizza size and additional toppings after adding to the cart we can go to the cart page and it's gonna include products that we want to order and finally we are gonna create an order page where users can track their orders you are gonna see how easy to design responsive and seo optimized website using next.js and in the next tutorial we will create our own api and we will be able to add new products update orders and receive payments by the way guys you can let me know in the comments which payment methods would you like to see here stripe or paypal or any other provider i'll consider your comments okay if you want to see more tutorials like this please like the video if you are ready let's get started ok let's create next application to do that i will write here mpx create next app and i will enter and it's gonna ask the project name because i forgot writing dot if i write here dot it's gonna install everything in this main folder okay guys it's ready we have got here public folder our pages and styles folder let's start our application and let's see what we have i'll say yarn tab i can see this page perfect so let's delete everything in this page i will go to index page and here let's close here actually i'm gonna delete everything here but i'm gonna leave this head tag and i'm gonna explain you why and let's write here just home page like that this hat component is important because that allows us to enhance our website seo so you can write here your title let's say pizza restaurant in let's say new york and also you can change your description let's say best pizza shop in town and also you can add your keywords icon or whatever and if you go to website and open your console as you can see we have head tag here you can see your description your title it's awesome that because we cannot do this with react.js of course we can but it's not that easy only thing i should please writing here head component it comes from next and head and writing my meta tags and there's one more thing here which is image that because we are not able to write here any image html tag if i write here source and let's add some images here and don't forget you should create your image folder in public folder so i will say just image and inside this folder i'm gonna drag and drop my images which we are gonna use in our application okay let's use one of them let's say logo.png of course image first and as you can see it warns us that because we used html image tag and it says do not use image use image component from next and image instead of course if you go to website it's still gonna work it's here but we cannot see because it's just white but the best practice is using image tag here and here don't forget writing alt you can leave it empty and right now there is no warning we are using this component that because next.js is optimizing our images automatically okay let's lay this and i'm going to show you one more thing of course we are not gonna have just one page we are gonna have home page we are gonna have product page cart page and for all those pages i just wanna add here and now bar and footer of course when you create your pages you can add them one by one writing here navbar and after content you can write here footer but imagine you have 10 pages 20 pages it's not the efficient way so what i'm gonna do is creating a layout what i mean by that you will understand better right now so basically i'm just gonna create here a component folder and here i will say navbar first you can use js or jsx doesn't matter i'm using jsx because it's easier to handle html elements so second one will be footer and let's create layout i'm going to create my functions let's say navbar and footer if i go to index.js i can just call them here as i said like that and for footer and as you can see we have number content and footer but if you do that you have to write them again and again so you don't have to do that i'm just gonna delete them and here by the way i'm gonna delete everything in this css file as you can see there are a lot of things here i'm just gonna delete okay so what i'm gonna do is creating here a component function and writing here navar and footer and between them i'm gonna deploy my page components to do that i can write here children and these children will come from here as a prop let's let this do by the way i'm just gonna use react fragments you don't have to write here and how i'm gonna use these children if i go to app.js our main javascript file as you can see there is only one component here and this is our pages for example for the home page it's gonna be index.js we are gonna create here a product page by the way why these components are here i'm just gonna put this to main folder okay pages are different and components are different so when i create here any other pages this app.js is gonna render that page so if i use here my layout and wrap this component we are gonna see our navbar and footer in every page let's do that i will come here and say layout and i'm gonna cover this component okay if i save and see my page as you can see they are here so if i create any other page let's say about.js and i'm going to create my function about page if i go to my app and right here about as you can see now by my content and footer they are gonna be in any page so i can delete this page i'm going to close everything here and open my nav ids so let's create our items but firstly how i'm going to give a style for those items i will give here class name and in reactors remember we are just writing here any class name and we are creating navbar css and writing our styles but in next yes we are not going to use like that as you remember we have a folder here which includes our styles i'm just gonna write here new css module it's gonna be number and module dot css so how i'm gonna use it let's come here and i will say import styles and styles number.module.css so if i write here styles dot let's say container i will be able to give style here i will say container and background color let's say red oops i would typo okay perfect so let's delete here and we are going to handle later but before let's decide what we are going to need firstly we are going to have three items let's say item here and three of them first some will include our phone number and some icon maybe and second one will include menu items many links and the last one will be just cut button okay let's do that i'm gonna create new do here it's gonna be call button like that and inside this button i'm gonna create image let's say source and it's going to be in which let's see what we have here public folder and image as you can see there is a pawn image here we can use it and of course alt here and i'm gonna import image from next like that and after this icon i'm gonna write some texts it's going to be two texts so i will just wrap them let's say two class name styles dot texts and each one will be just text like that i'm just gonna write here order now and phone number of this restaurant as you can see there is an error it's a common error if you are using image tag that because you have to use any width and height or you can use layout fill property let's give some width and height width will be 32 height will be 32 like that and let's see again okay so let's give some style for this container and those items i'm gonna take this css here and i'm gonna close sidebar like that firstly i'm gonna give height let's say 100 pixels i'll give some padding from top and bottom and left and right and let's say background color i'm gonna use this specific color here okay let's give some items for this center and right side remember we have two more items i will say center and right like that as you can see they are here but i'm going to make them horizontal it's really easy as we always do we are gonna use display flex and align item center like that to separate them i'm gonna use justify content and i will say space between as you can see it starts from zero remember we have padding here and it ends in zero point also we have padding here also perfect i'm gonna do one more thing i will say position sticky and i will say top zero in this case even if we scroll this page this now bar is gonna stay here you'll see it better after creating something for this home page this first and last item will be a little bit smaller that because center item is going to include our links and it's going to be a little bit longer so what i'm gonna do is giving bits for these items i will say for each item it's gonna be flags one but for the second item to choose that we can use add child here because this is our first child second and third so i'm gonna use second and i will say flags three to see it better i will write your background color and let's say white as you can see they are just one unit and this center is three units if i make this five it's going to be bigger if i make this one again they are going to be same size it works like that so let's give here display flex for each item and align item center in this case this button and this text will be horizontal of course we cannot see it because it's same color we are going to change it let's select this background and let's take care of this call button i will say background color it's going to be white right now we can see better but i'm going to make it circle let's say port radius 50 pixels and i'm gonna give some padding like that maybe a little bit smaller okay and what about this text container remember it's texts firstly i'm gonna give margin here between this button color will be white and for the first text again i'm gonna use child but this time it's gonna be first child or it can be ant child and the parameter is one and font size let's say 12 pixels now front feet will be a little bit bolder like that and for the second child you can use last child here and again you can use and child doesn't matter and font size will be 20 pixels and font weight let's say bolt like that perfect so our first item is ready let's take care of this center i will shrink this here a little bit now for the center i'm gonna create a ul tag and inside we are gonna have list items of course let's give class name for them like that and i will say list and list item first item will be home page products menu events blog and contacts events blog and contact of course we are not going to create all those pages it's not that important but i'm just writing anyway and here in the middle i'm going to add my logo so again image source and here will be image logo.png and it's going to be alt you can write here any keyword and let's give width and height i'm going to use original width and height by the way you can create here any div as apparent and you can use here layout and fill but i'm not gonna do that but don't worry i'm gonna show this also i'm just gonna write here height bit 96 pixels let's quickly create your card logo and our counter so i will say do and inside image i'll just copy this and paste here and finally one more do and it's going to be our product quantity let's say 2. it's just a design right now i will change this it's gonna be cards and it's gonna be let's say counter and i'm gonna change here card png let's say 30 and 30 like that let's take care of their styles i'll make here bigger and let's get started with list remember it's url tag firstly i'm gonna delete default padding of this ul tag like that it starts from in this zero point and again let's make them horizontal and center them horizontally like that i will delete list dots so i will say list style none and text color will be white like that perfect so let's give some margin between them list item margin 20 front weight will be a little bit bolder and oops i said 50 it's going to be 500 okay perfect so what about this card as you can see it starts from left zero point but i wanna see this at the end of the navbar so if i use item and remember this is center and it's gonna be right item of course you can use just last item also sorry last child and i'm gonna write here justify content and flex and in this case it's gonna go to the end of the screen and off to the upper and what about this counter basically i'm gonna make this position absolute and i'm gonna move this somewhere here top and right to do that i have to make this parent position relative remember this is the parent div so let's do that i will say cards it's going to be position relative and for the counter i will say position absolute and if i say top 0 and write 0 as you can see it's here but if i say minus 10 and minus 10 it's going to be somewhere here perfect let's give some more style firstly i'm gonna give width and height and i'm gonna make this circle that's because i'm gonna give some background color it's gonna be white and let's give some padding like that as you can see it's not centered let's do this quickly display flags align item center just by content center and perfect let's make this bold and color will be our main color like that it looks really nice of course i just made this logo in 30 seconds i just choosed any fonts you can change it i know it's not perfect but anyway it's not that important so we finished number component let's take care of our slider here so let's close them and create new component and it's going to be featured featured or slider i will just write your f and i'm gonna write image and styles let's create this css file here i'm gonna close this public folder by the way okay i will say featured module.css perfect to use this component i will go to index.js and instead of home page i will just call my component here let's see okay it's here so what i'm gonna do firstly we are gonna have a container class name styles and container and in this container we are gonna have two arrows that we can click on the left side and right side and we can slide our images so let's create image source will be image and arrow left genji and let's close and we are gonna have one more image and it's gonna be arrow right and between them we are gonna have a wrapper let's create another container like that it's gonna be wrapper and in this wrapper we are gonna have images but for each image i'm gonna create one more container that because it's gonna contain all this screen you will understand better what i mean and here i will say image container and in this container i'm gonna create one more image let's say source image and featured png and we are gonna have two more images like that but writing them one by one is not a good idea to prevent this i will just create here an array which includes our images featured one two and three and instead of writing them again and again i'm just gonna create here images and map and for each image i'm gonna use this image component and as you can see there is an error that because we didn't use any unique key here you can create object for each image and you can give some id but if you don't wanna do that you can basically just write here index which is the index number for each child for example for this one it's gonna be 0 1 and 2 so i can use it here i'll say key it's going to be just index if i open my application it's not going to look but we want that because we didn't give any width height or this property so how i'm gonna handle that remember we always use width and height but this time i'm gonna use layout fill property and you are gonna understand how we are gonna use it with the parent container for this one so let's take care of our stats i'm gonna open features module and css and i'm gonna separate this and let's write here container first this is our main container so what i'm gonna do is making this number and featured component full screen is gonna be 100 vh but i should consider this number remember it's 100 pixels to do that we can use calculate method so i will say calculate 100 vh minus 100 pixels so let's give here our main color background color okay perfect as you can see it's a hundred percent we have just footer here so what about those images we use layout and fill so in this case we have to use apparent so let's create here image container it's gonna be arrow container i forgot doing that i will just do this right now like that and i'm gonna do the same thing for other arrow like that and i'm gonna cover okay so in this case this is our parent if i come here and say position relative those images are gonna fill this container according to its size if i say with hundreds height a hundred as you can see it contains all this container if i say 300 they are gonna be bigger like that so let's give here 10 percent and 20 percent as you wish that it looks really nice but what i want to do is separating those containers first one will be here and second one will be here to do that instead of relative i can use position absolute and i'm gonna center them top 0 bottom 0 and if i say margin auto it's going to be centered vertically but for the left side i'm going to use inner style that because if i write here it's going to affect this right side also so let's write here style and i will say left 0. so i will do the same thing for other one and in this case it's going to be write 0 as you can see perfect and when i hover over i just want to see cursor pointer i'll say cursor pointer and that's all by the way i forgot changing this image like that for each image it's going to take just one of them so what about this rubber it's going to contain all those images we are going to have 3 image i will say 300 vw each container will be 100 vw which means full screen by the way this container will be in this images map and in this case key will be here not in image okay so let's use this container also with 100 vw and again i will say position relative that because we used layout fill and let's see write a hundred percent in this case it parents should have any height also it's gonna be a hundred percent again and it's parent remember our container is a hundred v h minus a hundred pixels okay let's see okay about how i'm gonna make this wrapper horizontal it's really easy like that in this case this is our first container second and third one perfect and when i click this button we are just gonna move this dropper like that we are gonna see only this picture when i click again it's gonna move like that it's that easy but as you can see our images look a little bit strange that because width is a little bit higher compared to height to prevent this i'm just gonna write here object fit and contain like that it's much better right now so how i'm gonna get rid of this screw it's really easy i will come here and say overflow of hidden in this case we are gonna see only this picture so how i'm gonna add this functionality firstly let's set some index here using use statehook i will say const index or slide number set index and it's going to be use state hook and at the beginning it's going to be 0 because we are going to see this first image first and when i click this button we are just going to increase when i click this button we are gonna decrease but there is some important point here if it's the first item which means index is zero when we click this button it shouldn't be minus one it's supposed to stay either at zero or it can be just 3 which is last item we are going to give this functionality but as you can see when i hover over this arrow button i cannot see my cursor pointer to prevent this let's write here that index is gonna be just two or whatever more than one okay perfect so what i'm gonna do let's close here i'm gonna give some function for the left and right arrow i will say on click event when you click this arrow just call this function handle arrow and as a parameter i will give l word and i will do the same thing for the right side let's copy and paste and in this case it's gonna be right so let's create this function here const handle arrow it's gonna be fraction here and i'm gonna write here my condition i'll say if direction is right or left let's say left first and i'm gonna set my index remember it was zero at the beginning and i'm gonna write here my condition i'll say if index is not zero decrease this number index minus one but if it's zero by the way i forgot here question mark which is if and column here which is else so if it's not zero it should be the last item which is index number two you will understand better right now so i'm gonna do the same thing for the right side i'll say if it's 2 which is the last item i'm going to increase this number if it's not when i click the right button we have to go to the first item which is zero let's see what we have here console log and index as you can see it's zero i'm clicking here right now it's one by the way don't worry about this warning it's because we made the parent absolute and i'm clicking again as you can see it's two if i click again it's gonna be zero because we don't have any image and again it's gonna be just do the same thing and for the last item if i click as you can see it's decreasing right now it's one i'm clicking again zero but if i click again it's not going to be minus one it's gonna be two perfect by the way i can do the same thing for these arrows it looks a little bit strange so i will say object fit like that okay so how i'm gonna use this index only thing i should do is coming here for wrapper and giving inner style and i'm gonna give here transform effect and we are gonna move this wrapper on the x-axis so it's going to be translate x and i'm going to use here my index for the first image it's not going to move anywhere it's going to be 0 but when i click this button it's is gonna move on the x axis to the left side it's our origin and the left side is the negative side if i say a hundred v h it's gonna move just one image but if i multiply this by our index and if i write here vw let's see what's gonna happen okay first image i'm clicking and second image i'm clicking again third one and if i click again it's gonna go to first one again and here same thing perfect but as you can see animation is too sharp let's give some animation for this wrapper featured module and here for wrapper i will say transition one and a half seconds for all animations timing function will be ease in out so it's gonna happen in one and a half second and this is gonna be our animation style if you want to learn more about these animations transitions transforms you can check the description i want awesome course for this you can master your css animations let's see what's going to happen i'm clicking as you can see right now it's much more smoother so we finished this slider also i especially didn't use any library that because i want you to see how easy to create this kind of functionalities you don't have to download any library you can do everything by yourself so let's list our products i'm gonna close everything here oops what i did okay and i'm gonna create new component and it's gonna be product list or pizza list whatever you say i'm gonna quickly create my function here and import style let's create this style piece the list module and quickly i'm just gonna create container as you always do and class name styles dot container and inside i'm just gonna copy and paste my title and description there is nothing important we have status title and styles description and after that we are gonna have a wrapper do and class name will be wrapper and in this dropper we are gonna have each individual pizza cards in this case we are gonna need one more component i will say pizza cart i will say pizza and let's create here some cards pizza cart okay i should import this by myself i will come here and say import pizza card from my component like that and let's multiply those cards i'm just gonna write couple of them of course in this second video we are gonna fetch them from our api we are not gonna write them like that don't worry and let's see what we have of course i forgot writing this list in my index.js after featured i will say pizza list okay perfect let's take care of this style pizza list module and for the container i will give some padding top and bottom right and left and again i'm gonna use display flex but this time flex direction go it's gonna be vertical and align item center like that and for the description font size will be a little bit bigger and color it's going to be a little bit softer black like that and i will say with 70 percent that because it's really long as you can see i will say seven percent it's going to be like that house so what about this dropper as you can see they are vertical wrapper i will say display flex in this case they are going to be horizontal let's enter them but there is a problem here we cannot see right now that because it's just a small text but if i go to pizza cart but before let's create pizza cart here module dot css container and let's use it in pizza cut i can just copy here and for cart and pizza cart in this case i can give here class name and it's gonna be styles.component sorry container and i can take care of this container right now here i'm gonna give here with according to its parent let's say 22 percent but in this case its parent should have with also let's say a hundred percent let's see right now as you can see even if i set 22 pixels it means it should be four or five pizza here they are all in the same line that's because we use theory display flags and it makes them horizontal to prevent this i'm gonna write here flex wrap and it's gonna be wrap if they don't fit in this line it's gonna just move to other line so let's close here and this list okay if i make this for example 50 as you can see there are only two items in the same line awesome let's give some more style here i'll say padding 10 and again display flex and it's going to be vertical align item center justify content center and let's give some padding okay it's much better and let's fill in this card we are gonna have image description title so let's create image first image from next image and source will be from image folder and pizza like that and let's give some width and height again you can give a parent and make it position relative and then you can write here layout and fill and height will be 500 also again i'm gonna copy and paste less important part like h1 span description and their styles are here it's not that important let's see they are really huge i'm gonna decrease this again so let's take care of this title price and description for title font size will be 18 font weight will be bolt and color again our main color okay it's better right now and for price let's do the same thing but the color will be this dark color let's say 666 and finally for the description description i'll say text align center like that and color again a little bit softer let's say 777 for the consistency you can use all those colors in the global css by the way you can create your a variable you can use them but anyway let's see oh there's a problem here as you can see our number under this image to prevent this we can use that index here i will say the index 999 like that perfect as you can see i'm screwing and it's coming with me perfect so what else we have we are gonna have footer but before i'm gonna give for this card cursor pointer so we can click also when you hover over you can give different color for this background as you wish let's close everything and let's create here footer style module.css of course we are gonna have a container let's close here and let's take care of footer class name but before i should import this styles from style styles and footer like that i can give right now styles.container and again i'm gonna split this container into two pieces it's gonna be two items like that first one will include an image and second one is going to include our address our our contact things motor or something like that let's create them i'll say image from next of course and source will be background ph and layout fill like that and for the second item we are gonna have three cards let's create like that and change the name okay first card is gonna include a motto let's copy and paste it's just h2 tag it's gonna be style moto and i just write this text and for the second card first we are gonna have a h1 tag and it's gonna say find our restaurants and finally we are gonna have a p tag let's say class name style store just text and i'm gonna write here my address let's copy and paste here like that and we are gonna have four restaurants for example so basically i can copy and paste them it's nothing special and finally let's write here working hours and again i'm gonna use same h1 tag here remember we have find our restaurants and one more working house and again i'm gonna use same p tag which is text and i'm gonna write here working hours i'm passing here quickly because there is nothing special just text and what about css let's take this here and let's close this sidebar for the container again i'm gonna make this full screen but using calculate and considering this null bar and background color let's say dark gray or soft black and i will say display flex let's see we didn't give any size for those items let's say flex one and i will say position relative in this case we will be able to see our image and again i'm gonna give object fit you can use cover or contain like that so what about this right side i'm gonna make this item display flex again they are gonna be horizontal and for cards for each card remember we have three cards this is our moto address and working hours i will say flags one again so they are going to be in same size and let's give some padding from left and right like that and let's take care of those colors title font size 18 pixels and color will be this golden color and for text color will be light gray like that and finally for moto color will be a little bit darker let's choose here like that okay anyway and nice by the way i can give some padding for this second item actually i can change this flex for this image it can be just one and this right side it can be two so i will do the same thing as we did before remember how i am using second item i will just use last child and i will say flex two in this case it's gonna be bigger and i'm gonna give some padding let's say 50 and i'm gonna separate them like space between perfect it looks really really cool oh we've finished our twitter also you can give them a link and you can go to google maps or something like that and what about the product page and cart page so let's create our product page but to do that i'm not gonna just write here page like that we are gonna need our item id something like that and for each id we are gonna fetch different products of course they are same right now but after api they are gonna be different pizzas here and when we click them we are gonna get this id if i create here folder which is product i'm just gonna write here its id like that and jsx let's close everything and open this again i'm gonna create here my function of course we should change this name we cannot write this like that and i'm gonna change to product and again let's import styles and image and i'm gonna create this style here and firstly container i will give class name styles.container and what i'm gonna do of course after api we are gonna fetch our data but for now for the design part i'm just gonna create here a pizza object like that as you can see id image its name and its prices and finally description and what i'm gonna do here firstly we are gonna have two different containers let's say left sides and right side and for the left side we are just gonna show our image to do that i can create image container image container i'm gonna make this position relative and show my image alt and source of course i don't have to write any url here we already have we have pizza and image i can use it pizza and image and again layout and fill let's take care of this style quickly products like that and for the container i will do this same thing 100 ph minus 800 pixels and display will be flex and for the left and right side will be flex1 which means same size so right flex one and let's take care of this image container i will say with 80 percent because our image gonna be a little bit smaller h will be the same of course if you are giving height and width and if you are using percentage here you should give size for the parent we already have width which is for x1 i will say height 100 and i'm gonna center everything inside align item center just y content center and let's see if i go to products and some id here oops it's not products it's product you can use products also doesn't matter and our pizza is really big i forgot here position relative i think okay perfect so let's give objectfit here i will say contain okay it's much better so what about right side firstly let's give here padding 20 so all items is gonna start somewhere here and let's shooting here and actually we can close and firstly i'm gonna create my pizza name like that h1 tag title and our name here and for the price we are gonna make something different that because we are gonna have three different items which one we are gonna show first when we open our page we are gonna show only small pizza price and after we are gonna give some options here and when user clicks to medium or large we are gonna change this to do that we can use here use statehook i will say const size and set size use statehook and at the beginning it's going to be 0 which is price index first item 0 1 and 2. we are going to change it later so if i come here and say let's say span and i will say dollar sign and here i'm going to write my price so i will say pizza and price and i'm gonna take the first item remember it's zero so at the beginning it's gonna choose 99.99 surprise like that okay let's give class name styles.price so after this price we can write our description i'm just gonna copy paste it's going to be p tag and our description here and after that i'm going to add here a h2 tag sorry h3 and it's going to say choose your size and what i'm gonna do is creating here a div which includes three different size and we can click any of them we can choose our pizza size so let's create here a do and class name will be styles dot sizes and it's gonna include three different size so i can copy this and paste here size and it's going to include an image alt and source is going to be image size dot png and layout will be fill and finally i can write here any text it's going to be span and i will say small class name styles dot let's say number so i will do the same thing for other sizes it's gonna be medium and large you can write here inch also we are going to use same image but in the css part we are going to use and child and we are going to change their sizes let's do that actually i will open product module css let's take this here okay i'm not gonna change title but i'm gonna change price color will be our main color font size 24 pixels font weight will be 400 and i'm gonna give border button one pixel solid and same color let's see okay it's here but we cannot see because of this image but something like that let's take care of this image for size i will say 30 high 30 and position relative okay perfect so let's make them horizontal remember this dropper display flex and i will say justify content space between but if i do that let's see as you can see it starts from here and ends here but if i give some size for this container it can be smaller and we can see better so i will say with 40 percent like that okay so let's give cursor pointer for those sizes okay i will say size and and child is going to be two and for the medium pizza it's gonna be 40 pixels and for the last child it's gonna be 50 pixels okay perfect so what about those numbers remember we have number here it's not number but okay anyway it's not that important i will say position absolute i will do the same thing as we did here for the card so i will say top minus five right minus five actually we can increase let's say 20 like that and we can give some background color let's say teal and i'm gonna give text color it's gonna be white font size will be a little bit smaller and let's keep padding from left and right like that and i'm gonna give border radius maybe and it's going to be 10 pixels okay perfect so how i'm going to change this price when i click this it should change to second price so let's create here one click event for this container i will say one click when we click this button it's gonna set our size to zero so i will do the same thing for others it's gonna update to one and it's gonna update to two and remember here we are showing our price according to this size it's gonna be first element second element and third element let's see i'm clicking and it's updating clicking perfect it's that easy and i'm gonna add here one more thing it's gonna be additional ingredients you will be able to choose any sauce or extra ingredients let's do that here i will say h3 tag again it's going to be styles choose and choose additional ingredients let's close here and again i'm gonna create a container and we are gonna add each individual option so let's say do oops class name it's gonna be styles and ingredients and first option let's say do again and class name will be style start option and what i'm gonna do here i'm gonna create checkbox input type will be checkbox and i should give here an id that because we are gonna choose our ingredients according to this id and let's say double and also we are gonna need a name to update our state double and let's give class name it's going to be styles.checkbox and after that i can write here any label let's say double ingredients and i should give here html4 and it's gonna refer this id so when we click this text it's gonna choose this input what i mean by that i'm clicking as you can see it's selected perfect so i'm gonna create some other options i will just paste here there is nothing special but don't forget to change your id and name here it's important and html form they should be same i just added extra cheese spicy sauce and garlic sauce like that okay let's give some style i'm going to open style again and let's come here and remember what we have we have ingredients rubber i will just say display flags and i'm going to give margin bottom here as you can see they are horizontal and there are some space here later we are going to add here a button and it's going to look better okay for each option again i will say display flex align item center and let's give some margin between them i will say font size 14 and font face will be 500 like that so what about this checkbox i'm just gonna increase width and height like 20 like that it's bigger right now and it looks really nice and finally let's add here our button maybe quantity input let's do that here i'll say do container it's gonna be styles dot let's say add an insight i'm gonna create input and type will be number that because we are going to choose our quantity and default value will be just 1. we will be able to increase or decrease this class name that's a quantity okay after this input i will just create button i will say add to cart class name styles dot button let's write here quantity first which will be 50 height will be 30 oops it's not here i didn't save okay perfect for this button again height 30 so same size and let's give some margin it's going to be 10 pixels background color will be our main color text color will be white let's delete border font weight 500 and cursor pointer like that it looks really nice so our product page is ready also when i add this product to cart we are gonna increase this number of course we are gonna do this in the next tutorial but for now let's design our cart let's create new page i'm gonna close everything and for pages i'm just going to create new file and it's going to be cart.jsx as you can see i didn't create any folder that because we are not going to use any slack here like id or name it's gonna be just one page so let's create our function here class name will be container but before i'm gonna import this style and image let's say styles.container let's create this for styles card module style okay so what i'm gonna do i'm gonna split again and the first part will be a little bit bigger compared to second one and it's gonna include our products it's price name additional things and second one will be checkout container let's do that again left and right and for the left side i'm gonna create a table let's say table and class name will be table and i'm gonna write my columns i will just copy and paste i'm not gonna waste your time as you can see t i n t h is gonna be our titles let's see i will go to card component card page oops it should be writing lowercase okay it's here as you can see product name extras price quantity and total so let's create other tr and let's add our products this time i'm gonna use td they are th because they are title but this time it's gonna be td what we have is gonna be our product basically i can just add here product image to do that i'm gonna create again image container and class name image container of course styles and inside i'm gonna add my image alt and source we're gonna change all of them after next tutorial it's gonna be pizza again and layout fill and don't forget here object fit it's gonna be covered okay second one will be name let's create here another td and i will copy and paste this product name it's going to be core also and one more td and let's see what we have we have extras so i can paste my extras pan here you have double ingredients spicy sauce and other one will be let's see price why it's writing double okay i will write here price like that other one is quantity and total basically i can just paste them directly i think you understood as you can see quantity and total and let's see what we have of course we cannot see we should make this parent relative first so let's take this here and let's see what we can do firstly i'm gonna give here a padding and let's take care of this image first otherwise we will not see anything image container let's say 100 height 100 and position relative okay perfect so what i'm going to do is split in this container display flex for left and right side i will say for the left side it's going to be 2 for the right side it's going to be flags 1. okay nothing has changed because we don't have write yet and what about this table as you can see all those texts are too close each other i will say with a hundred percent it's gonna be bigger right now and right now we can see our flex too and i'm gonna give some space here it looks really close to do that we can use border spacing and it's going to be 20 pixels right now it's much better so let's write name here remember it's our pizza name font weight 500 color will be this color and font size will be bigger like that but again i made 50 i think yes okay perfect so i can change this total i can increase font weight let's say total font weight 500 and font size will be 18 pixels like that so let's take care of our box here we don't have anything there yet inside right i'm gonna create box so i will say do it's gonna be styles.talks or wrapper and let's create a title first it's going to say card total and i'm going to add some texts here basically we have subtotal discount and total and finally after those divs i'm going to create a button and it's gonna say check out now and let's say class name styles dot button and let's give style here i will say wrapper which will be 90 percent and i'm gonna give max height and it's gonna be 300 pixels and let's say background color 333 i just set max height that because if we add here five six items this box will be longer but we don't have that much items inside so it's gonna look ugly that's why i made just this max height okay by the way i can give padding 50 pixels like that actually i can delete this top padding or i can just reduce padding top is going to be just 10 like that let's give here display flex flex direction column oops column and justify content space between so we are separating them and i will say text color and white okay so i can separate these titles and those price what we have here let's see we have total text but these items these titles have different class name here we can change it i will say margin left sorry right just 10 pixels like that perfect so finally this button hi 30 color will be orange font weight bolt and cursor pointer right now i set 300 and i can give maybe some margin here margin top 20. okay perfect so if i write here another table item let's just copy this dr and paste again as you can see another one and other ones and card will be always here i can just leave two of them and it looks perfect so we finished this page also so i'm gonna create one more page here and it's gonna be order page i will say orders and again we are going to fetch data according to our id so i will say id and i'm going to create function let's change this name i will say order and again style and image i'm going to create new module like that and quickly i'm gonna write container okay it's gonna be class name styles and container and again i'm gonna split this container it's gonna be left side and right side let's take this here and i will say padding 50 and again it's going to be display flex and for the left side i will say flex 2 and for the right side it's going to be flex 1. actually we are going to do the same thing for the right side we are going to have a box like card page remember we have wrapper and our card basically i can just copy this and paste inside right side and what i'm gonna do is changing this text i'll say paid and it's gonna be disabled so we are not going to make any changes and i'm going to paste here exactly the same code nothing has changed wrapper text title and let's change our button background color will be white let's expand this like that and height will be 30 and this time i'm going to change this text color and it's going to be till and font waits bold margin top and finally i'm going to give a cursor but this time it's going to be not allowed let's see i'm gonna write here any order like that and as you can see it's here so let's take care of this left side firstly i'm gonna create two rows here first one will be our order it's gonna include order id customer name price something like that and second one will be our order status so i'm gonna close here and inside left i'm gonna create here and it's gonna be row and as i said we are gonna have two rows and inside first one again i'm gonna create a table let's come here and take this table and let's let this second item okay and i'm gonna change some texts here first one will be order id i will say customer is going to be our name and surname our address and finally total let's play it here for the first column we don't need any image i'm going gonna delete here actually let's delete all this column and this is gonna be our id order id i'm just gonna write some numbers here and i'm gonna change here it's gonna be customer name like that and address i'm just gonna make up some random address here and let's delete this quantity okay let's see what we have okay let's take care of this table and after left side i'm going to say table with a hundred percent like that and i will say again text align left and let's give some margin here so let's create status items inside second row i will create a div and it's gonna be status and inside we are gonna have three items first some will be status icon image pay dot png and i'm going to give width and height for this it's going to be 30 pixels but we don't have these images yet let's drag and drop them like that okay and it's here and after this icon let's create a span and i'll say payment and finally we are gonna have another image let's create a d for that a container i will say styles.checked icon and inside this i'm gonna create another image and it's gonna be checked dot png and let's say 20 and 20 like that perfect so let's create other status also there are gonna be four status second one will be preparing after payment we are gonna start cooking our pizza and we are gonna notify the user and let's change here it was baked.png i think and second one will be bike and this is delaware on the way okay perfect so let's make this row display flex after table i will say row but the last child i will say display flags and justify content maybe space around okay so for each status they are going to be vertical so let's write here status display flex flex direction and i will say align item center but it looks a little bit strange there is a space here so what i'm gonna do is keeping here maybe let's make this space between but i can give here maybe 60 percent let's try maybe 80 okay it's better so let's give some functionality here at the beginning we are going to see only payments and preparing will be in progress and others will be disabled so how i'm gonna give this functionality so instead of this status class name i'm gonna delete them and i'm gonna write here a function i will say status class maybe and inside as a parameter i'm going to give their index numbers it's going to be 0 one two and three so let's create this one i will say const status class that's right here index and we are gonna need a status after next tutorial we are gonna fetch this status but for now for the design part i'm gonna create here just manually it's gonna be status and let's say zero it's gonna be only payment so let's create here some conditions i will say if index minus status less than one i'm gonna return some class name it's gonna be styles. and we are gonna have two more and this time i will say if it equals one you're gonna understand better right now don't worry and greater than one and in this case i'm gonna change this let's say in progress and maybe ando so what i did here for the first condition when we order pizza and then we complete payment process we are gonna see this check button and its class name will be done that's because it's zero this index and index minus status which is zero minus zero is going to be zero if it's less than one it's gonna be don this status its index is one and when we come here one minus zero it's gonna be one in this case it's gonna be styles and in progress and other case two minus zero or three minus zero they are going to be greater than one and their class name will be undone it's that easy of course you can create new components for those status but you don't have many components just for so they can stay so in this case we don't need this status let's copy here and it's going to be done in progress and undone undone is not the world but i don't know what can we say there okay anyway for undone i will say opacity 0.3 like that but what about this in progress i just want to give here an animation animation animation name will be in progress it's gonna take one second is infinite and alternate and again if you want to learn more about animations transitions you can check the description below and here let's create our keyframes animation name in progress and it's gonna start from opacity zero and it's gonna end on opposite one let's see what we have right now as you can see we gave this animation and what about those check buttons did we give here any class name no we didn't let's give i'm gonna select them and i'll say class name styles dot checked button or icon okay let's take this and i will say if it's undone or in progress make this disappeared so i will say unknown and checked icon and also in progress check icon it's going to be display not like that as you can see it's only here perfect so let's take care of responsive design if you open your console and click on this mobile device button you're gonna see the mobile version of your app and as you can see our application is not responsive let's handle this problem to do that we are gonna use some common breakpoints we are gonna use those sizes as you can see for mobile devices we are gonna use 480 for eighty two seven 768 we are gonna use it for ipads or any other tablets and this number two this number for small screens and others for this tutorial i'm gonna show you only one of them and you can just take care of other breakpoints if i do this one by one this video might be really long let's get started with navbar but before i'm gonna comment out this footer that because even if we make this now by responsive we are not going to see it because of this footer because it's really large so i'm going to open layout and comment this footer out okay so let's open nearby css and i'm gonna open here also okay so how we are gonna write our breakpoints it's really easy we are gonna use media query i will say media screen and i'm gonna write here my condition and max width and it's gonna be 480 in this case if it's smaller than 480 we are gonna use this css styles so what we are gonna do firstly i want to delete those links here remember it was item and item and child2 let's paste it here and display no and as you can see it's disappeared right now i can make this first child a little bit larger it was flex one so i'm gonna come here and first child or add child one and flex will be three let's see it was one at the beginning right now it's flex 3. perfect by the way you can create here a menu button and you can show your links i'm not showing because we are not using any links but if you want to you can check the previous next.js project you can find it in my other tutorials so what about this slider let's close here and here let's open featured css and i'm gonna do the same thing quickly and for container remember it was full screen like that but i'm gonna reduce this size it's gonna be maybe half let's say height 50 vh like that but those arrows are not in the middle if i make this container oops position relative ah okay it works right now remember our featured component starts from here and these arrows are in the middle right now so let's handle this pizza list i'm gonna close here and i'm gonna open pizza list css and remember what we have description here and also we have a title here i can center this i'm gonna paste my media screen and i'm gonna say title and it's gonna be text align center and for description it was 70 percent so it looks really small let's make this larger so i will say with 90 percent and again takes the line center okay it's much better and as you can see our pizza cards are really small that because we gave 20 percent 22 percent for the width we are gonna change it let's open pizza cards module and as you can see it's 22 percent let's make it a hundred percent so we are gonna see only one item per line so container with 100 percent oops like that but those texts are really small let's make them bigger for title font size will be let's say 30 and for price price font size will be 24 maybe and for this description maybe it can be the same for description 24 like that perfect so we can change footer footer module okay but let's open our layout here and let's see okay firstly remember we have an image here we can delete that and if you remember we have two items first one is the image and second one is those cards so if i say item first child i'm gonna make this image display now and after that i'm gonna make this second item full extraction column so if i say item and second child or just item doesn't matter flex direction call as you can see they are vertical right now but there is a height here let's check as you can see our container is 100 vh minus 100 pixels but what i'm gonna do is giving auto for this height in this case we are not gonna have a specific height so if i come here and say container and height auto as you can see the background is totally black right now and maybe i can center those texts text align center like that let's increase this font size for title and text for title font size maybe 30 like that and this text remember here i'm gonna make it maybe 20. okay it's much better i think perfect so we finish this home page let's take care of product page okay as you can see our image is not here and it's a little bit large so what can we do here let's close here and open product and open here as you can see again we have a height we can make it auto again i will say container and height will be auto and text the line will be center and remember our image is somewhere here that because it's display flex let's make this vertical again flex direction call okay it's still not here remember we have a image container here which includes pizza image but its width and height 80 percent let's change it i'll say image container and i'm going to say say when we w height will be the same it's going to be square like that let's give some margin here margin top 20 and what else i can do i can reduce this space a little bit we have title and i will say margin zero or maybe just five okay so our description is good but what about this container remember we have sizes container and its width is 40 percent so it ends somewhere here if i make it 100 percent it's gonna contain all this screen so let's do that sizes and which will be a hundred percent if i do that it's gonna be really close here so let's give some margin or padding i'll say zero pixel and 20 pixels from left and right will be 20. okay let's check our functionality it works properly and those ingredients and again let's remember what we have we have a container which is ingredients we can change it it was display flex but i'm gonna make this flex direction go like that but they look really small i will say for each option give a margin so we can give some space and i'm gonna increase this font size like that but in this case this checkbox is really small and we have checkbox here v20 high 20 we can increase maybe 25 like that [Music] and let's increase those buttons we have quantity and button and their heights are 30 pixels let's say quantity for button height will be 50 pixels and i'm gonna give some padding inside maybe 10 from top and bottom 20 from left and right like that and it looks better right now perfect so let's take care of cart i'm gonna enter cart page okay firstly let's make this container flex direction column and for this table we are gonna do the same thing i'm gonna close here and open cart this is our container let's write here media query and for the container i will say flex direction call this card is here right now now for this padding 50 is too much i think so i will say padding 20. okay but it's still big because of this table so i can make it vertical also but how i'm gonna do this i'm gonna choose my table here table and i will say display flex flex direction column and i'm gonna center everything align item center justify content center like that but it's still not vertical that because this container is tr remember let's open our card component and as you can see we have tr and another tr and its class name is tr let's change it i will copy here first and it's going to be tr and title and for those items it's going to be just tr or tr item and for the other one okay right now we can change them firstly i'm gonna delete those titles that because they are gonna be vertical and there is no sense to write their names so let's say dr title and it's going to be display now okay so let's make them vertical i will say tr here display flags flex direction column and right now they are vertical i deleted titles that because we cannot write them here for each line by the way let's enter them like that and i'm gonna give some margin between each item let's say 20 actually let's say margin bottom like that and let's increase those texts for name and for total price it's gonna be 24 pixels like that but this image is really small right now let's check what we have here we have image container and its width and height 100 percent sorry pixels we can change it i will say image container and with maybe 30 vw and height will be the same to make it square maybe 35 it's enough fighting you can make it bigger or smaller as you wish let's make them bigger also i will say extras price and quantity and font size 22 like that by the way we can give any text here before this line and this line and we are going to do this there is an absolute feature for that so i will say for this price i'm gonna use b4 and i'm gonna write here my content it's gonna be price and space here as you can see it writes here price and i can make it font weight bolt or maybe 500 like that and i can do the same thing for this quantity and total let's multiply this and for quantity and for total perfect it looks much better but what about this wrapper let's check what we have as you can see it's 90 percent i'm gonna make it a hundred percent and apps what about order page i'm gonna do this similar things let's open order here for container i will say flex direction column and again tr title it's gonna be display not but i'm not sure we gave this class name or not okay we didn't let's open order here here id okay it's tr title and for this item it's gonna be just dr [Music] okay right now let's check okay it's not here and let's make this tr horizontal sorry vertical display flags select distraction and i'm going to center them okay font size maybe 20 perfect and i can do the same thing as we did before for id for order id i will say before and content will be oops content i will say order id and for the username it's gonna be maybe customer like that but let's make them five hundred and for address and total total here and i will say address total okay perfect so what about this status bar remember this is our first row and this is second one so i can use row and last child now i will say flex direction column and i'm gonna center this like that just five content center why it's not centered it's 80 percent let's make this 100 percent okay perfect and for each item for done in progress and undone i'm gonna give margin bottom in progress margin button maybe 20 like that perfect for this dropper again it was 90 percent it's gonna be a hundred percent like that so we finished this project i hope you enjoyed it looks really nice and in the next lesson we are going to create our own api we are going to add our products we will be able to delete them update them and a user will be able to buy any products and we are going to activate our checkout button [Music] and which payment method you want to see guys just let me know in the comments stripe or paypal or any other so it's pretty much all i hope you liked it if you learned something new today please like the video and subscribe to the channel and you can support me by using the join button or the link in the description below i hope i will see you in the next tutorial bye

Channel: Lama Dev

Views: 14,333

Keywords: react, react.js, javascript, next.js, next js project, react project, react app, next app, next js tutorial, food ordering app, uber food, restaurant app, next js example, next.js 2022, ui design, ui, ux, next.js website, web design, react website, restaurant website, pizza ordering app

Id: vIxGDq1SPZQ

Length: 111min 27sec (6687 seconds)

Published: Mon Dec 13 2021

Reddit Comments

[u/nesikim]

Source: https://github.com/safak/youtube/tree/next-pizza-ui