Build & Deploy Full Stack Next.js Home Service App using React.js, Hygraph , Tailwind css

hey there and welcome back to TU guruji channel in one of my last video we'll build this beautiful Home Service application and in this particular video we going to build the same application but for the web so if you see on the screen we have this beautiful landing page for the home service and repair application and this is a complete response View and this is a web application where you can search a different different type of services nearby you now here if you see on the top we have this beautiful header section then we have this Landing section where you have the different different categories and if you see how beautifully we animated that category with the help of telin CSS if you scroll down little bit you have option over here to see the latest and popular businesses you can even book the businesses directly from here or if you want to search any particular category businesses if I go to this cleaning and boom home you are on this particular screen now let me show you one more thing if I refresh it you will see this beautiful skeleton effect and I'm going to tell you how we beautifully Implement that skeleton effect now all of this data what you are seeing on the screen we are fing it from the high graph High graph is one of the best CMS in the market right now and it uses the graphql to Fat it data and to update the or insert the record inside the HRA database as HRA is completely free don't worry because I'm going to teach you everything from the basic even though you you don't know anything now if I open any category you will see the businesses belong to only that category and on the left hand side you will see how beautifully we added this category section where you can jump it directly and it immediately change the listing of the businesses now if you want to access any of this uh business or or you want to see the details you have to make sure that you need to log to our application because without authentication you cannot access the business detail if you want to see the business detail you must need to add or log to our application if you see we have this beautiful button to login or to sign up to application let's click on this one and with the help of disc scope authentication which is a very modern way to add authentication to your application that's what we are going to learn in this particular course as well now let's log in with the account and once you log to account you will get redirected to our home screen where now you can go to this any of this business to check the detail and not only that one you have now profile icon where you can have your own account with the my booking and even though you can log in from the application now open any businesses and boom how beautifully we design this business detail screen where you have the all the business information the email of the user the available time the contact person not only that but you can see the description and the Beautiful Gallery section where um the all the images belong to that particular business you will see it here on the right hand side you have option to book an appointment and then you will see the similar business comes under this particular category now if I click on book appointment boom how beautifully we navigated or added this sheet or drawer to our application now with the help of uh Shad C UI we implemented this particular UI for our application now select any date which you want to book appointment then you can select the T time slot now here is a magic you can select any date which you want to select then select the time slot and then just click a book and boom you got a beautiful tost message saying the service book successful now you can also check your booking if I go to this my booking and here you will see your booking appointment and inside the completed you will see the old booking as well so this my booking section will help us to see your latest booking now if I go back to any of the booking now and want to book an appointment to any particular date you can book it now for example if I select 27 and if you see over here I cannot book that slot or select that slot because this slot is already booked by someone okay so you cannot select that you have option to select other or you have select the different date okay now select the 27 and select some other slot now if I select 12 click book and boom your slot is booked now now let's go to this my booking and then you will see your slot with this date and uh service number and everything you will see the time you will you see the all the details about your booking so guys this complete application is a responsive you can not only uh depends on the layout it change the layout of your application now if I go to home and you will see the change over here see how beautifully depends on the screen size is change the layout of the application so guys I hope you like this particular application and it's uh very excited to build this application with the help of all the free content we use in this particular course to build this application obviously we are going to deploy this application on the worel so that you can share this particular application with your friends and family so guys without doing any further delay let's begin so in order to create our react application we are going to use nextjs so nextjs is one of the best react framework for the web application and if you don't know anything about the nextjs don't worry because in this particular course I'm going to tell you how to use this nextjs and to build the react application remember nextjs is a framework okay uh for the react application so in order to create a project you will go to this NEX js. this is official website and this is the command to create a react application okay uh you can see the documents and there are lot of things you can learn from here okay so first thing let's copy this command go back to a project where you want to create a project open a terminal at that particular folder and then increase let me increase this size and then uh just paste this command okay now at latest mean it will install the latest version of the nextjs which is currently going on 14 plus so click enter and then you need to uh add the project name so in this case I'm going to give Home Service web app so it will ask uh it will ask the question like do you want to use typescript say no yes L say no the telin CSS say say yes so obviously this uh nextjs is taking care of installing telin CSS so you don't need to install manually again then uh we like to use Source directory say no the app router obviously we want to use app router so say yes and the UT ize say no and if you see it installing some uh dependency like react react Dom next and some de dependency like Auto prefixer post CSS and T CSS and now if you see our project is ready now let's go back to our uh or open vs code and once you open the vs code just locate the uh folder which we want just we created right so let's go to this uh documents which where we created this folder so project nextjs and then home service web app and our project is open over here okay and on the left hand side you will see all the bunch of files and folders get created so let's walk one by one so first thing the app folder okay which contains or which is the basic folder where we are going to write all our files and code and everything okay so inside this folder you will see we have this global. CSS the layout. TSX okay uh which is the heart we can say for application where all the pages all the route is going to render inside from this children tag okay and if you see we have the HTML body tag inside that one we have meta data for Theo purpose also here we added the font as well then this is the default page called page. TSX okay so once you run this application uh we'll see uh this particular uh page get open on the uh default as a default page so this is the page uh then we have this node module so whatever the dependency we install right uh the package get exted inside this node module obviously we are not going to touch to this particular folder then we have this public folder where we are going to keep all our images font assets everything so that you can directly use inside your application without providing path once you define the uh any uh assets path okay means the direct path the next uh JS will automatically consider that you are accessing from this public folder then we have next do env. TS file then next. config MGS file which is help us to configure the next related uh configuration then we have package.json which contain the name of the application the version also it has a script to run the application and the dependency which is used or installed for this particular um application then if you see we have this list of De dependency as well then we have post css. config.js and the T.C config.js which contain the tailin CSS related information so this is all about our application now let's run the application so go here inside the terminal click new terminal it will open the terminal like this and just run just type npm run Dev so it will open the port uh 3,000 and if you see this is the URL on which our application is running so open this URL if you see the Lo uh URL name is local 3000 and this is the default page it opens now let me bring this side by side so you can understand much better as I say very beginning that this is the default page okay and if you see this is the page. TSX file file this is the default page which get render on the screen if you see we have this get started by editing then app. page. TSX and everything is written over here now let's clean this out and just add the DU tag and save it and if you see now screen is blank now if I type something on h2 tag sub subscribe to tube guruji okay guys if you did not subscribe to my Channel please do subscribe and if you see as soon as I save it it get render on the screen without refreshing this particular uh window okay so so beautiful right this is called U fast reload okay now or live reload now if you see on the background you getting this line right because of this uh CSS is applied uh to this particular page so inside the global. CSS which contains all the uh styling which is applied throughout the application so you can remove this two lineup code save it and boom now you have complete a clean page with a white background and this uh text return return on it okay so this is how you can create the next JS application and then you can run the application as well now next as we know that we are using telin CSS okay and along with that we are going to use one Library called Shad CN okay and if you don't know about this shat in UI it's is very much popular Library currently in the market and it's based on telin CSS again and very easy to install so I'm going to teach you about how we can use this and how to add it in our application everything so first thing go to this ui. shad cn.com and then uh go to this docs where we can have option called installation okay so as we are using this nextjs framework so click on nextjs and then we will follow step by-step guide so that we can install this shats here so first thing obviously we already created the project and we already installed the tailin CSS so we'll skip this step then uh we need to run this CLI uh command to install the uh Shad CN UI so copy this particular line of command as we are using npm then make sure to open the terminal and click new terminal okay and run this application sorry run this particular command now it will ask you some few questions so it's asking first which style would like to use so it has a two style default and New York okay let me show you the difference between them so let me go to inside CN and over here we have option called themes so inside theme if you see this is I think this is the default theme okay but if I click on customize okay this is the New York theme but if I click default you will see the change okay just I feel it's a uh size change okay so it's up to you which size do you want to use size do you want to use I will prefer the default one so I will select the default one then you have option to choose the beste color okay if you see this we have the slate gray Zin neutral Stone okay and these are the some of the uh color combination we have right I will select the zinc maybe yeah that's will be good so select Z now will you like to use CSS variable for colors okay so you have option yes or no so we will say yes then now it installing the all the dependency which is required for our application and if you see we are done now once we install this application let's see what are the files and folder get created so if you see here on the left hand side the new folder get created out inside a root directory called components this component is created when we install the SATs in UI so whenever we want to use any component like button or dialogue or table anything we have to install that component from the shad and that particular component get added inside this component folder in a minute I will tell you how it works then we have this Library folder inside that we have .ts file which again added by the uh shn UI and after that we have uh let me go to this app folder we have Global CSS if you see right the bunch of uh CSS variable get added over here okay and also in the tailin doc config.js file which is a TS file here as well if you see the bunch of uh uh uh configuration get added here okay so you can obviously customize you can change it no um restriction to this one okay so it's up to you how you want to use it so let's try to install one component from the uh shadan so here let me go to this uh call components and here I will search for for the button the simplest one so click button here if you see this is how button will look like once you install the component and in order to install this component you have to copy this command npm and then just paste it in a new terminal like this okay now once this is installed in in inside the component folder right it was before empty now once we install this button the UI folder get created and inside this UI folder we have new component called button. TSX and inside the button it has some default code added here okay now obviously we are not going to touch this one but if you want to customize it if you want to change the layout or something else you want to do you can do it because Shad giving you a complete uh control over your component okay now in order to use this component here you can say or I'm in page. TSX here I will just add button and if you see now this button get added from the component /i/ button and then save it now let's go back to our application and if you see the button is added okay but this button don't have any text let's add some text so inside the button I will add subscribe and then save it and if you see boom how beautifully the button get added without adding any styling or any T CSS classes because shat is already taking care of that one right and if you see you have button now obviously uh you can add your own class name for example if you want to change background to Red you can do that guys see okay so as I say full control on on the compony which you added but um with the help of the straty and you can add a lot of thing and you can uh minimize your coding as well that is very helpful when you are developing any big application okay so I hope you understand how we beautifully set up the sh as well so now we are going to add a header for our application so for the header there are couple of things we need to uh make sure we'll add it okay so for example let's make sure this is the uh top heading section on this one uh on the left hand side we going to add a logo okay so this will be a logo then we going to add some option here okay so option one then we have another option called option two and so on okay so I will just copy this one like this okay and on the right hand side we have button for login okay so here we can say get started or maybe we can say login or something like that okay and obviously we want to add a method once us are loging we want to remove this button and then we will go show the uh users icon okay but let's go back to our application first and then uh over here inside app folder we going to create a new folder and we can call it as a components so here is thing so if you want to give a name of the folder right you have to make sure that folder name uh should be start with underscore if you don't want to make uh don't want to make that particular folder as a route okay so for example in this case I will give the folder name which start with the underscore okay so we are telling NJ this is this particular folder is not a route okay if you create a new folder for example let's create a new folder and we can call it as a uh details okay let's say details okay and inside this detail let's say we added this page. jsx file Okay add the default template and then you can just rename this uh details like this okay and save it now what it will do this details uh folder consider as a route and if you go to this details folder like this see it navigate to Details page okay but if you try to go to this component folder okay or underscore component folder it will not work because we we are telling our nextjs application that this is not a route but if you provide the folder name like this then it will cenc aser route okay so make sure um you will not uh add the folder name for the for the folder which you don't want to act as a route now inside the component folder what are the components we are required for this particular home screen we'll keep in inside this folder so let's create new folder called Hider do jsx and now here we need to add a template okay so for that one in each video I explain uh that uh for the vs code when you are developing any web or or mobile application make sure to install this beautiful extension called es7 plus react Redux react n to snippet and the telin CSS uh intell sense okay these are very helpful for example once you install this one right and you want to add a template you just write RFC which belong to react function export component and boom you will get a default template like that okay now save this template if you let me go to this local 3,000 if you see right now just but is showing because inside the page.js we just have the button I will remove this button okay and now if you want to use this header okay you want to show this header on the UI you need to import this header component inside the header okay so we'll just add header and if you see it's importing from theore component / header okay make sure that you imported this component let's save it and boom you got the header okay now uh I'm going to use this uh logo placeholder called logo pism okay which is which is the uh free and open source for the uh logo placeholder okay so what I'm going to do I will just copy one of the logo for example let's copy this logo okay once you click on this logo it will just copy the SVG file now go to this public folder add the logo. SVG and then paste this uh copied code okay now our logo is ready now inside the header let's add a image okay so this image tag we are adding from this next SL image okay next is providing their own uh image component now for this one here we need to add source and then you can directly access uh the assets or this particular logo because we kept this in a public folder at the very beginning I explain about this public folder okay then let's go the alt tag I you as a logo then we need to give uh width for this logo okay so for this WID you can give something like uh let's say width 100 and then let's give height maybe 100 okay I will give change this weight maybe 180 and save it let's go back to our application and this is how our logo will look like see then uh I'm going to add one de inside D I'm going to add some menu icon so I will add h2 tag and here I will say home okay like see the home is texting uh printing on the screen same thing I'm going to copy couple of times here I will say Services about us okay so three menu I added now let's bring everything in one line so I will wrap this image and this menu D in One D only okay and then for this D I will make a class name Flex okay then let's make item to be in the center and for this do let's make this as on line so make it flex and once you make it Flex it will come in a line okay let's make item to be in the center so vertically it will be in the center then let's do Gap uh I will give gap of six okay and for this one also I'm going to give gap of eight something like this okay perfect now obviously tching to our borders so for this parent de let's add a class name let's add a pading of five okay and I will add a shadow small and uh uh that's look good to me okay just make sure I will add a flex okay and save it now if I increase the size this is how it looks on the bigger screen now you can give I want to give some uh padding on the X and uh Y axis that you can give it okay so what I can do instead of giving padding over here let's go to this l. JS okay where we have this ch done I will wrap this in One D okay something like this and save it now one more important thing as we imported this header inside the page.js okay but if you go to this another page right another screen this header will be not there because you just imported inside this header okay so what you can do you can remove this header from here okay and you can insert it inside the layout okay so above the children you can just add it here so just add header and save it see nothing get changed but now when you new page come the header will be constant throughout the application now one more thing over here uh let's add some padding so for this one I'm not going to add a class name I will add margin x26 but when the screen size is medium or larger I'm going to add padding to the xaxis to the 16 so on the left hand and right hand side if I increase the size this is how it looks perfect now let's go back to our header again let's and for this one I'm going to add class name let's say onover We'll scale it to 105 okay also on H I'm going to change the text color to something like purple because we want to change this to purple color okay so you have option here see okay and if I hover on this one you will see but what we can do instead of every time selecting this purple color and code you can update only once at your uh TN CSS file so let's go to this T.C config.js file and if you search here okay here we have this uh option called primary okay here you can change your uh update with your own color so what I'm going to do um here I will change it to some color code for example hash I will say 7 f57 F1 okay and save it now you can directly use as a primary color so here instead of this color I can say primary and save it boom and if you see it applied to this particular text obviously let's add some more um styling so cursor to be pointer and if I hover on this one see this is how it looks same thing I'm going to copy for all of this remaining uh menu okay like this and if I hold on this one see how beautifully it's showing this uh animation effect as well okay perfect now we need to show a get uh the button over here but one more important thing I want to do whenever the screen size is smaller right now the screen size is smaller I don't want to show this menu so what you can do here you can initially show as a hidden but when the screen size is medium or larger you can just add as a flex so what we are telling to the browser that when the med screen size is medium or larger then display otherwise hidden if I save it if you see it's hidden but if I increase the screen size it will display it on the screen next let's show the uh button on the right hand side so here I'm going to add one de inside the de I'm going to add button and if you see the button is importing from this UI button which we imported from the shat here I will say get started and save it and now if you see that we change the primary color in the tailin CSS so automatically it will apply to this button as well now for this de for the parent de okay we'll just make Flex justify between so it will go at the right hand side okay so not here we need Tobe I need to mark it here and save it okay wait so this button need to be at this side and this justify between what's correct over here perfect on see it's on the right hand side if I increase size this is how it looks but when sorry when on the smaller screen this is how it looks okay perfect so this is how beautifully design our header simple clean and easy to implement so you if you want to try more complex you can try okay and let me know in the comment section if you have any issue or any question now we are going to build the hero or search section so we'll keep this simple and this is how we are going to uh design it okay so on this top section we going to add this header okay along with this subtitle then we have this beautiful search bar and then we're going to show the list of category okay but before that one we'll uh implement this particular section and for that one we will need to to learn how we can set up the high graph so let's go back to our application and inside this application okay let me decrease the size and inside this component folder I'm going to create one folder called search section or we can call it hero. jsx okay add the default template and then inside the page. jsx we'll add it as a hero over here okay and save it now we'll see the text let's refresh once and if you see the hero text is showing on the screen now let's go to this hero. jsx and inside here uh first thing we're going to add is to tag and here we want to write find Home Service SL repair find home service repair near you or we can say find Home Service SL that's fine and then I'm going to add another2 tag for explore Bas home service and repair near you okay now let's give some styling to this one so let's add class name here I'm going to add first thing font to be bold and tex size I'm going to add 46 pixel here if you see I'm giving the size uh inside this square bracket it means that I'm going to add a custom size okay you can provide your own custom size and whenever you want to provide own custom size to the tail CSS classes you can Define inside this um square bracket now let me bring this down let's save this one this is how it looks for now now make text to be in the center okay if I increase the size this is how it looks it's a little weird uh but that's fine for now okay and for this D I'm going to add class name make it Flex item to be in the center make it Flex column and then make justify Center so over here I'm going to add padding top to 14 and padding bottom at seven if I increase the size this is how it look obviously what we can do we can break this text into two text so I'm going to add a br tag over here and let me increase size this is how it looks then for this service and repair I'm going to change the color okay so I will wrap this in a span tag because I want to change only the color of this uh service and repair text here I'm going to add class name add a text primary save it let's give some space like this and perfect and if I increase the size this is how beautiful it looks next we need to change the color of this one so add a class name uh I will text of excel then text gray color and here I'm going to add 400 perfect okay and our this particular head section is ready now we need to add the input okay for search bar so for search bar uh you can use satch and input component okay and this is how it looks that's what we needed so copy this first thing okay I copy this um I see an input component I'm going to add one D and let's add sorry first import this component that that is important so let's import this input component first and once it import you can just add it by using input component like this here you can add a placeholder you can say it as a search and this is how it looks okay now you can add a class name to this one so I'm going to add class name I will make corner to be rounded so I will make rounded to be full and then I will uh when the screen size medium I'm going to add width of 350 pixel but over here for this de I'm going to give um let let me see how it looks first because we want to uh we want the full width actually actually okay perfect if you see right if I increase size that's look good to me for this one I'm going to give margin top to four and uh let's save this one now I want to I want to show the button here as well okay so for that one let's add a icon and then we can wrap that one so I'm just adding this button tag okay and ins said that just we will uh add the search icon okay so for the search icon if I type the search and if you see this is this particular component is importing from the Lucid react okay so Lucid react is very rich um icon library and if you go to this Lucid do D you will find this Library okay you can see all of this icon and if i h on any of this you will see the name of that particular icon okay so when we install the Shad CN UI at that time the Lucid also get install okay and if you want to verify that one you can go to this packet. Json inside this uh dependency you will see this Lucid react it means that lucid library is already installed and you are ready to use that one okay so that's what we did and if you see this is the icon will look like now for this class name I'm going to add rounded to be full okay and uh also I'm going to give a height of 50 pixel and I'm going to change this size of Icon so give this class name and here you can change the size by using height and width okay uh let's do four and four obviously you need to change this height as well okay and then let's bring these both the in one line so for this D I make it Flex I do gap of six maybe five and make item to be in the center okay if I increase the size this is how beautifully it looks on the screen okay perfect also if you think for this flakes you can give a gap let's add a gap of three okay perfect now until this point if you any equation let me know in the comment section if you see uh we implement this complete path okay now it's time to add this one but before that we need to know about the high graph and how to use it if you develop the mobile application for the same then you will have better understanding that how can you use the high graph to develop that one okay so for our database we are going to use high graph High graph is a CMS and which is very powerful and it uses the graphql as a uh API so if you never use the high graph don't worry because in this particular course we'll go one by one so in order to uh build an back and for the any application okay we use MySQL we have a lot of different CMS and high graph is one of them as we are using High graph because High graph first thing is free it's very easy to use and very fast if you go to this pricing you will see see it has a free forever Tire okay and you can use it uh if you have small business as well okay and that's that's where HRA is perfect fit for you um so if you don't have an account on the high graph so just create an account and this is the URL called hyra.com okay and it use the graphql okay so it's very easy I'm going to teach you everything okay so let's set up the high graph first so first thing let's go to this get started and obviously I already have a a project created okay and uh if you want to search let's go to the tub guru.com and over here there are some course which uses the hgraph for example this car rental application or there are many more which uses the uses the high graph okay even though if you want to learn about this react native application okay for e-learning application that also use the high graph and you will see how convenient it is okay so you can just on cgi.com and learn more about it now let's go here and click on ADD project so here we can give the project name so we can call it as a home service app then you can give description if you want and select the region which is near by you okay so in this case I'm selecting Virginia because I'm in us but if you I'm from India select this India Mumbai or anything which is close up for you okay so it's obviously reflect on your how how fast data is fetching everything now let's add a project and uh wait for a few seconds now if you see our project get created okay now if you see here it has a API call of mul milia everything okay which is quite good and it also have 5K entries okay which is more than sufficient now on the left hand side uh you will see some option called schema content where you can add your contents the assets which store the file images video whatever the API playground okay where you can play with the actual graphql API okay also it has option to project setting a lot of things don't worry we will go one by one first let's go to the schema and here you can create a new schema okay don't touch to this existing one now add a model and here you can say the uh give the name the name of for this particular model so in this case obviously we want to add a slider so we say sliders okay and everything just add slider and everything is good add a model and and uh once it added just wait for a few seconds and if you see the model is get added now what are the uh inputs Fields you want you can just add it here okay so for example I will add the single line text for and here I will give the name the name of the slider okay you can use it as a title field you can have validation for example make the field required or something like this and click add after this we want the image okay whatever the image we want to add so for that one we have the option which is called asset picker okay and here we can say image and obviously I will make it feel as a required field and then click add okay so just wait for to add it here if you see we added this two Fields okay perfect now let's go to this uh because we we are ready with this slider okay and as soon as you add it it will get saved automatically okay now let's go to this content and here you will see the one the the the new created model okay which is slider now you have option over here called add entry okay once you click on it you can have you can you can now add the entry for example I will say slider one add the image okay so you can add the image you can upload the image or even though you can upload image from the web sech let's search from something like offer slider okay or you can upload your own okay so just pick from this and upload it your own so I don't like this let's I from my device and uh let's add this for now okay and upload and if you see this image get uploaded now click on Save and publish make sure to publish this image as well so select this and click save and publish and immediately this image get added here now you can add another entry we can call slider to add the image or if you want another image select the one which you want for example let's select this image click upload and if you see save publish done okay and now we have the two record for the slider and your slider is ready now okay now the question is how to get this in the API form okay so here you have option called API playground okay and uh let's clean everything for now okay and at the bottom if you see you can add the query or you if you can add mutation the mutation is for the crude operation for example if you want to create you want to um uh update the record you want to delete the record that time you can use the mutation but just if you want to face the record you can use this query okay now in that case uh we want to face the sliders so here you have option called sliders okay and if you see as soon as I expand this one this query is get created okay you can rename this for example gate slider okay now here whatever the field you want you can select that one so in this case I want ID then I want the name okay and if you see I added this ID and name if I run this one see I got this slider list of slider and it has a ID and obviously this ID is atog generated okay and the name which is slider one and slider two now we want image so if you see here we have option called image inside that we just want the image with the URL okay you can get the image with this different different sizes but just we want URL and if I run this one now see inside the URL we just got this URL of the image okay and obviously if I copy this URL paste it here for example and if you see you got this image okay now this query we going to use inside our application to F the slider okay so obviously uh you want more Fields you can just select and automatically get added here and then you can just test it out okay and this is how useful this API playground is okay now one more important thing go to this project setting okay and inside this project setting we have option called API access okay inside the API access you will find this URL okay this URL we going to use to face the data this is a master URL okay you can call as a kind of rest API URL and and this is the content API you have for the upload on the management API or high performance content API but we going to use this one okay also right now uh you can add the permission over here okay for by default it has a read option but if I go to this add permission you can add the access for example let's add the read access for all stages and click add okay now your API have a read access and now you can able to read the data from this particular query okay once you f it obviously in the next section we will learn how to F that how to use this query to F it in our application with the help of graph quer okay so this is nothing but a nothing but a graph query okay so see you in the next section here I already added some of the schema like booking business list category and slider everything uh the screenshot of this one I added in inside the uh link and it is the link is in the description so you can just copy the similar uh or add similar schema into your application as well okay so inside the category um if you go here okay and I added this name the icon it means I added the asset picker and the background color Okay so this background color it means whatever the background color we are giving okay this background color will affect over here it's not mandatory okay just to give better look I added this one also I added this icon as well so icon you can add it from the uh uh flat icons.com you can get it from there now first thing let's go to this API playground and over here we going to uh create our query okay so for this one we can give the query name as a category so add a category okay I will clean this one and and over here let let me remove this one and as we want the categories okay obviously we want to fetch all the categories so you have option called categories if you see we have another option called category it will only fetch only one category information by providing ID inside the we Claus but we want all so we'll select categories now here we need a couple of things that you can choose so first thing for example we want the background color hex I will add that one okay obviously we don't need a slider so let's remove the slider okay so I will close this slider then after that we want we will fetch ID the name of the category and what else okay we want icon as well okay so from the Icon I will just fit URL I don't want any other information and if I run this one okay if you see we have button here if I run this one we got the result it means this query is perfectly fine okay before that okay let me tell you one more thing inside the project setting okay some if sometime the you create applic or create um uh creating the record or getting the record not working so go to the project setting here we have the option called API access this content API you have to use first thing and then you have to make sure that for this public content API you are adding the permission like create create update okay all of these permission so let's go go back to API playground and our query is ready now in order to uh use the high graph inside your application you have to use um one Library called graphql request okay so this graphql request is used to fet the data from the graph graphql query okay it's very easy first thing let's install this graphql query make sure you are installing graphql request and the GL ql as well so over here let me close this one inside the terminal I will paste it here and then once it install okay let me close all of this tab so inside the app folder we going to create a new folder and we can call it as a underscore Services inside the services folder I'm going to create a new file called Global api.js okay and first thing let's define the master _ URL is equal to and then we have to add from the API playground let's go to Project setting API access and if you see these endpoint okay the master URL endpoint we need to add so this content API thing we need to add so copy this one and we'll paste it here then obviously this key is important so I will keep this key inside the EnV file okay so inside the en. local file we create a new file okay just for the security purpose so here we'll say next underscore now I'm giving the nextore public because we are using this key on the client side okay you have to make sure that your key will start with the nextore Publix underscore and the name of the key which is Master URL okay uh or key something like that and paste this key okay copy this key name save it let's close this one and just replace it here like process do en do the name of the key okay after that if I go to this request okay this is a sample request that how you can use to face the data okay so don't worry we will do that one but now from this API playground let's copy this query to face the category so I copied it inside here I'm going to create a new method called constant we say get category is equal to this will be a sync so I will add a syn something like this okay then we'll write constant query is equal to you have to write gql okay if you see this gql importing from the graphql request and then you have to give this tag and then you have to paste your query as it is okay next you need to add a constant result is equal to AIT then you have to add a request if you see this request is again importing from the graphql request and then you have to provide the first thing you have to provide the master URL and then you have to provide the query so this query okay and then we have to return the result so obviously make sure to return the result and then you have to uh export this particular method so export default and then you have to give the name of this method called get category so that you can use throughout the application now let me close this one let and now our Global API this particular get category and point is ready so now what we can do we create new component for the category so go to this component folder let's add a category list. jsx add the default template and then inside the page.js file after the hero section we will add this category section so I add category list like this and save it okay and if you see the category list text is showing on the screen now inside the home folder only we going to f the list of categories so I will write constant we'll say get category list okay and here obviously you can access this particular AO using Global API because we kept in a global API file do get category and then as this is a promise then we use then then response now what I can do I will just respon console the response okay so that you can see uh whether the data is coming on the not okay and every time when you develop the application make sure you will go step by step okay first thing you have to check the whether the response is getting or not in the console obviously in order to call this method we will go we going to use use effect hook okay so whenever um this method sorry this component get execute we'll call this method so that's the reason I use I pass this empty array so that use effect only execute once okay let save this one as we use this use effect that's the reason we got this error because any uh hooks only Ed uh inside sorry in on client side so you have to mark this particular screen or particular page as a client uh so by using typing use client okay and now if you see the error is gone now if I go to this inspect panel let's go to the console and if you see you got the result called object inside inside that we have the list of categories perfect okay but if you think if you okay if you see here we inside the result we have the categories as a object name and inside that we have the all our result okay so what you can do is copy this text and then you you can access the list of category by providing list of categories and if I save this one okay let me refresh the screen now you will get only this list perfect now you will see here uh you getting this result two times okay so what happen in next year sometimes this use effect execute two times even though we Define here as a uh empty array okay so to fix this issue uh let's go to this next. config MJS file okay where uh we use this for the configuration purpose here you have to write a react restrict mode and make it true and let's save this one let's refresh the screen okay so once you update any configuration file it will take some time to load the application okay so if I refresh it okay I think we have to make it false let's try this one okay now if I refresh the screen okay let's refresh it again and if you see now it only execute once okay so we have to make sure inside the next. cig. MGs file you will update the or add this react mode uh F or value okay okay now once we have the result here we'll store in one state so Define one state called constant category list comma set category list is equal to use State and I will provide the empty array okay so what it will do it will hold the value uh for the list of category and the set category list will help us to set the value okay so instead of console log here I'm going to write set category list like this and then save it now once we have the list of category let's pass this category list to this component we'll pass category sorry category list is equal to category list and inside this category list component let's accept it here as a props like this now we have to display the list of categories over here okay so in order to display it uh let's uh let's iterate this category list first so here I'm going to add category list dot map and inside that I'm going to add category comma index like this okay and inside that I'm going to add one du and save it now let's uh display the image first so I'm going to add image if you see I'm going to add this image from the next SL image then we have we have to provide the source category Dot and now we need to display get the image URL okay so if I go to this API playground okay here you will find so inside the icon field we have the URL and inside that we have this actual URL okay so we'll access it using category do image. URL here I'm going to give alt as a icon width um we'll give 35 and height I'm going to give 35 if I go back here and okay we got one error that cannot property of undefined so let's see the issue oh it need to be actually it need to be icon okay and okay now we got another eror that it's saying that this particular host name called media. graph asset.com is not configured under the images inside this next. config.js file okay so what you have to do whenever you are using any third party um URL okay that domain name need to be add inside your next. configuration file so that we are telling next uh JS application that this particular URL is WID listed okay and it's not an issue regarding the security so let's go to this N.C config.js inside here you have to add images tag inside that you have to provide the domains and then you can provide the list of domains so let's copy this one paste it here and then save it and now obviously let's refresh the screen let me close this one now and if you see now the error is gone okay let me refresh it once and now on the left hand side you will see this bunch of Icon perfect that means it's working fine now obviously we need to give some style for first thing uh for this particular uh de I'm going to add a class name and here we're going to add my margin on the xaxis to 4 when the screen size is medium going to add margin x222 and when the screen size is large we're going to add margin X2 52 okay then we'll make it as a grid and when the screen size is smaller we can make the GD column uh three maybe okay when the screen size is medium we'll make GD column 4 and when the screen size is larger we'll make grid column 6 okay and make sure to give gap between the all icons I will get four and if you see this is how it looks after this ey images right let's give the text as well the name of the icon so this will be a category do name and this is how it looks now let's bring everything in Center so class name here I will give like this and here you can just make make it Flex Flex column item to be in the center and justify Center see now it comes everything in in Center let's go Gap of two between this image and the text and save it now um let's add a background here okay so obviously if you see we are inside the category right we already have this background color because we already added that one let's use that one okay or maybe time being you can use your own okay it's up to you but in order to use Dynamic background you have to first wrap this class name inside the curly braces and then you have to add this tag okay let me remove this single code and over here I'm going to add background then I'm going to add color and obviously we going to give the custom color so that's the reason I'm using this square bracket and inside there we are we need to add a dynamic one so dollar and curly braces and here you can give category do BG color do Hex okay this is our color that which we want to give now the think is right many times the color will not display immediately because you are adding the Dynamic Color so if didn't work right you have to refresh clear a cache or you can just use your own color combination for example if you want to use a purple and some color Comin like 200 see like this okay let's use 100 perfect like this okay and that also going to work it's up to you now let's add a padding of five okay and then I will make Corner around it to large okay if I increase the screen size this is how beautifully it looks perfect right then uh let's add a on how effect let's add a cursor to be pointer then onover we'll just scale oh we'll just scale it to 110 okay let's add a transition all effect for the smooth animation and then is in out now if you increase the size if I hover on it this one see how beautifully it's working for the text so this is the text okay I'm going to add a class name we say text uh medium size okay let's keep the text as it is for now I just want to change the text to be primary color let's see how it looks that's look much better now perfect and then uh I think that's pretty much for this category list okay now one more thing I forgot to uh tell you that we can change the font of this complete application okay so in order order to change the font of the application what you need to do let's go go to this layout. JS file okay so this layout. JS and if you see right now it use this inter font okay and this inter font is importing from this Google font now you can add your own for example if I want to use outfit okay that's I like and we are going to use for this application let's add outfit and if you see as soon as I type I got the I get the REM recommendation and now this outfit you have to replace with this enter you can change this constant that doesn't matter and then save it and you got the result and if you see it changed the font for your application it look good right perfect so uh now the next thing what we need to do as you know that we are fing this category list from the server right and obviously we not to show some kind of loading if takes some time to load the application if I refresh the screen see it's taking some time to load the list of category so to fix it right we need to show some kind of skeleton effect okay some kind of loading effect if you did not know about the skeleton let's go to this telin CSS and just type animation okay and inside the telin CSS right you have some uh kind of the animation effect it look like this see the loading effect or even you go to this chats here it has their own component called skeleton and you can use it here like this okay but I'm going to tell you some a different way and see simplest way so let's go to this category list for where we need to show this uh skeleton effect here whenever uh we need to write condition obviously whenever the category list do length is greater than zero then only uh oh sorry I will add a question mark then only show the category list otherwise show the skeleton uh loading effect okay so here I'm going to add that one but obviously for time being what I'm going to do I will R this condition so that we can teste this out here now you need to add some array okay so in this case I'm going to add 1 2 3 4 5 6 dot map okay here I'm going to just wrap this and then um we'll iterate this value so item comma index like this add a du like this only one thing we mistake here okay let me put this above this one oh sorry not here okay and now we need to add curly Braes maybe here like this something is missing right let me let me clean this let me undo this one because so here we have the list of category and this is the D right so here maybe we need to add that condition and then here we can add for example let's add a d yeah that's perfect now in obviously we don't want to add new here we going to add empty array one comma sorry 2 comma 3A 4A 5A 6 do map and then item comma index something like this okay now inside this one I'm going to add one de let's add a de oh god so let's add a d I don't know why this extra recommendation is getting and inside this D we are not putting anything but let add a class name here we going to give height of 120 pixel okay now obviously you can cannot see anything because let's reward this condition then once you add the height let's add add a width of full okay let's add a background color of slit maybe 200 and save it and if you see we got this empty boxes but it's not look good let's add animate spin okay sorry animate pulse and if you see now once you add it's giving some kind of Animation loading animation right that's what we needed and we are just making these particular boxes look like our category uh list okay so I added this led large and perfect see if I increase the size it automatically taking the place of the category because we Define this particular or we iterate this list inside this particular de okay it's already taken care of now I will R this one to original position and boom now if I refresh the screen you will see this loading effect and then you will see the actual result that's what we wanted and that's how it's working perfectly fine okay just I'm thinking the changing this background color I think I feel it's little darker so let's add a 50 yeah for I think this is fine okay perfect so guys that's all for this particular section I hope you understand how we Face uh the data from the high graph with the help of graph qul and then display it on the screen now once you learn how we can fet the data from the high graph with the help of a graphql request it's very easy to fet any kind of data you just need to create a query you have to make sure that query is working fine and running as expected and then you can just use it to F it on the screen now it's time to add the business list so in order to display business list this is how we are going to display okay so here if You observe carefully uh we have the business image okay that the image we are going to show here then here we going to show the category okay uh then the name of the business who is the contact person and the address and the last the button for the book now okay and inside the API playground okay oh sorry inside the schema or content we have the one schema called business list and inside that schema let me show you the schema so here we have the business list I I store the name the contact person the address about okay these are the just a text this is a multi-line text then the images okay so if you see observe here I added the multiple images okay so I can upload more than one image then I reference or connected this particular uh business list with the category so you can also connect it uh we have the one schema component called reference okay where you can connect the existing uh schema with each other then the email and also I will connect with the booking later on now inside the content I added here okay let me show you some of them so if you see over here there is some um sample example that you can add the uh booking information sorry the business information like this okay now let's go back to our API playground I'm going to add a new query here uh we'll give the name let's let's add a business list first okay so let's give the name for example business list now inside the business list uh first thing we going to add is about let's add about let's add address then I want to add a category so category name then the contact person okay then email of the user we don't need it for now uh but I just adding that one then we're going to add the image obviously we need a image so let's add that one as well so wait okay image URL okay make sure to add ID because we need that ID the name and then I think that's all okay and if I try to execute it make sure you are getting the result perfect now copy this query as it is and then go back to our application so inside the global API we going to create a new method called con get business list or we say get all business list okay because we are fing all business list oops and over here we going to add the constant query is equal to gql this tag and then paste the query and the last we going to add this particular or we will just copy this request call like this this make this method as a sync because we are using AIT and make sure uh export this one so get all business list and save it now we have this get all business list I uh endpoint is ready so just use it inside the page.js inside the page.js I'm going to create a new method here we can call it as a constant get all business list like this okay I will just add a documentation for this one used to get all business list okay and for this one I will say used to get all category list now over here just use Global API do get all business list then response like this make sure that we are getting the response so I write response here and then you can call this get all business list inside this use effect and then save it now if I go back to the inspect panel and go to the console let's clean this out let's refresh the screen and if you see we got the business list right now we have the seven business list okay obviously you can access actual the list of business list using this response do business list okay and save it now if you see inside the console we have one error that it's it's not error it's a warning it's saying that each child in the list should have unique key property okay so whenever we iterate the list of category list over here right uh here we Define the index as well and for the each of this uh de or comp which we are using right you have to provide the key property and this key need to be unique one okay obviously index hold the value kind of 0 1 2 3 and that's the reason it's a unique and then we have provided as a key now if I refresh it let's ref fresh it and okay so let me this is category list right okay same thing we have to do it here as well and save it Let me refresh it now and if you see there is gone and this is the business list which uh we just fet now let's go back to the page.js and let's define one state constant we say business list comma set business list is equal to use State and here I'm going to add empty and then let's set the value so instead of console lock I will just set the business list and save it perfect now we have the business list let's create a new component to display the list of business so inside the component folder I create a new component called business list. jsx add the default template and here I will I will accept the business list and then inside the page.js after the category list let's add a business list component okay and for this business list let's pass this business list okay and then save it okay this is how it looks see now inside the business list obviously we need to iterate let's first give the title for the business list so I'm going to add h2 tag inside that one obviously I'm going to provide a title okay okay which can be dynamic which we going to pass it here the reason that I'm passing the title as well because we can use this business list component some at some other location as well okay so that's the reason let me close this console so inside the page here I'm going to add the title sorry title here and we'll say popular business and let's save this one if you see the text is showing at the popular business obviously for this du I'm going to add a class name margin top to five and uh for this S2 tag I'm going to add a class name we'll say um font Bol text of 22 pixel something like this see now then we will iterate the business list in order to display it so I'm going to add one D tag inside that I'm going to add business list. map we say business comma index and then we'll add a du okay obviously uh as you know we can provide the key as the index and then first thing let's display the image so image I will importing from the next SL image then we provide the source so in this case is source is business you can every time you can get check it here okay so if you see inside that we have images and we actually have the list of images because we are uploading multiple image right obviously we want to show only the first image so what uh in order to access that you can just write images then zero element do URL something like this okay then you need to provide the alt tag we'll say we'll just add business image business last name as Al tag okay then width I'm going to add a width of 500 for now the height maybe 200 let's save it let's go back to our application and if you see we are getting the list of business that's look good to me now obviously we want to add a styling to this one so first thing let add a class name We'll add a height of 150 pixel when the screen size is medium I'm going to change the height to 200 pixel then I'll make object cover and rounded Corner okay it's look Weare but that's fine and now for this particular de let's add a de let's make it grid now when the screen size is smaller we'll show the grid columns too see like this but when the screen size is medium we going to show grid column 3 when the grid size is larger we'll show G column four something like this okay we'll give gap of six and margin top to five if I increase size see this is how beautifully it's looking right good then after this image we're going to add a due tag and for this due tag I'm going to add the h2 tag we going to show the business name oh sorry the category name so in order to access category so this will be in the business. category. name okay let me show you that one so so if you go here if you see we have this category so inside the business list obviously we we are calling business and inside that we have the category and then name obviously um I going to add The Styling to this one so add a class name We'll add a uh we'll add a padding of one then background of purple maybe we'll add a 200 okay then we'll make text to be primary then rounded full and then padding x22 okay and we'll make text size of 12 pixel see like this now right now if you see it's it's the width is completely or full right so what you can do for this de first thing I'm going to add make it Flex obviously this need to be a flex column and you can say item Baseline see okay now it's just wrapping to this particular text after that one uh let's add a padding of three okay perfect and for this complete uh de I'm going to add Shadow small maybe or not this one or not here uh we going to add for this de so class name and we'll add a shadow medium see obviously we'll make a rounded corner so rounded to be large perfect we'll add a more uh styling to this one later on but first let's complete this um business information thing so again the US to tag for the business name then for this one let's add a class name we'll say font bold text large after this I'm going to add another H tag for for business. contact person see okay another is to tag for the address okay so let's add a styling to this class name we'll say text Gray 500 text small and for this one oh uh actually we will keep I will change this to the address I thought it's address and for this one I'm going going to add a text primary oh sorry text primary okay perfect it need to be gray perfect and if I increase the size see how beautifully it's looking on the UI okay so this is how beautiful you can design on your own okay you can obviously customize it according to your need now once we design this one right um let's add a some styling to this particular de so let's go back here o sorry so for this de I'm going to add a h effect so on a h I'm going to increase the shadow to large so if you see it's change the shadow okay also um I'm going to add a shadow color so shadow of purple maybe or let's add a primary only okay see but it's we need to add only on a h so on a h we'll see the shadow perfect he make this cursor pointer so whenever I hold on this one it will see the pointer perfect if I let's see how it looks see okay now you can also uh give the scale effect so for example on H what I'm going to do I will just scale it to 105 for a smooth animation I'm going to add a transition all and the is in out oh God okay if I go here see perfect right that's look awesome guys now the last is we need to add a button so over here is a shortcut button to book the appointment button and here I'm going to say book now see this button is showing now there are couple of way that you can design this button you can show the full width you can show on the left hand side okay I will keep this uh simpler way I don't want to show a complete width because it will be little messy or not messy but uh there a lot of things will display on the screen right okay so here I'm going to add a class name I just want want to check how it looks when I do the ground um Corner rounded okay so let me so class name I added rounded LG added I don't know why just try to add full okay so it's already Corner around okay yeah I want to add a food actually and this is how it looks let's let's keep large only okay and for this de I'm going to add a gap of three or maybe two let's add one only and I'm going to add padding MK to three and if I increase the size see this is how beautifully is looking on the screen right sounds good perfect and is completely responsive guys if I go to the inspect panel and change the size right depends on the screen size if you see it's change the layout see okay and if you see the image also changing their size depends depend depending on the screen side if I go to this view okay this is the you can change this view to mobile view as well here you can select whatever the dimension you want here if you see we have the different different kind of phone resolution and see how beautifully it's looking on the screen perfect right so quick thing as we know that we added this skeleton effect to this category here for this business as well we want to add it if you see the business list also need a loading effect so let's add it so let's go to this business list and obviously over here we need to add a condition that business list. length is greater than zero question mark and then we're going to add a condition over here otherwise we going to add a d for example make sure that we are adding correctly perfect now I will just reward the condition in order to test this out so instead of this D I'm going going to add 1A 2A 3 4 5 6 7 8 9 10 or 8 only do map inside that we'll say item comma index the similar way what we added inside the category same way we are going to add it here as well add a de for this one I'm going to add class name with to be full height I'm going to add maybe 200 pixel then back background slate 200 let's save this one let's see how it looks see then I'm going to add a rounded to be full not full sorry large here I'm going to change this we to maybe 500 500 is too large uh 400 300 yeah if I increase the size this is how it looks see okay obviously I forgot to add the animate spin or pulse anim pulse okay perfect now let's rever this condition back to his original like this and save it now if I increase the size this is how it looks see perfect okay now one more thing obviously I I keep this simple right but you can add more thing into that one like show this kind of effect for this texe and everything okay but for this uh example I kept the this uh simple but if you see how beautiful is looking on the screen okay so I hope you understand so now we are going to add authentication for our application and for that one I'm going to use this latest and modern authentication Service called disc scope so disc scope is a drag and drop authentication Service and it's very easy to use and it's based on the next o and it provide some kind of feature which no authentication service provider is providing right now now in the market so first thing uh let me tell you about this discop is completely free to use and uh there are lot of features which you can explore from this uh authentic authentication Service okay uh for the pricing uh you have different different option it has a free for tire where you have you can um add up up to 7,500 monthly active user which is more than sufficient for any small business so first thing let's create account to this disc scope once you created account it may ask you to create a new uh project for you okay so let's I will also create a new project from here so I will give you name as a home service app or web app okay I say web I will keep it non prodction for now and let's say create now once you create the project uh you might land like this page okay let's say get started now who you are building this application for okay so obviously it's consumer so select consumer click next then what kind of authentication you want to add okay you can select from here so this is a primary one I want to add a social authentication and if you see as soon I select uh it's showing as a primary and you can choose up to two method okay it has a onetime password it has a magic link it has authentic application SSO and lot of things I will check the pass key as well it means email and password once you select this go to the next step uh it's saying which me do you want to use for MFA uh so just go ahead without MFA okay and this is how your page will look like okay so it has a uh sign in sign up page sign in sign up and step up page okay go to the next and boom you will land on this beautiful page where it will show how the page will look like okay it has a different different page you will you can see over here okay now this page you can customize completely if it's up to you how you want to customize okay if you see the next step is customization let's go to the customization here you can say the project name a lot of different things actually okay I will go back because we will customize in a moment okay now what we need to do we have to click on this good quick start guide where it will jump on uh for the documentation okay now here obviously we are using nextjs select the nextjs and we are using App routing so keep this app routing as it is and these are the step we need we need to follow okay we'll do one by one so first thing you need to install this next O Okay so copy this on next O command Okay as I say in the beginning that this depends on the next o only so paste it here after that one uh you need to create a new folder called API inside the app folder inside that you have to create another folder called a and the inside that we have to next O Okay so let's go back here inside the project folder inside the app folder I'm going toate new folder called API inside that we need to create a folder called a so let's create a new folder called a again inside that we create a new folder called dot dot dot next a okay and inside that we'll create route do JS file okay now inside that you have to import all of this uh text okay so I will copy everything as it is and then paste it here okay we have one error uh because we are using JS file we don't need this type and then save it let's remove this input as well now once you done this one let's scroll down little bit and it's just saying uh sorry let me go back here it's just saying that you need to uh initialize this descope provider okay so let's scroll down this is the next method so inside we have to create a new file called provider. TSX okay and inside that we have to add this code so this code obviously what is doing uh we are keeping this children inside the provider. TX file okay so let's create a new file called provider so inside the root directory we have to create okay inside the app folder here we'll create provider. JS file now inside this provider. JS file I will copy everything as it as it is I will paste it here obviously this is JS so we really don't need this type okay and then save it next let me increase the size next uh inside the layout. TSX we have to wrap the children inside the next OD session provider so let's go to this next off session provider inside the layout and we'll wrap it here like this okay and then save it next if you scroll down we have the authentication flow so maybe inside the navigation bar this is just example that how to use it okay now this is the just we can use a sign in to sign in it and the say man obviously we will do it later on but now let's test this out so first thing let's go back to our application so where is the application here right now obviously you will see nothing on the screen okay so it's saying the next R is not defined make sure to import this one see obviously we imported this inside the provider okay so this what we Define so that's the is and now if you see the error is gone now once everything is done right and now we can ready to to add the signin page so what you can do uh once you the click on this get started okay um we will open the login page so let's go back to our uh header so inside the header we added this get started I will just rename this to login slash sign up something like this say let me add space and then we add on click method on this one okay and here I will call this signin method see from the next do okay and then save it now once you save it we got error that this uh signing method cannot use directly on the client server side so just make this component as a use client and if you see the it is gone now if I click on this one if you see it jump to the page where it's saying sign in with disc scope obviously we don't want this button instead of that we directly want the page for the sign in so what you can do uh for this one you can can provide the option called sign in option called disc scope because we are using the disc scope authentication okay so here I will just say disc scope let's save it let's go back again refresh it and now loging it and if you see now that button is gone and you will see the beautiful uh login page now here you will see couple of things right now we don't have logo because we did not added logo from the D scope um dashboard but you can log with the Google okay so if you see we have the option to log in with the Google but before that I want to add a logo so go back to our uh dashboard of the descope on the left hand side you will see a bunch of options okay here you have to select the Styles inside the style you can upload the logo which you want to upload for this particular uh screen okay or you have another option okay so if I go to this flows okay and here we are using this sign up signin flow here you will see a bunch of options okay so let me explain what is flow the flow it means uh once you land on this particular screen the welcome screen and which uh they are called welcome screen but it's actually the uh authentication screen okay so this authentication screen you can modify according to your need then it will show the flow if if what the user selected this social authentication then it will go to this social authentication uh logic then it's checking is new user is there then you have to add some couple of options here kind of thing there are lot of things that you can add it if the user is existing what need to do if youing new user what need to do all of the screen uh you can add your custom screen as well okay you want to add uh once user sign up and is a new user you want to add something uh some screen which takes some uh extra information you can add it here instead of adding a new page inside your application okay so now what we can do we'll change this welcome screen so here if you see we have option called edit click edit and boom you will land on this beautiful page okay here you have the option to upload the logo uh you can even change this name now if you want to add more option you can add it here and you will see the bunch of option here okay so for example let's add along with the Google let's add a Facebook I will add the Facebook here okay you can change the change the name you can say the continue with Facebook okay you can have option to fill the container you can change the size layout and everything and if you think everything is good you can say done also you have option to add inputs okay so invite user so if I add here option called invitees okay so obviously we don't want it I will delete this one but as I say you can create your own form as well once you the sign in that's cool right now I added this information okay and let me show you how it looks and how the flow actually works now let me go back Let me refresh the screen and if you see this new button get added now let's continue with the Google let me select one account to log in with and boom if you see it's added me new page it's saying to complete sign up please provide the following information now it's asking me the full name obviously take the full name but that's nothing but this flow okay now this is a new user okay so if you see this new user is connected to this new screen called user information and if you edit it it it's saying to complete your sign up and everything and this page is nothing but the page is displayed on the screen okay now once let me go back once user submit it and updated it it will show it success message it's action okay then now maybe later from biometric you can add the biometric function as well if you don't want it just click remove see if you don't want this one just click remove boom and this how simply it is right now you can connect it with this end tag as well okay means once the user updated this user uh name and information if you is new you can just update it and then you can click save and if I save everything boom everything is get save now another thing is if you want to add your own uh action on screen here you have option and you will see the screen action connector condition everything you can add it here you want to add screen just add it here you can connect the screen you can add the button text whatever you want guys if you see there are lot of things that you can addit from this flow and as I say in the very beginning that disc scope is a completely different from the other authentication Service and that's the reason very powerful and very easy to use yeah that you don't need to do now another use case of this one without creating a uh for example if you want to create a form and for that one you need to log in then you need to uh get the form information and submit it you don't need to create app disco will take care of that one create the form uh then add authentication and obviously with the help of this new screen and everything you can do it and then you can just publish it so simple right you can add in your app in existing app as well so that's all about this particular flow okay now let's go to style I want to upload this uh change this logo so what I will do I will just put it there so whatever logo we have I will just copy it from this public folder and uh this is logo right just paste it here if you see this logo is updated let's apply it let me go back to our application let me go back refresh it once and let's see this logo is showing right it's very big now you can if you want to change it let's go to flow where we have this sign up sign in I will edit it here I will change this size for example 70 see now let's say done and now immediately you can test this out here oh I don't know whether I saved it or not let's save this everything let me check that oh yeah we save it right okay perfect let me go back let me click login and sign up and boom this you see the logo name is little bit now smaller okay so this is how you can add the authentication with the discop now let's complete the for okay so I added this authentication service provider now again and if you see I I did the login and everything is done now okay obviously it's not showing here because we did not change this button and everything but now I added it or I log to this application and if I go to this home you will see the active user the new user and just now I log in see okay now inside the users information you will see the usern name the email which I login and everything okay so that's how guys you can with the help of Discord scope you can add the authentication now there are lot of different feature you have here you can just explore it and as I say that this is free to use okay so don't worry about anything that whatever the content you see in this particular course on this channel is completely free now now it's time to show the user image on the screen so it's very easy go to the header and over here at the top the first thing we need to get is the user uh session information so here what I can do I will write a constant we'll say user oh sorry we'll say data is equal to use session and if you see this use session is inputting from next o and what I'm going to do uh I want to show the data what data is getting right so inside the use effect whenever data is available I am going to just print this out so you have also need to make sure that once you log in you are getting data and if you see we got the data it's saying the user information so inside the data we have user and it has a email image and name perfect that's what we wanted now what we can do uh either you can save it in one state or you can directly use it it's up to you okay so let's use it directly over here so now here we can write the condition if data. user is available okay then I want to show uh the image okay okay so here I'm going to add image uh source and then user sorry data do user do image okay because we are directly using this one okay you can store it in your separate State as well it's up to you then otherwise show this button something like this okay and and then let's uh let me add a styling to this one so class name I'm going to instead of class name as well let's add alt tag first user then we'll go width of 40 height of 40 and for class name I will just rounded the corner and save it okay so we got one error that it's saying this particular domain is not configured so make sure to configure this domain under the next. config.js file let me close this one let me go to this next config.js file along with this graph I said make sure to add this domain as well and now refresh it and let's wait so if you see Let me refresh it again and if you see now it's changed to users image so cool right along with that one uh you can give option more option like uh you just click on this one you can give option to show the menu like my booking or option for log out okay so that option you can add it but I hope you understand how we uh get the information after login with the help of this use session and display it on the screen now uh let's do one thing so let's add a menu so for in order to add a menu I'm going to use a dialog menu so you drop down menu from the Shad CN okay so this is how it looks here so what you can do just import this first so copy this command go to your terminal so I will paste it here and then I will copy this input statement okay and let's import it here then this is a drop- down menu I will copy this one as well and then we need to paste it uh before this one okay so whenever the US is there now if you see this is the trigger point okay so obviously what we need to do copy this cut from this here and paste it here oh sorry here like this and then save it okay now if I increase the screen size let's go to our application and if I click on this one you'll see the option see okay it has a profile billing team subscription obviously we don't want that one you can just change this one okay so obviously I will keep this label here I will say um my booking then here I will say logo I don't want this one so I will remove it save it and now if I click on this one see how beautifully it's showing this menu right so cool now um on the log out right if I go to here we can add on click method and and here we have method called uh log out I don't know what is called okay so log out log out log out L out I don't know oh so that's I think called sign out let's see sign out oh and if you see sign out from the next out okay but that's the reason that's what we wanted and save it that's all okay now if I click log out it will get log out from the application but I hope you understand how we added this uh drop down menu as well now if I go to the inspect panel we might have one error okay if I go to the console let's see okay so we don't have error but there is one important thing that whenever we add anything like button image make sure to make it as a child okay just we are telling this drop down okay this is a child element and if you see everything is perfectly working now now if you try to log out it if you see it's log out and come or obviously it's redirect to the same page but now this time button get changed now you have button if I click login again you have option here say continue with the Google select the account and boom you are on the home screen with this user image okay so that's how with the help of this scope uh authentication Service you added this beautiful authentication in your application obviously we learn a lot of different authentication and this is the new way that you added this authentication Service so guys if you have any question let me know in the comment section the link of this a disc scope authentication is in the description you can uh just create a new account and let me know how you think about the this scope if you really really like comment in the comment section and if you really want to see this scope again in the next video let me know in the comment section as well we are going to add a new screen when user click on any of this category we're going to open the new screen and then only the business belong to that category will displayed on the screen so for example if you see right now we designed this beautiful home or home screen and now you just click on this any of this category we going to redirect to the new screen where it has the list of business list belong to that category and also we going to show the category uh the list of category option on the left hand side okay now this section will be constant and only this section going to change if you just select any of this category uh from this particular category list we have to make sure only this list is changing and not this complete screen is get updated or this category get changed okay so obviously uh there where the routing play a very important role and uh this particular screen don't need an authentication so obviously we don't we have authentication system obviously but even though if you did not authentic user did not authenticate to our application that's fine okay obviously once we uh move forward in this particular course you will uh get to know how we can Implement authentication to protect the page as well so let's go back to our application let me open our application over here okay we'll create a new folder so inside the one uh app folder we'll create a new folder and all our routing will keep inside one folder called routes okay and when I Define this uh folder name as a inside the bracket okay then again this is not considered as a route but if you define anything inside that any folder inside that then it will consider as a route so for example now if I Define the uh folder name called search okay and inside that what I'm going to do I'm going to add a layout. jsx file okay because now what it will do this particular screen will hold uh will uh apply this layout okay and not any other layout so this layout very important obviously this layout is a parent layout but again this layout is common for all the route which we come under this search now let's add a default template over here I give layout and we have to make sure that you will add the children over here okay so that whatever the pages you are going to render uh inside this particular search route it will render inside this uh du tag through the layout now inside this search again I'm going to get a new folder but in this case I'm going to use a dynamic routing when I say Dynamic okay let me show you the example now if I go to this search because we already have the search parameter and inside that if you want to go some uh category for example uh let's say cleaning okay and if I go here right now if you see we are getting 404 because this page is not there but the search path will be constant but this particular category name going to change every time it will be a repair or it will be a plumbing right any category it will be obviously you cannot create a multiple folder for each of these category okay so this particular path need to be a dynamic it can change any time so to do that what we need to do you have to add a folder inside this search because we want to inside the search folder and here I'm going to add a dynamic uh route so you have to write the folder name inside this square bracket and you have to write for example let say category okay and enter it and now inside this we'll add a page. jsx file now here add a default template and here I will say um business by category and save it okay let's make this save as well and if you see now the business back category text is showing because if I type ABC whatever I type whatever the category name if I give here it will redirect to the business by category okay because we added this Dynamic uh route over here okay this is called a dynamic routing so I hope you understand how we did it now let's divide this screen into two part if you see in our screenshot that our screen divide in two part one is for the category and another is for the cing it means we have two columns okay obviously this column is smaller and this column is larger so to implement that one what we need to do uh let's go to the layout. jsx here I'm going to add one du inside D let's add a class name we'll say grid we'll make grid columns four okay I will tell you why with Define it for okay and inside that we have to Define two column so one One D for one column and second column it has a another de okay inside the second column obviously we'll keep the children and inside this one I'm going to add the side category na bar okay and this is a children now what we need to do we have to assign out of four column we will assign three column to this de and one column to this one so you have to write class name here we'll say column span and three column out of four column we assign to this children and save it okay now here I will say category see now category Define here okay and if you see this category section until this point and business category until this point okay now for your understanding purpose what I will do I will just add the background background blue 100 and for this one also I will add background red 100 and if you see this is how it looks okay so uh out of four column one column for this one and three column for this business category so now let's add a new component called category Navar okay so let's create a new folder inside the search folder we can call it as underscore component so all the components will keep inside this folder here uh I will I'm going to call this uh as a category sidebar. jsx add the default template let's save it and make sure to add this particular component inside this side category navigation bar so category Side Bar let me remove this one and if you see category Side by is showing on the screen let's go here and uh inside this category the search bar if you remember we already fed the list of categories right same uh code I'm going to copy so from the component we we have this category list right we display it on the screen so oh so it is in the page. jsx to F the category list I will just copy the existing one so this one okay along with the use effects and this one as well I'll paste it here obviously we don't need business list we don't need this call but we have we need to import the use State make sure to import it also import the use effect and the global API okay and then you have to mark this component as a use client because we are using Hooks and now if I refresh it nothing is showing on the screen but we are getting the data through this uh API call okay if you want to write the response in a console you can just teste this out so go to the inspect panel go to the console and if you see we have the category list that's good now let's iterate that list of categories so over here obviously what okay one more important thing when the screen say smaller I'm going to hide this category sidebar very important okay because on the smaller screen I'm not going to show because it will mess up the structure but right now for the example purpose I will keep as it is and now here inside the category sidebar first thing I'm going to add a h2 tag here I will say categories I'm going to give some class name to this one we'll say font bold margin bottom to three text I'm going to add a large and we'll change the color to primary and then save it next we had a du in that du we will iterate this category list category list do m app we say category comma index let's add a du make sure to add a index so key sorry key as a index and inside this one first thing let's uh display the name so category do name and if you see the category name is showing on the screen now along with that obviously we want to show the image as well so here I will do S2 tag and I will put this inside this S2 tag and then we need to show the image add a source and here image will be category dot icon. URL let's go alt tag as a icon let's give width of 30 and height of 30 see now let's bring everything in one line so for this D I give call Flex gap of maybe we go Gap of two padding of three let's save this one and we'll add a border so border will be we add a rounded border so I will add a rounded large okay B is not show seeing on the screen let me remove this background because we used it for the example purpose see okay I will remove this border as well now perfect and then I'm going to add a margin bottom to three like this perfect okay now we have this beautiful category list obviously on the bigger screen it looks much better okay now here if you see we have lot of space let's give some uh margin left little bit so sorry margin right so what I'm going to do I will add margin right to 10 then we'll add a cursor pointer and then save it so if you see right this is how it looks so let me do it on the medium screen only see now it's look good to me another thing uh on how effect we will add it so on how Okay uh we'll change the background to purple maybe 50 so if I hover on this one this is how it looks then uh on Hover only we'll change text to primary and then on H we'll change the Border color as well so border primary and we'll add a on H Shadow effect so Shadow will be media and if i h on this one see how beautiful it's looking if I increase the screen size see okay that's look good to me so if you see okay let's let's uh add item to be in the center because there's mismatch the vertical is not aligned right so let's add item to in the center perfect now we have ready with our uh category sidebar okay next uh let's give some margin from the top so uh inside the layout only we'll give that margin so margin top to maybe it now it's good okay now next thing what we need to do we need to show the business list depends on the selection okay now what we need to do first thing let's go to our home screen because we forgot to add the on click method on this one okay so uh let go to the category list over here okay this is the list of category on the home screen so in obviously we want to navigate to the new screen right so we have one component called link and if you see this link is inputting from the next SL link import that one instead of du I just replace this link with the link okay and here you have one property which is mandatory which is H reference here you need to add the URL on sorry the path of the on screen which you want to go so search slash and then the category name so in this case category. name and save it now you'll see the magic if I click on this cleaning if you see it's when to the search SL clean immediately okay let's go back if I go to this painting see it's go to the painting same thing we need to implement for this category as well so I will copy this H reference as it is and let's go to categories sidebar and here I will change to this link here as well let's use the link and then put H reference okay and save it now you'll see the magic if I change to refer see if you see this category list is not getting changed okay and without refreshing you are able to go to this particular category now what we need to do we need to fetch or you need to get this category name okay so that we'll fetch the B business list belong to that category only so it's very easy first thing uh let's go to this page.js okay let me close this tab and this is the business back category okay now in order to get the list uh the sorry the category name from the URL right uh you can just have the params okay because we have this Dynamic um route right so you have to make sure this is the category name you give for the dynamic route right so once you define this par like this let's use add use effect and I want to show you what will be in the parameters so here I will say params okay now you have to make sure because param sometimes let take some time to uh get it in this particular component so in meantime you can add this param inside the user effect let's save it okay so you we are using use effect so you have to make this component as a client side now go to the inspect panel go to the console and if you see we have one object oh sorry not this one but if you see here we have one object and it's called a category and the category name is Shifting okay let me go to the cleaning and if you see immediately it update with the category and the name okay because this field name coming as a category because whatever the uh name we give this folder to this folder it will uh get the FI name with that one now we have we know that we have the category name okay now here we need to write an API to fet the business list belong to that category so let's go to the high graph oh so let me return login Home Service app and inside the playground I'm going to add a new query here we'll be I'm going to use business leads again but in this case we going to use a wear claws we inside the wear claws we need to search with the category here and we need to pass a name it means business with the and with the we Clause we will search with the category name here if I say cleaning okay obviously nothing will display because we did not select anything but now you can select the property which you want to F so we need about we need address we need a we we also F category as well okay then we'll say contact person we will F email ID name obviously we need image as well image URL and I think that's all okay now if I run it if you see we got the because we passed the category name as a cleaning and only business list with the category name cleaning will come up here okay and if you see the category name as a cleaning okay now copy this query go back to our application and inside the global AP here constant we'll say get business by category and here we'll add constant query is equal to gql stag code is code and this past this query now here if you see I will bring this down we have the name called cleaning obviously we need to pass it dynamically so here what you have to do remove this one add this tag and then you have to write category now obviously we'll pass the category to this particular method and this category will pass to this uh query okay and then we'll put this request so I will just copy paste it here oh so make this method as a sync and then export it and save it now you are ready to use it so let's create one method inside the business back category page here we'll say constant get business list I will say and here will be a global API dog business by category and now obviously here we need to pass if you see we need to pass uh the category name over here okay so if you see that's what we require over here so in this case it will be a parents dot category okay dot then response and then we'll just console the response here now get business list we need to call whenever we have the actual params value are ready something like this okay perfect let's save this one let's go back to our application go to the inspect panel to make sure that we are getting data and if you see we have the business list list perfect okay obviously this is inside the business list we have the actual data this need to be accessed like business list oops now let's create one state so we say business list comma set business list is equal to you equal to use State and we'll just set this value perfect okay now we have the business list now here will be the magic obviously uh to display business we need to create a component and all but as you know that we already have the component okay and this component we going to reuse so if you see in this particular uh screenshot whatever the component we use over here because we already there we already have that one we can reuse it again in this particular screen okay okay let me show you how so let me go to any of the category now instead of this one we'll just say business business list and if you see this is the component which we already created already we already have for this component uh we need to provide the title and that's the reason we keep the title Dynamic so whatever the title we pass from your new screen you it will apply to this one so here we will pass as a category name so we'll say params category okay let's save it and okay so what we got we got one error that business list is not there obviously we need to provide the business list as well now here you can provide the business list which we got it and let's save it and boom you got the data see with the category name and then we have the list of all the business list even Implement a new component we we use the existing component and then we will display it on the screen now you can go to the repair you can go to the painting or painting don't have anything go to the shifting shifting has one see Plumbing has one okay and everything will be as it is if you see we also have this beautiful loading effect because it's already implemented to our existing component because we use the existing component over here okay now obviously this is responsive and as I say we need to remove this or we need to hide this category side navigation bar when the screen size is smaller so what we can do so this is how it looks okay let me check on the smaller screen for example you go to the mobile view this is how weird it looks right so that's the reason I want to remove that one so let's go to this layout and here you can write the condition hidden initially when the screen size is smaller but when the screen size is larger you can mark it as a block for example and save it and here as well I'm going to add when screen size is medium okay and instead of column four only applicable for the smaller screen and for the sorry the larger screen for the smaller screen I will show only column one see and if I increase size this is how it looks go to the inspect panel let me show you how it looks on the smaller screen see it immediately hide it and then you'll get the all the data which you want perfect right so guys that's all for this SE I hope you understand how beautifully and easily we build this uh category uh sorry business list by category page where you have this beautiful category list and depends on that one we show the list of category now there is one more important thing that we need to um uh Implement when I click any of this particular category right it's we don't know which cat category will be selected right we have to make sure that we will get to know which category is selected and then we highlighted with this some border color and something like that right now here we need to get this category name and depends on that one we will set or show the or we'll add The Styling dynamically okay so let me show you what I'm I I'm meaning so let's go back to our category sidebar okay now here this is the component and you canot get the category name by using the params okay so what you need to do to f the selected category from the URL you have to write constant at parms is equal to use path name and if you see this use path name from the next SL navigations and now let me show you what we are getting the parents so let me go to the inspect panel go to the repair for example go to the console and if you see this is what we are getting it actually give the complete path okay in this case search SL repair now we need this repair only so it's very easy to get that repair so you have to write con uh here you can write constant category is equal to parents do split we need to split that particular uh string using this slash and then you have to get the second element okay like this and now you can just print the category let's save this one and then go to the inspect panel go to the console and now if you see we just got a repair let's for example take cleaning okay now if you see nothing get changed because we don't know whether cleaning is selected or not right now what we also we need to do let me remove this category and I'm going to add one use effect okay now what this use effect will do whenever the parameter value get change okay it means this one then the use effect will get execute okay and then I'm going to Define one state here we'll say constant selected category comma set selected category is equal to use State okay so this will hold the selected value obviously we don't want to Define over here and then I will copy this one and we'll just say set category set selected category and then param do split okay me do that one and we have to make sure that when the param value is there then only set this value now here let's go back because we have this category name which is uh currently selected right now to this particular class name we're going to add Dynamic styling so in order to add a dynamic styling first wrap this in a curly Li SI then this particular tag code and then remove this single code here I'm going to add one condition so selected category is matches with the category name okay so whatever the current category name and the select is matches We'll add put the and and operation then we'll show a border of primary for example okay and let's teste this out first now if I select the repair if you see even though uh I remove the cursor over here it will show the border with the primary because that's what we Define same thing I will Define some more property so for example border then we'll say text primary and then Shadow medium background purple 50 and save it and this how it look see okay now you can able to uh check here that which one is which category is selected right if I go back go to this home screen right and open on the repair for example see the rep is already there and it's selected now okay so this is how you can add the custom styling and you can get the path name using the use path name hook and then you can get the whatever the params you want so that you can apply some styling on that one now we need to implement the business details screen when us click on any of this particular business it will navigate to the business detail screen but before that one we have to make sure that in order to access the business detail screen user need to authenticate to our application so let me explain uh little bit about the application flow so this is the user and if user want to access home screen and business by category he can access without log to our application okay so user don't need to do authentication any anything you can just access this two page but if user want to access business detail business booking and my booking history user need to authenticate to our um discop authentication Service and then only he can able to access all of these particular screens okay so obviously we need to protect this page from the third party authentic sorry third party access or any unauthorized user try to access this particular screen we have to make sure that he will not able to access okay so this is the basic workflow of our application now first let's implement the on click method and before that we need to create a new route so new route will be like uh detail slash and the business ID okay so whatever the business ID is there that business ID so this business ID need to be a dynamic because it can be anything right so let's go back to our application let's go to the folder structure first let me close all of this tab and inside the route folder because we want to create uh route new route so here we'll create a new folder name called uh details inside the details folder we create a dynamic route so we inside the bracket we will give the name for example uh business ID and then inside that one we'll create a new page called page. jsx now let's add a default template here I will just rename it for example business detail and save it now if I try to access some details and some ID then if you see it jump to the business detail screen that's working fine perfect but as I say with beginning that we need to protect this page right obviously uh right now user is signing is able to access let's log out a user and now if you see user is not login Let me refresh it and still user can access business detail now what we need to do we need to make sure that user will authenticated to access this page so in order to add that authentication simply uh we need to add a constant data comma status from use session and this use session from this next Au okay now data is include obviously user information but status will in include whether uh the uh particular uh user is authenticated or not authenticated okay so and is is loading or not so what we'll do we'll do if and we'll check if the status is loading okay if the stat is loading we'll just return some P tag okay it's loading okay I have to add inside the brackets like this and if the status is equal to equal to unauthenticated if you see we got this two option called unauthenticated then we'll simply navigate to a signin page okay so if you see we have this signin page um hook okay sorry sign in page method from the next / react and obviously we have to provide the uh the authentication Service name which is disc scope and then save it now obviously saying that react context is unavailable in server component we have to make this screen as a used client and if you see now it redirected to this login screen okay one more thing here also we will add a condition if status is equal to equal to and authenticated and sorry authenticated then only show this business DET screen okay now let's go back to local 3000 also make sure to add a on click method to this particular uh business list so let's go to the business list here we have this de right here instead of du I change this to the link so that we can add H reference and simply here let me bring this down We'll add H reference slash details slash and the business ID so business ID will completed from this business. ID and then save it now obviously once you make the change over here it will have everywhere let's open this user and boom see it's redirected to the login screen because we did not sign in to our application right now let's sign into to our application and now I just sign in and if you see now I able to see my profile name let's go to the user now and and boom I am able to access this page called business detail okay so this is how you can protect your page by accessing from unauthorized user so guys I hope you understand how we beautifully implemented this uh page protection with the help of next o use session okay so use sessions with the help of use session we we get the status and whether the status is authenticated or not authenticated depends on that one we just add the our logic now it's time to f a business details depends on the business ID so we already have the business ID in this uh URL path and if I go to this High graph API playground okay let's add a new query now in this case we need to f a business list okay if you see we have the business list and business lists with a s now obviously we have the ID so we are uh we can select this business list with the ID and then obviously once we provide the ID we can get the result so select the all the fields which you need so for example about address obviously I need a category so I will select the category name the contact person we select okay the email then ID uh name and the image URL okay I think that's all now let's run this and if you see you will get nothing because we did not provide any ID let's provide this particular ID okay to this inside the ID field and now run this query and if you see boom we got the data perfect now let's copy this query I will rename this query to uh get business by ID every time let's try to give some meaningful name so that uh even though you if you came after 3 4 months and open this code you will get to know what you return now inside the API playground or sorry inside the global API let's add a new endpoint constant get business by ID here obviously we'll accept the ID like this then constant query is equal to gql tag and paste the query now obviously whatever ID you are passing to this method you have to replace it like here so that whatever the ID because ID can be anything right now copy this get business by ID make sure to export it and don't forget to make a request and save it now once you made this uh da with this API Endo let's go to our Details page now inside here maybe after this one I'm going to add a new method called constant get business by ID inside that we'll call that method called get business by ID and then obviously we need to get a business ID right so we have to get with the parms okay and obviously we know that in parms we have the business ID so parms dot business ID okay so this is the ID whatever the folder name you gave it here you have to make sure that that's what you adding then and then the response now conso the response so that you will get to know whether you are getting the data or not and then call this method inside the use effect now you have to call this method whenever the params value are available so that's the reason I passed the params inside this array and then uh make sure to execute only when the parents value is available let's save this one let's go to your application refresh the screen go to this inspect panel and it's saying that render more hook than during the previous render okay this error is came because let me go back here because if you see right we rendering this particular uh uh status we are checking that right and it's a every time because every instance is get executed right and it's saying that you are executing a lot of time so what you can do you can create one use effect okay and this use effect will check uh whether is authenticated or not okay so for that one I'm going to create one method called constant check user Au and then I will just paste this all of this code okay see simple very uh easy to understand and then then this call this method over here okay no rocket science I will just make sure to keep this along with this use effect and then save it now if you see the error is gone let's see the console and boom we got the result so inside the business list we are getting only the business list of that given user ID sorry business details of that given user ID okay now in order to access this all the fields you have to write response do business list okay perfect now let's save that in one state we'll say constant business comma set business is equal to use State and over here we just say set business simple let's save this one and then obviously we need to show a couple of things now let me show you how will be a prototype will be okay so if you see once user click on any um business it will redirect to this business detail screen where on the top section we have this business uh basic information okay me bring this complete one then we have the description and the gallery and the last we have the similar business belong to that particular category okay so these three component we have to create it so that it will then we will combine together to build this detail screen so let's go back to our application first thing I'm going to do is to create a new folder inside the details folder and we can call it as a components so all the components related to this detail screen we'll keep in this folder now inside that one we'll create a first file we can call it as a um business info. jsx add the default template another company we will create for the business description. jsx add the default template and the last will create for the suggested business list. jsx add the default template and let's save it now we have we have all this uh component ready now what we can do uh first we'll import that component so inside the D I will write class name padding y let me close this tab to it okay and let me add that component as well so business info okay so business info is showing on the screen now let me bring this now when the uh there's on the LGE or um more than medium or large screen we will show padding y to 20 okay padding X to 10 and when the screen size is medium or larger we say padding X to 36 okay if I increase size this is how it looks that's good perfect now let's go to this okay make sure to send the business information so I will say business of business and let's go to the business information make sure to accept that props as business and inside the business information let's start to implement so first thing let's add image from the next SL image The Source here we'll say business dot images obviously we need to show first image okay that's the reason I'm showing images of URL and then o not close but here we need to go alt tag all tag I will give like business name business dot name and width will give 150 height you 200 for now let's see and save it see perfect now make sure uh once you have the business then only show this as well okay now once you define this one let's add a class name let's add a rounded corner to be full then let's save this one I will make height of 150 so width and height will be similar and make sure to object cover okay so it will not get stretch perfect after that one let's add uh one de and this D you hold the uh other information okay so if you see let me open it so this particular information cleaning house cleaning okay on the right hand side so let's define a de and inside this one I'm going to add um the category right so h2 tag inside the S2 tag I'm saying business dot category do name perfect now we need everything on the right hand side so for this one I'm going to add a class name and we'll say um Flex gap of four and item to be in the center now here I will say class name We'll add a text of primary background purple of maybe um let's say 100 and we make grounded full okay this is how it looks see now let's give some padding X so we'll padding of one padding X to two and also make sure to make text large perfect after this one uh I'm going to add the business name so another h2 tag for business do name so here I'm going to add class name text of 40 pixel and make font B perfect now if you see this getting uh stretch out okay so what you can do for this de you can add class name add a flex add a flex column and then make item to be Baseline perfect you can give padding X2 three perfect then we need to add address so we'll say business. address and for that address I'm going to add an icon called map pin something like this see we'll make uh as a flex and gap of two so it will be in the one line and then text we'll say large also we'll change the color to text Gray 500 and the last we're going to show the image oh sorry email S2 so we'll say o business. email so for that one as well I'm going to add a class name we'll make it Flex gap of two because we want to add the um icon called mail then we'll make text large and then text gra 500 perfect now for this fleak I'm going to give some Gap so you gap of three perfect so it look little bit clear now now here we need to make sure one more important thing so if I increase the screen size and if I go to this mobile view okay if I go to this mobile view make sure to refresh it once okay so okay so if you see one we got one error that it's saying that image is not um the reading image not getting sorry is getting undefined right because uh it might have a delay to get the details so let's try to add a business like this and let's see so still we have this error okay so what you can do you can add uh option like business uh maybe here you can only add business. name is available it means we have proper data right if I try to refresh it now see there is called now one more important thing I want to tell you here on the mobile view it's going out of screen see if you on the I refresh it it's going out of screen so what you can do uh here if you remember let me go back we added the flak here right instead of adding fak you can add the fleak on the when the screen size is medium okay but when the screen size is smaller then you don't need to add if I increase screen size see okay now obviously here you need to go uh it'll give margin top maybe you can give margin top to here only two like this okay and if I increase screen size this is how it looks on the smaller screen this is how it looks okay you can add this um margin top when the screen size uh when the screen size is smaller maybe you can add four and when the screen size is smaller don't add any margin perfect okay so this is you need to take care of when the screen size is uh for the smaller device see that's look good now let's implement the other section so inside this after this uh email and all I'm going to wrap this inside one more D okay so this particular section I'm going to wrap again and now inside the another D I'm going to add one D and we can call inside that we add button inside that we'll add share button okay so from this Lucid SL react and then save it perfect I'm going to add a class name we add a flex Flex column and we'll add a gap of five and make sure to item to be in the center because I want to add some more information so here I'm going to add h2 tag inside that I'm going to add a user icon oops and then we'll say business do contact person and obviously we have to make this as a flex gap of two text extra large and text I will choose the primary color perfect another thing um I will going to add another h2 tag but in this case I'm want to change this text to gray 500 and here I'm going to write some uh hard coded message SL available 8 a.m. to 10 p.m. okay some kind of message if I increase the screen size this is how it looks for now but what you need to do now the DU which we rap it here you have to add it class name make it Flex justify between and item to be in the center if I increase the screen size see this is how it looks uh obviously we need to uh when mean we need to show on the most right hand side mean to the right so what you need to do uh I think we need to Mark the width as a full so let's try to mark this width as a full let's see how it looks perfect now it look good and obviously if you see that this is not align uh correctly so instead of item to be in the center I'm going to add item to be in the end and if I increase screen side this see this is how it looks perfect oh I don't know why it's not working now uh whenever the on the smaller screen right at least either we uh what you say uh hide this one or we can bring to the bottom okay it's up to you but right right now we'll keep as it is and this look good to me only thing okay let's change this icon that's not correct icon for the time so here I'm going to add a clock icon now that's good next we going to add a description okay so it's very straightforward so for that one let's add a new com uh sorry we already have the component called business description let's add that component after the business info so over here I'm going to add that one so we'll say business info and save it now right so we have one canot property of undefined in business info make sure to let's see now see okay yeah perfect so make sure to add this one because as I say right business don't have it will take some time to fade the data that's why now inside the business info right we also need to show the suggest list right so at least you can add a grid over here okay so inside One D I'm going to add two more de one for the business info and one for the business suggestion ins and I will divide the screen say G cre column I'm going to add a four column okay so out of this four column uh three column I will assign to um the description okay so four column I will add it let's save this one let's add a class name and G column of three and one for that one so I'm just writing business so suggestion list maybe suggestion business list perfect okay if I increase the screen size so if you see right now I'm getting this suggestion business list I don't know why okay business info is getting two times just need to business description perfect now if I increase screen size this is how it looks obviously uh I have to make sure okay this need to be column span actually my mistake so column span three because we want to assign three whenever the screen size is smaller I'm not going to show the suggested bus business list so here I'm going to add hidden and when the screen size is medium then I'm going to add a block perfect now uh for this one I'm going to add margin top to8 and that's good to me now send the business information so here I'm going to add a business business is equal to and same thing for the business list as well let's first install uh sorry implement the business description here let's add a business oh sorry uh here now uh inside the business description first thing uh let's add h2 tag we say description let add a class name here we'll say font bold text of 25 pixel oops margin top to 10 and when the screen size is medium and that's fine I think um let's see margin top to 10 we don't need it if I increase the screen size okay so what we can do when screen size is let's add more margin actually I want to add more margin so here only I add more margin okay I think perfect that's fine now 16 now if I go here uh I'm not going to add any margin because we already added the description text is showing that's good now I'm going to add a paragraph and inside that we need to show business information so it will be inside about field see it's showing on the screen right now if you see it's still giving some space uh to the business list because we Mark the column span three okay so what we can do we can mark this column span three only when the screen size is medium okay and uh and if the screen size is large or smaller we can make columns pan 4 perfect now for this one let's add a class name We'll add a margin top to four then text large okay and we text gray color little bit maybe 600 okay and this is how it looks obviously we have S business list later on but right now this is simple business description we are showing that's look good to me next we not to we need to show the gallery okay the images of the given businesses so I'm going to add uh tag with the gallery I'm going to copy the same uh styling and if you see the gallery is showing I'm going to margin top to8 and now we need to iterate the business images so if I go back to high graph and inside the API playground where we run this query right so if you see we have the images okay and images contain a list of image see okay so obviously we can iterate this images let's go back again and here I'm going to say business. name is available then only execute this one and then inside the DU tag I'm going to add a business do images uh map comma we'll say item comma index let's add a du actually we don't need add D let's add image only it add a source for that one I'm going to item. URL UK key as a index all tag as a uh image width let's give maximum width and height of 200 and class name will make rounded large and if you see perfect we got the data now put the grid for that one so class name we say grid grid call two when the screen size is smaller when the screen size is medium or larger we'll make grid up grid column 3 and the wind screen size is larger than that we make gr column 4 also we'll give some Gap so gap of uh five margin top to maybe five if I increase screen size you'll see you'll get the four uh images or let's say three only okay so yeah so we'll get some bigger size perfect okay now we have this image gallery I think four is much better for the larger screen perfect uh I think that's all for this one okay uh now one more thing we need to add is for the book appointment section okay but that we'll add in suggestion list uh section but but I hope you understand this one how beautifully implemented the description and the gallery section as well now let's time to get or add the suggestion uh business list it's very straightforward first let's accept it as a business which we pass it from the parent component and here if you remember right uh we will F the suggestion business list depends on the category okay and now we already have the category in the business so from that one we can f she but before that I'm going to I want to add a button called book appointment so here inside the DU I'm going to add one button for that button I'm going to add a icon so here we'll say notebook pin icon and then we'll say book appointment okay if you see right now you not be able to see see it on the screen but when I increase screen size you will see it on the screen okay obviously we going to show the book appointment don't worry I'm going to tell you uh later on how can we show it now here I'm going to add a class name make it Flex gap of two and withd I will make it full so this is how it looks also on the uh here I add a class name we'll say padding X to 10 okay oh I think not to add padding X I will just add padding left to 10 okay so it will be Aline in one line perfect next as I say uh we need to fet the business from the category we we already have the uh API endpoint for that one and the method as well I will just copy it okay so inside the category page. jsx we have that method okay see the G business list by category I will copy everything as it is I'll paste it here make sure to import the use State because we just copied it the use effect as well we don't need a parents now in this case because we are getting the category name from the business and then make sure to import Global API and here now we'll just use business do category. name okay and we'll execute this get business Le whenever the business information is available okay and let's save this one perfect now we have the business uh I will say Okay business list that's correct now here I'm going to uh add suggestion business list so here what I'm going to do I'm going to add one S2 tag here it will say uh similar business so obviously I need to check like this okay every time so similar business then let's add a styling so class name we'll say font bold text large and margin bottom to three let's see that's good uh let's add margin top to three perfect then we need to iterate the business list I'm going to add one de inside that we'll say business list uh and and and business list dot map say business okay so here okay that's fine business comma index and inside that let's add one D images source so inside that we have business image of zero. Ur So Okay obviously we need to give width and height we say Al tag with a business name width width of 80 and height of 8 let's see how it looks so it's saying that okay canot read property of undefined reading a name okay so over here let's try to add let's see and if I increase the screen size and if you see we got the business uh images that's good now let's add a class name so class name We'll add around corner to be large then object cover okay and after that I'm going to add one du so for that du let add h2 tag for the business name say business dot name and one for the contact person and one for the address so for this name I'm going to add a class name we'll make font bold for this one I'm going to add text primary and for this one I'm going to add text gr if I increase the screen size this is how it looks let bring everything in one line so for this image I'm going to add class name as a flex and then then gap of two so it's need to be deep yeah if I increase screen size so this is how it looks obviously we need to give some Gap and all so we K the Gap over here let's see yeah that's good let's add class name for this one and we add Maring bottom to not here actually over here only we need to add margin bottom to four maybe and now this is look good to me now here let's give margin similar for similar business we going to give margin bottom to three as well okay and now we have beautiful the suggestion business list on the right hand side okay now for this one on we can add on how effect Okay so for this do I'm going to add a class name on how we add border we add a border of primary let's see how it looks see oh we added for all we don't want it here actually then we want for this inner dip obviously uh we have to make this rounded large padding to two see perfect also uh we'll make this cursor pointer and on how I'm going to add a shadow media perfect okay we have this beautiful um business uh similar business list right now what we can do once you a click on the business right we again navigate to the same page but obviously with a different different ID so for this business list I'm going to add a link and here as well I'm going to add a link and we'll add H reference but in this case slash details and then slash business ID so business. ID Let's test this out okay so obviously by mystically we add the link from the Lucid react I think yeah we need to add a link from the next link if I click on the washing and cloth see it jumped to the washing cloth okay perfect that's it means it's working now as I say we we decrease the screen size see uh that booking appointment button is gone and because we hide that one right so instead of that one instead of hiding the book appointment may we will just hide the similar business uh section so uh over here if the screen size is uh smaller we'll hide this one and if the screen size is medium or larger we'll block it and go to the page we'll remove this one and save it and if I increase screen size see it's it's not showing the similar business but if I hide it you will see oh it's still showing let me check okay so actually we are heading only the text so let's make sure to wrap in One D let add a class name I will add it here and then I will wrap this inside this D perfect now if you see it's gone obviously this book appointment is not look good right so here if you see this book up is coming down so what we can do for this de right we have the column span three here we'll just say order last okay so when the screen size is model we'll say order last and when the screen size is medium we'll say oops order first okay so what it will do if you see on the smaller screen it will show the first uh D or first second column as a first one but if I increase screen size they is showing as expected but if you see here the book open button is not showing correctly okay so what we can do uh right now we assign the four column instead of that we assign the three column total and two column for this description and now if I increase screen size see perfect and also for this button so let's go to this business suggestion list and we have this button right so we added margin left to 10 only when the screen size is medium and now we have the proper book appointment button if I increase size this is it looks perfect so that's all for this particular section that we beautifully designed this uh business detail screen and it's completely responsive so that's all for this particular section now we understand how we beautifully uh implement this business detail screen and is completely responsive so guys uh if you have any question on this particular section let me know in the comment section and next what we are going to do we are going to add a book appointment as uh logic where user can select the date from the calendar and then after selecting the time slot he can able to book an appointment and then that appointment information we will store in our database now it's time to implement the book appointment um section where you just click on this book appointment and then we are going to show a a side uh bar or we can call it as a sheet and and from that one we can um book the appointment so this is how it looks okay so for example user click on this book appointment and then it will navigate or not navigate but it will show this kind of side uh sheet okay which has the calendar and the time slot so for that one we need to implement the one component from the shat here which is called sheet okay if I click on this sheet this is how the sheet will work it will open on the right hand side so it's up to you in which direction you want to open also you can change the uh size okay so if you see you can open on the top you can open on the bottom side anything it's up to you and you can also change the size of the sheet so first thing let install this particular uh component so copy this npm command and then inside your console in vs code okay let's open the terminal and paste it here now once it install we need to implement that particular logic inside the button where we added the book appointment okay the book appointment button so let's go to that one so that's one we have inside this uh suggested business list where we have this book appointment button now let's import this command first so copy this import command paste it here and then uh what we can do we can add a new component for this side uh booking appointment section okay so inside the component folder we'll add a new file called booking section dot jsx add the default template and then save this one now you can add the children over here okay so what we can do um we will move this book appointment button so so let's add first that booking section and then inside that one I'm going to add this complete button okay like this now this will be the children okay this is a children of the booking section so you have to accept here as a children and then just render that children over here and let's save this one let's save this one and if I go back let's refresh the screen and if you see everything is as it is now let's import the sheet so let's import that all the statements then you have to import this uh example or basic Sheet example so let's add that one if I save this one you will see this open button on the screen if I go here see and this is how it opens right but we need to implement for this uh button so what you can do we can put this children because this children has the button right let's put it here and Mark it as a child let's save this one and if you if I click on this button see now on this button click this side sheet is opening that's perfectly working fine now I will just uh re rename these things so here I will say book and appointment or we can say Booker service something like that then um for the description I'm going to say select date and time slot to book an appointment instead of appointment we can call it as a service actually because we are actually booking the service and not the appointment let's save this one and if I click on this book appointment see this is how it looks that's looking perfectly fine now the first thing we need to do to is to add a calendar picker so in Shad we have the calendar picker so go to this um s and components and just search for the calendar and if you see this is how beautifully this calendar is showing so go to this code obviously first need to uh we need to install this one so copy this npm command and inside the terminal let me open the terminal here paste it and on once it installed you can just use it so let's import this command first then we have to import this calendar and this is the just current date okay so I will just write it here manually so here I will say constant date comma say date is equal to use State and by default we will show current date okay and if you see just just mention the date nothing else and now we can just import this particular component so this component will come over here so I going to add one VI inside that let's add h2 tag and here we'll just say select dat now this will this is the uh date picker correct so this is a date picker section and we going to add another de for the time slot picker now let's uh add this calendar component and let's save this one now if I go back to our application let's open it and boom we got this beautiful calendar now over here just add a class name as a flex make it Flex column and then we'll go a g of five and here we can say item Basel and yeah something like this now our calendar is ready if I select this see the selection color is also matching with our primary color because we already set the primary color for the given theme now once we have this particular now we need to add a slot now in order to add a slot I already have a code okay so I will just copy paste it here so you can get it from the source code okay so it's very simple um so I added this gate time and I'm making the slot okay manually so from 10 to 12 I'm making a 30 minute of slot like this and after 1 to 6 again 30 minute of slot make sure you'll change to am and then PM now this G time you have to call inside the user effect so here I'm going to call G time and also I will Define one state called time slot and say time slot is equal to use State and at the last okay once I have the time list uh everything is push into time list I'm just setting this time slot okay inside this time slot so you can take a screenshot of this one if you face any issue while implementing the this particular logic now let's save this one and then it's it's time to um iterate that time slot so here I'm just simply say time slot do map we say item comma index and inside that I'm going to add a button and this button has a key index and also I'm going to add a variant is equal to outline and inside that button I'm going to show the time so item do time let's save this one because we saved it as a Time SE and if I click on book appointment now see you got this beautiful time slot that's look good now uh for this one let's add a class name let's add a border then I will make uh rounded to be full we make padding X to two and Pad maybe padding to two and padding X to three something like this now let's go to this D and make class name make it grid so it will be in the one line so we say gri calls three right like this so I'm do gap of four and maybe three perfect now here here I want to give the uh h2 tag and it will say select time slop you class name uh margin top to five or maybe margin y to five so at the top and bottom it will give the margin and here I'm going to add a font to the both something like this same thing I'm going to add for this time as well so here going to add that one and here I will just say select date see oh we already have the date okay so I will remove this one I put it here so okay so margin top to five only so select it and select time slot now we have the time slot but right now if you see the time slot is going beyond the SC screen and I'm not able to scroll it so to fix this issue uh you just need to add a scroll you need to make this sheet as a scroll Lael okay so if you go to this sheet content give the class name to this sheet content and here you can just say overflow and you can say scroll let's try to go Auto so if you see if once you go Auto now you can able to scroll it perfect now the last thing we need to add is to add a button so I'm going to add instead of adding this button directly over here what I'm going to do if I go to this calendar okay and not calendar but if I go to the sheets component and go to some example okay something like this and if I click on this one see it's getting closed right because over here it has a button but that button is R inside the sheet footer and inside the sheet footer we have the sheet close Okay so that that will trigger to close the particular sheet so obviously you need to add that inside the sheet content container s sheet content so copy this sheet footer and obviously after sheet hiter I'm going to add that one and here I'm going to say book I'm going to remove this type of submit let's save this one and let's see how it looks okay we need to import the sheet footer obviously import the sheet footer and the sheet close as well now let's click book appointment scroll down and boom we got this beautiful button obviously you can give some margin so class name margin top 2 five oops not like this top to five and let's test this out now perfect I'm going to add one more button for to cancel so we have one error okay so obviously we need to wrap this we'll wrap in Du actually and let's see whether we are getting correctly perfect now for this Buton I'm going to add a class name and uh first we'll make this variant as outline and for this one I'm going to add class name make it flex and then gap of five perfect this variant you can make as you distractive distructive maybe it will come see okay now we have book button and the cancel button now obviously we need to disable this button until unless you just select the slot and all okay one more important thing once you just select any of this one right we need to change the color similar like this calendar so for this time slot uh I'm going to add a h method on a h and we'll change the background to primary and on H again we also change this text to Y okay now if I hover on this one see perfect also on the click of that one we need to save this value so we'll Define one state which will help us to save the uh selected time slot we say selected time comma set selected time is equal to your state like this and then on we will add on click method to this button so on click which we set so sorry select uh we we need to set selected time which is equal to item do time okay and then save it now obviously once user click on any of this slot now our the Valu is get save okay but we need to make sure that the selected value will be persistent me you can able to see that okay this particular slot get selected for that one we need to add a styling okay so it will be a dynamic styling so wrap this class name inside the curly Braes then this tag and let's remove this code and then add a condition so I will say selected time is matches with the item do time then I'm going to show background to be primary and take to be white if I save this one see if I click on this one see now 11 is selected if I select 230 230 is selected okay now once us just select all of this information then only we need to enable this button otherwise we have to disable it button okay if I just write disable see this button but will display like this okay but here we will add a condition if selected time and and date okay and obviously we need to do the oppos oh sorry the opposite of this one if it's not selected either of them is not selected then disable it so let me refresh to it once I think that's right okay so now let's see let's add a book appointment if you see the button is disabled select the time sorry date and it still is disabled because we did not select the slot but if I select the slot now it's get enabled and if I click book see it's get closed perfect now next thing what we need to do on the click of the uh save button right where we have this sorry book button we need to save the user information so we I will add on click method to this one we'll say save booking and this method we will Define over here we'll say constant save booking like this obviously we need to create an API for that one okay so let's go to our high graph okay and inside that inside content we have the booking uh what you say booking schema if I go to the schema let me show you inside that I'm storing username user Emil date time of the booking then the business I connected this particular booking to the business list okay and then status so this status uh is nothing but the progress status okay it has a book canceled and completed as three status so all of the schema you will find it in the description okay you can check it out so let's go to this content sorry API playground and let's add a new query now in this uh API playground instead of query we need to add the mutation okay so in order to add a mutation okay uh I don't know let me decrease the size here if I decrease size you will see there is some issue with their um UI but if you see you can change this to mutation okay and click this plus sign to add a mutation now I will just undo this one now and now you have mutation if if you see as as soon as you select the mutation this particular selection is get changed now you have option to create booking business list and everything so mutation is nothing but uh to make the crude operation crude in the sense to create operation to read update delete kind of thing so go here and click create booking so inside create booking you can add a booking status so booking status will be the book initially then the business list we need to connect the business list with the ID okay which we already have then we need to add a date time user email and the username and once everything is Sav we'll just return the ID of the new booking created whatever booking we created that ID it will return I will change this mutation name to book sorry uh create booking now your query is ready copy this query you can run this query if you want you just need to provide the ID the time and all this information okay now save or copy this query and then go back to your application inside the global API where we all where we store all our API endpoints here I'm going to create a new method we say create constant create new booking here add constant query or you can say mutation we'll say mutation query mutation query is equal to gql everything will be as it is nothing get changed okay and let's request this so make a request make this a sync and as you know we change this constant name to mutation query so just update this quy to mutation query now here if you see we updated means added lot of things okay we need to add ID so here I will accept the business ID then date comma time comma user email and then user name all all of the information we need to pass it here okay so we'll pass like this here business ID here date time then this will be a user email and then username okay and now save it make sure to export this create new booking so that we can use it now once this API inpoint created let's go back to C booking go to This Global API do create new booking and now we need to pass all of this information you'll see here first thing is business ID so we already have the business information let's see so oh so we don't have the business information we need to pass the business information over here so obviously uh we added this booking section from the suggestion suggested booking so from here we have the business information that business information will pass to this component called booking section so here I will pass uh business is equal to business and let's accept it here as a business okay now we will use this business information okay to get the id business. id ID sorry business. ID then we need a date which is the date we already have the time which is the selected time then username obviously we don't have username and user email so here you can Define the session okay so from the use session from the next or you'll get the booking information so we'll say data do user dot email okay and then username again data do user do name now we all we have all this information as this is Promised we'll make a then response and then we'll consult the response okay now if the response is successful we will show the toast message okay that booking is uh successful otherwise if there is any error we say error over here and then also we will show the toast message error toast message okay now if in order to add a toast message okay so if I go to uh shatu you will find this toast okay if I click on this button for example see this is toast message look like right but instead of toast they uh sh recently added new component called sonar okay it's act like a toast but much easier and if I click on this one see multiple click you will see the history of this to message as well okay and it's very easy to use so let's install this to message first so let's install this component by copying the npm command let's open the terminal and just paste it here now once you install right inside this app SL layout you need to add this toaster component okay so let's go to this app SL layout which is the very parent layout and over here maybe after hiter you can just add it and make sure to import this toaster from the sonar okay and let's save it now for in order to use it you just write like this same okay very simple so you can go to your uh the S sorry booking section and here you just say toast and if you see it's inputting from the sonar and you can write message book booking created okay okay you service book successfully okay and here we'll say toast error while creating booking and save it perfect now let's test this out if I go here click on book appointment I will select some date for example 9th select some time slot at 300 p.m. and then click book and if you see it's saying the service book successful okay let's see whether it actually saved or not so if I go to the high graph go to the content now I already have the previous lot of one because for that this particular backend views for the application as well right but if I go to this latest okay and if you see it is in the draft mode if I open this one you'll see at 9 of March for 3:00 I book this appointment but the issue is here it is in the draft mode it is not the published so that it just save it but you cannot when you want to F the data it will not f it because it is in the draft mode you will F the data you will get the data on the UI side only if it's published right then the question is how to publish it as soon as we uh created a record so for that one if I go to this API playground for The mutation you also have one option called publish okay you will see this publish booking publish business list and blah blah blah everything you create and anything or you can add if you insert anything inside the high graph database you have to make sure you will publish it okay so go here and just click on publish uh many bookings okay here you will say two and you want to change to publish and just return it something like count okay now copy this uh only these two three lines and make sure to add it inside your Global API okay so inside here after this curly Braes I will add it and boom now save it now if you try to create a booking let's go booking and select so for example 10th I will select a 10:00 now if I click book if you see the service book successfully showing on the screen but in this time it also get published automatically okay so if I go to the next page and if you see I book it for this one and it's saying it's published if I open this one at a 10:00 for 10th of March and it also published successful see the status has published okay now it's live that's how you can book the appointment okay now if you think uh if I click on this book appointment right it's still showing this previous selected value okay you can clear that out now if you see if I click on book appointment the previous value is still uh there right is persisting that previous value and that what we don't want if user want to book again some new appointment for some User it's still there right so to avoid that one for inside this use effect right where we have this booking section you can just set the set date as empty or just like this and then set selected time as empty okay some default value and save it now if I go to the booking appointment and boom right if I select some value close this one if I click on book appointment it's still showing but it will not show Once you books appointment something like that right so once you save it it will not uh show it to you or you can just put this inside this toore message as soon as you got the data something like this okay so guys uh uh I hope you understand how we book the appointment how we save it with the help of mutation okay and not only this but if you see inside the booking as we pass the business ID right and it automatically connect it with this particular business list because we had in the schema we had the reference of the business list okay and that is helpful when we want to face the data regarding the which of the uh slot is booked for the given date that's what we are going to uh see next that for example if you just book for the n9th of and for this particular slot for example 3:00 we need to tell uh user that okay this slot is already booked and we need to avoid of selection of this particular slot that's what we are going to see next so guys if you have any question let me know in the comment section so now as we know that right now we are just booking the slot without checking whether this slot is already booked or not okay so what we need to do once user try to book a slot we will check is that particular slot is already booked or not if it's already booked then we have to disable that particular slot or that block that slot if it's not not booked then user can book that slot okay so basically we need to get the business whenever you just select any date and along with this business ID we need to fade the data with that given uh booking slot okay so let's go to this API playground I'm going to add a new query and here I'm going to select the booking okay so inside the booking uh let's select the select the instead of bookings we need to select bookings okay here we'll select the we clause and inside the we Clause obviously we need to F it depends on the booking uh the business ID right so here I'm going to select the ID of the business then I'm going to select the date if I scroll down here we have the date okay so business lead and then date so here we will pass the business uh ID and then selected date and then it will return us the date which obviously we not required but obviously we need a time slot okay so here I'm going to say uh business booking book slot okay now copy this query go to your application uh sorry in vs code the project and inside the global API here we'll add a new query so constant we'll say um Business book slot a sync and then will say constant query is equal to gql this tag and then paste the query now we'll just make the request make sure to change this to request uh sorry query and then here we need to pass the business ID and the date so business ID comma date so here I'm going to add business ID and here I'm going to add the user selected date okay and then save it make sure to export this method and save it now let's go to this booking section and let me yeah and over here here I'm going to add a constant we'll say uh Business book slot method and it will call Global API do businessbook slot here we need to post the business ID which we already have from the business. ID and the date which is the selected date then and the response okay so let's consult the response uh just to see whether we are getting data now the important thing here we need to call this method whenever the date get changed because you just select this date or this date right and every time we need to call this method to get a latest information for that given date so I'm going to add us effect inside that use effect I'm going to pass a date okay whenever the date get changed this use effect will get execute and then I will call this business booking slot method and then save it okay now let's test this out make sure that we are getting in the console go to the console Let me refresh it once and go to the booking let me close this one and if I select the ninth for example okay we got one error that mutation C is not defined so at 128 oh where did that Global AP 128 let's go to Global API something we mismatch okay so this one oh so my bad so here need to be Master URL and this need to be a query now let's display let's select the second date or maybe ninth date and if you see for the nth we have the three booking see it has a date and the time okay for eight we don't have for three we don't have four and I don't think okay for 10 also we have the one slot see okay it means we are getting the data that's perfect now we need to save in one state okay so let's do that so first let's define a state so here I will say constant we say book slot comma set book slot is equal to use State and then here we'll just say set booked slot which is the response dot let me see what is the name which is the bookings maybe let's see go to the inspect panel to check the field name actually okay so if I select nine yeah bookings so this is the field name like this perfect let's save this one just to mention here get selected date Business book slot okay now we have the booking slot now here here is the magic we need to create one method constant it's slot book this method will check with that given particular slot is book or not okay very easy to uh write logic here we will return the result directly and here we'll check book slot. find we will find the item sorry find the time the item. time it matches with the time and this time we obviously pass it from to this particular method okay now this method we going to call uh over here okay so obviously we'll say disable this button if that slot is already booked here we'll just call this method like this and here we'll pass the type okay so what we did uh we pass the time to this is slot book and to this is slot book it will check whether inside this book book slot uh array we have that particular time is already there or not if it's there it will return some value if it's not it will return nothing let's save this one let check it out if I click n and boom if you see the 10th and three is already book right if I select 10 see the 10:00 is booked for 11 see nothing get booked okay let's test the tast this out in actual word for example if I select third okay means tomorrow and if I select the time called 12:00 a.m. and if I book this one it's saying the service book successful let's go here again to the book appointment and if you see in this time the selection gone now go to the third and boom the 12th is now disabled and you cannot select that one you can select others but you cannot select this one because this time is already booked by someone okay so that's how you guys uh you can U make sure that the booked slot will not other user cannot book that slot again okay so guys I hope you understand how we implemented that particular logic and feature very easily if you have any question let me know in the comment section the source code link is in the description now once user book the appointment user need to see the old or history of the booking appointment right so for that one if you go to this profile here we are giving option for my booking on the click of this my booking we need to open a new screen where we will show all the booking history okay so let's go to your application and over here let me close close all of this tab and then inside the routes folder we going to create a new route and here we'll call booking history or we'll say my booking okay simply inside that one let's add page. jsx file add the default template let's save this one make sure to change this P from my booking make sure to export it and here I will so change now if I go to this my/ my booking if I go from my booking you will see the page called my booking okay now obviously we need to add on the click of this my booking so let's go to this header and here we have this option called my booking so let me bring this down here I will change this to link from the I don't know whether we add the link or not we already have the link like this and then H reference to slash my booking let's save this one if I am at home let's go to the home let's go to this my booking and boom you are in the my booking page perfect next uh inside my booking right I'm going to add a tab okay so if I go to this shat CN UI there is one component called tabs where you'll see the type like this see okay so one type we will make it for the upcoming uh services and one is for the completed one or we can say book Services okay so let's first install it so copy this command and inside the terminal we'll just paste this command to install it and in order to use it let's make make first import the statements and this is a sample example so I will just put it here like this okay and then save it now if I go to this my booking you will see these two tabs okay so first thing let me make this form my document and here I'm going to add a class name we say margin y maybe 10 and we'll say mark margin X to 5 maybe but when the screen size is medium or larger we say margin X maybe sorry margin X I will keep more margin like 36 for example if I increase the size this is how it looks that's good also uh here I'm going to give the h2 tag we say my bookings We'll add a uh styling to this one so we'll say font bold text pixel and margin y to2 okay if I increase size this how it looks now we need to uh give this WID to the full screen so for this tab list I'm going to get class name say wait to be full and for um where is another tab okay for here as well I'm going to add here width to be full okay like this if I increase size this is how it looks but we want this on the left hand side right so we will just make this at the right you can just mention justify at the start for this taab list if I save this one this is how it looks on the bigger screen this is how it looks perfect now if you see depends on the selection this content get changed okay so I have to check it here so right now we have we need to make two TP one is for the book and another is for the completed okay this two tpe but along with that we have to make sure the value also change here we will say book here also I'm going to change completed and depends on the selection here also the content for the tab content we need to update the value okay so what it will do once you click on this book obviously we have the value called book and it will check the tab content with the same value and then it will show that data okay if I save it now see okay that's how it works now obviously we will create uh one component okay and that will uh help us to display the list of the booking appointment here I will remove this one now and let's create a new component so inside the my booking I'm going to add a new component inside that component let's I have create a new file called um booking history list. jsx add the default template and then make sure to add that booking list over here so sorry my bad booking history list like this and save it now we'll see booking history list now first thing we need to get uh the list of history of given user only for that user right so we have I have to create API endpoint for that one so we'll create a new query okay and if I go to this content right we have where we have this booking and if you open any booking right you will see that you have the username and username sorry user email already added right so with the help of user email you can f your all the bookings so let's go to this um API playground and here I'm going to add bookings okay here we have we have the we clouds and we will F only booking of the given user so just search for the uh field name call user email see okay and then it will return return a couple of data one is the business list so it will return return the name of the business the image also we want then we want the business name or maybe we can get the contact person of the okay so we'll say contact person address as well we want okay so this much information we we want for the business and then the date which we book and the time slot for that one okay and I think that's enough information we need now if I uh add some uh users email for example this is the user email and if I try to run this query you will see you got this all the booking list for that given user only okay now here we will say get user booking history copy this query go back to your vs code where we have the global our all the mpa endpoint inside the global API and here we'll create a new uh API query okay so here I'm going to add constant get user booking history is equal to constant query is equal to gql this tag and paste it here like this okay make sure to create make a request like this and then here we'll get the user email okay obviously we have to replace this user email like this okay and make sure to export this particular API endpoint we forgot to make this method as a sync and then save it so now let's go back to our application and here we'll create a method called constant get user booking history and then we'll just simply call Global API dot get um booking history here we need to pass user email do then response like this we just console the respon response here okay like this now obviously we need to get the user information so we know how to get it is equal to use session constant data is equal to use session and here we need to pass it user dot sorry uh data do user do email okay now we need to call this method so we call use using use effect and only when the data is available so here we'll say if data is available then only execute user get user booking history because we need this user's email okay if us email is not there obviously we not get the data now once this is ready we just write this doc right use to get user booking history perfect now we have this information let's save it and make sure that we are getting data so it's saying that we use the use effect we have to make this page as a use client so make this use client and now we are good now go to the inspect panel go to the console and boom we got this booking list of the given user only that's perfect next we need to uh store that uh all the list in one state okay so here we'll say con booking history that's need to be a state so booking history comma St booking history is equal to use State and where we say set booking history response dot let me check what is the field name which is the business it's just bookings okay and save it perfect now we have the booking history now what we need to do we need to pass this booking history to this booking history list but here is thing here we need to pass only booked one okay which is already booked and whatever the status is completed we need to change the status okay so one more important thing we need to get it from here is the status or there another way we can do it if the date is the old one then we will obviously we'll put that particular business uh sorry particular booking into the completed one so here is if you find one more thing right because in the application we format the date in a specific format but in this application we forgot to format date and we are saving as it is okay so you can format the date so it will be better actually okay so whenever we are storing the value we have to make sure that we are formatting the date so what we can do we will use this moment JS Library okay it's very uh easy to install but it's very powerful to format the date in any given format okay I will show you how so I'm just get going little bit back where we are storing uh the businesses okay so if I go to the suggestion business list inside the booking section if you know we are saving this booking list okay here so for the date okay so let me check this is the date uh where we are storing the data right that this date we'll just format this date so I will add moment okay this Library here we I'm going to pass this date okay and then I'm just format that date in a specific format for example if I want in specific format like this if you see this format the date month and then the year so same thing date which will be date month and then year okay like this and then save it now let's try to book it okay so go to the home open any uh Services let a book appointment if I want to book for the 4th of March I will book for the 10:00 let's clean this one and then click book night saying service book successful let's make sure that date is coming in the correct format so go to the content bookings go to the latest one which is this one and boom we got this perfect uh perfect format of the data okay but we have to also make sure that when we are comparing it right we'll compare in the same way so here if you see we have this business book okay each each slot book right I think uh wait just a second so when we are getting the here we need to pass a specific date so again here we need to format that date so moment dot so here uh we just say format and then same way so date month and then year okay make sure that you'll not get confused okay because when we are ping the slot we were passing the date okay but now we have to we are saving the date in specific format same way we have to P that date in that same specific format that's the way we are passing or we are formatting the date which we are going to pass to face the data let's save this one and just I will just make sure that everything is working fine so if I go to the book appointment for fourth okay okay let me refresh it once book appointment go to the fourth and yeah if you see now 10th is book perfect it's working now go back to my booking okay so here we have the book and completed so let's me close this one I hope you understand this one okay now here now let's go back to our uh history page again okay and inside here uh for now we'll just pass this booking history as it is so we'll say booking um history or maybe yeah booking history is equal to booking history okay now go to this booking history list and here we'll accept that as a booking history okay perfect now save this one and save this one now inside this booking history list we have the list here what I'm going to do just uh we say or we'll just iterate this value called booking history do map we'll say booking comma index like this and let's add a d here going I'm going to add a key as index and let's try to print the name or just try to print some information okay but before that let's go to the inspect panel because I want to show you something so over here here okay let me close this one and Let me refresh it once now we have these bookings now if you see inside this booking we have the date and time but to in order to face the business information inside that we have go to this business list okay so let's go to this um me do like this we'll say booking sl. business list Dot name if I save this one and okay nothing we are not getting anything wow so we have this booking I don't know why we did not get anything over okay now okay I did not select this book by default okay so that we also fix that one so by default we need to set the tab so if you see right now default value is account but we updated updated it right so here I will say book now okay and now if you see we got this business name as well that's good now let's um implement or just uh Implement some logic over here to display the data in proper way so first thing I'm going to add a image here I Source close the tag and here we'll say booking do business list do image of zero. URL here make sure it's optional like if it's not there it will not fail right that's the reason I kept that one I'm going to go all tag as image for now let's go a width of maybe 80 and height of 80 let's save this one now we might get error that the it's not reading the property image zero so here I'm going to add or here we can add some condition if uh um booking dot booking list maybe sorry business list okay my bad do name is there at least okay let's save this one let's test this out okay still we have the issue it's need to be images I think yeah that's right perfect now um I will increase the size to 120 and 120 here perfect now let's add a class name make grounded to be large and then after that I'm going to add one D to add the information okay so first information I'm going to add is the name of the business this information I'm going to add here then after that one I'm going to add a contact person contact person uh for that contact person I'm going to add a user icon then another one for the address o sorry let's copy paste this one for the address and here I see map pin let's save this one now we have the address as well let's make sure to add a class name make it Flex gap of two for this one class name Flex gap of two oops gap of two and then for this one we add a class name make it Flex Flex column okay and for this particular deal I want to add a class name make it Flex gap of four perfect okay and here I'm going to add gap of two now for this name I'm going to add a class name we'll say font bold here I'm going to change to text primary the contact person and here I will say text three find it perfect also we'll give some um border to this one then we'll make a rounded Corner we'll give padding of four okay and we'll give margin bottom to five sorry margin bottom to five like this okay if I increase the screen size this is how it looks and this is how it looks okay that look good to me but uh instead of that one what we can do we can change this to grid GD column two something like this okay and I'm going to do gap of two as well if I increase the size so this is how it looks okay but when the screen size is smaller I'm going to show only one grid so grid column one see like this if I increase the screen size on the bigger screen it will look like this that's good then we also need to show uh the booking time and appointment so same thing I'm going to copy here but in this case me bring this down we'll say calendar icon and here I'm going to add the date and here I'm going to say service appointment Service uh appointment on not appointment but book at not at I don't know what to say uh service on I will say Okay service on and date that I'm going to add it here like this obviously if you see if not formatting correctly actually we format it correctly but later on uh this is the previous one okay so just ignore that one but this is the latest one if you see over here okay and then uh I'm going to change this color class name we'll say say text primary okay same thing I'm going to add for the uh the address P perfect here I'm going to change this pan to let's see I don't know class name and text black perfect same thing I'm going to copy this S2 tag for the type so here I'm going to change this to clock and then here I'm going to say time perfect if you see this uh image gets stretch okay so for this image I'm going to say object cover like this if I increase the screen size this is how it looks on the smaller screen obviously you know this is how it looks on the smaller screen okay if you think that you are getting okay because this is the latest one that we book right and it's coming down so you can just order your response so if I go to this API playground here you have option to order the data if you see we have this order by and you can say just published at this descending order okay so after the where I will just add this um option as well inside the global API query so this is the one right perfect so let me check yeah after this one I will just add it save this one if I go back if you see now latest one it cames at the top okay perfect right now everything is displaying on the screen right and I will clean this data in a moment but here is Thing Once uh the date is pass it right we need to show it inside this comp completed uh tab now here if you see I just clean out the data okay and now we have this uh old data right now I'm recording on the 2nd March yes and then this is the uh future data it's on 9th Mars okay means is yet to come so obviously this is already completed we need to show in inside this completed uh tab so let's go back to our application and inside this booking history list not history list actually but let's go back to this page .js where we F fing this data oh my God yeah so over here let me bring uh increase the screen size so here over here we going to create a new method called constant uh filter data and this will actually filter our data here I'm going to say type okay what type means whether it's a book one or is completed one okay and obviously this method I'm going to call on this particular mean obviously I'm going to pass this filter data not filter data but here I'm going to pass like this and it will return some value but here I'm I'm going to say type book and same thing obviously booking is relased I'm also copy same thing over here but instead of this book I'm going to say completed okay now the logic is quite simple we have to return return constant result is equal to booking history Dot filter okay now we have to filter with the item for example we have the item inside the item we have the uh um we need to get the date okay so what we can write for example uh obviously we need to format it first in uh given format so we'll say moment we'll pass the item do date do format so actually uh wait let me think little bit okay so here we don't need to uh need to format it actually okay uh we will format but we'll just say new date and inside that we will add the item. okay but uh we have to write one condition if type is equal to equal to uh book okay if type is book then the condition is new date is greater than equal to uh new date okay if that is condition in maing then only store that data otherwise we say new date item. date less than new date I hopefully it will work okay and then make sure to return the result okay now we already passed the data everything looks good to me let's go back to our application and boom wow we got the data so if you see for the book we have the nine bars if I go to this completed oh incompleted we don't have anything Let me refresh it once yeah I don't think so we have anything okay let me go back to our application and let me check what we miss it here oh we are not getting data because here we mismatch the spelling so make it date let's save it go back to our application and check completed wow see completed this is old one book this is the new one or upcoming one okay so guys that's how we can able to face the booking uh data and completed data okay if you have any question let me know in the comment SE section so now it's time to deploy our application into the production so that you can share this application with your friends and family so very first thing obviously we are going to use worel to deploy our application but before that you need to create a repository inside the GitHub okay so go to the github.com and click on new repo so here you can give the repository name I will give home service app web okay now you can make it public or private and then click create REO once you create the repo here you need to set the remote origin okay so copy this line then go back okay go back to our vs code and inside the terminal first thing you need to do is to initialize the git okay once you initialize the git paste this command to add a remote origin then do git add then commit the code okay so we say uh initial commit and final code then once you commit it then push that code okay so okay we have issue yeah now push this code okay so obviously first time you are pushing so you have to use this command to push the code and now if you see your code is pushed let's see the repo let's refresh the repository and boom your code is here now now let's go to worel and if you don't know about the worel worel is very uh powerful service where you can deploy your uh web applications okay so what if you don't have an account create a new account on verel and then once you land on this dashboard you have option to add a new project then if you have GitHub repo or git lab or bit bucket make sure to connect that reposit repository and then you will see your latest push uh repo changes over here so in this case if you see we have the uh repo called Home Service web app click import and then you can give the project name you can change it if you want here you have the some build tools en environment variables you can add it now obviously we have some environment variable so if I go back to EnV file so got env. loal file these are the variable we need to add one is the master URL key so make sure to add that one and copy this key and paste it here and click add and that's all okay if you have more key you can just add it here and then click deploy now it will take some few or couple of minutes to deploy your application so I will pause the video and boom our application is deployed and if you see this is a preview and you can obviously continue to dashboard if I click on this preview and boom your application is live now and you will see it here if you see the domain now it's saying Home Service app web okay and I hope you understand how we beautifully deploy our application on the versal okay and just for the information the versal is completely free now you can you want connect the domain your own domain as well it's up to you how you want to use it so guys if you have any question question let me know in the comment section so guys that's all for this particular course I hope you enjoy this course and if you really like this course press like button now if you know that we learn a lot of different thing as you know that we beautifully designed this particular Landing screen where we use the high graph to fet all of our data and to store all of our data with the help of graphql we learn how we can and phas data and displayed on the screen also we learn mutation to create update on all the information to the database now if you see on the screen that we learn how to F how we F this beautiful all the categories then we design uh this cards for to show the businesses also you can open any category beautifully Design This one and as you know that this complete application we made it responsive and mobile friendly now we have this beautiful section we learn how we use or reuse the component in a different uh section so that we do not have to create a new component for each of the page we also learn how to design a complete web application and along with that one we also learn how we can book the appointment we also learn how to implement a different different component the UI component in our application also we with the help of disc scope we also added the authentication in our application very simly with the help of next and this scope we added this complete authentication to our place not only that one but we also learn how to protect our page from the unauthorized user to access a certain pages so guys uh that's all for this particular video I hope you enjoyed and if you did not subscribe to my Channel please do subscribe press the notification Bell icon so that you will not miss any updates from me so guys see you in the next video keep coding and keep smiling

Channel: TubeGuruji

Views: 15,959

Keywords: Build & Deploy Full Stack Next.js Home Service App using React.js, Build and Deploy Nextjs React App, NextJs Tailwindcss HyGraph, next 13 tutorial

Id: YefD_gj3svM

Length: 249min 48sec (14988 seconds)

Published: Sun Mar 03 2024