React Food Delivery Website Tutorial Using, Nextjs | React js Projects for Beginners | Deploy PART:1

foreign [Music] so [Music] um [Music] so [Music] [Music] um [Music] hello futuristic developers today we are going to build an awesome full stack pizza delivery project with the next gs framework and sanity content management system which is an incredible tool to get rid of dirty back-end work the server-side rendering in next.js will make this application blazingly fast and su optimized for global state management we will not use the context api or redux toolkit which are full of complexities instead of these we are gonna discover modern solution zoo stand for state management for payments we will learn how to integrate stripe with our application which is the most advanced method for online payments we will also implement the cash on delivery method the most important feature is beautiful ui ux which is mostly neglected in many tutorials over the internet but it's important to learn and convince your clients so we will also do the pure css in detail without any framework or extra tool still there is many more to learn at the end of this project we will also see how we can deploy this full stack project over the internet so you can share this on your portfolio submit to your clients and even you can start your startup and the bonus part is that no previous knowledge of next gs is required to start this project you just have to know the basics of react so if you like my work then do support me on patreon and hit the subscribe button let's get started so here i am in a blank vs code directory and mostly we start our next project by writing npx create next app like this but the problem with this command is it installs too much extra stuff and generally we remove all that stuff to start our new project so to avoid this problem i have made the starter pack for you as i always do in every project so here is the starter pack for this project and you just have to copy this link and in your vs code in the terminal write git clone and paste the link simply and hit the enter button it will clone this small repository and take some time so let's wait okay here the repository has been cloned now i am going to its directory by reveal in file explorer and let's remove this previous instance of vs code and opening here a new vs code okay so in this starter pack first of all i have this assets folder in the assets folder i basically have some pngs to complete this project and then to explain more directories i have to start the development server so to start a development server first we have to install all the dependencies required for this application so to install them simply write yarn and hit the enter button here over all the dependencies have been installed successfully now to start a development server write yarn dev mean start the development and on the local host 3000 you can see it is started and here it is saying subscribes and keeps code so it's basically a very simple template which is acquiring all our needs so first of all let's see what we have inside the style inside the styles i have globals.css globals mean it will be available for all over the application and here i have imported a font poppins font from the google fonts then for the whole body i have given some phone family font color the background color and of course the margin will be the zero and in the horizontal direction i have made the overflow hidden so our application will never scroll in the horizontal direction and then i have made some variable for the shadows and colors i have customized the scroll bar according to our application these are the very basic settings and are not very important to explain therefore i have made them in global.css and you can acquire them out of the box by cloning the starter pack and then similarly i have given the link some colors and text decoration and so on okay after the styles inside the pages i have an underscoreapp.js in underscoreapp.js here i have given a specific think page props and it is very important to understand why i have done this and you can only understand this when i will start the project actually so for now just skip this one and go to the index.js inside the index.js in the head tag as we usually do in the html i have given a title for our application and i have given a png file which is available inside the assets in the main body i have just made an h1 heading of subscribes and keeps code as you see here it is saying subscribes and keeps coding and actually the next gs development server is very fast as you see as soon as i made any change here it will be reflected on the spot here you can see how fast it is this is the total explanation of our starter pack and you can see how small and easy setup we have so in the browser i am opening my deployed version and having a look what we have to develop first so this is the deployed version and on the first we have the header section and this hero section so let's start by making the header section first but if we notice one thing in our application that every page has one thing common the header and footer is going to be the common in every page of our application as you see that this is the home page have header and footer similarly if i go to any product page it also has the header and footer so these are my special technique in the react js that we can wrap the header and footer around every page in our application so how can we do that so for this i am making a new folder components in our application like this inside the components i am going to make the very first component layout.jsx here make an arrowhead function const layout okay so let's make the parameters blank for now and then it will return some jsx like this and in the jsx the very first thing is going to be the header then there will be the body of the page means the children and at the last they will be the footer of our page so as the children is going to be the dynamic regarding every page so i am receiving the children as a prop and now i have to make the header and footer first so similarly i am going to make header.jsx inside the components like this and here simply write edf to export default function okay so you can use this es6 extension for such auto suggestions and then i am removing all the parameters for it like this and inside the function it will return let's say for now it is just returning a div which is saying the header and also make the footer component similarly and inside the footer edf export default function with the footer no parameter and return some jsx which will save footer so let's save this also save the header one and inside the layout.jsx i am auto importing the header component and the footer component now our next thing is to wrap this layout function around the index page so index is our home page our every next js application is going to start from index.js page so here i am making layout okay so it is not out of suggesting me i don't know why okay let's in the gsx yeah here we have to also export defaulted so export default layout and then it can be imported here now if i make auto suggestion yeah like this and wrap over all the page inside the layout so if i save this and have a look here you can see i have a header and i have a footer and in between i have the children so now we can understand the concept of underscore app.js inside the underscore app.js it is providing the global css for all the application and then the component and page props is going to be the reasoning of wrapping our layout component around every page in the application so i hope now you understand the underscore app.js we have nothing to do so more special with this file so let's just close this so let's start by actually making the header component so inside header.jsx as this is an html template so we also have to make some css and today we are going to use a very special technique for writing css which is dot module dot css so inside the styles i am making a new file with the name header dot module dot css okay i will explain you what is the benefit of making it as a module but first let's import this module inside my header.jsx here i am saying import css from outside the inside the styles header dot module dot css okay so now all the styles from this file are imported as the css so how can i make this so let's say inside the modules yes i am making a class header and giving it a border of two pixels solid black okay and now to use this class in my gsx here i am giving it a class name of css dot header as simple as that now if i save it and have a look here you can see a border is applied around the header so how this is working basically the benefit of making it module that we will not mix up the class names of various components between each other because let's say the class name container is very common to use in many components and if we give a container for many components and then make a styling for a specific component then it will be automatically applied for all so to remove this ambiguity the react.js has provided us the concept of module dot css if i inspect this header component okay so i am there is and you can see in in the body the class name of header is not simply a header it is something like header underscore handler and then it has given it some id so all these particular things are done by module.css itself we no more have to worry about mixing up the class names so now i think you have understood the concept of module styling and it's actually very useful in the react environment have a look at the developed version as you see that the header is divided into the three sides the logo side menu side and the card side so let's start by making the logo side here i am saying logo side make our div for the logo and i am giving it a class name of look of course i will define all these class names in the css but for now i have to import the image of our logo so i am going to use the image component of next gs and i am giving a source of logo from my assets folder with the alt attribute of nothing otherwise it will generate a warning and the auto suggestion has not worked here so i have to import it manually here i will say import image from next js and then image also i have to import the logo png so i will say import logo from go outside inside the assets logo dot png let's save this and now here i have the icon of our application let's remove the styling so module file is module dot css here i am removing this border for now and what is the benefit of using the image component from next gs library basically it will optimize the images used in the project for every device automatically we not have to bother more about the resolution of our images their responsiveness their optimization for the seo all the things will be handled by this image component of next years okay for more i will like to give it some width of 50 and similarly the height of 50 like this let's save and yeah all the weight is correct let's make a span which will simply say photo which is the name of our application then go to the center side which is the menu side and here i am making our div with the class name of menu for the menu i am simply going to make an unordered list so instead of this div i can make it a parent element of unordered list and here i will make three list items so yeah like this the first item will be the home the second one will be the menu and the third one contact like this so let's save it and now go to the third side which is going to last side and it is the card side so instead of car side let's make it more reasonable by saying it as right side and in the right side make a div with the class name of right side and here i am simply saying card side so let's save it and have look yeah i have all the three elements let's import the card png so for this first of all i will make a separate div because i also have to make a badge on the card png so therefore i am making a div with the name card and importing an icon from the uil shopping bag name [Music] basically this icon is available by the icon scout library which is made for the react and i think it is available for all the other frameworks but i specifically use it for the react because it works fine okay so i have to import it manually i don't know why the suggestion is not working well for now so uil shopping bag from at the rate i can scout react and icons let's save and yeah here the icon has been imported successfully it's time to style our header so open the module file here and i am opening it side by side so you can reference it with the body of our header like this and let's target the of course headed class first make it display flag so both the three sides will be in the horizontal direction align item center justify content not the center it will be the space between so they will be spread around the corners of screen and then the padding of one rem from all the sides and here we have how cool it is and now i am going to target the logo div first because it is the first side make display flex line item center and justify content center let's see okay so i should make it justify content flex start not the flex center with the gap of 0.5 rem so let's say okay to make it more clear i am going to do one thing first i will give the flux of one for each side so they will contain the equal width of our screen so the center side is the menu give it a flux of of one and similarly the third one is the right side giving it a flex of one again let's save it and here we have all have the equal weights of course they are aligned at the flex start so i will fix them i am also going to target the span inside the logo which is basically the name of our application here you can see after this logo i have the span so i am targeting basically this one and giving it a font weight of bold with the font size of 1.5 rem like this and here we have now we can easily move to the menu side and menu will have display flags with the list style of none because for now i have the black round bullets that i don't like and then a gap of two are in between the items so yeah the one thing i can also do is to justify content center so they will be the in the center of their positions and then making it a z index of 99 so the menu will always be above every element on our page yeah like this it's time to move on for our bad side as for now the png is very small so i am going to change its size and i am giving it a size of let's say 35 with the color of like this and now i can easily make a badge over it with the div and class name of css dot badge and inside and for now i am giving it a static value of one of course it will be dynamic when we fully develop our application but for now let's give it a static value of one so if i save this and here i have a one for the right side making a display flex gap of one rem and justify content towards the flex ends so justify content selection like this yeah here i have okay so to make this badge over the card i have to make the card div as position relative so for the card i am making it position relative display flex and the cursor as pointer also i am making it a z index of 99 as i have made for the menu and similarly you can go for the logo now i have to style the badge so for the bad now i can use the position absolute as the parent element is the position relative with the display flex and the background color of our variable which is the theme red then the text color of the badge will be white let's save and have look here i have okay i have to give it the border radius to make it a circle so the border radius of 50 percent also i specify the width and height so weight of 20 pixel height of 20 pixel let's save okay if i make it display flex then everything will be correct with the justify content center line item center yeah how cool it is looking the only thing remaining is to specify its position so i am making it right minus 0.5 rem so yeah our header is completed for now but the menu is missing something so here in the menu i will say in the menu there are some list items and on however these list item make the cursor as the pointer and the color of the list item as a variable which is the [Music] theme red like this let's save and yeah our header is fully completed how easy that was the next thing is to make the footer for every page as the header is same for every page similarly the footer will also be the same let's close this header module and similarly close the header.jsx and inside the footer let's remove this pretext and here i am making rd with the class name of container in this first of all there will be a span which will say a text all rights reserved like this and then i am making rd with the class name of social means it will contain all the social icons as i have did in the header.jsx similarly i will import some icons from the icon scout library like this i have imported the facebook github and the instagram icon let's save this okay so it is saying an error that css dot container not found because i have not made the css module for the footer one so inside the styles make the footer dot module dot css and then import this inside the gsx module.css now if i save it the error will go on as you see that here i also have the three icons but their sizes are very small so i am going to give a property size of 45 so mean 45 pixels the size in the pixel so if i copy and paste it two times more and yeah now the size is very correct the next thing is again as i have did in the header section if i go to the header.jsx here i have the logo side so i'm just simply copying this and pasting it here and i have to import the image from the next image format the body let's save and then there is an other error of the logo is not imported so let's import the logo also so just copy and paste this line and yeah the footer is also completed with respect to its body it's time to style the footer so opening the module side by side target the parent container making it as display flex with the flex direction of column and giving a gap of 3 rm so all the items will be in the vertical direction the margin top of 6 rem to spread it from to separate it from the body and then the line item center justify content center as we do mostly and then i am giving it a very specific color here i have given it a linear gradient color with the upside down direction you can just simply copy and paste it from the video so yeah you just just pause the video and copy and paste this value so if i save it here it have this color but it is not giving me a gradient effect because here instead of using the color value just simply use the background and now it has the gradient okay it's time to style the inner components so i will say the container is containing us pan inside it give it a text color of our theme red like this and with the font weight of board after this i am targeting the logo with the display flex justify item center justify content center and let's see now give a gap in the logo so the gap of 0.5 rm this is as same as i have did in the header section so after this the logo is containing a span and for this pin span make the font weight of bold with the font size of 1.5 ram you can just simply and you just simply copy and paste it from the header css now for the social icons giving them a display of legs with the gap of one arm so they can have a distance between them yeah now let's fix their color so i will say inside the social there are all the pngs and for all of them make these svgs fill with our theme red yeah so our footer is also completed header is also completed how easily we have made both the things it's time to actually make our first home page of pizza delivery application so in this project you will see the styling the body structure and also the logic of how we can implement such a full stack application let's make the hero section of our application if we have a look at the developed version the hero section have these pngs and these headings so let's make a component inside the components folder with the name hero.jsx and also i will make a style file for the hero section so inside the styles folder i am making hero.module.css okay so now let's close all the extra files here i have the hero.jsx and hero.module.css so first of all write edf export default function no parameters and it will return some jsx so div dot css dot container okay of course i have to import it css first let's make a text bigger here import like this it is imported here and in this i will say hero so now to see the results in our browser i have to import this component inside index.js so okay to import this here i am saying import hero okay let's give it by the auto suggestion yeah like this and now instead of this h1 heading i will make it the hero section okay let's save and have a look in the browser so here it is saying that hero means our new component has been imported successfully okay so now let's go to the jsx and here i am going to divide it into the two sides the left side and similarly the right one like this so why i am dividing into two sides here if we look at the developed version the left side contains these headings and the detail with the button while on the right side we have the alignment of images therefore i am dividing it so that our code will look more clear and readable okay let's start by the left side in the left side first of all i have a cherry span as you see that there is a cherry image which is saying more than faster so i am making a div with the class name of let's say charity for easy naming convention inside this div first of all i will have a span which will say more than faster and then of course there will be an image so i am importing the image component from next yes and then the src of cherry i have to import the cherry with the alt attribute of nothing let's say and import the cherry png so here i have given it a path to import let's save and here we have more than faster without cherry let's tile up to this point so here first of all target the main container class i am making it display flex with the position relative okay and then i will target the left side specifically and then okay as i have given the display flag so i should give some content for the right side also so okay this is right side so let's say for now i will say it as right side and then inside right side only and yeah there is the one okay so as soon as i save my css it will be in a horizontal direction yeah great okay after this for the left side first volume display flex with the flex direction of column and a gap of 2 rm between all the elements so that all the headings will be in vertical direction and then i am specifically targeting the cherry div making it as this flip flex line item center justify content center with the width of let's say fit content so we not have to specify it manually in the pixels or rem and let's save it yeah but i have to give it a background color to see it properly so i'm in background color of a variable which is pink like this and okay it is a very faded color but i can imagine where is the boundary okay so to make it more clear i am giving it a border for now 2 pixel solid black yeah now you can easily see that after this i am giving it a margin top of three rem because i am feeling it's too much on the top side with the padding of one rem and the border radius should also be defined for this and i am giving only two rem yeah looking nice but still there is a problem with the font size that it is too much for a small span and then the color of the text will be our theme red so like this and the font weight of bold all the things i have did are only belonging to the font so yeah how cool it is looking now i can remove the border from here and the only problem is the image size here so i am giving it a width of 40 with the height of let's say the height will be 25 will be enough so there was a problem with the font size that the art suggestion made it phone style not the font size so i have to fix it and now yeah now it's looking too much like our developed version here you can see that the only problem remaining is with the padding that it is too much attached with the corner of screen so as the padding is not only belonging to the hero section it is involved with all the page so for this inside my styles i am making a new component with the name home dot module dot css okay and here i will make a container and for this container giving a padding of one rem and two rem okay now where i will include this container so inside the index dot jsx i have include i am including the css as import css from and for the most parent container here just above the head i am giving a class name of css dot container so as soon as i save this here you can see our padding is all the way correct okay yeah this is the default size now we can move on to our left side of hero section so closing the index closing the home module so basically during making the left side i forget to actually make a dip for the left side i just made a styling and i was not wondering why this is not working because till now we have not such a styling that will affect the alignment because we have only one element inside the flex but i just noted it so it's a good thing okay now for format it so this is our left side and then here is our right side okay as we were focusing on the left one so again make our d with the css dot hero text like this and inside this i am going to make three spans so so in the first two spans i have written some text while in the third span i will write your and then the pizza okay let's have a look at the developed version okay let's have a look at developed version so you can see that the pizza world have a different color from the other heading so to make this effect what i will do i will make the pizza text inside a separate pan so i will just give it a separate span like this and then the pizza will lie inside here and now i will give us separate styling for this so style will be equal to color which is going to our variable theme red okay as soon as i save this here you can see okay there is a text with the name pizza and pizza have a different red color of course it's not too much visible for now due to smaller text size but we will fix it in the styling so let's do the styling after this here i am targeting the hero text and making it display flex with the flex direction of column and the font size of four rdm with the font weight bold so let's save so styling is not applied in the vertical direction let's see why oh sorry the left side should also be here okay so uh the hero text just become out of the left side div therefore it was not working i know it's a little bit confusing but now it's clear to you now you have this is the left starting of left side this is its ending and in the inner side i have this this and this div so if i save this now it's in the vertical direction so after this here i am making a span with the class name of mini text like this and i am writing some text inside this so here this is a text inside this one and i am going to target this mini text strand so mini text here and giving it a width of 70 percent of our total left side like this with the color of our variable grade that i have made in a global css with the font weight of 600 so here i have this text as i have in a developed version so the last thing is to make a button here so for the button here i am making a button and giving it simply a class name of button why i have given it simply a class name button i will explain it but first write get started okay as the buttons are used too much in our application many times in many pages so it's not a good idea to make the button separately for each component therefore i am making a general class inside the globals.css with the name button and the styling of this button will be applied to all the buttons in our application for the button i am giving a width of maximum content with the padding of 1 rem border radius of 4 rdm and a and a border of none means nothing on the border the color of text will be white the font size of 1.1 rem and a cursor will be like pointer on the button so if i save it here you can see this is the button but still the background color should also be applied so i am giving a background color of our variable which is the theme red let's save and have a look how cool our button is looking but the padding is not correct as we have in the developed version the padding is more than this one so to fix this now i am going to make a special clause for the button of hero section because this special padding only belongs to the hero component therefore uh what i will do i will remove these double quotations and making them as backticks and to use the backticks it should be inside curly braces and now i can use my own variable which is css dot btn so inside the heromodule.css i am making a class button giving it a padding of one rem and 2.5 rem which is according to the hero section if i save both files and now you can see the button is also in a correct form so our left side is completed it's time to make the right side of hero section for the right side just remove this pre div and make a new div with the class name of simply right like this and inside this div i am making a image container so the name of class will be css dot image container and inside this they will lie our hero image so hero image with the source of hero image and the alt attribute will be nothing let's make it like this and i have to import the hero image so as i have did so as i did here simulates copy and paste and change the name perfect like this and have a look okay here i have my hero image but its side is too much large therefore our left side is no more in a correct form so to fix this here first of all i will make it layout as intrinsic intrinsic means it will only contains the space or the width as long as the image container is therefore i have made a separate image container so that it could specify the width of its inner image okay so it's time to fix this by the styling so for the right side i am making first of all position relative and then i am targeting the image container and making image container width of 38 rem with the position absolute so if i save this here you can see our image is now having a correct way it's time to fix its position so i am giving a top of minus 5 rdm distance with the left of minus 5 aria let's save and yeah our our hero section is almost completed our next task is just to make this contact and this italian pizza section so let's make the contact us okay so just below this image container i am making our div with the class name of contact us and then inside this i'm making a span which will say contact us like this and then i am making a div which will contain the icon from our icon scout library so div and inside this uil phone with the color of white means this svg will be filled with the white color okay so to make this happen i have to import url phone i am also importing the italian pizza image because it will be required after some time so import pizza one like this now let's see here i have the contact us div and there is a svg as you can see here of phone but as it is of white color it is not too much visible for now but let's fix this open the and here target the dot contact us means the contact us class with the display flex line item center justify content center and a position of absolute so we can handle its position manually according to the parent div and then i am giving it a and then i am giving it a width of maximum content so the content will always in horizontal direction without any wrapping padding of 1 rdm the border radius 5 rem top of 6 rem so yeah it's in a correct but still the phone is not visible let's make the phone visible so i will say dot contact us is containing a div and for that div make a background like this with the border radius of 50 percent means a circular div width of 2.5 rem display flags with the line item center justify content center and the height of 2.5 rem so yeah now our phone is visible now we can fix this contact us and a gap between them so for them i am giving a gap of one rem as we have made them display flex giving them a background color of white the box shadow as we have made a variable in our global css with the name shadow the color of the text will be our theme red yeah like this let's save and here it is how cool it is looking so let's fix the position of our contact us div so after the top of 6 rm i am also giving it a left value so left of minus 6 rm and yeah all the way correct it's time to make a hover effect after this div i'm targeting contact us and then making it on hover like pointer with the transform of scale up 1.1 percent so yeah it is scaling up and scaling down as we have predicted let's make the last part of our hero section which is the italian pizza div so after this contact us div here i am making a deal giving it a class name of simply pizza inside which there will be again a div which will contain the image so image and the src of image will be the pizza one that i have imported alt attribute i am giving nothing for now with the object fit of cover so the cropping will be automatically handled by our next image component and layout intrinsic as i have explained before why we use this to control the width of the image make the word wrap on and then after the image there will be the details so css dot details div and inside this making a span which is saying then there is an other span for the price and for the price i am writing 7.49 let's say and okay so it is too much huge now we are in an extreme need of doing styling so quickly move to the css side and here the pizza will have display flex gap of one rem with the background color of white and a box shadow as i have already made the variable of our shadow like this with the padding of 0.5 rem and the border radius is also 0.5 rem let's save okay so now we have a beautiful border around the image but let's first target this image and correct its width and height so i will say dot pizza contains a child the nth child one means the first child which is the image make its width of six rem and the height of four are with the over flow of hidden so now we have a beautiful image inside a beautiful div okay so i am also going to give it a border radius of almost 0.5 rdm yeah the image is looking nice now let's fix the position so for the position here i'm giving position absolute with the bottom of 4 rm distance means from bottom it will have 4 rm distance from left 19 rem with the width of maximum content again it will not wrap around and if i save this here we have this italian pizza div okay now to make the italian pizza and the price in a vertical direction what i will do pizza contains a child so and of child which is the second child and for this make display flags with the flex direction of column justify content of space between so they will be around the div in a vertical direction and the font weight of bold so here we have the results but if we look at developed version the dollar have a red color so to change the color of dollar sign as i did before similarly i'm again going to make a separate span making the dollar inside this pen and then giving it a style and for the style so here that dollar color is changed our hero section is now complete okay let's i also have to make the hover effect here i am saying dot pizza on hovering this do some transformation of scaling it up about 1.1 percent so yeah okay let's also make cursor like pointer so now our hero component is ready it's time to make the next component which is in the developed version is the services section so next we will do the services section for the services section let's close this hero module and then i am also closing footer and inside the components here i am making a new file with the name services.jsx and let's open it towards the right side like this and as i always do so similarly i have to make a style for this services dot module dot css okay so i am also opening this side by side here now inside the jsx component edf for the export default function and then no parameter return some jsx here i am making an empty node first of all i have to make a heading for my service section therefore i am making a heading class and inside this i will make three spans so like this now let's write some text inside these pans so here i have written some text in these three spans now i have to import its css file so to import css simply import css from styles folder and then services dot module dot css yeah okay let's make text a little bit smaller like this now let's save this and import this section in my index js so i am opening index file and below this hero section i am importing services like this let's save this and have a look here i have these headings that i have written in the span this means it's working correctly it's time to style these headings so inside the dot css i am targeting the heading class making it a display flex and flex direction of column so these headings will be in vertical direction as you can see that now making a font weight bold for all of them with the justify content center and the line item center let's see and here i have okay i also have to change the font size but for the phone size i will target each pen individually individually so heading have the nth child which is the first child make the color of our theme red so like this and the font size of one rem will be enough so yeah now you can see that this have a perfect font size with a color let's target the second child so again inside the heading i have a and style of type 2 means the second child and make the font size of 2 rgm for this and also i am targeting the third one similarly so here just write third child and now you have how cool our heading is looking exactly same as we have in the developed version it's time to make these images and also their descriptions so here i'm making a comment with the name features or you can also say them as the services so let's make our div with the name services and inside these services we will have some features so let's make our div with the name and individual feature let's copy and paste this three times because we will have three features and here i will say second feature and similarly i will say third one as the third feature like this now let's start by making our first feature first of all we will have an image so to make an image as i always do we have to make an image wrapper so div css dot image wrapper like this and inside this uh next image component with the source of some image let's say it is service one so i am saying its image as s1 with the alt attribute of nothing for now object fit cover and the layout of intrinsic now i have to import this s1 png so on the top i'll say import s1 from go to the assets folder and then target s1.png similarly i am also importing the second and third service png so i will not have to again import them like this now let's have a look so here i have my first service png with its with no description or detail and also they are in a vertical direction because we have not made them flex yet so let's target the services div inside the css module here i am targeting the services make them display flex with the margin top of 3 rdm and a gap of 3 rm between the services align item center justify content center so yeah here we have these three also i have to target the each feature individually therefore i am targeting it as dot feature with a display flex and and items will be in a vertical direction but still we have only one item inside our feature which is the image wrapper so to make it more practical let's first define the structure of our feature okay i am separating them as like this and opening the word wrap now after this div i am making two spans so and writing some text inside them so here i have made these two spans with some text let's format it okay now we can style them more logically here you can see these two spans are in a horizontal direction so to make them in a vertical direction i am making the display direction in vertical so flex direction column with the line item center justify content center and the gap of one rem here we have okay also i have to target the image because the size is too much huge so to come so to reduce the size i am targeting the image wrapper making its width of only 10 rem and similarly the height let's save it and yeah all the way is correct it's time to style these details so to style these details here i will say the feature class contains a child so the child number of our first detail mean first span is second as you can see that inside the gsx this is the first child and this is the second child of our class feature i should separate this as like this so i am targeting this pan now for this pen i am simply making its font weight of bold nothing more special and then similarly i have to target the third child means our second span inside the feature i am making its color of our variable gray then making the world wrap break breakdown so it will break our line segment according to the width of our feature and then giving the width of 20 rem and text align center let's have a look here we have how beautiful and clear the service is looking now similarly i am going to make the second and third service so here i have made all the services this is the first service you can see this here and then i have just simply copy and paste it here just i have changed the text of spam and then i have made the third one again by just simply copy and pasting and changing this text so if i save this and look how beautiful and clean our interface is looking now it's time to make our next component which is the menu and in this component as we have to interact with our headless content management system sanity so therefore before making this component we have to set up the sanity first so to set up the sanity with our application here i am opening the terminal and just close the development server by pressing ctrl c and then i am going to my directory here just close all the folders and i am going to make a new folder with the name sanity okay so what is the next step inside the terminal i am going to the sanity folder by cd sanity and then it's time to install the sanity cli package for this write npm install and then don't forget to give the global flag so it will install the cli globally in your computer or laptop and then write sanity cli it will take some time to install let's wait so the sanity cli has been installed successfully now i am going to write a command to initialize our new project with sanity write sanity init means initialize the sanity and press the enter button now it will ask some questions from you it is asking me to create a new project or use the project that i have made before so i am making a new project create new project now it is asking me for the name of my project i am saying it as youtube and let's say youtube video the next question is whether i should use a default data set configuration or not so just simply press the yes and then it will take some time to create a new data set okay after this now it is confirming us the path of our project so yeah it is in a correct directory the sanity folder inside the photos and keeps code so i am just simply pressing the enter button the next question is whether we should use a pre-built schema provided by the sanity means a movie project schema e-commerce schema or a blog schema and the last option is clean project with no predefined schemas so in this tutorial as i am going to make everything from scratch so therefore i am choosing this option so press enter button and so there is a problem with our sanity or maybe it is a problem with our npm server that the configuration just hangs on this step on the resolving dependency so how can we solve this problem just press the ctrl c and it will breaks this installation but don't worry we can continue from this as we know inside the sanity folder here now we have some configuration luckily inside the package.json you can see that now we have all the required dependencies to complete this setup so what i will do i am running the yarn command manually here so just press the yarn and hit the enter button so here all the dependencies have been installed successfully and they have taken a long time to install because it is not a normal or official method to install a sanity but it is working for now and it's a problem for many of people like me and many more and no one knows a specific reason for this by the way let's start this by writing sanity start here it is saying content studio successfully compiled go to localhost 333 means the 3333 okay so just click on this and it now it is saying to make a login so i am logging in with my google account so here our sanity studio has started successfully how cool it is and how easy it was okay there is one thing that i have missed because i have already made a login for a previous project therefore this time during the installation sanity has not given me an option to login when you start a project from scratch like me then it will ask you to make a login into sanity account first you don't have to go for the login manually in your browser it will give you an option in your terminal to make a login with your google account so just press the enter button as simple as that anyhow our sanity studio is now running and if we have a look at a directory of santi here we have the configs node modules plugins and the most important schema the schema is one thing only with which we have to work inside the sanity folder so inside the schema if i look at the schema.js okay let's close this site for now so this file will contain the names of all the schemas that we will make by ourselves by the way inside the schemas folder i am going to make a new schema with the name pizza.js means this is a schema for our pizza type and for a good naming convention i should make it in a small letters because it is not a gsx to make the first schema write export default and then we have to give the name of our schema which is going to be the pizza for this one and then the title title is again going to be the pizza with that type it is a document this is a necessary setup to make as a model as we do in a mongodb and then we have to declare about the fields in our pizza schema here i am saying fields and fields is again going to be a key value pair so its value is of course will be an array of object and each object will represent a field in the model so the first field is going to be the name which will be the image and its title is again going to be the image i am giving it a type so type is basically as we have our variable types constant type so similarly we have a type in our sanity schema so for this i am simply giving it a type of image because as you clearly see that i have given it a name of image so it will be the image of our pizza the next thing is to give specific options and inside the options i am giving it hotspot true so what will this hotspot do if we have to crop or edit our image directly into the database then we should make the hotspot true this is the most cool feature in the sanity studio the next thing is going to be the name of our pizza or you can say the title so name is name and then title is again going to be the name and it's type as you predicted string the next field is going to be the slot of our specific pizza okay what is the slug let me explain you but first let's make this so what is the slug slug is just like a specific or unique id as we have in our mongodb or sql or postgresql any type of database they are containing a specific id but the benefit of sanity studio is that this id is easily recognizable by this types log when we will practically make it inside our studio then you can easily observe how the slugs are matching and making a type of pair with the name of our source means the name of our pizza so this unique id is not such thing that is not rememberable you can easily memorize it as it comes from the name of your product we can make the unique urls the unique page names with the help of this slug field by the way on next we will see how can we use it in our application but for now let's make the other field with the name of price of our pizza and the title is again going to be the price with that type for the type i am giving it a type of array why i have given it a type of array because we will have three sizes of each pizza the small one the medium one and the large one so each pizza will have the three prizes now i am saying off and inside the off right type as number how easy is the language of the sanity as it is closely matching with the simple english make a name price with the title price then give it a type of array and this type will be again a type of numbers the next and last field is going to be the detail of any pizza so details similarly give it a title let's save it and now to make it accessible in our studio we have to add the schema inside the schema.js so inside the schema.js as it is already saying inside in the command you are types here so my type is going to be the pizza which will come from the pizza and let's save this and have a look in our sanity studio so you can see now the content contains a field name pizza and if i click on this then it is saying no document of this type so we can make a new one by clicking here and how cool is this now we can upload an image make a name then it can automatically generate a slug we can add prices and details just try to imagine how much work we have to do to make a same stuff in a mongodb or any other database this is the real power and magic of sanity so let's use it so i am going to upload some data for my pizza document here i am uploading an image let's say in the desktop i have this pizza image so it is uploading here then give our name for this pizza as italian pizza and then we can also give a specific slug by typing manually but i prefer to generate it automatically as you see that how the slug is as same as the name then it's time to add some items for the prices so let's say the first price of our pizza is for the small one which is 13 and then add an item and make it 15 and the last one will be of 18. in the details i can write as delicious italian pizza now i am going to publish it and at the end it will say me the document was published means this action is successful so similarly i am going to make some more documents of pizzas so here i have made some documents of pizza with all the details i as i have made for the first pizza italian pizza similarly i have made the other five okay it's time to connect this sanity studio with our front side or the client side so i'm going to my vs code and first of all i have to close all these files and then also all the directories and i am making a new folder with the name lib means the library inside library i am making a file with the name client.js client.js basically works as a connection between our sanity content management system and our next.js application it's just like a connection.php file in our mostly used php html setup so in that setup we generally make a connection.php where we specify the name of database and the password client everything so in the sanity the setup is just like a same but here we are making a client.js which will contain all the information regarding the connection but to build this i have to install a dependency so i am opening a new terminal here and write yarn add sanity and then client so it will add this dependency the dependency has been installed successfully you can confirm it by going into the package.json here if i look into my dependencies and there is a sanity client means it's working fine okay so inside the client let's start building this first of all import sanity client from the senate client like this and i think there is a mistake in artificial this should not be in a curly braces this is a default export like this and then export const client which is our constant for that to the sanity client builder and then we have to give a project id first so where we can get our project id if i go to my studio then they then here you will see your account so click on this and click on manage project in this new tab of your browser you can see it is saying project id so just copy this from here and paste it like this our next thing is to specify the data set and data set is going to be the production and the other parameter is api version so api version is going to be our current date at which we are recording this so like this the next parameter is the use of cdn so i'm making it true because we have to use the cdn to fetch the images and many more data data the last parameter is going to be very important which is our token so from where we can get the token of our database so if we go to the settings or maybe we have to go the api let's okay so there go to the api settings and in the last we have no tokens so generate a token by click on clicking on add api token give this token a name so let's say i am giving it a name of development and also say development server and give all the permissions for this token to work means the editor it can read and write to all the data sets and then just hit the save button so it is making a token for us just simply copy this and paste it here like a string so let's save this client now now i have to make our client able to fetch images from our database of sanity so to make it able i have to install an other dependency the name of this dependency is yarn add sanity image url so the dependency is installed close the terminal and here i am making a builder for the images and giving it as image url builder from the sanity image url yeah again the auto import is not correct by the vs code so i am just removing this and it is also a default export from the sanity image url builder okay like this now as a parameter i am giving it my client at the last i am exporting a function basically this function will load the images from database to our client side so it will take source as a parameter and then builder dot image and tape source this is the total setup for making a client.js for our sanity studio let's save this and move to our index.js which is the starting point of our application okay here at the last of this our export default function home i am making an other function so let's make it bigger and i am saying export fonts get server side props okay making it as async function i will explain why we are using the get server side props so this is the official documentation of next gs and in the next yes i am at the document get server side props and here it is saying a very clear line that get server side props returns json will which will be used to render the page all this work will be handled automatically by next year so you don't need to do anything as extra as long as you have get server side props defined this means we have no need to write any type of backend code because the next js is providing us get server side props function out of the box how we can use it so inside this function i am going to make a query we are going to write this query in a special language named as grok by the sanity as this language too much resembles with the graphql therefore we say it as grog how we are going to write this i will say extract all the documents of type pizza so it will return us all the pizza document like this and then to execute this query i will say cons pizza is equal to a weight client i have to import it from my library dot fetch and write the query this client is the client that we have made in our client.js if i look at the top of my file here you can see it is auto imported by the vs code okay at last i have to return these pizzas to my application so at last i am saying return props as the pizzas so this scientex is originally devised by the next gs team as you see in the documentation if there is a yeah here you can see return props and then you have to name your data the similar sign text i have applied here okay so in the home page i am receiving these pizzas as simply pizza and if i say here console log these pizzas then i save it and in my application i am over here let's open that terminal so in terminal my server is not working because i just forget to start my server again because i have stopped it while installing the sanity therefore now i have to start it again by writing yarn dev and here you can see i have some documents in my console and these are the five dot no six document these are six document because in our database or you can see the sanity management system i have the six pizzas so therefore here i have the six documents means our query is working fine how easily we have made a connection with our backend and we are actually using it on our client side all of this application is rendered at the server means it is totally optimized for a google to index our pages and to make it fast all the compiling and building work is going to be on the server side let's make our menu by using these data you can see this data also in our terminal so but for now let's close this and also remove this console log and i am passing all of this data to my menu section so menu and then for now i have no such component of pizzas so i am going to make such one by writing inside the menu by writing inside the components as menu.jsx and here edf for the export default function and in the parameters i will receive that pizzazz parameter and then return some jsx let's say div and menu and i will now console log this so console.log pizzas let's save this and also save the index.js and i have taught import this menu like this now we can have a look here this is the menu and if i open that terminal here you can see i have an array of six elements from the menu.jsx it's working fine so i also have to make a css module for my menu so i am making a menu dot module dot css like this now open them side by side and there will be my menu now i am removing this div of menu and here i am making a class name of container first let's import the css here like this now the first thing will be the heading of our menu so this css dot heading inside this there will be three spans in the first pen it will say our menu so here i have written the text for all of these pens now it's time to style this so for this module css i am targeting the most parent class container making display flags with the flex direction of column as i have did in the services section giving it a gap of 3 rm and the margin top of let's say 6 rem so if i save this here you can see i have all the three spans in a horizontal so i am making the heading also display flags with the flex direction of column the font weight of bold and the justify content as flag start like this so have a look here i have this beautiful menu heading but still but still it is missing something as in the developed version you can see that the text is larger and the hour menu is in the red color i am going to target the first child of our heading as nth child 1 and giving it a color of our variable which is the theme red like this with the font size of one rem and a margin bottom of two rem then similarly i will target the second and third child so the second one and then the third one for them i am making a font size of two rem let's save this and here i have the exact heading that we want it's time to make the menu actually by giving it some data for doing this i am just making it small and here i am saying pizzazz and and here i am going to do some pure javascript work like i am receiving the pizzas as a parameter so here i will say pizzazz dot map and then for each pizza with its id return some jsx so yeah like this i am returning some jsx and the gsx there will be a css.pizza class name and it started me giving an error because here i should also provide it a key and for now i am giving it a value of id means the index i know this is not a proper way to set up a key but for now let's give it after this i am going to make an image wrapper for the pizza so css dot image wrapper and then import the image component from the next image the src means the source is going to be the src and this is a very typical thing to write okay let's give the alt attribute first to remove this warning like this now now you will be thinking how i have given the src equal to src when we are fetching images from our database then we cannot simply write the image name or the spizza dot image inside the src it will generate an error let me do this by writing pizza dot image and if i save this and have a look here you can see i have an error image is missing required src property however i have given it a source of pizza dot image still it is saying image is missing required src property why this is doing so so to make it work i have to declare a function loader so this function just work as a parameter for hours image component and then i am giving it src and then here i am also giving it as src so what is the src before returning the gsx i am going to make a constant with this name and writing url for as i have made it inside my client library or client.js giving the pizza image as the prop for this and at the end it will generate the url from the sanity cdn for us now if i save this and have a look okay still there is an error image with this cannot be load it must have the width and height properties or layout fill okay so to fix this here first of all i should format it to have a proper alignment now i am giving it the object fit cover like this and a layout fill so now the error will be gone and okay the image is not loaded if i refresh this here you can see i have the image of a pizza not in a correct direction in a correct position even not in a correct size so first let's style this pizza inside the module css here i am targeting simply the image wrapper okay let's double check the name if i have same name okay there should be a bigger eye like this and then i am giving at a hit height of 16 rem width of 22 rdm position relative the overflow will be the hidden means if the image is larger than its width with the border radius of 2 rem now if i save this here you can see i have the beautiful images of 6 pizzas let's give them some more content so to give them more content after this image wrapper div i am making a span and inside the span i will say pizza dot name and then basically these values are the name of our field from the schema of our pizza after this i am making an other span and this pan will simply say the price so pizza dot price like this now let's save it and we have all the data required to make a menu the only thing remaining is the styling for this menu but there is a problem with fetching the data that i am fetching all of prices for a single menu pizza means it is giving the price for the small size the medium size and the large size but i want that it should only give the price of regular size so what i will do i will say pizza price array and the index one so now if i save this i have only one price of a regular size so here i am targeting the menu giving it display flex with the flex wrap of okay so flex wrap like this value of simple rep the row gap between the pizzas will be 2 rem the align item center justify content should not be center it will be space around so like this let's save okay still nothing too much to show and let's see why this is not applied this is not applied because because here i should have to give a div with the class name of menu like this and all of our pizza images and data will lie inside this menu div so take it towards the end like this let's format the code and yeah now it's proper save and the images and their data are in a horizontal direction for more i am targeting each pizza individually so dot pizza and making display flags line items flag start let's say with the justify content center flex direction of column because the price name and the image will be in a vertical direction with the gap of 0.5 rdm which will be enough the font size of 1.5 rm or relatively larger phone with the font weight of bolt yeah but if we have a look at a developed version so this dollar sign is again in a red again use the same technique as we are using from the start that make a separate span and then move this dollar sign here and make a separate styling for this by writing color as our variable like this so everything is correct now we also want to scale up these images inside their divs as we have inside the developed version you can see these images are scaling up on hovering but the actual div size is not increasing and they are producing a very beautiful effect so for this effect what i am going to do below this image wrapper i will say image wrapper is containing a span which is containing an image on hover it make the transform with the scale value of 1.1 so how i have targeted it and how i know this structure basically i have studied and observed how the next image works so then i found this the structure inside a next image component so i manually target it and made it to hover so now if i hover on this this is not working let's see why okay the i should be capital again let's try so it is not working let's see why so here i should not write image container it is the image wrapper so now let's save this and here you can see how they are scaling up inside their divs and producing the same effect for more i can do that on pizza on hovering it make the cursor as pointers so actually make them as look like a link now our menu is ready to use it's time to make a separate pizza page for each of our menu element so that our customer can actually buy them from our full stack application let's do this now we want to make the individual pizza page for each item in our menu so for doing this i am going to the menu.jsx and on the top i am importing link from next.js library like this now we have to use this link to navigate between different pages i am making a link around the image wrapper so link with the hrf means the destination i will declare the destination inside the curly braces and first of all let's make this clear by moving the closing tags just below the image wrapper okay i have to give some value inside the href so inside the back ticks i will say go to the pizza url and then call the slug so i will say pizza dot slug dot current it will give our current slug value okay now i can format my code and if i save this and have a look so as soon as i click on any item then it will give me a 404 page means the current page not found this is because we have not made any pizza page till yet but if we look at the url how clean is our path it is going to the pizza directory and then it is going to the mexico pizza the slug name okay now let's make each pizza page individually for this i am closing all the directories and inside the pages i am making a new folder with the name pizza now inside the pizza i am making a file by square brackets and inside scale brackets i am writing slug with dot js i know this is a little bit of crazy scientex to write a file name like this but have a look in the browser first we have to go inside the pizza therefore i have made a pizza folder and then it is going to a dynamic slug so therefore to make anything dynamic in the next gs we have to write it inside the scale brackets as and as it is dependent on our current slug value therefore i have written the slug inside square brackets now let's actually start building this here right edf means the export default function and for the function i am giving it a name pizza it will receive a prop pizza okay so from where we will get this parameter of pisa i will explain each thing but first of all let's make something important for now i mean that thing is also important that how we can extract the prop but for now let's make the structure of our page first of all i will import the layout like this okay again my auto importing is not working so what i will do i will import it manually i will say import yeah like this now if i save this and have a look now i have a pizza page which have a header and a footer and for now i am simply writing it as pizza page inside it because i cannot render anything because i have no pizza data for now so how can i will extract this data for each pizza individually in such dynamic situation we have to do first of all make export async function with the name get static paths remember this thing is unique for the dynamic paths as we have inside the scale brackets and then inside the get static path i will make accounts with the name paths and i am going to extract all the paths from my sanity studio so fetch i can directly write the query inside the fetch statement or i can make a constant with the name period as i have made inside the menu.jsx sorry inside index.js but for now i'm just simply writing the query i will say extract all the type of pizzas like this and this and also where defined slug dot current i will explain this query but first let's write this with the slug dot current okay so basically what this query is saying to us first of all it is saying extract all the documents where the type of document is pizza this means it will return us all the pizzas in our sanity database i should remove this space from here then it's saying the pizzazz for which the slug property is defined means now it is filtering some pizzas from all the pizza it is saying the pizzazz 4 with the slug property is defined extract all of them the empty care brackets are saying it's just like slicing as we do in python or javascript by array index so similarly we can do in this group language here uh the empty scale brackets means extract all that documents we are returning them on the basis of their slugs so i hope now you have understand how this query is working after this there should be a return statement and return it will return some paths so paths dot map and then inside each path will be a slug so i am returning some params inside the prompt there will be the slug only so this is the official document of next yes where they are explaining us the purpose of get static paths it is saying if a page has dynamic routes and use these get static props it needs to define a list of paths to be statically generated when you export a function get static path from a page that uses dynamic graphs next yes will statically pre-render all paths specified by this function this means by making the get static parts enable our website will become a lot faster as each page will be pre-rendered in the background here is the scientist by which we are exporting the params from get static paths so okay i also should make fallback as a blocking like this so now our get static path function is completed and the only purpose of this function is to give us all the possible parts that can be generated on clicking the menu items before actually clicking on them and then i will receive all of these parts inside the get static prop so export async function get static props like this and it will contain a parameter context inside this first of all i will say make a slug with a empty value from the context dot params so what it will do from the parameters of our url it will extract thus log value and if slug is not defined then as a precautionary measure it will give it an empty string value and then i am saying cons pizza is equal to a weight client dot fetch okay i have to import client so here it is imported now okay then as i have to fetch according to some query i will say extract all the documents where the type is equal to the pizza and the slug dot current is equal to the over slug that we have made in our path and then extract only the first type of that document okay so actually what this query is actually saying it is extract all the document where the type is pizza and where the slug of pizza is equal to our current slug that is received from our url so we will fetch the data of a specific pizza from our sanity studio and then return some props as we do in get server side props and here i will just simply return the pizza now if i format the code and i am going to my pizza page actually and instead of just writing this if before returning i console log the pizza so console log pizza and i should also remove the console log from here from the menu.jsx now i'm going to see my page guys in the terminal i am receiving nothing and let's see why it is giving me null so after observing all of my code here i found a very small error that i have made a p in capital letter so as soon as make it a small p and then i refresh my page or maybe b without refresh it will work but now i open my terminal here you can see i am receiving an object which is containing all the information regarding a pizza so this means our dynamic page is working fine now it's time to actually build this page inside the layout so i am removing this console log of pizza data and here i am making a css dot container and inside this container again i am going to make an image wrapper and inside this wrapper i am making an image component of the next year so i'm putting it from next and i have to give it an src and again i am going to src as src because we are fetching some data dynamically from the database okay so it will be like this one like this so i have to make a loader function therefore i am making loader is then a callback function of src and here i am declaring my src as const src is equal to url4 pizza dot image and then generate the url and now i have to import the url from client library and then give it an alt attribute of nothing with the layout of fill like this and unoptimized i am giving it a parameter of unoptimized because in this image i am handling it too much manually with the object fit cover let's save this okay this is giving me an error of css so i i have to make a css module for this one here i am saying pizza dot module dot css now i will import it inside my slug.js so so again it is giving me an error that module not found because this is i think so my directory and yeah so now the error has been gone and this is my image that i have extracted from the sanity it's time to style it so we can actually see our page inside my module i am inside my module i am saying container have display flex padding of 2 rm gap of 5 rem with the margin top of 3 rm and after this i am styling my image wrapper as position relative width of 40 percent of our total page with the height of 25 rem and the overflow hidden then the border radius of 2 rm let's save this and here we have our pizza image how beautiful it is looking for here i am going to build the right side of my pizza page so i am saying right side which will contain all the information mean prices size and all the other things so this css size inside the size i am making a span which is containing text like size and then i am making another div with the name size variance like this here i am going to make three more div so just copy and paste first div will have small small size the next has medium and the third one has large after this i will make a quantity counter so quantity counter like this and this will have name as css quantity like this let's save this and okay so i'm seeing all this data here i should make it as display flex so they will be in a horizontal direction not in vertical but why it is doing so let's see why because all of this is outside of parent container like this inside the parent container and this right side is going to be here let's format the code again see and yeah now they are in a correct direction let's style them but first i am going to make our effect on the image so here on the image wrapper image wrapper is containing a span which is containing an image on over that image transform it by filling it around 1.1 percent and then i will go to the right side making this flux of one so it will take equal weight with the display flux and the flex direction of column so that every stuff will be in vertical direction with the font size of two point two rdm and the font weight of bold justify content space between again this is not working because we have made no right side div so div dot css dot right and i am making this just below all the things like this let's see yeah now it's working before the sizes i also want to display the name so here i will say pizza dot name like this and also the description so instead of name now i will say it as details like this let's save and yeah this is the name with the details and the other thing is going to be the price so in a separate span i am making a dollar sign and then pizza dot price as price is an added so i will expecting the price of regular size or the medium size let's save it and now i have the price also let's style all of them one by one after the right i am saying right is containing an nth child with the second position and font size should be 1.2 rem with the font weight of let's say normal and the color will be our variable which i have made in a global with the gray then i am targeting the size div making display flags with the gap of 3 rdm and the font weight of 600 which is a more bold than normal with the font size of 1.6 rem let's save this and yeah this is perfectly aligned for the size variants here i will say dot size variance is containing some divs for all of them make display flags line item center justify content center and padding of 0.3 rem and 1.5 rm for each of the div with the border of 2 pixels solid with our theme color means the theme red let's save this okay this is not applied because i think size variance is not declared here so yeah this was large so i'm just copying pasting this now save and here i have all of these let's give them a border radius here i will say the border radius of each will be 2 rem but i also want to make them in a horizontal direction so i am targeting size variance directly making display flex with the gap of 0.6 rdm the font weight of normal the color will be our theme red like this and with the font size of 0.8 rem let's save this and yeah how cool our sizes are now looking on however i want to change their text color and diff color so okay i will say size variance containing some divs and on however each of the div make the background color as our theme red like this and the color of text should be white so if i save this and i hover then you can see okay the cursor should also be like the pointer so cursor pointer and now i am targeting the quantity i think so yeah there is a quantity so for the quantity before styling it let's complete this here so i am making a div here with the class name of counter inside this i am making an image with the source of left arrow i will import it from the assets folder so just copy this and here i am saying import left arrow from go to the ss1 and arrow left dot png similarly i am also importing the right arrow like this now let's use them okay here after the left arrow i am giving it a height of 20 pixels and also the width of 20 pixels with the alt attribute of nothing and the object fit of contain by the way you can consider all of these objects with cover contain fill by actually going to the documentation of next yes image i am not going into details of such small things because then our huge concepts like the global management and the sanity management will be missed therefore i am just showing them by writing and then let's close this image so after this i am making a span in which there will be quantity by default it will be one and just simply copy this image and paste it after this pan and here say the right arrow like this let's save it and have look here i have this beautiful counter let's style this i am saying that quantity is containing display flags font size of 1.6 rem with the font weight of 600 okay gap of three rdm and then i am targeting the counter making them display flex gap of one rem and then let's save this and here i have the beautiful counter it's time to make the final object which is the button to make it add to cart so this is my counter div and this is the quantitative so let's see where it is ending go to the matching pair here it is ending after this here i will make button so for the button simply make a div with the css dot btn and i am also giving it a string last name which is simply button by my dollar sign like this inside the back ticks and for this button i am just saying add to cart let's save this and have look here is that to cart button let's style it for the specific component so i'm so i am saying dot btn has the font weight of normal with the padding of 0.5 rem 1 rem and the font size of 1 rm let's save this and yeah so our static page is now completed for the pizza okay i should also change this dollar color as i am doing from the beginning of our tutorial by making the dollar sign inside a separate span like this and then giving it a style like this now save and yeah how beautiful our individual pizza page is looking now to add the functionality of changing price according to the selected size means small will have less price than medium and then lord so for making this i am going to my slug.js and here at the very top i am going to use the use state hook of the react so if i say you state snippet yeah like this and then size and set size and on the very first our selected size will be the one means the medium size as zero stands for the small size i also have to import the use state from the reacts so yeah like this i have imported this now how i am going to use this size okay so here i will render the css for these divs according to the selected size on small i am saying on click this div make a fallback function and this function set size as zero so the small size will be selected and similarly for the medium i am saying on click make a file back function and on this set the size as the one and similarly for the large i will set it as two like this now let's save and format the code here you can easily see on small the size is 0 then 1 and 2. also for the different styling according to the selected size i am going to change their class name so the class name as dependent on the size i am making a condition here i am saying if size is equal to the zero then return css dot selected which will which i will make and if it is not the case then return nothing so if i format it then you can observe it more clearly first of all on clicking the small set the size as zero and if our use state is having the value zero then return the css class selected so similarly i am just copying this class name from here and for the medium size just paste it like this but here the condition will be changed from 0 to 1 and for the larger and for the large size here also just paste this but make the condition as to now let's save this and inside the css i am going to make a class selected and inside the selected i am just copy and pasting the hover effect from here and pasting all the select styling here let's save this and now let's try to click on the small so if i click if i click on small medium okay it's not working let's see why okay so selected and okay the problem is very little that i have made a typo the selected spelling here like this now let's save this and here you see that i have small size and medium and then the large and it is actually selected means on which size we click it becomes selected size and if i refresh this page then you will see by default we will select it with the medium size so if i refresh this and here it is the medium size is selected because the default value of our size use state is zero it's time to render the price of our pizza according to the size so for the price here i am going to the price div where is the price div so here is the price div where i have made the dollar color as our theme red so here i am rendering the price so the price is now dependent on the size so the index of size will be the index our price as we have bought the values in linear fashion so now if i save this here you see if i click on small then the price is also 15 on medium it is 18 on large it is 20. so how cool this is it's time to make the functionality to actually render this counter dynamically if i click on this then the value should be move up and if i click on this then it should be moved down up to the one so okay here i am going to make an other use state snippet so use state snippet like this and the name of our use state will be the quantity and by default the quantity will be 1 okay and then i am going to the image here which is the left arrow image and i am saying on click just simply execute a function with the name handle quan means handle quantity so just copy this name and okay paste this function here i am making a comment with the handle quantity okay and const just paste the name with an arrowhead with an arrowhead function like this okay so i am also going to receive a parameter which is like this type so to so to pass this parameter i am going to pass it from this image in handle quan i am going to pass decrement because this is the left arrow so it will decrease over quantity and then similarly for the next image i am going to make it handle quantity but the parameter in this question will be increments so now i will handle my handle quantity function according to this type so make a condition type is equal equal to the increment let's say first handle the increment and if it is true then set quantity first of all take the previous value and then return the previous plus one means add one to the previous quantity and if it is not the case then check and other condition in this situation check if the quantity is equal equal to the one and if this situation then do nothing and if this is not true then set quantity as the take previous value and then previous minus one so if i save this and format the code here you can see i am saying if type is increment then increase the quantity and if this is not the case means the type is decrement then check if if the quantity is equal to the one and if the quantity is one then do not decrease the quantity more and just return nothing and if it is not the case then decrease the quantity to one so let's save this and okay there is an error too many re-renders so why this is happening because it is making an infinite loop to handle this here i have to make it as a callback function because whenever we have to give parameter on click event then the function should be inside a callback function and if there is no need of parameter then you can write it directly so simply just copy this and also make it the callback function now let's save so the error is gone now but it will not work for now because we have not made the quantity as dynamic instead of simply writing one here i should write the quantity so quantity okay like this now save and have a look if i click on this it is decreasing and then it is increasing and also notice that this is not decreasing more than one if i refresh the page the default quantity will be one yeah like this how cool it is so we have completed our product page successfully so guys i don't want to go crazy by putting all the content in one video so next part will be released in three to four days where we will see how to integrate card page online payment order tracking and many more till then if you like my work then do subscribe the channel and support me on patreon take care you

Channel: ZAINKEEPSCODE

Views: 45,458

Keywords: react website, react js, react website tutorial, react food website tutorial, react, react js food delivery website tutorial, complete react gym website project, react js tutorial, learn react js, nextjs react js website tutorial, how to build website using react, build and deploy nextjs website, best react tutorial on youtube, best react project tutorial for beginners, react ui, react site, zainkeepscode, reactjs, react website from scratch, react website design, food delivery

Id: 8U8DgrKH4QY

Length: 121min 55sec (7315 seconds)

Published: Tue Jul 19 2022