Build & Deploy Next.js Full Stack App | React.Js, Strapi, Tailwind | Doctor Appointment Booking App

hey there and welcome back to tube guruji channel in one of my last video we build the doctor and hospital booking application using the react NAU for the Android and iOS devices in this video we going to develop the same application but for the web with the help of nextjs and then react obviously we're going to use a lot of technology and we going to learn a lot of different Services which we are going to use in this particular course let me walk through the application first and then we talk about the technology in detail if you see on the uh screen here we have this beautiful landing page where you will see this header and then hero section if you scroll down you will search the option to search the doctors depends on the category and you will see this beautiful design uh we added and obviously with the help of tailin CSS you will learn in this course how beautifully uh we can Implement and design the UI now after that we have this list of popular doctors and everything we are fetching from the server for that one we are going to use strappy as our back end and with the help of rest API we want to connect our web application with the strappy so in this course obviously we want to learn how we can integrate our strappy application with the nextjs application now let's open any of this particular category and if you see how beautifully we going to add the skeleton loading effect okay now on the left hand side you will see the all the list of category and the category which we selected so in this case we select this this dentist and automatically it get selected over here as well now you can even uh jump to any other category as well and then you can uh book for the doctor okay now if you see on the right hand side we have this profile who log to this application obviously in order to book the appointment you need to authenticate inside this application first so for the authentication we are going to use kind authentication where you can implement the all the different kind of social authentication email authentication and lot of things and in this course I'm going to teach you from the scratch even though you don't know anything now let's book The any of the doctor let's book up this particular doctor and if you see once you book it you will land on this beautiful detail screen where you will find all the details on the right hand side you will see the other suggestions doctor list as well Okay now click on book appointment and boom you will see this beautiful dialogue to select the date and the time slot now click on any of this particular date which you want to select the appointment or get the appointment select the time slot if you you can write the sample note over here if you want to write it and then click submit once you click submit if you see we got this beautiful TOS message saying booking confirmation done okay now let's close this one and not only this but we also sending an email with the help of uh resent and react email here you will see this email that you are you just book the appointment on this date and on this particular time so cool right now once you book this appointment you have you can check your appointment Anytime by logging to this application just go here just click on my booking and boom you will see all the appointment we just uh book for okay now if you don't want to uh um book this appointment or you want to cancel the appointment you have option to cancel any of this appointment okay if I click cancel it will ask you first do you really want to cancel this appointment and if you say yes it will cancel this appointment and you get get this beautiful toast message saying the booking deleted successfully or booking canceled successfully right now you have obviously you have expired or previous uh booking list as well which is already done okay so everything you going to learn in this course from the scratch and obviously we're going to use a Shad CN along with the tailin CSS then to send an email we going to use react resend email to send an email to any other any users then for the back end we going to use stripe CMS uh to store our all our data on MySQL and obviously with the help of rest API we want to connect our nextjs application with the stripy and then for the authentication we going to use most popular kind authentication and guys even though if you don't know anything don't worry because in this course we're going to learn everything from the basic so without doing any further delay subscribe to my channel and if you are new and did not press the notification Bell icon just press this icon so that you will get a latest update from me also if you really like this video guys press like button and we'll start now and before moving forward one more last important thing that this application is completely responsive okay now if you see as soon as I change this uh size of the screen it automatically change the layout sa okay and this application I'm going to tell you how we can make this complete application response view on mobile view it look different on Tab it look different on big screen it look different and that's how the response application will work okay so guys let's begin so in order to create a react application we are going to use nextjs so nextjs is one of the best react framework for the web applications and if you don't know about the njs so don't worry because uh in this particular course we going to learn NE JS as well okay so in order to create a project uh with the ne JS you will see this command called npx create next app at latest at latest means you will get create a latest version of the nextjs which is 14.1 so basically we are installing nextjs 14 so let's go to the folder where you want to create a project and open the terminal at that folder once you open this folder sorry terminal uh paste the command which you copied and click enter it will ask you the project name so give the uh proper project name so in this case I'm going to give doctor appointment booking web app okay and then click enter now it will ask you some of the question uh for so in this case it asking would you like to use typescript so uh we are not going to use typescript in this particular U course so I will select no uh for the es link we say no now it will ask you to do you want to install T CSS so say yes because we are going to use telin CSS and with this command actually it will automatically install TN CS for you so you don't need to install TN CS manually okay uh will you like to use SCE directory say no and for app router obviously we want app router so it will taking care of the all the configuration for the routing purpose okay that we are going to learn in this in this course later say yes and then do you want to customize default allies it's up to you I will select no and then if you see it installing some of the dependency like react react Dom and next and some de dependency for T CSS like post CSS T CSS and if you see now our application is get created okay now close this window and then open the vs code inside the vs code locate the folder where you created this uh project so in this case it is in the side projects nextjs and this uh Dr appointment booking okay so it will say do you want trust this files and folders yes and if you see right now on the left hand side you will see a bunch of folders and file so let's walk through one by one the first folder which is app folder and which is the uh where uh the basic folder where we are going to write our all the code okay so right now if you see it has a global. CSS which contain the global styling which is added inside here okay then we have layout. Js file which act as a uh holder for the application okay so it means whenever you uh render any page okay or any screen it will come to this as a children and it will render inside this body tag okay if you see this is simple HTML CSS and it it render this children okay it also has metadata this metadata will help us to add the CEO SEO sorry and this particular this is a font actually the inter is a font okay so later on this course I'm going to tell you how we can change the font as well now after that if you see we have this page.js file which is the default page of our application okay so once you run this application you'll get to know after that we have this node module folder this folder we going to we are not going to touch any time because this folder will contain whenever we install any packages that packages information will be inside this non module folder then we have this public folder public folder uh is used to store all all the images fonts whatever the assets you want to store okay and once you store inside this public folder you can directly access it without uh providing a complete path okay so next J will get to know okay you are looking in through this public folder okay so obviously I'm going to tell you later in this course then we have this next. config do MJS file where we can add a next related configuration uh uh information then we have package lock and packet. Json file so inside the package.json file where here we will find the name of the project the version to uh some script to run the application or to build the application okay some dependency which is installed for this particular project so in this case these are the three default dependency is installed and some de dependencies and then we have post css. config.js and then T.C config.js which contain a telin CSS related configuration now here is thing if you see inside the T.C config.js we have this uh content section where it provides some pages component app okay it means whatever the uh path is provided over here okay only in that folder or files the telin C is applicable okay if you're writing uh you are creating some folder newly new folder with a different name and you are trying to add a t CSS it will not work until and unless you will Define it explicitly here okay so if you're adding any XYZ uh folder you have to mention it here uh in this particular format okay so make sure but most of the time we are going to work inside this app folder only okay so we don't need to update this configuration but if you want to create any new folder and want to apply TN CSS in that particular folder then you need to have uh configured the T CSS over here okay and save it now let's run the application so here if you see we have this terminal option click on this terminal and click new terminal inside this uh the new terminal will open just type npm run Dev okay and it will run the application and now if you see it run the application on the port Local Host 3000 okay so if I open this port on the web browser and if You observe here this is locost 3,000 000 and it will open this default page okay let me bring this down like this okay now as I say early right inside the app folder we have this page.js F uh file which is the default page okay and if you see for example this is the text call next started get started by editing app SL page.js and this is what it return see okay like this now this is the all the basic and default code obviously we don't want it so what I'm going to do I will delete all of this code and then I will simply add one du okay and inside that du I'm going to add a h2 tag okay so this is the basic HTML I'm going to add here and here I will say uh subscribe to cube guruji so guys if you did not subscribe to my Channel please do subscribe and if I save it instantly if you see on the right hand side it's showing the text which we just type it here okay so this is very important thing whatever uh we are going to write inside this return it will be a simply a plain HTML tag okay but in order to render the data dynamically everything that going to in that one we are going to add a react template that I'm going to tell you later on in this particular course okay but you need to know the basic HTML now once you added this one right I sa and if you see on the right hand side there are some um background lines right let's remove that one so if I go to this global. CSS inside the root folder they added this background okay by default so I will remove this one and save it and boom the background whatever the background we are we were is there it's now gone now next let me close this tab now we are going to add a Shad CN okay so if you don't know about the Shad CN uh Shad CN is a one of the uh pop popular Library okay and which is based on the telin CSS the telin Cs is already there okay but if you don't know about the shat CN don't worry because I'm going to teach you about this Shad CN and how can you use in our your web application okay so let's go to this ui. shad cn.com and here you'll find this UHA homepage their landing page okay here uh go to this documentation and on the left hand side you will see the installation section where you will find a different framework where you can install this shaten so I will select the next JS and as we know that uh there are some few step obviously here okay we need to follow but as we you know that we already created this next application so we'll skip that this step the second step is to install the shadan so copy this um command and let me get back there like this and in inside the terminal okay I will add a new terminal and I'll paste it here and click it now it will ask do you want to proceed say yes and then it will ask you some of the options so in this case first is uh which tile do you like to there they have two style one is default and second is New York I will select the default one then uh you can uh select the base color so in this case we'll select the neutral then it will ask you to use CS is variable for colors so say yes and then it will add some of the files okay let's see what this file is get added okay so very important and first thing is this component folder okay so right now it's empty but I will tell you once we have some file in that one once we install some component from the session okay then we have Library folder ins set that we have utl folder if you see okay then after that there is is one more thing uh get updated which is the uh I think T.C config.js file okay so if you go to this T.C conf. CSS file if you see there are some uh colors get added okay it has a uh primary color secondary color okay and this color get added because we install the sad sh okay because of this sad sh uh some of the file get updated but don't worry this is uh the natur one okay it's not affecting anything okay now let's try to add some button okay or some component from the SN so here if I go to this component section you will find on the left hand side all these different different components right you have button you have the cards you have checkbox and everything let's click on button and this is the default button how it looks right so in order to add any component from the shat CN UI you have to install the this uh each of this component okay so for example if you want to add button I will copy this uh component uh command line and here I will paste it okay so one is installed let's go back and just copy this lineup command okay or you can go let me go back over here and after this I will just add a button okay and if you see now this button is getting added from this atate component /ui SL button okay and here I will say subscribe okay and save it now one more thing I want to tell you here as I told you right once we install this any of the component from San inside the component folder that component get added see button. jsx okay and here this is the default code get added you don't need to worry about this code if you don't know about that one don't worry okay but if you want to customize your own color schema or something like that then you can play around it now here I just save this button and if I go back to our application you will see this beautiful button see here you don't need to add any styling or anything like that it's already taken care by the Shaden UI okay now obviously right now for our application we have our own schema okay so in order to add or in order to change this primary color because if you see this primary color is little Blackish okay because we select the neutral one but you can add your own color schema so in order to change that one let's go to this tn. config.js and here you will see this primary color secondary color distructive and all right here you can change the default color for example if you want to change the color of this primary I will just remove and I will add some hash code for example hh0 D 7D FF and then save it okay and if you see immediately our subscribe buttons color get change okay now this is our primary default color throughout the application so guys uh that's all for this particular section I hope you understand how we uh created the next application then how we run the application then we set up with this shat C UI and then we successfully add a first shatan component in our application so that we can um start implementing our complete application further on okay so if you have any question any doubt let me know in the comment section and obviously the source code is completely free now okay so you can also access the source code as well so let me tell you about this eraser. application I am using this application from a long time to explain my user by drawing the diagram also side by side I also document all my work okay while drawing the diagram not only that but you can also collaborate with the other people okay in the same time so guys uh if you don't know about this eraser I will suggest go to this eraser doio and just sign up it's completely free so let's go back to our this beautiful eraser .io application where I created uh a bunch of documents here okay so if I go to this beautiful documentation you will find I can document I can have canas over here and not only that but I can do the documentation and the I can draw the diagram side by side okay so here you can select the diagram and you can add a diagram whatever you want you can add the flow chart and lot of things okay so moving back to our um all this point the section which are working on so first thing we already uh created this application we run the application and we install the sharn now our next section is uh to add the home screen so in that home screen we are going to add header hero section the search bar the category section the popular doctor list and the footer okay and later on obviously we going to extend this application further but this is our home screen which we are going to add in this particular section so let's go back to our application and over here I will just delete everything and save it now the first thing we need to do is to add the header okay now uh as you know that nextjs is very helpful for the routing purpose okay and if you want to create the route obviously I'm going to teach you later in this particular course okay but for now let's just understand one thing whenever you create any new folder or uh any folder right it will consider as a route okay if you create any folder inside this app folder okay but if you want to create a folder which you don't want to be add as a route you can just add with the uh the file name start with the underscore okay and then you can give the name of the file so in this case I give the name of the file as a components so let's write components okay and enter it now this particular folder will not consider as a route okay next just will understand okay you add add the underscore then this folder is not a a route routing okay or it will not uh new screen or something like that okay now what are the components we are going to uh use for this layout page page.js we'll keep it in inside this component folder okay now let's add a header first so we'll add the file name called header. jsx so jsx is stand for JavaScript XML okay now here you need to write a function okay export and blah blah blah blah right but I have one trick so in order to add the default template within a just two to three clicks I'm going to tell you one thing so here let's go to this vs code extensions okay and here you'll find this uh extension called es7 plus react snippet okay let me increase the size so this particular extension okay like this see so make sure to install this extension along with that there is another extension follow telin CSS intelligence so this will give you the uh suggestion when you are writing the CSS classes this is also very helpful okay so make sure this two extension you are added inside the vs code okay now let's go back to our application and now in order to add a default template for your react application just type RFC which is the which stand for react function export component click enter and boom you got the default template for your uh component okay now once you have this header component let's save this one and let's go to this layout. JS okay now why we are going to add in layout. JS because we want the header throughout the application okay and once we Define over here you can add it so I will add one D and inside that du I'm going to add a header and make sure that you added in uh you imported this component called header and let's copy this children inside this header after inside this du after the header and save it and now if you see on the right hand side you will see the text called header now over here let's start uh implementing the code for the header okay so obviously first thing we need to add is the uh logo okay so what I'm going to do I will go to this logo pm.com okay so this is just for the uh logo placeholder okay uh so just C click on it which you want to use it so in this case I use this one and then you can go back to your public folder okay here I'm going to create a new file and I can I will call it as a logo. SVG and copy the uh SVG uh code which you copied and save this one okay this is your logo now now in order to render the logo you will use image this image tag from this next SL image if you see okay in the tag inside that you have to provide the source so Source will be logo.svg and as I say very early right when you define um the assets or image font inside this public folder you don't need to provide a complete path you can write like this and then next year you will understand okay you are trying to access the assets or image or whatever right then you need to give Al Al tag here I will give logo then give the width so let's say width of 180 and then height of 80 okay and then save it let's go back to application if you see our logo is showing on the screen beautiful then we need to add the list of menu okay so what I'm going to do I will add one constant called menu inside that I will add a object okay and let's add add some of the um menus for example let's add id1 name I will add a home and then I will add a path okay like this I will just copy this one here I will say explore o sorry explore and then contact us okay so for now I will keep this as it is and save it now in order to iterate this this um menu right here you can just write first UL okay and here you can iterate that value right so menu do map inside that I will Define item comma index index will hold the value 0 1 2 3 depends on the number of item in that particular list and then the list Ali okay and here you can Define the name of the menu which is I do menu and save it and boom you will see the taste called home explore and contact us so beautiful right now obviously we need to style that one okay so let's bring everything in one line first so for this UL let's add a class name and make it as a flex see now it will be in the one line right now again I will give a gap of eight sorry gap of eight like this see okay and uh now let's bring everything in one line along with this logo so let me put this image and U in one du okay here I will add the class name comma Flex see okay now vertically we need to align it right so I I will say item to be in the center and then we will give a gap so I will give gap of 10 this logo and this menu okay and save it see like this now what I want to do whenever the screen size is smaller I want to hide this menu okay so for this UL right the UN unorder list I will say hidden uh when the screen size is smaller and when the screen size is medium or larger I can give it as a flex and then save it see but if I increase the size it will it will show it like this okay next we need to add a button okay so after after that de I will add the button okay now if you see we already added the button from this Shad right I will add that one and if you see this button uh import statements get added now here I will say get started and then save it and see the button is get added now here is thing right uh this button uh I added with this particular uh Shad CN right and just nothing you need to do actually right so whenever user is loging obviously we going to hide this button and we going to show the user profile icon and some other option as well obviously that will will add it later on once we add the authentication part inside this application okay now once we have this button let's bring in one line so I will add the class name for this um Master de so I add a flex then I will make item to be in the center and I want this button at the right position them at the rightmost position so I will just say justify between okay and then save it and if you see it went to the right hand side if I increase the size you'll see this structure like this okay now obviously look weird it's touching to the screen now what I'm going to do let me bring this down I will add a padding of four okay and it will look like this also I will add Shadow small so we see this be beautiful Shadow see okay perfect if I increase the size this is how it looks now what I'm going to do one more thing in page do sorry in layout. JS file for this D I'm going to add a padding okay so whenever the screen size is um medium or larger I'm going to add a padding on the xaxis maybe 20 so padding X to 20 and save it now if you see on the smaller screen nothing get changed but on the larger screen now you'll see this padding on the left side and the right side okay just to make sure that application look uh combine and closer okay it will give a better look that's the reason I added this padding is up to you you want it add or not okay now we have this beautiful header section and now one more thing I want to add so let's go to this header for this item okay list item uh I'm going to add some St CSS class so here on H okay whenever I hover on this particular uh menu I want to change the color from text to primary color Okay as we I'm get writing text- primary because we already have the uh primary color inside the tail CSS okay and now if I added here if i h on it you will see okay like this perfect obviously the pointer is not correct so I will I'm going to add a cursor pointer like this now we'll see this pointer is get changed once I hover on it then on H I also going to scale it to maybe 105 okay so once I H you will see it's scaling right see uh just to make animation little smoother I'm going to add transition all and we'll say is in out okay so it will give a smooth transaction see perfect okay so and one last thing we need to do we need to wrap this list inside the link okay so link is from this next slash link uh make sure to import from this next SL link this will help us when you want to navigate from the one screen to another you can directly add the path into that link okay so once you define link it will take one property called H reference and here you need to define the path so item do path this path we already defined over here okay and save it now for example if I click on this home Explorer see nothing get changed but because the path is default path right now okay but if you define some path for example explore and save it now if I click on explore see it's went to this explore okay if I click home it will go to the home if I click explore it will go to the explore obviously we don't have a page called explore that's the reason it's showing 404 error okay I hope you understand how we beautifully uh added the header um inside our application okay next I'm going to tell you how we can easily add the hero section in one click yes in one click only guys so let's see in the next section so after adding the header to the home screen we are going to add the hero section and this is how we are going to plan to add the hero section where on the right hand side we have this um beautiful image okay and on the left hand side we're going to add this uh text some description and then uh button okay to explore now kind of thing okay so let's go back to our application and let's go over here and inside the component folder I'm going to create a new file called hero do jsx okay and add the default template by just typing RFC let's save this one and inside the page.js which is our default page which when we are going to show once we uh land on this page okay this is our P homepage here I'm going to add the hero section so let's write hero section and here you just type hero okay make sure to import this hero section as well and then save it now uh let's save everything let's go to this hero section I don't know why it's not showing Let me refresh the screen okay yeah now if you see the hero Tex is showing on the screen now as I promised that in one click we will add the um the hero section as we want uh like this okay so for that one let's go to this uh hyper u.d okay and if you don't know about this site so this is it contains a predefined telin CSS component okay and it's very ready to use okay uh if you are not master if you are master in the telin CSS very good okay you can just copy the code paste it and you can modify according to your need so once you are here right you will see see some a lot of different component okay and you can explore it here the one which we want right it's called maybe well section uh let me search it section okay if I go to the section you will find something like this okay obviously we don't want this one but if you see this is how we want right and which matches our requirements see like this okay so what we need to do uh you can even check how it looks on mobile on a small device on medium device or large device or full screen here you have option called view you can view the source code okay and as we are using Crea so here you need to change HTML to jsx and then just click copy once you copy this one let me um go back to our application so let me close do like this and here I will just paste the code see okay and then save it now let's go back to to our application you will see that result see how beautifully we added in one click right now obviously you can do the customization you can do change this image and everything okay so let's do that now so first thing uh make sure that I added uh you have this image okay I added this image so you can get it from anywhere from Google or free.com so this is the image I added in the public folder then let's go back back here and obviously I'm going to change this uh image tag to the image which is from the next SL image and this for this Source let me close I'm going to get it from this logo sorry um the doctors do jpg okay obviously here we need to give width and height so let's give width maybe 800 I will give height let's go 800 and let's save it okay okay so and if you see the doctor image showing on the screen now how beautiful right if I increase the screen size this is how it looks uh I'm going to add Corner rounded rounded to be maybe 3 XEL okay so on the bigger screen it will look like this also uh I'm going to change this text so now here me bring this down and here I'm going to Simply say fine and book appointment with your favorite we just say favorite doctors okay and let's save it and if you see this is how it looks now you can add some customization into that one so for this appointment text I'm going to change the color okay and here I'm going to add the class name and we say text to primary okay let's give some space to this one and for doctors as well I'm going to change this one so let me bring this down We'll add a span tag okay and we'll add it here and we'll say class name text primary okay like this perfect and then for button obviously button is not matching with our style so I will remove this button and we'll add our own button from this UI component UI button which is s and we'll say explore now okay see obviously you can add the class name and we give margin top to 10 something like this see okay now if I increase the size see how beautifully it changed the layout Okay so so on the smaller screen it will look like this see easily it change the size and you don't uh with a t CSS actually it's automatically taking care of everything okay so that's that's how uh we can added the hero section okay so guys until this point if you have any any question any doubt let me know in the comment section and obviously not all the components we are just copy paste doing copy paste okay obviously each now now onwards we are going to design each of the component by ourself okay this is just to demonstrate how we can use the predefined component in our application so that you can add it and you can customize it according to your needs okay so we'll see you in the next section so before moving forward I'm going to tell you how we can update the app application font okay and you can add your own custom font so if you want to use any font right you can go to this Google font and any Google font you can use okay so you can search the font you want I mostly prefer this outfit font which I like okay but you can search any font which you like like for example this Railway is one of the good font which I suggested okay but you can it's up to you now once you select the font let's go to this layout JS okay and here if you see currently we are using this inter font okay this is a default font and if you see this is this font we importing from this font SLG gooogle now if you want to change this font you can add the font or you can replace this one for example if you want the outfit okay you will sest you will get the suggestion like outfit enter this font and make sure to update this uh name as well okay so this is the outfit font here I will change to outfit this is just a constant name and outfit and then save it and boom on the right hand side now if you see the font get changed immediately okay now throughout the application your font will be this outfit now you can add the multiple font and you can add even the local font as well okay so if you want to know how to uh use the local font just search on the uh nextjs documentation and you will get to know or you can DM me on my Instagram Channel or you can comment in the comment section that you want to know the how to use local font okay so I hope you understand that how you can add your own custom font or the Google font for the application so in this section we are simply going to add the search section okay so this much section we are going to implement so these are the categories which we are going to show along with the name and the category uh icon okay then after that we are going to show this popular documents and then at the last we going to show or add the footer for this complete application or complete page okay so as we know that you we completed the hero section now we'll focus on the search bar so let's go to our application and uh over here let me go to our application so inside here inside a component folder I'm going to create a new component and we can call it as a uh category search category search so in this component obviously we want to add the category as well as the search bar as well okay so once you add this category or sorry uh this component let's save this one and let's go to this page.js file and let's add it here okay so I will here I will say search bar plus categories okay and here it will simply say category search I think right category search and then save it and let me refresh once and if you see the category search text is showing on the screen let's go to this category search right now if you see right I'm cannot able to scroll it because it's at the bottom let me give class name and some margin bottom to 10 okay so little bit I can scroll now see okay now let me clean this out and the first thing uh I will add is some text so I will add the h2 tag and here I will just say search doctors okay oop sorry now let's add some styling so I will add the class name for this one I will add the font to be bold then I will add the text of four pixel okay so for Pixel Excel okay sorry Excel so once I hover on this one right you will see this font size and the line height so this is the uh CSS belong to this particular class once we add that one let's save it and if you see this is how it looks now if you want to give gap between this characters okay between these two characters you can just write tracking and if you see we have tighter tight normal wide wider widest right I'm going to use wide and if L it little bit give space okay now for this doctor I'm going to add a span tag and I will change this color to the primary one class name text primary like this and save it see after that I'm going to add another text the h2 tag okay and uh similar like this one if you see let me increase the size this particular text I'm going to add okay so I will just copy this text uh content and I will paste it here okay so it just say search your doctor and book a appointment that's all and save it and if you see that's what is showing on the screen now bring uh everything in one line or uh bring everything in Center okay so for this deal I'm going to add uh item to be in the center and then also we'll give a flex Flex column okay perfect and obviously I'm going to give G cap of four now for this h2 tag I'm going to add class name and uh we'll add a text to be gray oops and then I will change the text to be Excel okay like this we will change this maybe 500 and if I hover on any of this class you will see the belonging CSS okay for example that for this text Excel it has a font size 1.2 R so which is equivalent to 20 pixel and the line height okay now on the bigger screen this is how it looks so if you think Gap is more let's me decrease it yeah now after that let me bring this S2 tag over here okay after that we'll add the input okay so in order to add the input okay we are going to use Shad CN uh input Li component okay so let's go to this installation and copy this one and paste it in your terminal okay and then once you install that one uh you can just uh pick any of this code okay for example right now so this is a best example right where we can add the search bar and the button as well so let's copy this this code and uh I will just paste it here something like this see okay and obviously make sure to import uh this in uh sorry uh make sure to input from this component UI and the button as well okay and then save it now if I go back to our application see you cut this button and the input obviously we change this type to text and the the placeholder to search and for button I will say search okay and then save it see now if you want to add icon as well right um there is a one icon Library which uh it already installed in our uh project when we install the Shad CN okay so let me go to this packet. Json and if you see inside the packet. Json we have this Library called Lucid react okay and if you open this Lucid this is the library which already added and it has a bunch of different icon okay and it's very uh brief in the icon and you can uh it's very actually easy to use um uh easy to use as well okay so let me show you how to use it so for example you want to search icon right so here you can just add the component and call search okay and if you see this icon is importing from the Lucid react okay just click on it and end the tag okay and if you see this this is get imported from this Lucid react now if I save it you will see the icon get added now you can give the height so class name height of four width of four and then save it also you can add the margin right of two see like this okay and if I increase the size this is how beautifully it looking on the screen now if I want to give margin from the top let's add a margin top to four three y perfect okay so this is how our small and Beautiful s section is ready integrate and set up the stripy for our back end okay and with the help of the stripy same as we will create our API we will store our uh all the content the data and everything okay also uh we are going to use MySQL uh as our database for the stripy you can use uh anything you want okay it has option called um uh MySQL SQL light as post gra okay and if you don't have MySQL server you'll go on the internet and you will find uh free mySQL database as well okay also we are going to deploy this trappy on the server at the end of this course in order to create this try uh project right uh this is the command uh you have to uh run it in your terminal so I will just copy this command uh go to your Desir folder where you want to uh uh create this trappy okay so I will open this in terminal and uh let me increase the size and just paste it here like this okay and just change the name whatever you want so I will give Dr appointment admin okay and enter it now it will give the it give you the two options the first is the Quick Start okay and the second is custom if you don't want to use any Uh custom database or anything right you can go with the quick start don't worry if you don't have MySQL okay but right now I'm using MySQL and and don't worry it doesn't make any difference uh in the end in the API or in the structure of the strip anything right just for my convenience I using MySQL and then click enter now it will ask you the language we'll go with the JavaScript and here is the three different type of database you can select it from so we have SQL light post Grace and MySQL so I will select MySQL and here we need to give the uh database name with I I'm using my SQL uh on hostinger okay so the link is in the description you can create a hostinger account and you'll get a 20% discount if you use the the link in the description so this is my uh database so I will copy this database name and inside terminal I will paste it here then the host right so in this case the host is uh this one okay so I will just paste it here the port is I will keep as it is okay so if you you can check if you if you have any port or not defined here but most of the time it will be a default port okay so click enter Then you have to give the username so this is the username okay o sorry I paste it here and the last is password okay so it's a database password and it's saying do you want to enable X connection I will say no for now and then it will take some uh time uh to create or set up the strappy okay so in meantime let me explain okay so from the you can create a database okay and you have to make sure on the left hand side we if you see right here uh we have this oop sorry so here you will uh you have this remote MySQL right uh click on this one and you have to give the any host option okay so it will be accessible uh through any IP address and you have to select database to create it okay and guys as I say uh use this link and so that you can create a hostage account and the is very cheap okay and if you don't want to pay as I say you can use renders post Grace SQL or you can go with any free MySQL on the server okay okay our project get created okay and you can just run with the npm Run develop and there are some command to run it okay but right now what we we will do uh we will go into this project we will open this project in the PS terminal okay so let's close this one and here I will open new uh window in vs code and here you can say open and go to the you our strappy back ends and I will select the project and click open Okay so this will open the uh our strappy back end okay so if you see here are some of the files and you don't need to know all all of these files okay we have database configuration here then we have public folder have we have uh all this information okay so don't worry just ignore this thing for now order to run this try right you have to just type npm run develop in order to run the application in development mode when you are working locally make sure you have to run that application in development mode so that you can make modification you can create a collection and everything and if you see our app is get created and is open on the port 1337 okay so first uh at very first time you will see see this page okay this is sign up page um for our admin so here I will add the name so I will add to guruji G YouTube okay then I will add the email address so I have the email address then I will add the password and let's get started so and if you see once we started right we launch on the admin panel and here is the some some of the step uh in order to create the content type and lot of things this is a just get starting okay now on the left hand side you will see the content manager okay where we will add our data the content type Builder uh is useful to create a new content okay uh we will see in some moment then we have this media library okay where we are going to to store our all the images then you can add some plugins there is some marketplace where you add some extension right now uh in order to store our um all the images right we are going to use cloud iny okay if you see right we can use the Facebook we can use the AWS as well AWS S3 bucket to store our data okay so if you go to the provider see it's showing okay so there are a lot of things is already there you just need to install this plugin and you are good to go and on the setting you'll find a lot of different things don't worry we will see uh all the required things which we need for our application okay and we will set up the stripy so uh very first time uh we need to set up the uh media library we we want to connect this media library to the cloud inary so that we can store our all the images video or anything on that one okay and then we'll create our for first first content for the slider so that we can add the slider and we will create a API from it now in the Marketplace search for the cloud okay and as I say we are using it to store our images and then we this will connect to the strapping so what you have to do uh just click on more okay and here you have you'll find some step to integrate it before that you have to go to this cloud unit.com and don't worry it's completely free to use okay until uh 1 GB of data is completely free to store and just click uh sign up for free okay you so you can create a new account once you create the account uh just log into this particular uh cloud inary and you will see this uh the getting started meod okay go to the dashboard and here you will find the environment variable key okay and if you see uh it's uh for every uh uh month you will get some free credit okay so every month you can store up to 1 GB of images 2 GB of data and other 1 GB okay you can also uh share with your friends and then you'll also earn the credits okay so don't worry uh for the small business or for startup small startups in small scale of application this is completely uh useful now just copy this command okay so I will install this command copy it let's go to your uh cloud and paste it here like this then if you scroll down you just need to follow the step okay inside this plugin. JS uh we have to add this upload code so I will copy this code and inside the um plugin. JS right we have to add the plugin. JS if you see we don't have that um file right plugins. JS so first of all let's add that one plugins .js okay so obviously we need to add actually complete code I will copy all of this code and paste it here okay like this and save it now if you see right we need to add this environment name key and secret key inside the environment file okay so what you have to do uh let's go to do EnV and here we'll add our all this information so let's copy This Cloud name then Cloud key sorry and then this Cloud secret key and let's go back to our application right and if you see this is what we need to add first okay so this all this name key and secret you will find it here so this is the cloud name is to This Cloud name I added then this API key so this is the cloud key and then the secret key okay so all three key we added and save this file now next step is if you go to this documentation right you need to add this line of code inside this mid. JS okay so copy this particular code and go to this middleware so middleware CH maybe let me check it's in security for the security okay so what you have to do you can add it here like this you can remove the security because this is already added here right like this and save it and let's see what else is pending I think that's all okay we already install this command okay now next step you need to stop the current server okay so what I will do I will stop this current server and re rerun the application again okay so it will build our application again with all the new configuration okay now see it's working uh let's see Local Host so let's go to Media Library okay so if you see nothing is there let's add try to add new assets here okay so let me add something some images so I will add this image upload one assets and if you see the line is broken right it's not showing but if you see if you go here and click on the link and try to open this link right it is actually storing in the cloud are right and if I enter it see the image actually showing on the screen it means this particular image is stored and we able to successfully able to connect it to the strappy okay and let's see this uh Cloud uh media go to the media Explorer let's go and if you see we got this one okay all these images but if you see right we have this four images okay what happen when you upload any images to the cloud it will create a different size of images okay and obviously it will uh increase our storage so what you can do go to the setting go to the media library and here you can uh say uh the response to Friendly upload say click false okay size optimation is okay and click save now when you upload it only upload whatever the file we uploaded with the size optimization okay so that's the that's what we wanted now only thing that we need to fix is to this broken image okay we will fix in moment so I just stop the uh uh the application again and rerun and then it works completely and if you see if you see I got able to see the thumbnail of the application so uh if it did not work for you uh you can just try to remove this Market access trip.io okay re re reun it again and then again you can add this particular line of code okay then it will work sometimes um the server is not running properly that happens but now it our issue is solved next we'll try to uh add a new content for our uh slider so that we can add our slider in our uh um strappy back end so that we can use that uh in our application as well with the help of API let's create the content for the slider so let's go to this content Builder and here you can create a new collection type okay we can name it as a slider then click continue and here you will find some of the field you want to add so first of all I will add name and I will give it as a name and then then I will add another field okay and here you can go to the advance to make it required field as well so I will make it required field then I will add another field and for that one I will add media okay which you want to store image so I will say image URL and uh or we will just write image okay and we want to upload only single media so I will select single in advant setting I will make it require field and then I think that's all I don't think so I want anymore okay so I will just close this one okay and if you see name and images get added uh inside this slider Okay now click save and once you click save right it will restart our application because it will add the all this uh code required to create this slider content type okay so we'll wait for a few seconds and it automatically restart the application so we'll wait and if you see it's create create now you can uh we'll just say skip to and now if you go to this content manager you will see the slider collection type okay now here you can add the entry so we can just slider one click image and here we can upload this image right so I will add some other image if I want okay so if I go here let's try to I something like this open okay select this upload one assets and click finish and if you see it's get added now click save once you save right it is in the right now it is in the draft mode okay you can you need to publish it to make it live okay now if you see our uh particular uh record is get publish as well now our we created The Cider we added the data into that one now the question is how to are read it in the inside the API so for that one go to the setting okay and here inside the sorry inside the role you will see the public right go to the public and here you'll find the slider okay so you can give the permission what permission you want to give uh to this particular API so in this case we'll just say uh find or find one okay let's click on this find sorry find okay and this is the API endpoint to face the data okay let's try to run this so what we'll do let's save this first and just open Local Host uh 1337 so it need to be I think API slash this API U the Endo right so API is already there and try to run it and if you see pretty view see we got the data so we have the data inside data we have the ID and inside that after that we have the attributes right and then we have the name and publish that and created and everything right right now if you see you don't see the uh image right which we added or any URL okay and if you want to learn more about the strappy okay you just type strappy get API okay something like this and you will find the documentation to F uh the API if you see we have get post method put method okay and if you get the list of Entry okay it will show you the example how to get it what are the parameter you need to pass in the URL correct now in order to get the uh all the fields which are in in the particular record in the particular collection you just need to write question mark populate is equal to St okay and if I click this one let's make it play you and if you see now we get more Fields right first we we had this one but along with that we have the image inside the image we have data with the ID and at inside the attribute we have this uh thumbnail and everything right and here is the URL of the application obviously this is also URL with the width and height uh but this URL is the exact width and height which we uploaded okay and this particular URL we are going to use to show it on the screen okay so this is how it works this is how simply we created the API by uh by using the help of stripy okay now one the last point I want to mention here right right now this is public right mean it's publicly accessible to everyone but you can create a token from here so just click add new token you can do the token called um develop API okay and you can select the duration of this token so we can send 30 days 90 days or unlimited as well and you can sa the token type whether it's a read only or full access or custom so I will say full access and again inside that you can give the access to only those who want to write it so if I write the custom only custom access you can give you so in this case I don't want to use the create update or delete operation just find and find one and save it now okay now this if you see right this is the API key obviously you need to copy this API ke somewhere so you will not lose it okay and I will just copy this one and now this API key you can use it uh when you are going to call this API okay so this API for in order to call this API you have to pass that particular API key then only this API will work okay so everything we will look into the application now in the next section we are going to use the API to fade the data and show it on the screen in our application now okay so I hope you understand about the strappy how to set up it how to create the content how to connect it to our Cloud so that we can uh store the media and lot of things we'll learn in this particular section okay so guys uh going forward right I will already created I will already get the content for our uh uh data right so just learn it how to do it and then we will ready to go obviously I will put this uh strapy backend um source code um inside uh the GitHub and the link is in the description so that you can just clone it okay and then you can directly use it as well perfect so see you in the next section so in strappy I created one schema called category and inside this category let me show you I added the user oh sorry uh here I added the name and the icon okay so this doctor and hospital I will explain you later on okay this is the just relationship I connected that this particular category to this doctor and hospital okay but for now make sure you I will you will add this name and the icon once you add that name and icon so inside the category if you see these are the category I added okay so bunch of category so you can add uh it's up to you how you want to add okay and uh in the inside the media library you'll see all of this uh category icon now from the API token which we created in the last section right just copy this API token and then we go back to our application sorry so over here let me close all of this windows so inside this one we'll create another folder okay and we can call it as a utils okay inside that folder we get a new uh file called Global api. jsx and in that file we will keep all our apis before that let's create new one new file inside the root directory okay so I will create a file called env. local so all our environment variables we will keep in this particular folder okay and you know in order to use uh the API keys on the client side you need to write API key name as uh starting with the next underscore public okay and then underscore the name of the API key so in this case I will give like strappy API key is equal to and paste the key which you copied now make sure okay you have to start the API key with this uh nextore public okay if you want to use on the client side now once you add this one let's go back Global API and here you need to call the API okay before that we need to install one uh Library called AOS so just do npmi exos okay so this is the HTTP client Library uh it help us to get or face data from the uh apis okay so let me uh do couple of things so first let's define the API uncore key which is equal to process. EnV Dot and let me get that API key name which is this trapy API key okay so now we have our API key ready then we need to Define exuse client is equal to exos and if you see this exos is we are importing from this exos do create and inside that we need to define the base URL oh sorry base URL okay so in this case obviously we are using from The Local Host okay so our apiq will be local 3000 SL API so sorry not um it will be 1337 okay that is what our API inpoint is so I will copy this one and we'll paste it here so HTTP SL slash and oh sorry it again pasted okay SL API okay okay comma then we have to add the headers headers and inside the header we need to add authorization token okay our authorization token is a bearer okay so we'll add Bearer token and then here we need to provide the API key okay so each of our request will need API key without API key it will not work then once we Define this or created this exos client we need to Define our method to get the categories constant get category is equal to and we'll call exos client Dot and it's a get request so get now here we need to define the Endo so let me tell you again how can we get the Endo so inside the setting we have this API token so once we we Define this API token right you can go to this category section and here if I click on find for example you will see this is the API inpoint okay so obviously inside our base URL we added this API so we just need to add this categories so here I will just say slash categories okay but we need to populate all our data including the icon so I will say populate is equal to Star okay and then we need to export it so export default and then we'll say get category okay so that once we export this gate category it will be available throughout the application so that we can use in any component now let's save everything and then let's go back to our component called category search okay so inside here I'm going to Define one method called get category list and inside that method we with the help of global API we will call the uh API inpoint called G category and as this is a promise it will return data so then response and for now I will just console the response okay now obviously once we Define this gate category we need to call once this particular component get load so in order to call this method we are going to use use effect hook which is the react hook okay so it is importing from the react and this use effect hook will iterate for every instance so in order to execute only once once this component get load you need to add this empty array and then you need to uh call this get category list method okay now save everything refresh the screen and now you we got one error that you are importing a common sorry you importing component that need use effect it only works in a client component but not it's a parent or Mark with the use client so what we need to do as we are using the use effect which is the hook and you hook only work on the client side and we need to tell n that this component or this particular page is a client one so here we need to Define as a use client and save it and if you see now the error is gone okay now we have another error we'll see it in a moment so let's increase the size go to the inspect panel and inside the console let me clean everything and refresh it again so if you see we got error that locor 3,000 300 oh sorry 3,000 so I think our API end point which is correct so this error is came at saying that request status 400 404 so the mistake we made here the base URL we right it's supposed to be base and the URL need to be a capital okay now let's save this one and now refresh the screen and if you see now we don't get any error but let's go to the inspect panel and check the console and now if you see we got the object over here we have the data and inside the data again we have this list of all the categories okay so we have to make sure we will uh get the response after response we have the data and inside thata again we have the data okay so just to make sure it's clear to you uh so for this one after response we have data and said that again we have data and where we we'll get all the list of category list okay let me clean everything refresh the screen and now if you see we got the list of uh only categories okay now here if you observed uh our API method sorry it called two times right even though we call uh the method in use effect only once right this happen in nextjs so in order to avoid that let's go to this next. config.js file and inside this next config right here we need to add uh the opt uh the value called react streak mode and make it false okay now once you make the false obviously next Once you update any configuration file make sure to stop the server and restart it again okay and now if I refresh it Let me refresh it again and if you see now inside the console we'll get only one uh result okay that is what expected perfect now once we have all the data all the list of categories let's save in one state so first we need to Define state where we can store this value so let's Define constant here we can call category list comma set category list is equal to use State okay so use state is a react hook and it help us to store the value okay now initially I will pass this empty and this category list will store the value and set a categories list help us to store value inside this category list now just come here and let's set category list and add response. data do data okay and let's save this one now inside this category list now we have this all the list of categories now come back and here we need to display the list of categories so we'll show display list of category oop sorry now in order to iterate it we will write category list do map and inside that we'll say item comma index index will hold the value 012 depends on the length of the list and inside the arrow function we'll Define a du tag like this okay now inside D tag first thing we need to do to display the icon so we'll write image then source and uh sorry uh uh so one Define The Source right as this is a dynamic data which we are going to render so we have to Define in a curly Braes here we need to Define item Dot and then we need to give path of the icon URL okay now let me show you where is the I know how we can get the path so inside the console as you know that this is our array right inside the array we have the field called attributes inside the attribute we have another field called icon and inside the icon we have data and inside that again we have attributes and then here you will see the URL okay so this is how you can get the URL so we'll say item then we'll say attributes dot then we have to get say question do icon data do attributes do URL okay okay and after that I will Define alt as just uh you can say icon then we Define width of 40 and then we'll Define height of 40 and let's save everything now if you see we got one error okay let's see what's the error so it's saying invalid Source prop and it's also mentioning that next SL image host name resource. cloud.com is not configured under image in config.js okay so here is thing whenever you are using any third party URL or image URL inside your nextjs application you need to Define that domain inside or under next. config.js okay so in this case we need to Define this host name called resources. cloud.com so let's go back inside the next. config.js and over here we have to add images inside the images we need to Define domains and these are the domain which means we need to make wh listed okay we have to tell next just whatever the image assets coming from this domain you have to allow them okay and save it this is required and next JS make this uh uh compuls compulsory because it help us to make application more secure now once you save this one restart your application just refresh it once and if you see now we don't have any error and boom We also got the list of categories wow that's cool right perfect let's go back to category search now and after that I'm going to add a label and inside inside this label I'm going to show the name of the category so in order to get name of the category again uh we have the array inside that that we have the attributes and then we have to name okay but if You observe we got one warning message that each child in the list should have unique cre prop okay so let me tell you what that mean so for this D right this is the child for this particular uh list right so here we need to provide a unique key property called key and obviously you can provide any key uh unique item so in this case I'm going to add index because index will be every time will be unique because index has it start from 012 until the length of the list now let's save everything and here I will say item do attributes do name and then save it let me close this one and if you see now we have the name along with the icon but it's not look good right let's some styling so first thing for this de I'm going to add class name first thing we give text uh not text but we'll say Flex we'll make Flex column then we'll add text to be in the center okay then we go Gap gap of two this need to be actually uh so that's fine okay so here is thing what we can do instead of using Flex for this one we will use the grid okay so for about this category list I will wrap all these category list inside the D and for this one I will mark it as a grid now whenever the screen size is smaller I'm going to put the grid size of column 3 okay and now if you see this is how it looks now after that whenever screen size is made medum I will put GD column of four and when it's larger I put GD column of six like this okay perfect and save it after that one uh let's add some more property so here I'm going add item to be in the center so it will come in the center C okay then we'll add a padding of five then then also we'll make a background of little blue 50 okay like this we'll add a margin of two I will make rounded Corner uh maybe large yeah that's look good to me and let me increase the size and let let me show you how it looks so if you see this is how it looks on the bigger screen now obviously I don't I just want to show the first six categories okay so in order to show just for six categories you can add the condition over here you can just write index is less than six okay so obviously we have the index and we'll check the index value and index is less than equal to six then only show this particular du and if you see now we only have six uh categories say okay perfect and see how beautiful it's looking right now obviously some of the um styling we want to add first for this label I'm going to add text of blue color of 600 then I will make text little smaller once we done that I'm also going to add H effect okay so whenever I H on this any of this uh category card I can uh scale the size by 105 1 10 okay and for a smood animation I'm going to add transition all and animation I will add is in out and if you see if I hover on this one see how beautifully it's looking right also I will make sure it should be a cursor pointer and let me increase the size now and if you see how beautifully it's looking on the screen right one more thing that I want to give margin top to five perfect and now if you see how beautifully it's looking right now if I decrease the screen side and you will see the change immediately see how beautifully is changing right now over here if You observe this particular text is touching to the screen right so what you can do for this de you can give margin on the padding maybe margin you can go padding on the xaxis maybe five and boom see now it's came in everything in one line so beautiful right and our category is also looking so cool I hope you understand how we beautifully added and fed the category from the stripy and display it on the screen along with our Tel CSS styling so guys if you have any question until this point let me know in the comment section now as we know that we come completed the search bar the strappy setup and even we display the list of category now it's time to display the list of all the popular doctors okay so on the um one row we going to show four column but obviously depends on the screen size it will change it okay so first thing let me go to this strappy and let me tell you how I added this doctor section so inside the content type Builder I added a new colle section name called a doctor and here if you see I added the name address patient the year of experience the working start time and end time the about section also I attach these categories to the existing categories okay and also I added phone image and premium so in order to connect these two collection to each other you have go to this add another option and here you'll find the option called relation select the and once you select it you can select on which uh collection you want to connect so in this case you can select category and here you have option to select the relation type okay whether do you want many to many relationship or one to many or many to one relationship okay so strappy give you all customization in your hand okay you can do whatever you want so it's fully customizable so that's the reason strapp is so powerful so now I already have the ation with the category so I'm not going to add it okay now let me go to the content uh content manager where I added some of the doctor list okay if you see I added the doctor list let me open one of them and if you see we have some sample data along with this beautiful image and everything okay now if I go to this media library I created a new folder called doctors where I'm keeping all the doctor images over here okay so it helped me to organize my all of my assets or images okay so make sure you can create a new folder by just adding clicking over here called new folder okay and then you can upload the files now let's go back to our application let me close this one and uh let's create a new method okay let me open our application as well and sorry so let me close all of this window and then inside the component folder we create a new file and we can call it as a doctor list. jsx add the default template and save it now make sure to add this particular component inside the page.js okay so after the category search I'm going to write popular doctor list and inside that I'm going to add doctor list and then save it now if I go back okay let me refresh once and you will see the doctor list over here see okay perfect now you have to go to this Global API where we need to get the uh list of doctor so that we need to create one method called get doctor list exos client sorry ex client. get request and now here we need the Endo right so to get in point let's go to the strappy go to the setting API token and for the doctor we'll say find and this is the simple API in point called doctors now we'll say add a doctors make sure to populate everything okay and then then save it now once say you save it make sure to export this one so that you can use it throughout the application so I will close this now and now I am going to call this particular API use inside this page.js okay because uh whatever the result we get we will pass it to this doctor list and then um we can use this doctor list at many places as well so you'll get to know once we um build uh our application further more okay but let's for now let's create a new method called constant get doctor list and inside that we call Global API do get doctor list do then response like this okay for now I will just console the response and make sure to call this method inside the use effect so obviously we need to execute use effect only once so I mark this with the pass this empty array okay now save everything now it's saying that this we use this usif hook we have to mark this page as a use client and now let's go to this inspect panel go to the console and if you see um okay this one so if you see we have this list of array we have seven doctors's list right now okay and we will see all this details okay perfect now let's save this list of doctor in one state so constant doctor uh doctor list set doctor list is equal to your state now let's do that say uh the doctor list us response. data. data and then save it now once we have this list of doctor let's pass this list to the doctor list component inside the doctor list let's accept it here as a prop okay and save it now here we need to iterate the list of doctor okay but before that let me add the DU and S2 tag and we'll say popular doctors okay let me close this window for now if you see it's showing popular doctors let me give some class name margin bottom to 10 okay so that we can scroll it now for this one we can add uh some styling so class name we'll add font bold and text Excel okay now it's touching to the screen so obviously we need we can give the padding X to 10 see like this after that let's add a new du and inside that we'll iterate the doctor list so doctor list do map and here we will iterate it also one more thing I want to tell you here okay now sometimes doctor list will take some time to F data from the server and in the meantime it will check oh doctor list is not there or it's undefined and it might this particular method might get failed okay so sometimes better to make sure you have the doctor list and then only you can execute this map method okay now over here once you Define this map we'll Define atom comma index the arrow function then inside that we'll Define a du like this okay and now let's define the image then source so obviously image inside atom and let me show you the path now so let's go to the inspect panel go to the console and I think this is our doctor list so if you see inside the attribute we have the uh field called image inside that we have data and inside that we have attributes and then at the last we have the URL okay so let's write that one so I will say instead of item you can even write doctor okay so that's little meaningful so I will write doctor do attrib attributes do image do data do attributes. URL okay then we'll give alt name as a doctor go width 500 height 200 okay and let's save this one and if you see we got the image but it's not really showing up okay it means we somewhere okay so it need to be data not data and if you see now we have this list of image okay so let's add the class name so here I'm going to add height of 200 pixel and then WID to be full okay and we'll make object to be cover so it will be not stretch okay and we'll make rounded corner to be large and this is how it looks right now obviously if I increase the screen size I spread the width throughout this uh width of the screen right so what we can do obviously for this de I will make class name and I will make it grid okay now when the screen size is smaller I will make grid column two so it will divide into two see okay when the screen size is medium I will change grid columns to two and when the screen size is larger I will change GR column to four and save it okay perfect now obviously you have another option called small where you can give the GD Columns of two and for medium you can get the G column of three as well okay and let me show you how it looks see now this is the last screen okay but as soon as I decrease the screen size see the magic right perfect so this is how gitt is quite helpful okay next we need to give margin okay or Gap so let's give the Gap uh maybe seven like this okay perfect now for this do what I'm going to do let's add a border so we'll add a border of one pixel okay and make we'll make rounded large and then we'll add a padding of four perfect maybe adding padding of three perfect okay now after this image I will add du tag and inside that we'll write some information like you um doctor's name and all okay so first thing obviously I want to write the uh the category on which doctors belong so I will write the h2 tag and in order to get the category let me get that one okay so from the inspect panel let's open the console so if you see we got one error that image is missing required Source property that's weird Let me refresh it again I think we okay now it's good okay we have this key property error let's add a key to this do as I mention so key and we'll add index let's save everything perfect now here we need to get category and if you see we have field name categories inside that we have data inside that we have the first element obviously we have we will take first a every time and inside that we have the attribute and call name okay perfect so let me write that one so we write doctor do attributes dot category do data object Z dot attributes dot name and let me see perfect we got this see let me close this one okay perfect now let's style that one so let's add a class name so for that one I'm going to add text of custom size okay now if you want to give the custom size okay you can give inside the square bracket okay so inside the whenever inside the tel CSS whenever you want to give a custom value custom size you can give inside this uh square bracket okay now after that we'll say background blue 100 padding of one we make rounded oops that to be full and I will add padding X2 two also we'll make text primary and save it and this is how it looks weird I know let's add a styling to this du so class name we have Marg in top to three and uh let's save this one perfect okay but now obviously we want the this background to be wrapped to the particular text right so here just simply you you need to write item Baseline okay and you have to make this particular de as a flex so make it flex and make sure it's it to be a flex column okay and now if you see the magic perfect and if you see each of the doctor got this category next let's add the usern name okay so to get the usern name it's simple doctor up do attributes do name let's add a style to this one so sorry class name so for this one let's add a font board that's it perfect next uh we going to add the experience of that doctor so doctor dot attributes and we have field name called year uncore off _ experience perfect see 20 16 10 I don't know why just came 13 but yeah let's make sure yes okay yes are there now let's add a class name to this one and uh we'll change the text to be primary and text to be small and save it perfect and the last we're going to add the address so for this one I'm going to add class name and we'll make text of gray so if you want to know how it came right you can do if you did not came just type just enter control space and you'll get the suggestion as well so here I will select the 500 then uh text I will s small and then save it perfect okay now in order to give the gap between all of this item right it's very easy because we wrap this inside the flakes right and it's a flakes column here you can just mention gap of two B1 is fine I think yeah perfect and see how beautifully is looking right and last but not the least we need to add the button okay so in this case we're going to add our custom button okay it's very simple just add the us2 tag okay just say book now and we'll design this button okay so add a class name We'll add a padding of two padding X to three background uh oh sorry I will add a border of one pixel actually and we make border primary color Okay obviously then text I will also make primary color see then we ground it to be full and then we'll make WID to be full we'll make text aligning to be Center so our text will be in Center okay also we'll make text of 11 pixel little smaller perfect and how beautiful it's looking right also I'm giving the margin little bit margin top to two and see okay button is ready now let's add a cursor to be pointer so whenever we h on it it will look as a button okay also to give a beautiful effect on we will add H effect okay on H We'll add background to be primary color which is our blue color and on Hover again we'll make text to be white and save it now as soon as I hover on it see the magic right so cool okay so I hope you understand how beautifully we uh add this effect okay now next whenever I hover on any of this doctor right we need to change this cursor pointer first thing okay so for this de we add the cursor pointer okay so you see then we'll change the Border color to primary whenever we h on it okay so now how effect we have to add see perfect right so this how effect give us okay so this is the uh user selected also on how you can add a shadow of small okay beautiful Shadow effect and here I also added the transition all is and out and boom now let's see the end result and now if you see we have this beautiful effect on how effect and everything even though when we are how on the book Now button it's beautifully reflecting the change let's give some margin between these two things okay so let's go here and let's add margin top to four yes and now it's good okay now obviously it's responsive completely responsive mobile friendly if I change this lay out you will see the magic here okay now on the mobile view as well you will see like this okay now obviously you can change the width height depends on the screen size as well and if you see the complete home screen page is looking beautiful now only thing is pending is to add the footer we'll see and we'll add in the next section now it's time to add the footer okay so obviously as uh the header is consistent on the screen throughout the application same thing we are going with the footer so footer will also be consistent throughout the all the pages all the application okay so let's go back to our application and oops and let me go to this component folder and let's create a new file called footer. jsx which is our footer component and now this footer comp component we going to add inside the layout as similar like a header okay so let's add a footer and save it and if you see the footer is showing on the screen now you instead of uh writing all the footer code right the the similar way what we did for the hero section we're going to use the predefined footer so let's go to this hyper UI my favorite one and then search for the footer so if you see we have this footer component now inside that you will see a lot of example guys okay you can choose any of them which you want or which you like okay so I like this Simple and Clean one so this one okay I'm I I'm going to select this one on mobile view this is how it looks so let's go to the view select the jsx and copy this content okay and then let's go back to this footer and paste it here okay and then save it now if if I go to the footer see how it looks right let's change this logo this is not our logo right so I think this is a logo code let's clean this out and let's add our image say logo. SVG ql tag logo let's give width maybe 200 height 100 and obviously we make need to make this justify Center I don't know why it's not making Flex Flex column okay and we'll make item Center yeah perfect and if you see our footer is ready how beautifully right perfect now if you think right okay why it's showing on the left hand side some Gap because we go the padding xaxis right so you can remove that one so in in order to get that out you can put this footer outside of this T and boom see perfect right now on the smaller screen let me show you how it looks see on mobile view this is how it looks right perfect and our pH is ready within one click right now obviously you can change this you can customize the icon you can put your own links and everything but the only thing that I want to show how easily we can add the footer as well okay and now guys there are a lot of things we going to learn in this course okay so stay tuned and please do subscribe to our Channel if you did not subscribe press the notification Bell icon so you will not miss the updates from me and then press like button guys pleas hit like button Buton if once we get th000 likes for this video I'm going to come with a new out of boox course as well okay so we'll sa in the next section so as you know that we are fing data from the server okay and obviously there is a latency when we F the data uh whenever we load the application now for example let's load the application if you see it takes some time to load the data and then it displayed suddenly okay uh so it not give a good uh effect to the user who is using this application right so what we can do we can add a loader to that one okay and the one of the best popular loading option is skeleton okay and if you don't know what is skeleton let me show you so in the Shad we have the option or component called skeleton and if you see this is the loading effect it will show like this whenever data is in process or data we are fing from the server and whenever the data is available able to display it then we will remove this one and we will display that particular uh actual data okay the question is how can we implement it now there is a one option that from the share you can add this component skeleton and then you can do it okay but there is another and easiest way to do it so let me go back and let's Implement for the doctor okay so let me close all of this window first and open the component called doctor list okay where we are displaying the list of doctors okay now what we need to do here right now we added the condition if the doctor list is there then only show the list of doctors okay here I'm going to add the condition as a question mark means I'm going to add the tary operator okay so that um we'll write an if and else kind of condition right now here I'm I'm going to check first if doctor list. length is greater than zero then show the doctor list otherwise so there is another else condition we'll keep it here otherwise I'm going to show the skeleton effect inside this de okay so here we can write skeleton effect now inside this one the it's very easy uh let me tell you how Okay so first thing let's give the height of uh maybe 220 20 pixel and we'll give background uh gray whatever want I do background slate okay and let's say and also obviously we need a to be full okay similar uh The Styling which we applied to this particular uh cards same style we are going to apply okay and remember one thing we are still in this particular D where we have the grid okay so you don't need to apply a different grid for this skeleton effect as well okay now for to visually to display it on the screen right for the testing purpose I will reward this condition okay and let's save it and now if you see we got this beautiful skeleton effect okay but it's only showing one correct now we need to it multiple times so what we can do we can add a array okay so let's add array 1 comma 2 comma 3 4 5 6 okay and then we map it okay so this is the hardcoded array we added okay just for the loading purpose something like this see I think we don't need this because we already in the curly braces okay and boom and now if I save this and ifus we got now six uh card skill effect okay because we added a six record right or six uh the length of the are is six now obviously I'm going to add the rounded full okay now if you want to not rounded full rounded LG now if you want to make it little darker you can just change this uh slate to 200 and here you will see little darker see okay and if you check carefully it Q animated did not give any animation effect yet okay so to add that animation in t we have uh one property called animate pulse okay and save it and once you add that animate pulse and now you'll see here see okay it's going lighter and dark and it give a proper uh loading kind of effect okay now boom we are almost ready just reward this condition let's save this one and if I refresh the screen see you understand see how it looks right so it give the loading effect same thing you can Implement for this category as well so let's go to this category so here we have category search and here we displaying category right so first thing let's add the category oh sorry uh let's copy this category list do length greater than zero question mark which uh if this category list uh category list do length is zero then show the category list otherwise show the loading effect so let's add the loading effect so class name We'll add uh let me check height how much height we need to add let's add a height of 40 pixel not 40 actually is bigger right uh let's add 60 and we add a background slate of 200 I will animate it as as a pulse and then I will make Corner round it to be large okay and obviously it's not showing let's re it to just check okay so if you see nothing is displayed on the screen because we need to give it be full and also we will what are so 4 five 6 do map item comma index array and let's keep everything inside this particular array so here let's give the width of 100 and height of 100 and if you see now the category is showing okay or sry category skeleton loading is string let me remove this one and now it's good if I refresh it see okay if you think you want to increase the size you can just increase this to 130 and this one has 130 and and now if you see perfect now it's look good right we make 120 perfect and this is how you can add the skeleton effect in your application okay so if you any face any issue uh if you don't understand any topic let me know in the comment section I'm happy to help you now in this section we are going to discuss very important topic called app routing so uh if user click on any of this category or user click on any of this doctor list we need to navigate from one screen to the other screen right like this for example if I user click on this particular category and then we'll open this new screen but the question is how can we do that right and that's where this app routing in the next J play a very important role so uh in this section we're going to uh see basically a simple routing nested routing and the dynamic routing okay so for example here if you want to create a new route for example new screen okay and if I go or go to this particular part got local 3000 SL search enter it I should navigate to the new screen right now it's showing 404 error because we don't have that screen right so this is called a simple route but if you want to go to this search slash category name for example dentist okay and go to this particular route obviously now this particular parameter going to change every time okay it should be a general or it should be a surgeon right and that's kind of routing called a Ned route obviously we'll see one by one so let's first create a simple route and once us uh open this particular URL called localers 3000 search it should navigate to this particular page okay so let's go back to our application so let me decrease size and let me close all of this tab now okay now here is thing now for example inside the app folder we create a new folder okay and as I say if you create new folder okay with the directly name like this now this consider as a route okay and inside that you can create a page.js file Okay add the default template here I'm going to add sech sech the function name as a search let's copy here as well and save it and now if I go to this page okay so I let me refresh the screen so right now obviously we are in the wrong okay now go to this search and boom if you see now it's showing the search text okay obviously as I say the header and the footage is still constant because we want that throughout the applications so that's fine but now if you see we navigate successfully to this search um uh what you say search route right and this is a simple route now obviously we in our application we have multiple routes right so to organize this okay uh all the routes in one folder you can do that as well okay so create a folder and then you can add uh a new folder and you can name it like this okay so with the within the bracket you can give the folder name and then next J will not consider this um folder name as a route okay now obviously this is not route but you can put this uh search folder inside this route because we have this search route okay and now even though you put this inside this route folder nothing get changed and still we have this search on Route okay perfect I hope this is called a simple routing now obviously uh you can add along with this page.js you can add the layout. JS okay for example let's add the layout. JS and add the default template let's save this one and if you see right now it's showing just a layout instead of this page.js right the reason is as I say in the very beginning of this particular uh uh video that layout uh dogs is a reserved uh screen or reserved keyword which can be or which is used uh to design the layout okay whatever the fix thing you want to display it on the screen you can keep it there okay now for example in inside this search uh screen right we want to let me Zoom this now we want to keep this category to be fixed and only this right hand side data which is the list of doctor going to change okay depends on the selection of the category okay so that's the reason we are using the out here as well same thing we did it on the home screen so inside the home screen right if you remember we added the header and footer only the thing is getting change inside this because of this children only okay and if you see the header and the footer is constant because this is the parent layout okay now once we Define this one right inside the search now obviously what we need what we want to ACH if I search SL dentist something like this right I should navigate to to that particular screen okay obviously I don't want uh uh create a multiple um route for each of this category right obviously we don't know how how much category are there or maybe you are putting dynamically more category in the database right obviously we cannot create a new route for each of these category so that's where the next route play or sorry uh the dynamic route play a very important role so if I go to this search now you can create a new folder and you can call for example category name I will call it as a c name okay but if you check I give this folder name within a bracket okay so it means next JS will consider the value of the C name or folder name can change or it's a dynamic one okay and now inside inside of C name I will put this search one okay move it because this page I want inside this uh C name okay I don't want different P for the search and different P for the C name okay like this and now if I open this one now if you if you see dentist and if you see still showing layout because we did not pass the children over here whatever the page we are going to render we need to pass it here okay so each layout page has a children is supposed to have children children so this is the children props we pass it and now if you see now it's showing the search okay even though if I try to access this search it will save 404 error because we don't pass or we don't have page for the search because we move that page to the uh C name folder right if you want to keep that folder you can do that but we don't want it and we want only the parameter like this okay and if you see the search text is showing on the screen now if you want to create a one more new route for example let's create a new route called details okay now on this details screen obviously we are going to show um the doctor's details information right now in order to create this page as well what you can do inside the route folder let's go to this route folder and let's click select the route okay this is very important to select the route and then add a new folder and we can call it as a details okay like this now once we have this details uh page obviously let me show you obviously the details cannot show only this selected data right it has a my Maybe ID of the uh doctor record right so if I go here like this one then I should open the doctor's information right so obviously we need a nested route over here again so select the details add a new folder and we call record ID like this now this is our Dynamic value okay and inside that we'll add up file so let's add a default template let me rename this to detail details and save it and now if you see now it's showing details okay even though if I go to four is still showing same perfect now one more last important thing over here let me go to the search and dentist right now the question is how can we fet this uh parameter or dynamic value okay because we need to pass this to the back end to get only the dentist uh doctors right so it's very easy guys so let's go to this uh page.js inside this uh C name folder okay and over here we need to add or destruct this prop and we can call it as a params okay now inside this param it hold this Dynamic value okay let me show you how so let's write a use effect and we console. log parameters value so whatever the parameter value is coming we'll just consol it just to show you how what are the things are written okay so right now we need to make this as a use client because we use the hook over here okay use hook now let me increase the size go to the inspect panel go to the console and if you see we got one object and inside that we have the C name okay and which whatever we pass the dentist string for example if you pass 1 2 3 now it will give dentist 1 2 three okay it means we can able to get the C name now why the field name is C name the reason is we gave the folder name the dynamic folder name called C name that's the reason okay and now we can access it using like this C name and if you see now we got this ex expected result so whatever the dynamic uh path you are passing that path is you are getting over here okay so guys I hope you understand how the routing will work okay now the last point is how we can add the nested route okay for the N drout it's very easy the same thing we did it here for example this is called n drout inside the search we again create a new folder and again we have added the page.js okay that is nothing but the N drout so folder inside the folder and then you can uh call it as a Ned one okay so guys I hope you understand how the routing will work and how we can configure the routing this is very important when you are building any nextjs application okay and as nextjs is already taking care of lot of things okay so you don't need to configure it you just need to understand the folder structure how uh for the routing purpose okay so especially you don't need add any code logic or anything like that so that's the reason nexj is powerful and many people use uh to avoid the routing configuration so in this section we are going to uh build a screen which used to display the list of doctors depends on the category selection okay so whenever from the home screen right uh you select any category oop sorry and once you select any category it will open the new page which has the all the doctors belong to that particular category okay and on the left hand side also we going to show the list of category as well okay and obviously H Photo will be remain constant on this particular page so let's open the application let's go back to our uh uh PS code okay and let me close all of the step for now so now inside this layout. JS right so here is thing we need to keep this particular section or this category section constant okay only when us select any of this category this particular data want to change it and nothing else okay so this is very important so for that one let's go to this uh layout. JS inside the search folder and here we going to add uh The Styling okay here we'll make grid okay and grid columns and in this case I'm going to add four columns okay I will tell you the reason then I will add a two de okay like this so first do contain the category okay so if this contains the category okay and the second de contain the children object okay so children this particular children means whatever we are going to render it will cons it will be inside this de okay now the thing is we will assign out of this four column we will assign three columns to this particular de so to assign that one you can write call span and three okay so out of four we assign uh three column to this particular do and then one remaining column to this category okay and then save it now if you see nothing get changed for now but if you see uh the small obviously depends on the screen size this particular portion we which contain only one column and this container four columns next we need to create one folder so inside this uh search folder only okay I'm going to create a component because uh we'll keep all the components related to this search um screen inside that for particular folder okay so let's create a component so make sure the component name will start with the uh underscore and inside that I will create a new file and we can call it as a category list. jsx add the default template save this one and then make sure to add inside this de so it will say category list and then save it now if you see on the screen it's showing perfect now let's go to this uh category list where we are going to face the uh categories okay so obviously we we already have the logic for that one so what I'm going to do from the category search where we have this get category list right I will copy everything as it is because we want that one inside the CATE list and make sure to import this use State and make sure to import This Global API as well okay and then save it uh make sure to make this one as a used client and make sure to import use effect as well perfect okay now we have the list of category and we store in the category list now we want to show it on the screen okay but the thing is uh I want to give option to search it from the there okay so you just type it and it automatically get filtered out filtered it out okay so for that one I'm going to use uh one component from the Shad CN which is called maybe command yeah command see like this okay if I type something see it automatic get filter right how beautifully so let's install this one so first thing let's copy this uh uh command line and inside the terminal just paste it here like this okay then once it install uh here you will see the use case Okay so yeah this is a use case Okay so simply uh I will copy this import statement and then I will copy the remaining code okay this is simple example they show how uh to use this command box okay and I will paste it after this one like this okay and then save it now if I go to this and if you see now we got this beautiful command and even if I type something see how beautifully uh it's filtering out okay perfect so that's what we wanted now obviously we know we need to give some styling to this one let me decrease the size so right now it's looking smaller but that's fine now the first thing and very important thing uh for this du let's add a class name I will make height to the screen okay like this so it will be at the full screen see and then I will also make it as a fix okay uh then we'll make a flex oh sorry not fix actually let's let's uh let's try to do sticky okay let's let's say flex and flex column for now so if you see this is how it looks okay it's weird so what we do for for development purose I will remove this fix okay and obviously we will add it later on and also make sure to give margin top to five Okay then if you see now okay now it's look good to me next obviously we have the list of category so we don't want this predefined category so I will remove all of this one okay and inside this command group we need to we need to iterate the category list so I will do category list and and category list okay dot map and item comma index like this okay and inside that I will just put this command item okay so instead of that you can um if you want to do customization right let's me put this command item first and I will remove this one okay now inside here I will add the link because we want on press event right let's add a link add H reference for now I add empty and inside this one I'm going to add the label tag okay let's add a label tag over here and inside that I will just write oops label item. item do attributes do name okay and if you see we got all the dentist cardiologist everything see okay but you have the scroll bar obviously I don't want that scroll bar okay so you can remove this scall so for that one for this uh command group okay let's add a class name and just make overflow class name overflow visible okay and what else I think it's supposed to have so instead of adding uh this overflow over here let me add it inside command list because we are we need to add for the complete list right and now if you see now everything is getting displayed okay perfect also if you want to make this as a fix now you can make it fix perfect okay and now if you see our uh this particular category also looking good now let's do some customization so first thing uh for this link right I'm going to add some class name so add a class name okay and we'll add a padding of two okay also along with the label I'm going to add image okay source and inside that I want to add the all icons okay so for the icon I will just copy paste this uh all big path URL and paste it here then I will add the alt tag as a icon we add a width of 25 and height of 25 okay see now let's bring everything in one line so for the this link class name we'll make it Flex we'll give gap of two and look how beautiful it's looking now okay now obviously I will add more uh styling so first I will add a text of 12 pixel then we'll make text of blue color of maybe 600 we'll match with this U icon okay then we'll make a rounded how um maybe medium we make cursor uh cursor pointer when user h on it will get to know okay and we'll make we to be full okay and if I see how beautifully it looking see okay and if I increase the size this is how it looks on the bigger screen as well so if you think that the size of the text is little smaller you can change to maybe 14 yeah that's look good now okay perfect now the thing is what we need to do one more important thing whenever for example right now um we don't add any logic over here okay when you just select any of this one right so let's add that one so if I go to this category search right here um we'll we'll wrap this du inside the link okay or you can change this du to link like this and make sure to import link from the next slash link add the H reference and here we'll add search okay so SL search and then obviously along with that we need to pass the name of the category so in this case is item do attributes do name and then save it now if I click on any of this category if I click on this uh cardiologist see it's went to this cardiologist se/ cardiologist okay now we we know that this is cardiologic and we we know how to get this value as well right now whenever uh we user select any of this category we have to mark uh here as a selected one okay so on the uh sidebar uh category list we need to add okay this particular category select user selected already okay so to do that now let's go back to category list so let's go to this layout. JS and here obviously we use this category list in this particular layout uh component right so here I'm going to add a params okay and then for this one I will say category is equal to params do c name okay and inside the category L we'll accept it as a category okay let's save both these file and now we have this category name okay if you want to print let's consolid overhead here like this and then save it now let's go back to this inspect panel go to the console and I don't know let me clean this out let refresh it okay so we got undefined okay so it's not working also if you see on the category list Light number 36 we have the warning that you need to use key props okay let's add that one so over here we'll add the key prop so we will not get in that error so we'll check why the category is not showing so here actually uh we are outside of this particular folder Okay C name and that's the reason we are not able to get this parameter value okay so let me clean this out um so we not Implement in this way okay the another way we can do it let me remove this as well uh is to use the use path uh route okay so there's one who call use path name so let me show you so here will be constant is equal to uh we can say params is equal to use path name and if you see this is importing from the next SL navigation okay so what it will do it will return this complete path okay so it will return this complete part until this point search SL cardiologist okay like that so that's the reason and we got one error so okay yeah this one okay and let me print this out for you so I will just print it out param so params like this okay and save it now if I go back to the inspect panel you will see that search SL cardiologist okay so this is how you get now we just need to face this cardiologist okay so to just get the cardio logist we can use uh the split operation okay I will Define constant category is equal to params do split by slash and we'll take second uh value okay because the split will create the array and from that array we want second uh item okay I will remove this one so see the reason that we need to do this one because we defined this uh uh category list in a layout. JS where we don't have access to this params okay so that's the reason we use this another option so don't worry means it doesn't affect uh your performance of the application okay so yeah now this category we need to use it to check which one is get selected okay so in this case if you see the cardology is selected correct so what we are going to do uh we need to add a dynamic styling so you need to wrap this uh complete class name in a curly braces and then add this tag okay like this and here in inside the dollar sign you can add the class which which you want to add it so in this case let's add for example category it matches with the item do attributes dot name then uh we can write and and operat and here we just say background blue 100 and then save it and if you see the change now currently the cardiologist is selected that's the reason in Str cardiologist okay if I go home and select the orthopedic see the arop is get selected automatically cool right also one more thing if you see right uh it's not align I think okay so let make it uh let align it so we make item to be in the center center now yeah now it's look good so next thing we also need to uh when you click on any of this uh category right obviously we need to make sure uh it will change this category obviously it will uh reload okay not reload but it will go to that particular uh page okay so for the link I'm going to Simply add search slash plus item. attributes name like this okay and then save it and now if I click on dentist so it will go to the dentist and see this um URL as well if I go to this autology general doctor immediately it get change everything so beautifully right and that's what we wanted perfect so this is how we uh added this beautiful uh side navigation bar Okay so until this point if you have any question question any doubt let me know in the comment section and one more and last important thing I want to tell you so if I decrease the screen size right still the side navigation is there right so there another option that we can hide that as well okay if you don't want that one so what we can do um inside the layout. chairs or maybe in category uh list as well right we can hide that one so better we can hide it from here so add class name we hide from here and when the screen SI screen size is medium we can add a block okay now if you see it's get hide if I increase size it will show beautiful right perfect so guys uh uh I hope you understand how we can add now next what we are going to do the selection depends on the selection of this category uh we are going to f the doctor list okay so that's what we are going to do next so in this section we are going to f the doctor list depends on the category which user selected okay so obviously uh it need to F and you need to customize the API uh endpoint okay so if I go to this strappy do documentation strappy has a very rich documentation and everything you will find it here it has a developer documentation okay and here you will find the rest API graphql back and customization and there are many more also it has a user guide to how to use strappy and everything okay so definitely visit this doc.io and here you will find the developer docs okay and everything as I say everything uh is here okay now obviously we are dealing with the rest API okay so on the left hand side you will find the rest API and here you'll find some of some of the option okay now obviously we learn how we can populate and get the data right but you can you want to filter the data or you want to short the data you want to add pation you can do that let's go to the filter option and over here you'll find a bunch of operator okay equal non and lot of operator you'll find it here okay now in our case we need to pass the category name okay to the doctor's list so that we'll face doctor information because if you go to this our content manager okay and we have this doctor section where we connected it with the category okay see okay so this doctors belong to this particular category so obviously we need to use this filter option okay and depends on that one we need to get a list of doctor when user select the category obviously we will learn it uh once we start implementing it okay so guys so in this particular section we going to show the list of doctors okay like this so obviously we are going to use existing component and only the thing is we are going to do is to pass uh data to this do uh doctor list component okay so that that's what we are going to learn so let's go back to our application and let me close all of this uh tab first and let's go to this page.js file okay so inside the C name we have this page.js file and over here I'm going to write a new component sorry new method called constant get doctors like this and inside that one we need to uh call the API okay so for that one let's go go to This Global api. jsx and inside that one let's write a new API endpoint we'll get constant get doctor by category okay here we need to pass the category okay and we say exus client. gate and obviously we say doctors okay question mark and here is the magic now okay now obviously we need to filter it out only doctor which belong to the selected category so here we'll say filters okay then we need to pass categories then inside category we need to match with the name and then we need to add a operator okay so in this case we are going to add a in operator okay let me show you why so if I go here okay and if you see there are a bunch of operator the in operator it means included in the array the reason is uh if you see the categories uh user can select multiple categories it means it has a list right and inside the category we have the name field from where we need to face the data so that's the reason I wrote uh like uh filters in that we have the categories and inside we have name and then we add Dollar in operator okay is equal Al to and then we'll add a category that's it okay and obviously we want everything so I will add the populate is equal to start like this okay and save it let's save this one as well and boom and make sure to export this get doctor by category now let's go back to our page. CHS and let's call that API so Global API do get doctor by category and here we need to pass category name so in this case is param do c name okay so whatever the it is in the parameter that category name we need to pass DOT then response obviously we just console the response for now just to check everything is working now call this get doctor like this and then save it now if I go to this inspect panel currently let me clean everything currently if you see our cardiologic is selected okay okay let's refresh the screen and if you see we got the data okay so it has a nine wow no sorry it's a category list actually so this is actually our result okay so inside the data we have data and inside have we have three doctors see okay now if if I select the dentist okay and if you see immediately we got the dentist information without refreshing this category page or without refreshing the complete page guys okay it automatically called that particular uh API having the category as a dentisty okay perfect so I hope you understand this one now just to think is we need to uh save in a one state so I will add a one state called Do List comma set doctor list is equal to use State and then here we will say say doctor list response data do data okay I will remove this one and save it perfect now the thing is that we are going to use existing doctor list component okay which we use uh inside our home screen okay so once we go to this home screen if you see right this doctor list component we are going to use it in our application so let me go to the dentist or any of this okay and now here I will say doctor list like this and inside that one we'll just add a couple of things so first thing obviously we need to give heading right if you oh I don't know we don't have a heading let me check okay so if if you see here right it right now it has only popular doctors WR over here okay so instead of that what we are going to do we'll add a params called heading and we will replace this with the heading okay and by default you can give the by default default value as well okay so for example if I give popular doctors it means whenever if I did not provide any heading value it will take popular doctors as a default value okay now once you define doctor list you can Define The Heading so I will say the uh I can just deflect category name okay so thison sorry do c name and save it and okay so we got one error that it's saying Dr list do length is undefined okay so obviously we need to provide a doctor list doctor list okay so this doctor list we provide to this uh component and then save it and boom we got the result see how beautiful right if I increase the screen size this is how it looks on the bigger screen now if I change this one see okay perfect now let's give some margin here so I will add the class name We'll add margin top to five and then save it okay now one more important thing if You observe right here is showing the blank space Okay the reason it inside the layout right let's go to this layout. JS here when the screen size is smaller we are hiding the category list but we did not hide this D okay and for currently it only get this uh it acquire only three column okay so what we can do whenever the screen size is smaller we will acquire four column and when screen size is larger or medium or larger we can acquire a three column only and boom see okay and on the bigger screen it will look like this so that's how you can use your existing component okay just you need to do is to pass a data which you want to send okay and even though if I refresh you will see this Beau beautiful skeleton effect as well because we already added to that particular component okay now if I select any of this component now for this one we don't have any data for neology should we have one see how easily it get changed right perfect so I hope guys you understand how we easily added this doctor list how we implement the repeated uh the component or reuse the component in our application and how we'll filter the API endpoint as well so that we can get the data which which we want okay depends on the category selection so guys I will definitely suggest to explore more inside the stripy documentation here you will play around with it okay you can even sort the data see if you see we have sorting option you have pagination option as well and there are lot of things you can explore with the stripy so just go ahead and explore the all these documentation so you will learn a lot of them from the stripy so when the user click on book Now button we need to navigate to this detail screen where user can see the all the doctor's details and we can give option to book the uh appointment as well okay but we we have to make sure when user want to see the details of the doctor the user need to be authenticated in our application if user is not authenticated then we are not allow to see the detail screen and then in instead of that one we will redirect it to this login screen okay so let me walk through this the complete authentication flow so that you understand much better so currently we have the home screen and the search screen okay so both the screen is accessible without any authentication you don't need authentication you can come on our application and then you can just search it and view this list of doctors but in order to access detail screen or you want to book appointment or you can access Prof profile screen or booking uh screen for that one you need to do authentication so our system or our application need to check whether user is authenticated or not if he did not authenticated then it will go to this login screen where with the help of kind authentication Service we going to add the social authentication in our application okay once with the help of this kind authentication Service everything is good and everything is uh usually this login then we will direct back to this home screen where now user can access all of these Pages as well okay so for that one and for the authentication purpose we are going to use this kind authentication Service so if you don't know what is kind authentication Service so kind authentication is one of the best authentication service provider and it's very easy to integrate and which is the best alternative for the clerk authentication so uh if you never use this kind of authentication before don't worry because in this particular course and section we are going to learn everything from the basic okay so first thing let's go to this kind.com and then just create an account okay once you create the account let's go to the dashboard okay and while you creating account it will ask you to create the new application just create it okay and select nextjs as a framework okay so right now I already have this dashboard so I will click on this add application and as we are using the nextjs we'll select the application type of backend web here I will give the name as a doctor appointment booking and then click save now here uh once we have the name if you see right on the left hand side we have Kickstart details and everything so on this option we have to select the framework so in this case it's nextjs and uh if you see we have this API key domain everything is ready right we have the allow call back URLs as well and then click click save now just uh go to this uh nextjs documentation okay and here you'll find this all the documentation uh of your application okay now one by one once you land on this uh documentation as we are you know that we are using the app router okay so just uh first thing you need to do to install this uh hdk okay so copy this one so you can select either one is not much different okay you can select this docent or this one okay not that much difference so copy this um uh install installment installation uh line and just inside the terminal just install it okay once it installed you have to go to the settings application and view details and then you have to add this call back URL okay so obviously right now we are using uh local 3,000 so we'll add this call back URL like this so let's go to this detail screen and over here if you see we have this call back URL like this okay if you have Port is different obviously you have to update it and once we are in the production we will change this or we will add another call back URL as well okay let's save it o uh okay yeah here now obviously also we need to add this log out redirect URL so I will just copy this one and paste it here and save it next we need to add or configure the environment variable some of the environment variables okay so if you see these are the variable you need to add so copy all of these and inside your env. local file let's go to this. loal file okay here we'll add it here like this okay now here obviously you need to update this client ID so with the kind okay if you go here inside the detail only you have the client ID so copy it paste it here let me decrease the size of this one then we need a client secret key okay so I will copy this secret key I will paste it here then we need the kind issuer URL okay so if you see this is how uh this is the actual uh domain name okay so these are the domain name we need to use so copy it and paste it here like this okay and these are the uh kind site URL post logout URL and login so for the login I will keep like this only and then save it after that if I scroll down you need to create this particular file and the route okay and inside that you had to create route. JS where you need to paste this one okay so best thing and easiest way that you need to you can create just copy this uh complete path okay then inside your folder go here uh inside the app right where you need to create create a file icon and then paste it here like this okay so what it will do it will automatically create the folder path and then it will add this file name called route. JS and then inside that you have to paste this line of code and save it okay then if you see uh obviously we are using the latest uh server okay so make sure that you you are using this latest import statement okay next if I scroll down little bit uh this is the uh function uh to return the promise okay so it will what it will do it will get the user information if you are using it on the server side okay now in order to add the sign up and sign in button these are the simple way that you can add it okay so what I will do now uh obviously on a header we need to add it right so go to the [Music] header and where we have this get started button right so over here we will add this login click so copy this one paste it here like this and inside this one I'm going to add the button okay like this and then save it perfect okay now if you want to test this out let's go here and go to the local Lo so right now if you see the login link is not defined make sure to import the login link okay and save it now we got one error that we need to make this page as a use client and boom everything is good now okay now if you click on the get started button right you will see it will redirect to this particular screen and it's saying we don't see any way to authenticate you at the moment okay because we did not enable any authentication Service so let's go here and inside the authentication section right you will see uh in inside the king Dash kind dashboard only you will see this option right password L password okay so you can enable whatever you want for example let's enable password let's enable Google and Facebook as well okay and save it now you have a lot of option okay let me go to the home and here you will see uh the setting option right on the homepage of the dashboard once you go into the setting okay here you will on the left hand side you will see authentication part okay where you can add more authentication Service see there are lot of service in one click you can add it guys okay this is how easy it is with the K authentication okay so let's move back to our uh application and just make sure inside the authentication we enable this one okay now let me go back to a screen refresh it once and now click get started and boom see our authentication page is ready okay we have beautiful icon and we can add a email you can login with the Google and Facebook as well okay now the thing is okay I already have this login screen UI ready okay and that is I already added from this one so let me show you how so from this panel we have option called design okay select here I uploaded this uh image okay so uh you can upload any image you want okay it's up to you then you can have option to upload image for the dark the fa icon okay you can even select the theme as well okay you have select the background uh color as well and button color as well I will keep everything as it is okay then in uh email setting you have option where you are sending email and all for a sign in okay this is how it looks right for a sign in now you have option to edit this page so edit it and obviously you can upload the image whatever image you want guys okay so this is the image I uploaded and uh you can have alignment on the left you can have alignment rate Center whatever you want so I keep on the left and on on the sorry I kep everything on the right and I put the image on the left hand side okay and then save everything okay you can your split the screen as well it's up to you how you want to do okay so I will keep everything as it is and that's how um this particular screen will look like okay you don't need to do anything guys see how easy it is right now here you have option click continue with Google and you will see the option to select the Google account let's select the one account which I want to log in and once you log in it will redirect to this home screen see how beautiful right now you actually authenticated obviously we did not update this button okay so let's update this button now so let me close this one and obviously we need to know whether user is login or not okay and depends on that one we need to uh show this button correct so if I go to this kind of uh documentation and if you scroll down you have option here to log out okay this link we need it so I will copy this one log out functionality and I will paste it here only thing that I'm going to add uh this log out import statement then if I scroll down little bit here you can how this is how you can get the authentication data on the server side but obviously we need a client side if you scroll down you have option from the clent for the client side as well okay so it's very easy uh this is the fun uh Hook from the kind to get the data and this much data you can get it from that kind browser client okay so what I will do I will just copy this and then over here I add constant now we need a user information is equal to and then add this use CR browser client make sure to import it okay see like this and save it now in order to uh show you what are the contents inside the user let me print it out inside the use effect make sure whenever the user is user data is available make sure to execute this use effect so that you can uh see the actual data okay and save it now if I go back to our application go to inspect panel go to the console and if you see this is the on line number 30 right we showing user and if you see we got the email family name given name and we have the picture URL as well cool right so it means user is authenticated and this is the user information now once we have the user information right here we can show if user is available then we will show this log out link otherwise we will show this get started button correct like this now obviously I will I'm going to add button to this log out as well so I will add a button like this here okay and I will make this variant is equal to outline so this is outline button okay and let me close and if you see we now log out button so cool right now along with that um we can add multiple option actually okay we can redesign this uh particular section so how you can do so simply go to this Shad CN and over here uh just search for the pop over okay so once I click on this button you'll see this option right here as well you can show the um this log out option as well so what I'm going to do now uh whenever the user is available I'm going to add user image okay so let me open our application as well side by side okay and here we have we going to provide Source now obviously we will use the users Dot and the picture because we want to show the picture right here I'm going to you alt obviously uh we'll come in this log out link for now and for this one let's say profile image as alt name width I'm going to give 50 and let's give height of 50 and save it okay so right now if you see we got the error that host name this Google user content is not configured okay so copy this one go to this next. config and make sure to add this one okay so this domain need to be there now it will restart our application okay so let's wait wait to restart it and it will refresh it here and good it refresh it okay and if you see as soon as the user information is available it's showing this beautiful user image now I can add the class name for example if you want to make rounded make rounded to be full perfect see okay and if I increase the size this is your profile image okay now obviously on the click of that you can show the option for log out and for all other option like my booking and everything okay that you can do it so for that one I'm going to go to this uh Shad here I'm going to use add popover I think we already add the popover let's make sure that we have the popover component added so you can check inside the component okay we don't have actually okay let's add one so copy this npm command go to your project and paste it here okay once this component get added you have to add this complete import statement so I will just copy and then this is the code for the popor okay so this I'm going to add under this image okay now what you have to do this is the trigger actually okay trigger when I say trigger trigger means when you click on some uh thing okay so obviously on click of this image we need to trigger this okay so that's the reason I kept this image inside the pop hour trigger and let's save it and let's test this out now if I click on this one see this contain is showing this is the content right now it's showing right see this one okay now here I'm going to add UL like and here I say log off okay and if you see we have this log out option now if I increase the size see this log out option is showing here now currently this pop is too big right so you can add the class name and we'll set the width maybe 44 and yeah that's good and if I increase size see this how option look like okay now obviously you can add more option for example if you want to add uh profile and my booking okay so let's add a profile and here I will say my booking and another is order okay see like this now let's add some margin so we say class name make it Flex Flex column we go Gap of two perfect okay and for everything I'm going to add cursor pointer cursor pointer and also we'll make background to be maybe uh slate 100 padding of two see like this so this I'm going to add on a hour only okay and along just to give the button effect okay and we'll say round rounded to be medium so let's see perfect another option is okay because I we know that we uh add our own styling right but if I go to this button okay so just now I realize here we have this button called okay this one maybe this one or yeah this one see okay so you can use this button and it's simple it's saying uh ghost variant ghost wow so let's add that one instead of adding all of this code okay maybe I will add button directly over here but let's make sure okay I will keep as it is because but if if I add the bottom button uh text will come in Center so just this is much easier actually and for log as well okay and if you see if I have H on it see beautifully perfect okay now for this log out okay this particular link we need to add so log out link okay here we can add it like this and save it obviously we don't need this anymore now and save it okay let's test this out now if I go here click log out and boom it's log out and jump on this screen and you if you see this button also get changed right now if I click on get started again and obviously you need to log in back okay so let's log in [Music] it and see the is sh no profile icon with this all the option perfect sounds good right next we going to learn learn how we can um uh what do you say protect the page from accessing it without authentication okay for example if I go to this page called details SL some ID okay right now it's going right because we authenticated but what if you did not authenticated let's try to log out here okay if I log out see it's showing or it's go to this home screen okay but if I go to this detail screen I'm still able to access it right and that's what we don't want to okay so that's what we are going to learn that how we can protect the page from the authentication sorry from the accessing page uh if user is not authenticated now as I say early right we need to add or protect the page okay if us is not authenticated so that's where nextjs middleware is play very important role right so middleware uh JS or TS file uh will be added inside the njs application okay and what it will do it will Pro it will check whether the user has access to that particular page or user is authenticated depends on our logic and then only it will allow you to access that page okay otherwise you have to it will redirect to this uh uh login screen okay so for example if you see this is the simple example right over here uh it will check uh this particular path if this path is matches and user is not authenticated it will rir to this home screen okay so simple thing let's do one thing let's uh select JavaScript copy this middleware okay obviously before that we have to create this file called middleware DJs and over here on uh so we have to create inside the root directory okay so create new file called M.J and then copy this all line line of code and paste it here like this okay and then save it now once you add that one we have to add uh the uh screen which you want to protect right so in this case is details and the dynamic path so I will keep as it is and then save it okay now let's go to this kind API okay so sorry the documentation okay and here you have option called if you see right on the right hand side you have option called rotating the routes okay and let's search for this prot in route so here what we are going to do obviously there are some multiple way that you can protect your screen okay for the server side you have uh this uh hook okay sorry this function where it used to check whether it's authenticated or not for the client as well you have the uh this hook called use kind browse client and with that you can check it out okay but for every page you have to Define in the such a way right so to avoid that one what we can do we can add uh the routing inside the middleware like this see okay but uh if you see over here it has issue that not issue but um currently in the next js13 or later version right this API sl/ login is not going to work okay and that's the reason that also not going to work but don't worry I'm going to give you the best solution okay just remember we need to check whether this user is authenticated or not okay this method and with this method we'll check and if it's not authenticated then it will redirect okay it will redirect to this um uh login screen okay so for that one obviously uh for the middle we okay I'm going to use this get K server session so copy this one let me get it like this and inside here I will paste it okay make sure to import the server session okay so in order to import it make sure to copy this one okay don't directly import it so copy This Server import statement as it is then then uh let's go down and uh obviously we need to check like this okay so this okay this is the best actually example right and I will just copy here see like this okay obviously if you see U it's need await so make this function as a sync okay and then uh in the next response right I will copy this response inside this one obviously we are not going to use this redirect uh route and I will just copy this AP uh the route over here like this okay and along with that one I'm going to add the post login redirect URL okay this is important so you can tell user once you login we here to redirect it okay you can give the custom page but right now we redirect to the home screen and boom you are done guys okay so after that one if you think okay you want to add more routing option or routing um some some pages or some route which need to be uh authenticated before accessing it right you can just add it inside the bracket by giving comma okay let's save this one now for now and let's go to our application let's try to access the details SL five and boom it see it redirect it okay but if you try to access local 3,000 it is accessible right now I don't know uh we did not add the book now uh event okay let's add a book now on the click of book now so we'll because it's easy to test it as well okay let me close all of this tab go to this doctor list where we have this book now okay wrap this h2 tag inside the link add the H reference so here what we are going to do we will go to this detail screen okay and then at along with that we'll pass the record ID which is the uh doctor. ID okay simply and wrap this book now here like this and save it now we so here just make the WID to be full so class name we'll say WID to be full perfect now if I click on any of these button right it's supposed to redirect to the uh detail screen but it's redirecting to this loging screen because user is not authenticated and as I say in order to access this detail screen see okay you need to authenticate it and that's where the midle we are already taking care of now let's lock Lo in it now and let's login with the account and boom you are on the home screen now try to access it okay if I try to book now and boom you went to the detail screen along with you have user ID as well okay now you can access any of this particular uh uh Doctor Detail screen and it will navigate to detail screen because you already authenticated okay so guys that's how it works okay so I hope you understand that with the help of next middleware how we uh protect our page okay so this is the middle wear. JS file and very simp in a simple uh line of code we successfully implemented the authentication part now until this point we are successfully able to add authentication and we can able to protect our page okay now on in this particular section what we are going to do we are going to which the user information depends on the ID which user click okay means for example user open the particular uh doctor's detail to uh see all the details right from that ID we going to f the doctor's information and this is how the UI will be look like so here will be the doctor's image here will be the do um the details of the doctor below that we will show the description and on the right hand side we going to show the others doctor or suggestion list so let's go back to our application and let me close all of this tab for now and then go to this details uh screen so inside the route where we have this detail okay and inside that we have a record ID and there we have page now obviously in order to get the record ID we can just write params and then from the params do record ID we'll get uh this particular ID okay now obviously first thing we need to do is to add the global API okay the endpoint we need to add it so let's go to This Global API to add the Endo so here I will constant get doctor by ID here we need to pass the record ID okay so I will say just ID and here ex client doget and the end point is doctors okay so slash doctors like this okay and now if you want to page only single record right let me show you how so obviously you can go to this content manager okay and inside the setting the API token okay so let's go to the doctor and over here you will see right you have one find it will fet all the list of doctors you have the option called find one okay it means to fet only one doctor information and this is how you can pass you can just pass slash the ID of the record so okay so let's go back back and here we'll just pass the ID which is plus ID plus I want to fetch uh all the information so let's just write populate is equal to Star and then make sure to export this one like this and save it now let's go back to our page uh The Details page and just write method called constant get doctor by ID like this and here we'll say Global API get doctor by ID and here we need to pass the record ID which is this record ID so parents. record ID okay dot then and then we'll get the response so every time I show you the console right the reason is U before writing the complete code make sure you will U move forward step by step okay you have to check whether we are getting the uh result or not if you are not getting the result then you can just look back from this uh step only right you don't need to debug or anything like that now just call this gate doctor by ID inside the use effect and then save it now go to the inspect panel to just check whether we got the correct data and if you see oh I don't know whether you got it Let me refresh it again so okay we CAU one error that use effect we use this use effect obviously you have to make this page as use client save it and boom and if you see we got the data okay on line page number sorry page 12 sorry the line number 12 and inside that we have the data perfect okay and if you see we got only a singles doctor information perfect right now let's save this data so constant doctor comma set doctor is equal to use state and in we set the doctor as a response. data. data perfect okay and you have this uh error uh which is a CLI props from dat you can just update it okay now once you add that one we will remove this one now here we need to divide screen in a couple of Parts but before that I will give the heading I just say details and uh here I'm going to add styling so I will add class name we add font size bold text of 22 pixel something like this and obviously we'll give some padding so add a class name we'll give padding of five okay and uh when the screen size is medium or larger we give padding X maybe 20 okay so on on a bigger size it will look like this now as I say okay I show you this layout okay and if you see actually we divide our screen into two section this is the First Column and then there is another column which is this one correct obviously if you see we can uh give out of four column you can give three column to this one and one column to this one that's how you can divide the screen using the grid so let's add that one so add a de so add a class name we make a grid we'll make grid column 4 okay and when the screen size is uh smaller okay let make this for the medium screen size and for a smaller screen side I will just make it column one only now inside that first thing I'm going to add two do okay so this du is for uh Doctor Detail okay and this do for do suggestion so we'll say doctor suggestion okay now in order to add the Doctor Detail right if you see we have the image again we we divide the screen in two parts right the image and the uh information okay so again inside the DU here this du is for I will say uh doctor image okay and there is another I'm going to add that is for um doctor information doctor info okay so I'm going to add class name I will add uh grid call sorry make a grid then we make grid column one if the screen size is smaller and if the screen size is larger make grid column of uh three okay out of the three column I'm going to give two column to this doctor info grid not grid but columns pan two okay same thing uh for this Doctor Detail screen right here we going to give column span three okay so out of four column we give three column like this okay for the Doctor Detail and one for the doctor suggestion and inside that we again added the doctor image and doctor information okay now uh there are couple of way you can just write your code over here or you can Define it somewhere uh some other component and that that component you can put it here okay it's up to you so it's better we can keep that one um outside okay so what we can do uh let's define one component actually inside the uh detail let's create a new folder called components and inside that I'm going to write a new file called uh Doctor Detail doj jsx add the default template and save it now here I will copy all of this code like this okay obviously we don't need to Define this columns pan and just we will Define it over here I will remove this code okay obviously we don't need this one now okay because we going to add this doc detail component directly over here okay something like this and now everything's look good to me let's save this one let's save this one and obviously nothing is showing on the screen because we don't uh put anything okay but now what we need to do for this Doctor Detail component we will say doctor information so just add doctor doctor and let's pass it here and accept it here as a prompt now first thing let's add a image Source here we're going to add doctor and the complete path right is big part so I'm going to get it from this doctor list so I want to add image so I will just copy from here and paste it here okay let's save it and make sure you're getting data so right now we got error that doctor undefined right because maybe doctor information is not there right so what we can do another option is to add a condition if doctor information is there then only show this Doctor Detail page and now it's saying missing width and height that's fine we can give that one with 200 height I'll give 200 and I'll tag I will give the off for example doctor image okay and if you see the doctor image showing on the screen let's give make the rounded Corner not here in the class name rounded to be large maybe here I increase the height to be 300 pixel okay and we make object to be cover okay just make it 260 270 sorry okay something like this if I inrease side this is how it looks and that's quite looks good to me okay and then you can okay so here is thing right you can just if I do the withd full okay this is how it looks when the screen size is smaller and on big screen it will look like this it's up to you how you want to uh do it okay then next we want to add the doctor information so we'll add it here so first thing oops I lost my cursor yeah the first thing is to add the um doctor name so it will be in doctor. attribute. name so for that one let's add a class name and we'll make font to be bold okay and then we'll make a text of 2 XEL text of 2 XEL something like this same also we can margin top to five perfect after that I'm going to add another two tag inside that I'm going to show the experience okay and the the icon so I add graduation cap as icon and then in inside the span tag oh God inside the span tag I'm going to add year of experience okay so it will be a let's copy from the doctor list this one so year of experience and and obviously here I will say 12 years of experience something like this okay and along with that we have this graduation cap let's add a styling so class name uh let make it Flex gap of two then text of gray 500 and T should be media perfect after that I'm going to add the address so add just two tag inside that I'm going to add map as icon and then inside the span tag I'm going to add the address so doctor. attributes do address okay like makeing one line so um make it class name like text of medium size make it FX gap of two and text of gray sorry of gray 500 perfect okay now uh for this d right we can make it Flex make it Flex column and then you can give gap of three okay something like this say now once we did that we we will add the category name as well okay below this one only so let's add that one as well so here I added the address okay the year of experience and also I added this uh doctor's uh category name okay so I just copy from here paste it over here and just make sure to mark this as a baseline okay if you did not mark it will look like this see okay so make sure to mark it as a Baseline and then save it okay perfect now what we need to do I need to add the list of social media icon okay where user can click it and it will open the social media uh site for that particular doctor so for that one I already added some of the uh icon over here okay so I pause the video and I added all of the this icon which we needed uh to display it as a social media icon okay before that if you see this uh if I increase green size this is how it looks okay and this is quite weird because this is touching uh this two column okay so you can give some Gap so for this one let's add padding X maybe 10 okay when the screen size is medium now if I increase the size and beautifully it look like this perfect now what I'm going to do I'm going to write one um l list so call me on social media list inside that let's IDE add ID then icon for example let's add SL youtube.png then another ID the icon for example let's add uh what is that Linkin UPS do PNG okay and here you can add a URL as well okay if you have any URL but right now I'll keep as it is okay so here uh for now we don't have actual data but we can make sure to add that placeholder for three we have the Twitter Twitter and the last is I will add for Facebook okay now this is the actual the path for this icon okay that's the reason I added directly now in order to iterate this one right inside this uh Dr info D only I'm going to add it here inside that we'll just iterate that social media menu list so map item comma index like this okay inside that let's add a image and source source will be item. icon okay I will add the key as index then we will give width of 30 height of 30 okay so it look like our file name is not correct let me confirm it once so we have linkedin.png that is correct then we have twitter.png that is also right okay so just make sure to make this icon I because here is I mention at Icon okay and let's see now okay now things look good perfect okay now let's bring in one line so it's quite easy for this one make it class name as a flex go Gap of three perfect okay and on big screen this is how beautifully it looks see and the last we need to show the button for the book the appointment so here I'm going to add a button from the U button and then here I will say book appointment and then save it now I will give the class name you margin top to three then I will make rounded corner to be full and I think that's all okay perfect see now we have this beautiful option called book appointment as well okay the next thing I'm going to add border to this one okay so for for this complete de I'm going to add border of one pixel okay we give padding of five margin top to five also make a rounded to be a large and see so beautiful right also uh after that we're going to add the description so this is a doctor image this is a doctor information and here will be the um about doctor okay so here I'm going to add a d inside that I will write h2 tag here will say about me class name Lim font bold and text of 20 pixel then I will add paragraph it will has doctor do attributes do above okay see obviously we use some styling so I will class name we make text gray color 5 and I will make this tracking little wider something like this okay you can make a wider as well up to you see make it wide is much better you margin top to two okay and if I increase the size okay so right now it came under this image actually okay so let's do one thing let's bring this D outside of this D okay so oh sorry and then wrap this T you can just wrap it as a empty as well like this okay not necessary that you need to add a tag this is called empty tag as well okay and now looks good to me over yeah perfect let's add a border to this de so let's add a class name We'll add a padding of three border of one pixel rounded to be large see okay we also give margin top five perfect see okay now guys uh as you know that okay uh we added this doctor list right uh on in a grid format same thing you can do it uh when we go to over here right we have this particular section called uh list of the uh doctors right you can try to create a new component called doctor list you already have the API which you are feing the all doctor list and you can show it here okay it's is up to you how you want to design okay so I will pause the video over here and then I will make myself uh uh the new component and I will show you the end result how it actually looks so guys I created this uh component called doctor suggestion list uh inside this details _ component folder okay where I am just fing the all the doctor list and I just iterate it okay and there are some uh design that I added here then inside the uh Details page okay here inside the doctor suggestion uh section I added this doctor suggestion list as simple as that and save it okay now you this is how the end result will look like see okay you can uh have all H in it and you can even scroll everything will be there right so this this kind of uh use of the UI is very uh useful when you want to fill your screen okay and this is how beautifully it looks like see but not only this but even though you can click from here if I click on this particular uh doctor it's automatically open that doctor on the same screen see how beautiful right and everything will be as it is so guys that's how we beautifully designed this uh detail screen and this is just this is not just a uh uh what you say uh for the web but it's completely responsive okay if I decrease the screen size and if you see this is how it looks on the smaller screen okay now you can break the point wh you want for example if you see over here it's not look good good okay so on the medium screen you can just uh change that layout size and then you'll uh a the proper layout okay so in order to fix that particular issue right what we can do uh let me go back to our main page actually okay so over here on the medium screen we give the GD column four right and uh here we can give add on the large screen only okay and now if you see see until this point it's look good and as soon as I increase size you saw this one and now we don't have that mismatch issue okay that will also be solid so guys I hope you understand if you have any question let me know in the comment section if you want all the source code the assets and everything the link is in the description is completely free you can access it okay and we'll see you in the next section so in this section we are going to implement the booking appointment dialogue where us click on this booking appointment button and then we will show the dialogue where user can select the date from the calendar and the select the time slot and then they can book uh the particular slot okay and they can do the appointment so for that one if you see this is how it will look like okay simply so it has a dialogue it has a calendar on the left side uh the time slot on the right hand side and then it will give save and cancel button okay so let's go back to our application let me open like this yeah and over here let me close all of this tab okay so first thing we need to do to add a dialogue okay so so from the shadan we can add the dialogue so just search the component called dialogue and here if we see right this is how it looks so this is what uh we want okay so once user click on any button we need to open that dialogue so in order to install that one you need to copy this npm command and go to your terminal and just paste it so that you can you will install that particular dialogue then you have to import this uh all the import statement okay so for that one what we are going to do uh we are going to create a new component inside this uh details component folder and we can call it as a book appointment jsx okay and we'll add a default template and then save it and then we'll add this import statement for the dialogue so we'll keep the our dialogue uh component everything the book appointment logic inside this component uh the book appointment component okay and then we'll copy this uh dialog code okay and then we'll paste it here like this and then save it now if you see this is the dialogue and inside the dialogue we have this dialogue trigger okay this dialogue trigger is used to open the dialogue okay so whatever the uh in inside this dialogue contain it will open that one okay so let me show you but before that you need to add this book appointment component inside your page.js okay so uh maybe inside the Doctor Detail page where we have the button okay book appointment button so after this one we can add it okay so we'll add book appointment component and then save it now if I go back to our application Let me refresh it once and if you see now it has this text call open now if I click on click on it this is how dialog will displayed on the screen okay but we want that on the click of this book appointment okay so simply what we can do we'll remove this button okay and inside the book appointment inside this dialog trigger we add that button like this okay and if I save it I'll make sure to import this button okay so let's save this one and now see we have this book appointment okay let's uh save this page as well let's save this page as well okay now if you see we have only one book opment button now if I click on that one see the dialogue is open okay perfect now obviously we need to change the content of that one so over here I will say I will change the dialog title will say book appointment and inside the description obviously you want to change the description okay so uh I'm going to add one de okay inside that we'll add another de where uh first we need to show a calendar and then we need to show um the time slot okay so in order to add the calendar okay uh we will actually we will divide our dialog into two part okay so let me add that one so let's uh add a grid okay uh we'll add a grid of column two okay and the first due is for calendar so first due is for calendar and second do is for the slot now for the calendar right if I go to the shat shat has the calendar component okay and this is how beautiful is get uh it will this component is right so it's very easy to install so first thing you need to add this calendar component inside your uh project so copy this command go here and paste it then this is the how you can use it okay so oh so right now we got one error let's see what's the issue I think we copy incorrect one npm let's paste it here save this so actually the calendar compony is already there maybe that's the reason is showing error but right now if you see uh inside this component sorry uh this component we have this calendar okay so we are good with that now let's add this UT statement so I will just add the UT statement over here then we need to add this uh simple use State okay so I will add this much only because we will add our own is equal to use State and inside the use State we have to give a current date so new date okay and then this is the actual component which we are going to use it copy that one and inside the calendar do we'll paste it here and then save it now if I go back back to our application so right now we got one error can resolve react D Pier so over here I got that error I just restart my uh server and it gone now okay so okay let's begin again so here if I click on okay if you see now we have this beautiful calendar but this calendar is going out of layout right see okay so to fix this one what we can do uh inside the dialogue because this dialogue is has some specific right we can increase the width as well so go to this uh component okay which is called dialog and inside this component you can customize this component as well okay so over here uh if you see right we have the option over here called maximum withd large okay so here we can change this to maybe uh 2 XEL and if I go here now and if you see now it's look good to me perfect okay next uh to fix this on a smaller screen right let's go back to our application uh the a page called booking appointment and inside this component I'm going to add this as a baseline I'm not sure this will work or not let's add a baseline or you can add okay let's add a class name here and make it Flex yeah and see that works okay perfect also when the screen size is smaller we can add sorry uh when the screen size is extra small right we can add the grid colum one and only when the screen size is medium we can add one something like this now um inside this du I'm going to add h2 tag and inside that I'm going to add icon called calendar days okay and then after that I'm going to uh write a some text for example let's say select dat okay now make this Flex column and like to make item Baseline perfect now for this one I will make class name Flex gap of three we two item to be in the center so vertically it will come Center then uh for this du I'm going to give gap of three perfect and for this calendar I'm going to add um text primary okay height five width five see perfect and I think that's good enough okay then after that I want to add slot okay but before that make sure on the bigger screen everything's look good okay obviously we'll give some margin from the top so for this one only or make you can give margin or here margin top to five okay perfect let's increase the size and that look good to me now for the time slot right we need to generate the time slot here okay so I already have um one method okay I already written it and for the previous app as well I I use the same method so I will just paste that down okay because I don't want to waste time to write it so it's simple that it will uh start with the 10:00 and until 12:00 and then we are pushing that Value First we'll put the zero and then we'll keep the 30 minutes of time slot okay so this is for the am and this is for the PM time okay and obviously I'm going to add a constant we'll say time slot comma set time slot is equal to use State okay and we'll just make sure that we will add in time slot okay that is correct okay so whatever the time list we'll push in this particular array we going to add inside this one if you want to access this source code the link is in the description next we just call use effect and inside the use effect I'm going to call this get time so whenever we launch this dialogue immediately we'll get the uh slot okay and save it perfect now next uh we need to display that time slot okay so in order to display that time slot let's add we we will simply iterate it okay so let's add a d inside that I will add the time slot do map item comma index okay and inside that one I'm going to add h2 tag inside that I will just write item. time because this is how we sa right so see this time and then save it and if you see we got this list bunch of list of time okay and if You observe each time is uh gap of 30 minutes okay so 10 10:30 11 11:30 12 12:30 then 1 1:30 kind of thing okay after that we're going to give some style so before that let me uh okay let me add a style of class name padding of two then I will add a border then rounded full something like this see okay and we'll make class name make it grid grid calls three maybe perfect then we add a gap of three maybe two is fine yeah and for this du I'm going to add class name margin top to four or maybe three something like this okay also for this particular de uh similar like this one right I'm going to add a border so let's add a border we'll add rounded large okay we'll give padding of three perfect okay now similar like this particular text right I'm going to add text over here as well and here I'm going to say h2 tag inside that we'll add a clock I don't know clock or time so we'll simply add a uh clock there only okay so we'll search for the clock icon yeah and then it will just say uh select time slot see like this okay obviously we need to bring this class name Flex gap of two item to be in the center and for this one I will change this color T primary height five width five perfect okay and obviously uh we go Gap of three or not here uh okay that's fine we can give margin bottom to five let's see how it looks see and on the bigger screen this how beautiful it looks right so for example right now if you see uh this is not matching okay let me do one thing this margin top I'm I'm going to um give only when the screen size is smaller when the screen size is medium or larger I'm going to add margin top to zero perfect now everything in one line okay and then you have beautiful option to select the slot as well okay along with that let me add more padding actually so over here going to add padding off four let's see let's add one more pading of five perfect and and now if you see we have beautiful slot okay also we'll make uh we'll add some more style to this slot okay so first important thing I want to add to make text align into Center okay and then on Hover I want to change the background to primary and on Hover as well I'm going to add text of white so if I H on with this here okay also make sure to add a cursor pointer that to that one perfect see okay sounds good now Another Thing Once you just select any of this time slot right we need to save that time slot and we need to uh show this background color like primary one okay so let's uh create one state here I'm going to add a constant selected slot we say selected time slot comma set selected time slot is equal to use State okay now whenever user click on this particular button we can say so let me add this one so I will say on click then we'll set set selected time slot which is equal to this particular time so item do time okay and save it so right now we got error that time do slot undefined okay so make sure perfect let's add a book appointment now and yeah okay now if I click on click on this one obviously time slot it get save but uh we did not add a styling okay so what we can do in order to add Dynamic styling let's wrap it in a querly braces then this particular tag let me remove this one and inside a dollar you can write your condition so in this case we'll say item. time okay is equal to equal to selected time slot and we add and and operation then show background primary and background white oh sorry the text white and save it see now if I select this one see now it's persisting correct now user get to know that you can select this one now another important thing right whenever user want to select the time slot we have to make sure that all the previous time should be disabled because here right now if you see user can select the past time as well okay and that's what we don't want it okay so what we can do for this calendar we have option called disable Okay and for this option we can create one method okay called is past date okay it will check whether the given date is a past date or not and simply let's create one method constant is past day and here it will just return if day is less than new date okay and let's test this out now let's open a book appointment so if you see day is not defined it's saying day is not defined so we have to pass day over here and then save it now let's again check it out and if you see now all of this previous time slot is um not selectable even though you can do the current or today's time slot as well okay so for example if I select this one see today's time slot is disabled now but you can select this one see the the next day one okay that's what we wanted and is expected and on the bigger screen this is how it looks okay now we need to give two button one for the cancel and one for the uh to book the appointment or to save or submit the appointment so for that one we need to add a two button okay and on the on that button obviously we need to make sure that this dialogue also get closed once user click on cancel button okay so for that one uh inside this dialog uh documentation in s CN okay here if you see on the right hand side we have option called custom close button okay and there is little bit different way that we need to implement this custom little uh close button okay so we need to wrap the button inside this dialog footer okay and inside that we have to add dialog close Okay so let's copy this dialog footer completely and and then inside your so this will be inside your dialog content only okay so maybe after dialog header you can paste this one let's save it and let's see how it looks for now okay so obviously make sure to import this dialog footer and then dialog close as well and then save it let's test this out so let me increase the size and if you see now we have this beautiful close button if if I click on this one see the dialogue getting closed okay now only thing that we need to do to bring this and to add one more button actually okay so let me decrease the size because my screen size is little larger and over here I'm going to add one more button and it will say book or we can say submit okay and the variant I'm going to give I will keep as it is okay the primary one so seeing reaction only re okay so obviously we need to wrap this in one day uh one tag only so book appointment now if you see we have two button okay uh for this close button okay let's make the class name we add a class name possibly we'll make text of r red 500 okay so it will be in the close format uh I will change the variant to be outline and I will add the border to be 500 again something like this see okay and then we'll also have this beautiful submit button now just only thing that we need to do is to make this on the right hand side okay so let's so here you can just mention justify and and if you see it's on the right hand side perfect if I increase the screen size this is how it looks okay let me increase the yeah now you can select the date you can select the time and then you can click submit okay but one last important thing that we have to make sure that once you just select this option then only we need to uh show or enable this button to submit it so to do that okay uh we can disable this button okay so just just write disable and over here we can write the condition uh the if date is selected and and um the time slot okay so selected time slot okay and obviously we going to add negative is not if date and select time is not selected then disable the button okay and let me check yep me refresh this one click book appointment and if you see the button is we disabled okay but as soon as we select the uh time slot and some time sorry um the C the date and time and this if you see the button is enabled now and now we can a you can easily write the logic behind the submit button that once you just select this all the details just click save and you are you can push the data okay so I hope you understand actually how we beautifully implement this dialog box and the calendar and time slot now next we will add a logic to save the data now let's save this booking once you just select the information okay here one more thing I added that uh I added this text area okay and which help us to write a note for the user if you want to send any note along with this uh booking okay so that's the reason I added this note text area the similar like the one which we added in the application which we developed before right so now in order to save the data right we need to make a post uh request and if you want to know how can we do inside um using the strappy right so here u in the documentation you will find it uh all the information right so here on the left hand side you'll find option called create entry and it will help us to learn how you can create the entry so for example here uh if you want to save the restaurant information right so this is the post request call okay and then you have to format the data inside your data uh field okay data object check and inside that you can add the value which you want to save it okay also if you uh let me go through our uh appointment schema okay so inside the appointment schema I have username email date time okay note and Doctor also because uh we have Hospital in the application so you can put it or you can ignore that one but make sure to add the doctor so this is the reference which we connected to this doctor collection okay so you don't need to add all the doctor information you just need to provide the ID for this doctor field and it automatically connect uh to this doctor information okay so we'll tell you how uh how to do it okay so let's go back and make sure you understand this how you can uh uh create an entry inside the stripy so uh first thing let's go to This Global uh Global API where we can write a post API call inpoint so constant uh create booking appoint you can just write um book appointment here we'll pass the data okay the response body the ex Cent dot here you need to select the post call okay then uh the our API endpoint is appointments comma data okay which you want to pass now copy this book appointment like this and then save it now the book appointment uh uh is available to use it now let's go to this book appointment uh field okay now here a couple of things we needed so first thing we need a doctor information and then we also need a user information okay so doctor information we we can get it from our page.js file okay so inside this details we have this page.js we have we use this sorry inside the Doctor Detail okay go Doctor Detail where we use this book appointment okay here we'll just simply pass the doctor information we'll say doctor okay so whatever doctor information we pass to this Doctor Detail same thing we pass to the book appointment so inside the book appointment now we have the doctor information okay let's save everything and also we need a user information to save the user detail so constant user and with the help of kind your hook we can get this user information so we have to use this use kind browser client like this and then save it now let's create a new method so constant save booking and the aror function like this okay now here as I said we have to define a data first so in the form of data so okay so this is very important okay inside the data you can provide all the field which you want to save you have to make sure when you are saving the data uh let me go here okay you the field name should be match with this particular name okay so in this case for example username it should match with the one which we we wrote okay so in this case is usern name let me decrease the size okay okay let me go to the content manager it's not visible actually then then we have the email date time so just use that one okay obviously first we need to write user name which will be the user okay this user which we get from this client um c browser client dot given name obviously we'll sa full name so I will write first name and the last name which is user do family name okay then email so which will get it from user. email then we need to write um time slot okay so time I don't know what's the field name called time and date okay simply time and date time is equal to selected time slot and then date is equal to just simply date okay so this dat this capital and the doctor so here we need to provide because this is a reference right we need to add doctor. ID so do doctor's ID we need to attach it here okay so these are the field we need to save and if you have a note then note as well make sure the note spelling is correct so it's capital N like this and then save it now once with the data is ready now you can call Global API dot here you can say book appointment then pass the data dot then and then we'll get the response okay now we just console the response here and if the response is successful we going to add a toor message okay so if you don't know what is toor message let me show you and the uh there is a component called in Shad called toast so here if I click on this one right this is kind of toast M will able to see okay but recently in shat they added one more component called sonar okay it also act like as a toast only okay but it's very um easy to use and also if you see right if I add a couple of them right like this and if i h on this one you'll see all the toor message which get just added okay so this is beautiful and very easy to use first thing you need to install this component so copy this command run it in your terminal so let me open my terminal here I will just paste it and then uh inside the layout. DSX okay parent layout you have to add this uh component called toaster okay so inside the layout so make sure you will select this parent layout okay here below the children I will add it and then import this sonar okay the import statement you have to add it then you can just use that one okay so wherever you want want to use you can use it for example if the response is successful I can just add a message Comm toast see like this and then the message for example you can write um booking confirmation will send you on email or you can say book comp sent wire through S on email okay something like this and let's test this out now okay so click on book appointment let me increase the size okay now if you see the button is uh disabled now select the time some date and some note okay um first booking testing okay and click submit now if you see nothing get happened wow let me okay the the reason we nothing get happened because we did not connect our save booking to our button so let's go back here and over here we have this button correct so we'll just say on click and here we will attach that one okay save booking now I think we are good let's select some time slot we have this one let's click submit okay so we got one error okay let's go to the inspect panel go to the console and one if you see the note is it's saying that note is not defined okay so online 60 so let's go here so this note is not defined we have to capitalize this note okay so that's the reason let's clean everything and let's test this out again okay so click submit and if you see we got this booking confirmation sent on email okay perfect that's what we wanted right so we have the now uh successfully save the data let's let's check in the database so let's go to this content manager we have where we have this appointment let's refresh the screen once and here now if you see this is the latest item inserted and if you see the user name email the date get inserted and the time as well okay so this is the date on which uh you the user created and he selected the time slot and along with that we have this note called first booking test testing okay so the thing is only that doctor is not get connected see okay so there is an issue to connect with the doctor let's see what's the issue so let's check this over here okay so let's comment this out I added the console do data make sure that we are getting the uh doctor's ID let me clean everything and if I submit this one now if you see we have console let's see and here we have the doctor okay it's it's showing that doctor has a complete ID that's correct let's take this out again and uh let's select the time slot select the morning time um my wife is not feeling well click submit and we got this booking confirmation then let's go back to strappy let's refresh it okay now we have this latest item let's see and okay now we if you see the doctor is get attached okay so initially there's some issue I don't know what but now the doctor information is there perfect so that's what we wanted and every every details all the details we get saved okay so this is how easily with the strappy you can save the data okay with the help of raised API so that's the reason strapy is quite helpful you don't need to create an API strapy is already taking care of all all of these things okay now it's on your hand how you want to customize guys okay you can customize it more according to your needs and everything so until this point if you have any question any doubt let me know in the comment section and we'll go from there also now next what we are going to do once the booking is confirmed right um we going to send an email to the user and also we also going to send an email to the doctor as as well about the confirmation and that also we are going to learn and then next we going to uh user can see the booking inside this my booking page where you will see the all upcoming booking okay and if you you want to cancel the booking there also you can give option to cancel the booking as well okay so guys uh if you did not subscribe to my Channel please do subscribe and uh press like button press notification Bell icon and guys let's see you in the next section now in this section once user book the appointment right um we are already saving the data on our stripy but along with that we are going to send an email to the user about the confirmation so for that one we are going to use uh react email okay so just type react email and you will find that uh domain called react. email this is the official website okay this is very powerful email writing Tool uh this is this tool is not for sending an email this tool is to write an uh or create a template for the email okay but also um with this one um and with some other services you can send an email as well so let's go to this documentation and over here you will find some uh setup okay and here you will find how you can use the HTML template like button text and all lot of things okay so first thing let's implement this email template okay and then we will go from one by one step so click on manual setup because we already have the project and here uh first thing you need to do to install this dependencies so copy this one and then go to a project and inside the terminal let's open the terminal and paste it here okay once it install dependency now here inside the pack packet. Json you have to add this script this script is to run uh their own email server so that you can check uh while you're updating the email template okay so let me show you how so go to the packet dojon so inside the packet. Json right we already have this uh da script right so obviously we can change this to email for the email da okay and just copy this one something like this okay now once you run npm run email then it will run the email template but now next we need to create a new folder called email okay you have to create a with the same name so inside the root directory we'll create a new folder called email and inside that folder we create a new file called index. TSX there index. jsx because we are using JavaScript XML and then copy all of this content okay so we'll paste as it is and then save it and then last thing we need to do is to run this one so let's run npm run and email okay because in our script we wrote email and we run it and let's wait for the server to run and if you see it's running on this portal so open this local 30001 and it will take few second to build it and if you see it jump it on this particular page where we have this file name called index. jsx inside the email folder right if I open this one you will see this email one okay so right now it's showing uh dark mode okay that's fine but here you will see the just a button called click me okay and that's what is written inside this uh index. jsx which is our email template okay now obviously you can design your own email template but there is another option so if I go to this um documentation of the react email you'll find the option called examples and here you will find a bunch of option okay so if you go here okay anything you will like it just uh you can select the one which you like so in this case I'm selling this simple one okay and over here you have option to check whether on mobile view how it looks or on the desktop how it looks but here we have another option called code where you can have all this code okay so copy this code as it is and inside your index. T jsx I will replace this with this new code okay now obviously we are using jsx so we don't need this type so I will remove it at from multiple location okay we'll just now update this existing one okay and this interface as well we don't want it okay and we will add this viral URL for now because uh obviously we need it later on okay so we'll just add this public uh next sorry next public and this particular URL okay so right now we'll keep it blank once we deploy it the deploy this application then we will update it here now over here uh if this I know it's not on versal then I will give the Local Host column 3000 and then you can update this all this uh text okay so here I'm providing first name let's say first name something like some random one okay so tast user and we'll keep everything as it is for now okay only thing that let's change this logo so here I will say logo. SVG and save it now if you refresh it on this uh preview panel see this is how it looks okay so we have the our own logo we added this add text user this text message and everything okay so this is how you can add your own email template now the another thing is now the question is how we can send an email okay so for that one let's go here and we'll find some Services okay so you can integrate this with the recent node mailer s grid Postman okay the simplest way I will find for this recent okay so let me go to this rent.com and this is the uh service which help us to send an email with the react email okay it's very easy to uh integrate so first thing let's install this uh recent so I will add a new terminal and install it here then if you scroll down right uh actually we are not going with this one okay but let's uh hold for this one okay obviously we need uh this particular file but we need to create an API to send an email okay so let's create an API because we are creating or sending this email on from the server side so inside this API folder we'll create a new file and you can call it as a send email inside that create a route. JS okay like this and here we'll uh start writing the code so first thing let's add all of this code the import statement then we'll write export a sync function and this will be a post call request like this okay and inside that we add a tri block and then in catch block and we'll return the response so next response do Json and we'll just add the error message and over here as well we're going to add the response uh uh we can just say send email s okay perfect now from this code we'll just copy this uh resent this particular line of code okay everything so I will copy this one so we'll paste it over here this one obviously we need to replace this API I will tell you how to generate this and then this particular um function so we'll just say constant data is equal to and this one now we'll just um actually we'll just send the result of this okay perfect now we are pretty much set up with this one now whatever the request we will get it right we will get it in a uh in some response variable okay is equal to request. Json and this look to be await perfect and save it now let's create the or get this apiq okay so for that one you need to create an account on recent okay and then sign in with the account which you have okay so in this case I already have have an account so I will just login with that and here you will find the option called API Keys okay go here and create a new API key I will give the name dror appointment booking okay copy this API key name and click add it now once you add that one you have to copy this API keyy and place inside the file okay so as we are using this API key on the server side you don't need to go nextore public you can just write um recent API uncore key is equal to and the key which you copied once you copy that key here you need to add it so just write process. EnV do that key name and save it now your key is ready okay and that's all you need to do now obviously uh once you send an email you'll see the log over here okay you can check the log you can even add your own domain so right now I added my own doain which is verified okay so sometimes you need to add the domain if you want to send for multiple users next let's go back to our code oh sorry let's go back to our application here and here you need to route from where you want to send the uh uh what email okay so I will give doctor so whatever the name you gave here okay I will prly give the same name so if I go to this API key see this one as it is then add theate I will give my domain name so tube guruji Das app. tub guru.com okay then to whom you want to send okay so whatever the response we are getting uh to that one we are going to say so fire now I will just write inside the bracket we say response data. email okay because we are sending to the user here we will send message um appointment booking appointment confirmation and and here obviously we have the template okay so I will just add that template so let's see the name of the template okay or we can just Rel so here we'll say email template so this is just function name we we are just renaming and here we just add that one make sure to import it and okay so here we don't need to add a component actually just need to add email template like this and here we need to pass the response okay so whatever the response we are getting we will just pass it here inside email template so that we can update uh our uh email template okay but I will tell you later how to do that as well but basically this is the basic setup to send an email okay now let's close all this tab and then let's go to This Global API so inside This Global API we need to add that endpoint to send an email so constant send email okay and here obviously we need to make a post call and we are going to send data so I added the data then instead of exos client we are going to use exos only because we are using local API okay so exos do post and here we'll say API SL send email okay comma data which is the body and make sure to export this one perfect and save it now let's close it and let's go to this book appointment page so so inside the detail we have book appointment and we have method called save booking okay so here uh once uh we book the appointment right we going to call Global API do send email and obviously whatever the data we are we already have right that data we are going to pass here okay dot then and we'll just console the response over here now the thing is if you see we pass data inside the inside this data we have another field object list called Data okay so that's the reason uh inside this uh email sorry inside this route right in in our API I added this response. data. email to access this value okay because we are sending to the user and everything's look perfect now let's test this out now let's test this out okay so select any date then select the time and then click submit and if you see we uh we have this send email and we showing that okay 200 okay we got the response as well okay let's check on the email and if you see we CAU the email as well okay so right now this image is not not there here because uh we are working on Local Host okay but we got this beautiful message and everything see okay perfect but there is a another thing I want to tell you okay currently I already have the domain and that's the reason I'm able to send email to anyone okay that's the reason uh you need to add a domain if you want to send to the all the people if you want to send an email to your yourself okay the the account one which you login then you can use the uh this particular from method from the onboarding at theate recent. day okay mean from the recent. you can with that domain you can send on to yourself only okay and you can see the log as well if I go to this log right you'll see the logs and this is the one of the log if youve seen it saying that you can only send a testing email to your own email address because I was trying to send to the other email address if I did not use my domain okay so there are a couple of things you need to to play around so once user book the appointment we need to show the users booking inside a new uh page called my booking so obviously we need to create a new route for that one okay so this is how the new page will look like here we going to give the tab okay where he can see the upcoming and the expired booking as well so let's go back to our application and over here let me bring this like that and let's create a new route so inside the route folder we'll create a new route and we can uh we need to create a folder called my booking so inside this my booking we'll create a new page called page.js SX add the default template and then save it let's change this name to function name to my booking and then save it okay now on the click of this uh my my booking option right we need to go it so let's go to this header. jsx where we have this button called my booking obviously I will change this uh to link add H reference make sure to end the tag and then we'll add a path called my booking okay and then save it now if I click on my booking nothing is happening right now let's see whether we miss anything okay let's refresh it once okay and click on my booking and if you see it's went to my booking page perfect now over here we need to add a tab okay so before that let me add a h2 tag we'll call my booking okay and for this one I'm going to add class name we add font bold and take off to excel also for this class name I'm going to add a padding padding x24 and when the screen size is smaller I'm going to add padding X to 10 and margin top to 10 perfect now in order to add a tab U we want to use Shad CN okay so you go to the Shad CN and look for the tab uh components okay so in the tab component this is how it looks right this is the simple way we can add the tab so first thing let's import this uh component so copy this uh npm command go to your terminal and P it here so let's clear this one and then wherever you want to create the component you can just copy this import statement let's paste it here and then copy this uh type basic code so over here I'm going to add paste it here okay and then save it now this is simple code obviously we need to customize it and if you see this our tab will look like okay a couple of things I'm going to do do here so first thing I'm going to increase the WID to uh full okay and let me show you this is uh right now look like on the bigger screen after that um for the tab list okay I'm going to add a class name and we'll make width to be full oops width to be full and we'll make justify at the start okay so this is how it look obviously uh for this tab we'll give margin top to five then we'll change this name okay so if you see we have to make sure that uh the value should match everywhere right here the default value is account right so first I will show I will add the upcoming I will add the value upcoming and for this one I call expired and here I will say expired okay and the default one will be the upcoming okay okay and same thing we need to change the content okay so here I will change to upcoming and here I will change to expir so whenever we select the value account or expired or upcoming right depends on the selection of the tab okay which is the trigger it will update the content immediately okay so inside the Conta depends on what you want to show you can show it inside this content tag now we need to create a component where it will show the list of the upcoming uh booking or expired booking okay so inside this my booking folder I'm going to create a new folder called underscore components and in that we'll keep all the components so for example for the booking we'll say booking list. jsx okay and add the default template and save it now this booking list component we will just simply add it inside this tab content okay so I will set booking appointment m m oh sorry um booking list I don't yeah booking list it need to be booking list and same thing I'm going to add it inside for uh the expire type as well okay the only thing that we going to do is to change the data whatever the data we are going to pass it will change for this one and this one and then save it so right now if you see okay we got one error that it need to be use client make this as a use client and remove this book appointment let's save it and we are good now okay perfect so this is very important thing guys uh to add these tabs okay and make sure that you will add that component as well now next thing we need to write create one API endpoint which will fet the uh users booking only okay and along with that it also face the Doctor Detail so let's go to This Global API inside the utls and over here we going to create a new uh API end point so we can call it as a constant get user booking list is equal to we will pass the user email okay and we got exos dog and here we need to add slash appointments okay so obviously we need to filter the result so question mark similar way that we did it here right we say filters then uh we will filter it on the email okay users email uh this need to be in bracket actually the email again we need to add dollar equal is equal to user email okay and then we need to add populate equal to St so we'll get all the data okay and then let's export this one and save it okay now let's go to this page.js file and over here that call that method so constant get user booking list here we need to pass user email then oh sorry my bad uh booking get user booking list I will call and here we need to call Global API dog user booking and here we need to pass user email okay we'll pass it in moment and we console the response response. data now we need to get user information first constant user is equal to use kind browser client and use this user do email okay as simple as that obviously we need to call this method inside one US effect so we'll Define us effect and whenever the user is available when you have this user information then only we'll call our gate user booking list method okay because we are passing this user information if the user is not available then this user. email will get undefined okay and then save it now and here let's go to this inspect panel and now in the console if you see we got the three result okay and if you see the email which is uh the current user email address and only that data uh or that booking record is f okay along with that we also have the doctor information see okay now the thing is in the doctor information if You observe right we got the basic detail but we did not get the image of the doctor okay the reason is this doctor is uh relationship with this appointments okay and the uh it's a kind of nested uh relationship okay and let me walk through this our um appointment okay so here if you see right only doctor we connected so in the strappy uh when you populate all the data okay the basic relationship with the whatever the collection you have only that basic data it will fetch it up okay if you want to fet any specific nested uh data okay nested attribute of field then you have to customize your query okay and let me show you how we can do that so let me close for now and inside this gate user booking list right here we added the user email and then we populate the information correct now over here okay I will just update this one so here you can write and populate okay and what you want to populate so in this case we want to populate okay let me yeah we pop we want to populate doctor okay inside that we want to populate image field correct correct and again inside that image field we want to populate the first element correct like this and what the field name you want to populate that field name you have to use in this case the URL because that image URL we wanted correct and our populate is equal to sta okay so this is the query you need to add it if you want to fit that specific F from the nestate relationship okay I hope you understand this one now let's test this out so let's go to the inspect panel and go to the console and let's check any of this one okay so doctor inside the doctor we have now we have the image see okay and inside the image you will get all of the data which we have okay so for example they have URL and that's what we wanted correct perfect so I hope uh this is very important when we are fing any next relationship data okay now let's go back to our page .js and let's store this in one state so I will call constant booking list comma set booking list is equal to use State and here I will just say set booking list is equal to response. data. data now once we have the booking list right we need to pass to this one okay but we need to pass here only upcoming booking list okay so for that one we going to write one method okay and which will return the expected result so here for example type constant filter user booking here I'm going to get the what type of booking with upcoming or it's expired and then we'll write the logic so constant result is equal to we'll write booking list dot filter okay we'll filter the values and inside that we'll write item and inside that we'll first we'll just get the type depends on the type okay let's let's ignore the type for now and what we'll do so we'll do new date okay uh then item do attributes attribute do dat okay so this value is nothing but the value which we are getting from okay so let me show you that one so this value sorry uh this value right so and we convert it into a date and then here we will check if this this date is greater than equal to the current date the current date is new. date okay if this is okay then it will return the result okay we'll also console the result so console.log result and then save it now this filter uh user booking we going to call to this booking list okay we just say booking list okay is equal to and we'll pass this or we will call this filter user booking and obviously it will return the data which will pass to this booking list okay here we need to pass the type as a upcoming okay and same thing we going to do it for the expired but here we going to pass expire okay now once we pass this type obviously we are accepting here as a type okay okay now I what I will do I will write a condition if type is uh is equal to equal to upcoming then execute this particular logic okay otherwise execute the logic but in a RSE way so here I will just say less than equal to okay so this this is very important okay here I will write uh Ed to filter user booking and now let's save and if you see right now on page number 32 which is this one we got the data okay perfect and this this might be a expired one okay and this is the one which is the uh upcoming one see is 16 right today I'm uh this is 15 F okay and it's showing 16 F which is tomorrow's one perfect that is what we we are getting okay now once we have the proper data go to the booking list and it accept it as a booking list and save it now inside this booking list uh let's uh display the result okay so I will close this now because we know we have the data now over here I'm going to add booking list and and booking list. map here item comma index okay so let's add one D inside that we'll add a image source okay now from in that image right I will just copy the complete path okay so path is item do attributes do doctor and there very long URL so I will just copy it from some doctor list the image so this path okay only thing that in uh once we are in the doctor you can again have the field called Data okay let me show you just just to avoid the confusion okay so here if you see inside the doctor we have the data and inside data we have the attributes okay then let's add a class name so class name We'll add width of sorry let's add a width first width of 100 height of 100 we'll say alt doctor image let's save this one and if you see right now it's showing the doctor image let's apply some styling say say rounded to be full okay and object cover oh so here I'm going to give height of 100 pixel maybe let's give 70 not 100 okay okay and width also I give 7 pixel something like that okay so here you can change it now once we Define this one let's add another du tag and here we're going to add first the doctor name so item do attributes do name so doctor name should be inside the doctor actually doctor Dot data. attributes. name okay then another I'm sorry another h2 tag for the uh we can add for the address okay so again I will copy all of these thing paste it here only change address perfect then another h2 tag for the on which date the appointment is okay so for that one um I'm going to add a calendar icon so here I add calendar icon then I will say appointment main on and then say item do attributes do date see okay now obviously we need to convert this date okay so for that one Let's uh import one Library called moment okay and this is very powerful library to convert any uh date in some different any specific format okay so whatever the format you can give you can add it so install this dependency okay I already installed actually so it's very easy to use so first you WR you need to add them okay so I think we I did not import it yeah let's import it so let's go to here copy this import statement and over here just install it and once it import let's add a moment okay inside the moment you have to provide which date you want to convert let me bring this down actually okay so in this case I want to convert this date then in which format do you want to convert so I you can give the format in string for example I want to First give date then I want to show month month month and then y y y okay so it it will give you the result let me show you how it give the result okay so it will first give the date the month like October December kind of thing and the year let's save this one and if you see the format okay you can change if you want slash you can give slash see perfect now and let's give some margin over here appointment on after that let's give another h2 tag and that for the time so I will set add clock over here o and then we'll say on on time you can say maybe at time we can say okay at time at time we can give the uh time so in this case item do attribute. time see perfect and that's what uh that's what pretty much all of them all of this thing okay now let's apply some styling first thing let's bring in one line so class name make it Flex do gap of two make item to be in the center okay after that uh I will add the class name and we will make a flex Flex column and we'll go Gap of two okay here I will go Gap of four maybe then for this h2 tag I'm going to add a class name font bold text of 18 pixel then we'll make Flex not Flex for now let's add it okay yeah something like this and after that uh we going to add a calendar right for calendar so we can add icon so map pin map pin yeah yep perfect okay and let's bring Flex gap of two and for this map pin I'm going to add a style class name is equal to and here we can give the text primary okay and here I will say text of gray color perfect now for same thing we need to do for the calendar so class name make can place gap of two and for this item we'll get class name take primary and the last is this h2 tag uh where is that oh yeah this one let's copy this one over here and the color as well for this icon and save it okay now for this one we'll add a border okay so let's add a border We'll add padding of three margin of three and rounded large perfect okay and on the bigger screen this is how it looks okay you can give more margin if you want or more padding and now next one thing one more uh thing important we need to add is to option to cancel this appointment okay so what we are going to do uh if this is the upcoming um booking then obviously we going to give the option otherwise we are not giving option okay so for that one uh from the page okay along for this component along with the booking list I'm going to send one more parameter which is called expired okay and here I will obviously pass false and for this one because this tab is a expired tab so we can pass it as expired value as a true okay and let's accept it here we say expired and then once we Define this one right uh for the name okay over here we're going to add one button okay if it's expired then we going to add button we'll say cancel appointment okay and uh so okay this it's not expired actually okay because obviously it's not expired then we'll add that button okay I will add button of variant so I will add class name as well but let's add a variant first so variant is equal to outline and then you'll get the outline okay now I want this button at the rightmost side okay so you can add a make it flex and then you can make just justify between okay uh wait something not right so here uh let's give the width full okay over here you can give the WID full and that's good now okay here let's make item to be in the the center for this h2 tag perfect and if I increase the size this is how it looks okay perfect now uh you can have this you can change this color as well okay if you want to change this color up to Blue you can add for example like text add primary and outline sorry border we can say border primary perfect okay now we have this cancel beautiful cancel button perfect and if I go to the expir if you see we have this expired as well okay and if you see the time as well it's different now if you think okay to change this font you can change the font I will keep as it is for now only thing I want to change this uh the icon so I will give a height of five width of five little smaller okay because it's little bigger same thing I will paste it for all the icon perfect and now it's look good okay so this is how you can add guys uh the booking section area okay where you can uh you can see all the booking and everything okay let's test this out so let's go to the any doctor okay let's book appointment and let's say book appointment here we can select the date I selected 17 okay the future okay let's select 20 some time and some sample note okay and then click submit so as soon as you get submit you get that booking confirmation sent on email it message then go here select my booking and just and if you see the Gen Cooper is get selected okay perfect that's how you can get this data now next what we need to do we need to uh add option to cancel the appointment M okay so once you the click on the cancel appointment we going to give option or a dialog box for the confirmation that do you really want to delete this appointment and then if you see click s then we need to delete this particular record from the strapy okay so we'll see uh see that in the next section but until this point if you have any question any doubt let me know in the comment section and we'll see you from there now let's add the dialogue for the cancel appointment and so that user can cancel this appointment so let's go back to shadan okay where we have this dialogue or you can use the alert as well okay so alert okay so alert is sorry different but you have the alert dialogue that's what I wanted to show see like this okay so let's import this alert dialogue copy this npm command and inside your terminal let's me close all of this window and let's if you scroll little bit down you'll find this use case so copy this import statement now you can add the cancel uh the dialogue with the the new component so let's create a new component we can call cancel appointment. JS jsx RFC save this one and let's import it here and same thing we'll copy this alert dialogue and we'll just simply paste it over here okay now obviously this is the trigger where we are going to open the dialogue okay now what we need to do let's go back to our application this cancel button we need to keep in this one and then we have to use this cancel appointment component over there okay so from the booking list I will copy this cancel appointment button so we'll copy this complete button from here and inside the cancel appointment I will paste it here okay make sure to UT this button and then once you save this one here you need to add cancel appointment as a component okay see nothing get changed but if I click on this cancel appointment now you will get this beautiful dialogue and it's asking are you absolutely sure okay and this ACC can be done this delete your account here we will change the message delete your appointment the message is quite good I already there right and remove data from the server and say cancel and continue once you click on continue obviously we want to delete it okay now on the continue button We'll add the on click event on continue click and here I will write that method or another way you can do that okay uh you can pass this back to this book list okay it's up to you how you want to use this one so let's better to pass this to the previous um or previous component okay so once you define this on continue click you can pass back okay to this booking list and here um yeah here we will accept it there and we'll say on delete um booking and we'll just simply write that meod constant on delete booking something like this perfect now obviously when you user click on on book delete booking right here we need to pass which for which data uh user click it okay so in this case I will just pass the item as it is and just console that over here and make sure that you're getting uh uh that data okay so here on Console let's say item let save this one and I think I'm we might get error okay but let's see what we are getting so if I click continue okay perfect we got the data okay if I click cancel and continue on 14 with ID 14 here we have the data okay perfect now in order to delete the record okay you can go to strappy documentation let's go to the strappy documentation strappy I think I already have okay stripy delete record okay search like this okay and you have you will go to this documentation where you can learn it how you can delete the record okay so for example um let's search for the deleting record over here so okay so this is the actually the documentation to delete the API okay which is the raed API and here you have delete entry for deleting entry you can just pass the API endpoint and the ID which you want to delete as simple as that guys okay no rocket science in this one so let's go back to our application and let's close all of this window for now and I will open the global API where we can add the endpoint constant delete booking here we'll pass the ID then AOS client dot uh Delete if you see this is the delete method from the exus client and then we can say uh appointments slash and then here we need to just pass the ID that's it and then export this method and save it okay now let's go back to our uh booking list where we added that particular method to delete the record so over here we say Global API dot uh Delete the booking okay and here we need to pass item do ID as ID which is a record ID then response and we just console the response okay if the response is successful we'll show the toast message so toast from the sonar and we say U booking deleted successfully okay and now the another thing right as soon as you delete the booking you have to make sure that uh you will update this particular record right here we need to set some kind of uh trigger okay so here we say update record as a method okay so this update record will pass back to the parent child of the booking which is the page of the uh booking list okay and here we'll pass it okay here we'll add that method update record and we simply call get um this method where this uh get user booking list get user booking list method okay and same thing we going do it over here because obviously not not required but we need to do it okay and because obviously uh it will update all the data now save this one Let's test this out so let's delete this particular appointment okay let's cancel this appointment it will say yes or cancel if I do the cancel see nothing is going to happen let me increase the size now if I cancel and say continue and let's see anything is happening and if you see the booking delete successfully and wow how beautifully it's the list also get updated right so this is how magically uh you can update the record uh as soon as you delete the record from this list okay so this is how you can guys uh uh Delete the record from the list so in this particular throughout the section we learn how we created data we learn how we uh uh uh get the data also we learn how we delete the data we learn the different type kind of um query or different kind of API filter with the strappy to how to fet the specific data and everything okay so guys I hope you understand all of this content okay this is very important when you building this kind of application and with the strappy it is quite possible to uh create application very seamlessly and very easy okay so we are at the uh end of this particular course where we are going to deploy our application so in order to deploy application we need to deploy our strappy backend application on a server and then we'll deploy our front end application which is our actual application and there are couple of way that you can deploy your application on different different platform if up to you okay there you have AWS Google platform you have uh aour as well okay but in this course I'm going to tell you the best and most important Buton the free source where you can deploy for free okay so stay tuned so first thing you need to do uh go to the GitHub and make sure to add a new repo okay so I already created new repo here for the doctor um not this one so for doctor appointment booking web nextjs okay and I just push my code if you don't know how to push it then you can just search on the internet okay but in this case uh make sure to add you all the strappy code over there okay so whatever the changes I added I will just commit my changes okay so get commit and then I will sorry I need to add the it first add get commit I will just let message and then I will push it okay and boom it get pushed now and now if I go here I will refresh it and all the code over here okay for this repository now as I say there are a couple of ways you can deploy okay the most easiest way to deploy your application is Heroku okay but the Heroku is uh now paid okay it's not a free so most of the people don't afford the uh to buy this or to buy the uh monthly subscription it cost around $5 per month okay then this is not good option for us because we are looking for a free option then if you want to go to free then this option okay where you can deploy your uh strappy back in now renter provide a lot of different Services guys okay so if you don't have an account yet create a new account and once you create account you will jump on this dashboard okay so on the dashboard you will see a lot of uh application which I already have okay over here if you see we have option called new okay so click on it and you will find a lot of different option to deploy on a render so you can deploy stat IC side you can deploy web services like nodejs backend API okay in this case obviously strappy can be come under this web services even you can deploy private Services background worker even though you can run the Chrome job as well okay not only this but you can also um create a post gr SQL okay so here here is thing when we create a strapy we use myql for as our database right and we did the customization we add all all the database uh um configuration and everything right but if you don't want if you don't have an access to MyQ database or if you don't want to pay it so on the render you will get a free postrace SQL option where you can create a post SQL and you can connect that one to a strappy okay and then we have plenty of more now in order to create uh or deploy or strapy you need to select web services here let's uh select the option where you can say build and deploy from git okay or you can uh deploy the existing image from registry as well but we have the git so I will select the git option then click uh next and here you will see the option uh okay or maybe if you did not connect to the GitHub then make sure to connect to the GitHub and then all the repo you will find it here okay now in this case you have to select the repo which you want to uh deploy it so in this case this is my repo so I will click connect and here you need to give the name of of your service so in this case I will say appointment booking admin okay now you can select the region which is nearest the nearest to you so in this case I will select Ohio then branch which is main the run time is node everything I will keep as it is and over here you'll find option right obviously we want free which is a hobby project so select the free one okay then you have to add some environment variable this is very important okay okay so there are option you can add it directly from file from here or you can add one by one so now you can add one by one it's up to you but I will just add the EnV and here I will paste all of these okay so go to your uh strappy okay over here you need to navigate to file okay where you will find all the configuration regarding our strapy so copy it and then paste it over here like this okay and make sure everything is correct perfect and click add variable and if you see all the variable is get added inside the strappy okay everything is there make sure nothing is uh and nothing is anything is not correct or something like that just fix that one and then once you did this you can uh click on this create web services you have plenty more option advice option but we will not go on a touch to do that one okay so for example this option called Auto deploy so the the this this option help us when you deploy or you commit your code to the GitHub it automatically deploy the new changes that's very useful actually okay now let's uh create a web service and it will take now few seconds or couple of minutes uh to build or to deploy the application and here you can see the log okay so right now just uh getting build so we'll wait I will pause the video over here and boom we are ready so our application uh the strappy back end is get deployed okay and if you see it's saying your service is live okay now in order to access it here you will find the link okay now just click on this link and boom it open on this particular Port sorry particular URL called appointment booking admin on. on that one now once you run this one okay in order to access the admin panel just write SL admin because we are in the production mode okay not on the development mode now once you are here just logging with the account where you uh loging before so I will just loging it and then here is we are in the admin panel see okay boom and everything is there because whatever we have in the Local Host we are running everything you will find it over here okay so we have the category doctor and everything so if you see here we have all the data I just refreshed because it was not loaded properly now everything is there okay now even though you have all the media and everything because whatever you have in local everything will be on the server now okay now next thing we need to do is to update the our endpoint right now we are just pointing to Local Host now we need to point to this particular URL so so let's copy this uh endpoint not the endpoint the domain and then inside our application instead of local 1337 I will replace it with this one/ API okay and then save it one more important thing as we are on the free tire on the render right it's little bit slow but it's good for the development purpose okay now let's open our application let's refresh it and it's still loading and if you see now we have this beautiful category in everything and everything is now loading from the uh new domain okay let me show you so inside the network let's refresh it once and if you see the category okay okay here is the category okay and if you see the URL so in this case the URL is appointment booking admin on tender which where we deploy our strappy one okay so if you have any question let me know in the comment section I happy to help you guys uh in this case okay and uh now let's deploy the application now in order to deploy our web application okay similar thing what we did in the previous section so until that you first need to uh push your all the code to the GitHub okay and make sure all the code are here I will also push or update my code because I already have the existing repo okay I will just update my code I will get commit it and I will push it okay now once your code is up to date okay you have to go to the worsal and if you don't know about the woral so woral is um uh is for the deployment purpose and whatever the next you right the only develop this one again it's a free to use and for the also for the small business I will definitely suggest to go with the verel to deploy your web application now if you don't have an account create a new account and then you will launch on you'll jump on this dashboard okay where you can you have option to create a new project now just click on this project and connect the repository okay whether it's a gitlab or GitHub or bit bucket so in this case it's a GitHub for me and then I will select the repo which you want to connect so in this case this is the web nextjs application I want to import so click import give the um proper uh name of the project then uh you can add the environment variable you have the build output setting I will keep as it is and then I can add it all the envirment variable okay now recently they update that you can just copy all the EnV and paste it here okay let's try that out because I never tried it so go to the file so in this case is env. loal copy all of them and then try to paste it here and if you see boom wow everything is there now we have all the uh keys and everything okay make sure it's there now for the versal we'll update it later on I will keep as it is for now and then click deploy and this is how simple it is to deploy your web application now we'll wait to build all all of these steps and beautifully our application is deployed now and here is saying congratulation and if you can see the preview as well okay now everything is set up beautifully you have uh you can even customize or add your own domain as well okay let's try to open it now and boom everything is there okay and even though you can I see the all the uh API call getting updated everything is up to date now couple of things uh we need to do once it deploy so first thing right now if I try to log in it here right it will redirect to Local Host 3,000 API aut call okay the reason is uh inside our kind dashboard we did not updated the production environment okay so let's do that so let's go to this kind.com okay let's sign into our account and once you are in the dashboard go to the view details here if you see right we have this allow call back URL so in this case we have to give our domain so in this case let me go back this is our domain okay so copy this domain name paste it here and then add this API kind call back so it it it will also work sorry it will also work uh for Local Host as well as on production as well okay so Local Host API call back yeah that's good here as well we need to add a log out URL so I will just copy this one paste it down and then everything's look good so let's save it and then once you update this one you have to make sure that you will update in your project as well so let me increase the size over here if you see the kind site URL right now is local 3,000 okay so what I will do I will just control C it okay okay so you don't need to actually update over here okay you can just update in your file so let's go to this production go to this continue dashboard okay so this is our worsal okay and inside the setting option you have option called environment variable okay over here we added all the environment variable okay so you just need to update this site URL or post log out redirect URL and all of this thing make sure these are the three thing we need to add so first is kind site URL so I will update this one let's say edit and paste this one oh we don't need to paste all of this we need to add a domain actually so I will copy this domain paste it here okay then uh let's save this one then we need to update another thing the log out and login redirect URL so log out is this one let's edit this this need to be this one and the last is um login okay and then save it perfect now all the production variable is good also make sure everything is good here okay and one more last important thing so right now uh in our application there are lot of images is going coming up right and on versal um for the there is the image optimization happen Okay for the next days by default and inside the usage okay you have limited number of uh image optimization see like this okay so you can do only 1,000 image optimization otherwise you will fill the the free tire okay otherwise you have to create a new account then so for that one there is one option uh you have to configure the nextjs file so let go to this uh nextjs configuration okay and inside this images you just need to add image uh I forgot actually let me check on the next J site so so here if you see right we have to write unoptimized true so we'll just say un optimize and we will say true and then save it okay now just commit this change so get commit M update oh we need to add first actually and then we'll push it okay so what will happen it once we push it right it automatically get Deploy on versal as well let me show you so if you go to the deployment Tab and if you see now it started building just 6 second ago because whatever whenever we push the new changes to the git uh Depo it will automatically deploy the new updated changes on versal as well okay and if you don't want or want to push anything but you still want to update the environment variable and then want to deploy it manually you have option to deploy it here right so here you can have option right see deploy and from there again you can uh deploy it back so we will wait to complete this deployment and if you see now our uh deployment is uh ready that it's deployed now let's test this out so let's go to our application again refresh it here and then just say get started okay so if you see uh I came on this particular page where I can login it I can select with the Google account select the account and once it log in see it came back on homepage and here you have option for the profile where go you can go here and you will also can check my booking over here see okay so everything as it is and this app as I say it's completely responsive okay so on the smaller screen it will automatically change the layout how beautiful right on mobile it will look like this see everything is so beautiful so guys that's how we uh deploy our application as well so in both we also deploy our strapy we also deploy our web application and now you can access this particular application uh anywhere okay the if you want to test this application the link is in the description you can just check it out so guys that's all for this particular course so if you have any question throughout the course let me know in the comment section and if you did not uh subscribe to my Channel please do subscribe guys uh it will help me to boost and teach you much and to bring up more uh bigger projects also if you really like this video press like button and if you did not uh press on notification Bell icon just press it so that you'll get a latest update from me also guys um if you get 1,000 likes to this video I'm going to bring a very beautiful projects next in the next in my next video so keep tuned and keep smiling and happy coding we'll see you in the next video thank you

Channel: TubeGuruji

Views: 27,457

Keywords: Build & Deploy Next.js Full Stack App, React.Js, Strapi, Tailwind, Doctor Appointment Booking App, Full Stack NextJs App, next.js 13 tutorial

Id: Qq7fBgRFQJo

Length: 314min 2sec (18842 seconds)

Published: Fri Feb 16 2024