NextJs Full Stack Meeting Scheduler App : React, Firebase, Tailwindcss, Kinde

hey there and welcome back to tube guruji channel today we are going to build meeting scheduler application and this application we are going to build with the help of negs and react this application uh is for the beginner or those who already know the nextjs or react we are building this application completely from the scratch so let's walk through the application and then we'll talk about the technology which we are going to use to build this application so if you see on this uh particular Landing screen you will see the beautifully we designed or implemented the landing page with the help of tellin CSS and the Shaden UI you have option to login with the Google and the Facebook but not only that you can even login with the email so with the help of uh authentication service provider we implemented the login or authentication Service for our application now once you click login select the login which you want to uh select the account which you want to login with and then boom you will jump it on the dashboard page each user has its own dashboard so obviously from here you can create a new meeting event type you have option to uh add the availability time where you can add the available dates for which user can book the appointments even you can have add the time slots okay in between that only it will uh create a slot for the user where user can book the uh meeting with you now let's create a new meeting and once you click on this one you will find this beautiful uh page where you can even uh watch the preview of the meeting uh screen right or it's a live uh preview for you now as soon as I type any enter uh the event name you will see the reflection over here so let's type let's add 60 Minute meeting and IM medely on the preview you will see the change here you can select the duration on for which you want to build a meeting and depends on the selection of the duration you will see the slot get automatically get updated now if I select the slot of 30 minute if you see the slot get changed to 30 minute uh of interval right so let's keep the 64 now and now you have option uh to select the location on which you want to um do the meeting right you have zoom option meet phone and lot of other things click meet and here you can add the URL of the meeting on which you want to add so here I'm going to add this one then you even select the theme color right so let's select the theme color and you will see that all the changes or all the additions whatever you enter right everything will reflect on the preview page and same PR VI will display it once you share this meeting URL with the user now as soon as you create the meeting you will see the popup or toast message saying new meeting even created and that meeting you will see on the meeting event type okay now here you will see the duration of that meeting or whether the meeting type is which one so obviously we select the Google meet then here you will see the color you you copy the link of the meeting URL and once you click on this copy link here you will see the toast message right now let open the copy Link in uh in other tab okay so here this is how uh the actual uh meeting screen look like right this is accessible to any user so you can share this particular meeting uh URL to anyone okay now here if you see you will see the uh meeting uh name for for which business you created meeting that business name you will see the duration the type and date on which the meeting is selected right now right if I change the date here you will see the all the method is disabled right but as soon as I select for example Wednesday right for the Wednesday uh the slot is available so you can select the any slot you want now if I select the slot of 12:00 and click next here you have option to enter the user detail so let's add a detail you can add the email okay on which you'll get the uh confirmation email with the all the uh uh meeting details here you can write some notes if you want and then click schedule so once it schedule it will say the meeting scheduled successfully and boom it will redirect you to the confirmation page so it's saying that your meeting scheduled successful and also confirmation uh sent on email now if I open the email here you will see we got a new uh email with the my name the business name and all the details of the meeting including the location the URL on which date it is scheduled and everything so everything we going to learn uh in this particular course that how to schedule a meeting and how to uh send an email and everything okay now if I go back to our dashboard page here you in the schedule meeting section right here you will see all the latest meeting which is scheduled are upcoming right and if I go or expand any of this meeting you will see all the meting details and from here only you can join that particular meeting so everything in this particular course is uh completely for the beginner and anyone who don't have any knowledge of any technology don't worry because in this course we're going to learn everything from the scratch now another important thing that this application is a completely responsive so on the if you open this application on mobile or you if you open this application on a tab it's a completely responsive so it's very easy to use on any device so that also we are going to learn how to implement uh uh responsive web application and how to use it the different different uh styling like tellin CSS the Shad CN UI and lot of other things now all of these applications data we store in a Firebase database so we also going to learn how to store data on Firebase for the authentication we are going to use kind authentic app which is completely free to use and everything uh from the start to finish right this is a completely full stack application we are going to build completely from the scratch now without doing any further delay let's begin to develop this beautiful meeting scheduler application let's talk about our today's video sponsor cryptus which is the cryptocurrency payment Gateway with a low commission they charge only4 to 2% commission now let's see how you can start accepting crypto payment with the cryptus you can integrate the payment Gateway by API documentation that you can find on your personal account phb hdk with all necessary Tools in one kit or by using a plugin for e-commerce website made with the ucommerce Shopify pra shop and others one of the cryptos feature is a white label all you need to do to configure all necessary data and use all the crypto Payment Processing feature with your branding with the crypto processing you can create your own crypto exchange or crypto Gateway try crypto processing work with crypto transaction the way you want link the link to the crypto will be description below register and try it yourself in order to create a react application we are going to use negs negs is one of the best react framework for the web application and if you never use nextjs don't worry because in this particular course we going to learn everything from the basic so if you go to this nj.org and you will find this official website of the nextjs nextjs is popular uh for the routing the build and there are lot of different feature that nextjs provide for you and everything uh which is important to develop any web application everything we see in this particular course so first thing uh in order to create a nextjs application this is the command line NP npx create next app at latest okay now you can go to the docs and you will find all the documentation and installation step as well so in order to create a project go to your project folder where you want to create a project open a terminal at that particular folder let me increase the size and here we'll paste n We'll add npx create next app at latest okay and click enter now it will ask you the project name here you can give the project name like for example meeting scheduler and just type enter so it will ask you do you want to use typescript so no so es L say no the tellin CSS say yes so this automatically install the T CSS for us then will you like to use Source directory say no the app router obviously we want the app router so say yes and for custom default import Ally say no and then it will install the dependency like Crea create Dom and next which is default dependency and some D dependency for the telin CSS which is post CSS telin CSS and auto prefixer and if you see our project is now ready now open a vs code and open a folder where you created this particular project then locate that particular folder and then open that particular project so once you open the project say yes I tust the author and here you will see on the left hand side a bunch of files and folder so first thing if I go to this app folder which is the folder where we are going to create our our files the routes the URLs and everything okay so first is global CSS file which contains uh uh CSS styling for the complete whole application the layout. JS which contains a metadata the font you want to apply for your application and if you see we have HML and body tag and inside that we have children so whenever you open any URL right that URL will render through this children uh tag then we have page.js file which is the default page for the application now obviously once we run the application you will get to know then we have node module do uh node modules folder obviously we are going to we are not going to touch to this particular folder then we have the public folder where we going to store all our images font or any other things which you want to access it from the local that all the assets file we going to store inside the public folder then this get ignore so once you want to put push this to a g repo you can put some file which you don't want to push while uh pushing this code to repo then we have next. config.js file which is uh useful when you want to do a configuration related to nextjs you'll get to know once we start developing our application then we have package.json file which contain the name of the package the version the scripts uh which used to run the application or to build the application some dependency and dependency which is default when we uh create the application this dependency already get installed the tn. config.js and post css. config.js here is for the telin CSS okay so all the telin CSS configuration will store inside this T.C config.js file now let's go to the terminal and click new terminal so it will open a terminal inside the vs code then just type npm Run start okay okay so it will open a port local so my mistake so here you need to run npm run da and if you see our application is running on the port 3000 okay so make sure to run your application on mpm run de so once you open this local 3000 Port here you will see our application is running on the browser and Port 3,000 okay now we'll bring this on the left hand side and here uh let's open the page.js file which I told you which is our default page and if you see the URL is just a default one so now if I go to this app and page.js file here you will see the default code for example if I want to remove this particular line of code and you will see as soon as I removed and save it it get changed on the screen now let's remove all of this code and just add a default or MTD and here I'm going to write in tag subscribe to tube guruji now if you did not subscribe to my Channel please do subscribe and if you see now it change this uh text to subscribe to TU gji okay now you will see this background line that because in the global. CSS it has a default styling okay and if I remove this line of code if I save it and boom you will see the plain white background now okay now there are a couple of things we need to add to complete the uh setup of our uh default project so most important thing that we want to add is the shatun UI so Shad UI is a very popular uh tailin CSS Library okay and it has a very much predefined component already um and and it's ready to use okay it's very easy to install first you need to go to this ui. shad cn.com and then go to this uh get started okay here you have um a section called installation and here you can select the framework which for which you want to install this particular Library so in this case it's a nextjs for us now we already created the project and there are couple of steps we need to follow so we'll skip this step as we already have the project ready then we need to install this uh CLI make sure that you have the telin CSS installed because this shat CN library is dependent on the telin CSS now I will copy this particular command and let's go back to your application open a terminal and here I will click new terminal and the paste the command now here it will ask you some of the uh question so first thing that which style would you like to use so here they are providing two style default and New York there is not much different I will select the default one then here you can uh select the base color I will select the neutral and it will say would you like to use CSS variable for a color say yes and then it will install the uh shatu UI for us now if I go to this uh project folder structure here you will see the two two new folder get added the one is a component currently it's empty because uh as soon as we install any new component from the shadan that particular component will add into this component folder and another is Le folder it contain the utls and the shat CN UI related configuration okay also if I go here the one of the new file is get added which is the components. Json file okay and then if I go to this T.C config.js file you will see there are some extra um variable CSS variable get added for the Shad CN UI okay now let's try to add a new uh component from the shadan so here let me go back to shadan and if you see if you scroll down you will see the components click button for example let's add a button component and here you will see this is how the button will look like right and this is the uh command in order to install the button component so I will copy this one and then open a terminal and paste it here okay now it will install the button component inside our application now if you see inside the component folder you will see the U folder and inside that we have the button. jsx file okay let me increase the size now here you will see as soon as we install the shat and component this button component you will see this default code get added okay now it has a different variants called default destructive outline and lot of okay you can add your own as well you can customize uh depends on your requirement not only that but you can customize size and lot of different thing okay now let's add that component inside our application so here you need to add a button component and if you see this button components is getting imported from at theate component UI button okay like this and here I will add a text subscribe okay let's save this one and let's go back to our application and boom if you see the Subscribe button is showing on the screen and it has a all the styling predefined applied because we Ed the sh CN component now if you see it has a different variant called destructive outline secondary okay let's try to use destructive so here you just need to Define variant is equal to and say destructive and you will see the change see okay so this is how you can update the color combination the variant the size and everything this chat CN component give a control complete control on the component which you and the way you want to use so guys uh that's all for this particular project setup I hope you understand before moving forward forward to the next chapter let me tell you one uh one more important thing now uh there are two extension which you want to add for the vs code so if you go to this extension tab here you will find this es7 plus react Redux snippet tool this is very important when you want to write a code okay and I you will get to know once we start writing the code and the another is the telin CSS Intel sense so this is helpful when you write you are writing the twin CSS classes right it will give you the suggestion and it's very easy to write the code and to find the telin CSS classes while writing the or implementing the tel CSS classes inside your application so we'll see you in the next chapter now let's talk about the app routing now for example currently you are on the homepage right and if you want to go to this new URL called SL dashboard so it will be like Local Host 3,000 SL dashboard or any domain SL dasboard same about the about us and this is little different we'll talk about this in moment but in this case right we need to create a routing configuration and in react is little bit complicated but in nextjs is quite simpler let's see how to do it okay so for example if you want to create a route called SL dashboard so if I go to your project and over here inside the app folder only thing you need to do is to create a new folder called dashboard okay and inside this dashboard you need to create a new page called page. jsx file okay and let's add a default template now if you see I am I'm just typing RFC which is stand for react functional export component and click enter it automatically create a template for me because with the vs code extension called react snippet tool this is possible to do it okay now let's save it and I will just rename this to a dashboard okay and then save it now if I go to to our application and if I go to the slash dashboard you will see the text dashboard is showing right same thing we can do it for the about us you just need to add/ about us and then uh you can create a new folder and inside that create a page. JX file and it will give you the new URL called SL dashboard now let's talk about this nested route so oh sorry not nested but it's a dynamic route right so over here if you see I'm going to the route called local 3,000 sluser SL the user ID right and for that one this will be the r now you can create a new folder called user and obviously you can create a folder called 45 and it will go but here is thing you might have 100 of user you cannot create a 100 of folder for that one right so that's where the dynamic route play an important role so let me show you how to implement that one now if I go to this app folder and over here let's create a new folder called user now inside the user folder let's create another folder and here in this time in this case we going to add the square bracket and then you'll give some kind of user ID for example in this case and enter and inside that folder we create a page. jsx file now if I add the default template let's save this one make sure to change the name so here we'll say user user user and here we'll say just user page let's save this one let's go back to our application and over here if I go to the user slash some user ID now it will show me the user page now here you can go to any user ID see and it will still showing me the user page right so this is called a dynamic route and that's where this Dynamic route is very important when you are going to build a dynamic application okay so that's all about this app routing if you have any question any doubt let me know in the comment section and you can take a screenshot of this particular diagram uh so that you can uh Implement and you can understand much better now we are going to add a landing page for our application so on the landing page if you see on the screen uh we are going to add a header at the top where we going to add a logo on the left hand side some menu option on in the center and the login and sign in button on the right hand side okay and then uh for the hero section we going to add a big title uh like this then some subheading for the big title then we want to add a two button for sign in with the Google and sign in with the Facebook or Microsoft and then uh after that we will add a small text okay so this is a basic um mockup design for our landing page so let's go back to our application right now uh we'll go to this uh home screen and over here let me delete this two folder because we don't need it so I will delete these two folders and obviously this is our page.js file which is the default page right and there we are going to add a landing page now inside the app folder right obviously if you create a new folder it will create a new URL or new roue So to avoid that and still you want to create a folder right for example I want to add all the components related to this uh home screen right the default screen in one folder so you can create a folder with the start with underscore and then you can give the folder name like this okay so if you start with the underscore it will not consider as a route now inside that I create a folder called h. jsx okay let's add a default template and save it now inside the page.js file which is our default page or default screen here I'm going to add that header uh component right so it will get imported inside this page.js file if I go back to our application you will see the header okay now let's go to the header and over here we want to show the logo the menu and button for login now for the logo I'm going to use this logo placeholder called logo pm and here you will find a bunch of different uh logo okay so in this case I'm going to use this one so I will just click on this one it will copy the SVG code and inside the public folder where we can store all our assets right here I'm going to create a new file we call logo. SVG here I will just paste the code and save it now in order to display the logo right let's add one de and here I'm going to add image so this image I'm going to add from the next SL image okay next has its own image component and inside that let's provide the source so inside the source just give the path logo. SVG and then next automatically detect okay this particular uh file we need to get it from the public folder now here we'll add a width let's add a width of for example um 100 and let's add a height of 100 we say alt tag as a logo and then save it now if I go back to our application this is how it looks okay now obviously we we'll change the width and height so here I'm going to add a class name and here we'll say on when the screen size is smaller we can add a width of maybe let's say let's say 150 pixel right so if you see right now for the WID right I'm giving that WID in a uh square bracket because I want to give my own custom uh width and not tell me in CSS uh defined width right so that's the reason I go inside the square bracket and then uh when the screen size is medium I will give the width of 200 pixel right this is how easy it is right depends on the screen size you can give the class name now if I save this one and go back to our application this is how it looks perfect after that we need to show the the list right the menu list so will say ul and in uh inside that we'll add a l tag and then let's say product okay I will copy couple of times and we'll change this for example pricing then contact us and one for about us okay so these three option I added so this is how it looks and the last we need to add a button right so ins add the DU I will add a button from the components UI component and here the first button is for login and the next I will say get started for this login button I'm going to add a variant is equal to ghost okay so if you go to these components and button component you will see one variant called ghost okay now let's save this one if I go back back to our application so it's saying that button is not defined so let's define the button first so let's do control space and you'll get the suggestion and then enter button and if you see the button is now available next thing we need to bring everything in one line so for this do we'll add a class name and make it flex and this is how it looks looks right then we'll add item to be in the center and justify between when you say justify between right you will see the all the three things are equally divided and then uh let's add this need to be item to be in the center not a Basel line so let's add a center something like this see after that one for this product and all right the menu item We'll add a class name and make it flex and we'll give gap of 14 right but when the screen size is smaller I'm going to hide that one so when the screen size is medium we'll add a flex otherwise we'll hide this menu see like this okay for this de let's add the padding of five something like this okay now if I increase the size this is how it looks obviously we need to change this menu uh we'll give class name actually so so we'll add a gap of 14 like this okay and then font We'll add a medium and text large if I increase size see how beautifully it look right then we'll add some styling so add a class name here we'll add on how effect so onover we change the text to be primary so this primary is coming because we already mention our own color right so if I save this one the primary is currently is black right so you can change this primary color to your own color okay so if I go to this T.C config.js file right now if you see the default color is kind of neutral a black color right but if you go to this T.C config.js inside the primary section right here you can change with your own color so for example for primary I will Define h69 FF okay it's kind of blue color and if you see the change it it will automatically reflect to all the Shian component okay now for this one if you see right you can directly access using the text / primary and then over here you can apply some more styling for example I'm going to add let's add transition all okay for a smooth animation We'll add a duration let's add a duration of 300 and we'll make cursor pointer and let me show you how it looks so if I H on the product you will see the color of the uh text color is getting changed now I'm going to copy same class name for all of these remaining menu item and save it then for this du I'm going to add flex and gap of five and let's see how it looks see next thing let's add a Shadow effect so we'll add a shadow maybe let's add a medium Shadow if I medium this how it looks let add a small on perfect see and our header is ready okay next we need to add the hero section so for the hero section let's create a new F uh file under the component folder and we can call it as a hero. jsx okay and now if you see as we divide this uh complete landing page into two section right one is for this header and other is for this hero section okay and same thing obviously we kept both this component or both the code in its two separate uh files so in future if you want to use it you can just use that particular component instead of writing the component again now inside the hero component let's add an default template and inside the page.js after the header we'll just add the hero component and you'll see the hero text is showing on the screen and then let's go to hero. jsx file and inside that we're going to add our hero section now let's copy the text which we are defining a mockup okay so I'll copy this existing text and inside the h2 tag I will add it here like this okay here I'm going to add a class name and inside that let's define a classes for example let's see uh here we can say font bold text of 60 pixel and text slate of maybe let's say 700 and this is how it looks now uh for this let's wrap this S2 inside the another d and for this du let's add a class name text to be in the center and we'll add maximum width of 2 Xcel okay something like this so if I increase the size this is how it looks after that let's add another h2 tag for the subheading so I will copy it from this mockup and then we'll paste it here now for this one as well they add a class name uh we'll say text Excel so I took this all the data from the calendar list I will change this to schedule something like this so text Excel margin top to five and then text slate 500 see after that one uh we'll add a du inside that let's add a H3 tag and we'll say sign up free with Google and Facebook and then in inside that again we'll add one de for the button so one button for sign up with Google and another button for sign up with Facebook now let's save both of them uh here I'm going to add class name Flex justify Center and gap of it so let's make sure to import this button component and okay need to be a flex and for this du I'm going to add a class name We'll add a flex gap of four and then Flex make sure to add a flex column margin top to five if I increase the size this is how it looks but if you see right it's extend to long so what we can do uh here let's add a class name We'll add a Flex Flex column justify into Center let's make sure to item to be in the center and we'll add a margin y AIS to 20 okay this is important also uh let me check the maximum WID so here uh we need to add a proper WID this need to be Max so not MX and this is how it looks see perfect right let me decrease this to maybe Xcel or we'll change to 3 XL and yeah this is how it look that's good here of I'm going to little bit uh change the size of this so we'll add a class name We'll add a text smaller and I think that's good so after this D I'm going to add the HR the line so HR tag and then in h2 tag we'll just say sign up free with email okay and we say no credit card required okay some kind of message now on the click of this sign up with free right we need to navigate to some other uh page so here I'm going to just wrap it for now inside the link okay so link is the component from the next only so this is very helpful when you want to navigate okay and if it it you need to provide the one property called H reference where you can Define the uh path of the new screen right you will get to know once we add that one so for now I just add simply like this sign up with email no credit card required and here I'm going to give class name we'll just say text to be primary and save it and if I increase the screen see this is how it looks now here I'm going to add icon for Google and Facebook so in order to add the icon right you can search on the Google but um most probably I use this flat icon.com I don't know you uh know about this flat icon but most of the icon I uh download from this uh flat icon it's completely free so for example if you want to use this icon right you can just add the icon let check and Google and Facebook and I will use this one as well and let's search for the Facebook as well and if you see you have the Facebook here perfect right now you just need to use that one so let's download this one first and then you can download oops the Facebook one as well copy that both the files and inside the public folder just paste it here okay so if you see the Facebook and Google is get added and now you can use it so here I'm going to add image tag inside the button only and here I'm going to go path so here I will say /g google.png we'll say Google We'll add a width of 40 height of 40 let's see how it looks so if you see it's little bigger but let's change the size maybe 30 and here for this class name you class name for button I'm going to add a padding of three let's add six 7 yeah and here we add a flex gap of four perfect same thing I'm going to add I will just copy this button for here here we'll just say Facebook and the I on as well as a Facebook something like this see okay so it's think little bit not visible let's change the icon so I just replace change this icon and now this is how it looks there is some cach but yeah see and now we have the sign in with Google sign up with Facebook and then we have this multiple uh link where user can click on this and we'll go to the some other page okay now here U I added one de and added uh for images okay that images you will find inside this public folder so these are the just um profile kind of image and uh I gave the position as absolute right and I uh put this in some position so if you see so this is how it looks on the large screen okay so randomly I kept that one now when the screen size is small um medium or smaller I'm going to hide this one only when the screen size is large then I'm going to uh show it as a block okay so if I increase the size and if I change this size to smaller right if you see it Con okay so this is the one thing now one more last important thing I want to tell you before moving to the next chapter is to change the font of the application so it's very easy so if you go to this uh layout. JS okay this is the only layout file right now we have inside the folder and we call as a parent layout so in this layout you will see we already have one font called enter and this font is a default font but here you can add your own font so for example if I want to add outfit font here you will see you can just add it as outfit and all of this F font you will find on the Google font so if you just search Google font and over here inside the Google font you will find all the bunch of f font any font you want or you want to use in your application you can just add it here and then make sure to uh initialize that font and then use it now here I only initialize with the outfit instead of enter and that's all and if you see the font get changed immediately okay so this is the uh important thing if you want to change the font for the application so that's all for this particular section that we beautifully implemented the header and the hero section for our application now it's time to add authentication in our application so once user click on this get started or login button okay or the same thing uh if user click on this Google signin or Facebook signin our application will check whether the given user is already authenticated or not okay if he is authenticated then it will redirect it to our application dashboard okay but if uh the user is not authenticated then it will redirect it to the loging screen or signup screen depends on user um new or existing user and for that one we are going to use this kind authentication okay so obviously we going to see all the stepbystep Authentication how we are going to integrate and obviously we going to integrate a social authentication as well so let's go to this uh kind.com so let me open kind.com and this is the authentication service provider and create alternative uh for a clerk or any other authentication Service right and this is very easy to uh use it so if you go to this kind.com you will find uh this official website and here you will find a different feature and as I say it's to toally customizable okay and the most important thing about this kind is uh free to use okay now if you don't have an account create a new account once you create new account let's go to this dashboard we'll see the dashboard like this now if you see I already have some uh account okay and this is how the uh dashboard will look like right now I already have this um business so I will switch the business and I will create or I will add a new business here I'm going to add uh meeting Schuler okay then uh you can give the number of employe whatever and the region you can give the nearest to you okay and then click save so we don't add a name space over here let's add this one so let's say it scheduler only and save it and obviously uh once you created it you will see the meeting SC application is get created and it will Al it's also created the domain name for you okay so let's open that one and obviously we are going to use a project from the scratch so click on that one click next after that one uh here you have some different different framework where you can select right so in this case obviously we are going to use nextjs so it will come under back end and click next xjs then click next and here you have option to enable a signing right now if you see you have option whether you want email only you can enable for example let's enable Facebook Google or you have bunch of more icons see you have lot of Icon you want Microsoft slack stripe okay you want Twitter as well the GitHub as well so it's up to you so let's enable the GitHub as well and this is how it looks okay let's me keep like this only and then click next so obviously here uh it's saying that connect your nextjs application to this code or you can use the nextjs starter kit so obviously we want to connect our existing application okay so we'll do that in a moment and if you see this is the some of the step which we need to follow so first thing we need to install the next o okay now if you don't find this uh documentation you every time you can go to this kind nextjs okay and you will find the documentation over here as well I will keep the link is in the description now obviously we will follow step by-step guide so obviously we have the existing code base okay and here obviously our application is rning running on local 3,000 so we'll keep as it is you have to install this uh K hdk so I will copy this command let me decrease this size and then uh open a terminal go to the terminal and here I will paste the link oh sorry the uh npm Library where it will install the kind hdk now we need to add this variable okay now if you see this variable is already there right is all that client ID client SEC everything there but I will show you where you can get it from okay first copy this one let's go to your root directory and over here we will create a new file called env. loal so all the the environment variable we will keep inside this F folder so I will paste it here like this see and then save it now if you scroll down we need to create a new file okay called route. JS and this is the path in which we have to create this file right so we'll just copy this one and let's go to this app folder and just create this file and paste the all the path right it so right now oh my bad let me delete this this one because and then let's go here again create a new file with the JS okay and if you see it automatically create a folder called API o and then kind o and route. JS Okay then if you scroll down this is the simple way that you can add a sign in and sign up okay but before that let's don't forget to add this code inside the route. JS file okay and then let me close this file this n mment variable so one more thing if you check in the env. loal file you have to update this client secret key okay now as I say you will get it from the uh starter let me check existing code base so let's go to the details and inside detail you'll see the domain name client ID client secret key and the call back URL as well okay so obviously you can update any time whatever whenever you want you can add your own call call back URL as well once the application is in the production mode we will see in that uh in the course as well how we can how to deploy our application as well okay but before that uh let's go ahead and this is the sign up and sign up page okay let's add that one so it's very easy so let's go to this header first where we have the login and sign up button so let's go to header and over here this is our login button right so what I will do I rapid inside log oh sorry login link see if this login link is importing from the kind o hdk and I will put this button in between this login link okay so this is for the login and for sign up right we have to use register link and then paste this code in between and then save it okay as we use this login and register link right we have to make this component as a Ed client if you see we might get this error right so make sure to make this um component as a client side okay so we have to tell NE okay this particular component is on the client side and if you see the error is gone now if I try to login and if you see it's redirect me to this particular page right and here you can fill the details or you can log in with the Google or Facebook okay but now one more thing I want to tell you here that you can even customize this login page okay so if I go to this kind okay and here if I go to the homepage of the kind right and inside the design tab you can upload your own logo okay or you can change the background color you can change button color whatever you want you can do it okay not only that but if you can even customize signin page see like this if I click on edit you can add the background you can upload the image and everything you can do over here okay you have this confirm uh or the template for the email you can update with your own with the own template and everything so definitely you can give a try with this kind.com now let's go back to our application and here I will login with the Google okay but before that let me tell you obviously once user loging right we need to navigate to some uh path right which is our dashboard so if I go here right now if you see we don't have dashboard uh uh route right so let's create a new route so inside the app folder I will create a new route and I will create this particular folder and started with the curly braces okay so actually this is this will not consider as a route okay but inside that I'm going to create a new folder called dashboard and inside that we'll create a new uh file called page. jsx Okay add the default template and here I'm going to change this to dashboard and save it now just to make sure let's go to this.l file and if you see this is the post login redirect URL okay so once user is log to our application right then it will redirect it to this particular path obviously you can change if you want now let's log to our application so let me go back first login 3000 everything will be refresh now click login I will log in with the Google this time and I will log in here and it's saying we cannot find account right because we are login for first time right and it's saying do you want to create a new one with a Google account so we'll create a new account okay so it it's saying create account and boom you just created the account and our application is redirected to the dashboard page perfect right now if I go back to a uh this kind dashboard and I will refresh it you will see the count over here okay let me refresh it okay let me go to the user and if you see the new user get added okay I don't know why it's not get updated over here but if you see in the user section you will see this new user just login okay now once you are here right you can have uh you know that usually authenticated access dashboard but let me log out to this uh from the uh our application right so for the log out if I go to this documentation right maybe let's go over here and here you will find a bunch of different option okay so let me go back for sign out so this is the log out so I will just copy this one for now and inside the page.js where we have the dashboard right I will paste it here so let's paste it over here sorry just add a log out log out link say log out if I go back to application okay let's make this application as a use client and if you see log out button is there if I click on this log out right it will redirect it to the 3,000 right but now if I try to access the dashboard see I'm able to access the dashboard this is not what we expect right because dashboard is only available to the authenticated user and not to anyone so the question is how we can restrict that particular route to access from unauthorized user so that's where the nextjs middleware come and important role right so what it will do middleware will check which is or what are the route are protected one and which are the not okay so whatever the route is protected it means for that route user need to authenticate it otherwise it will not allow you to uh access that particular page right so it's very easy to implement for example now in this case obviously uh we need to add SL dashboard as a authent uh what you say the authenticated page right means you need to authenticate for that one and obviously log uh this particular default page which is local 3,000 you don't need authentication to see this page right so let's do one thing let's copy this middle v.s file right obviously this file we need to create inside the root directory and inside that just copy this code for now okay will be need JavaScript so I will copy JavaScript code and save it right now here we need to modify this one according to our requirements so first thing here we need to check so uh Define a constant here we'll check is authenticated okay and over here you can check with the get kind server session okay now the question is where did I get it from so if I go to this U nextg documentation right here you will see the all the documentation and which is very very rich documentation I will say so here if you see in order to get the server uh the uh user data from the server side right this is the method that you need to call right and if you see is authenticated method is getting call from the G server session so I will just copy this one over here and the g server session is get imported but you have to make sure that g kind server session is importing from this particular import statement right now if you see this is I think incorrect one so I will just replace it with the correct one and then save it now here we'll just simply write a condition if and we'll say not if user is not authenticated right like this and you obviously we are using a so I will make this um function as a sync then I will return this statement now this statement will redirect it to the login or sign up page if user is trying to access uh auth authenticated page like for example daso page so simply here I'm going to change the url and I will add/ API because we have to navigate to this particular page or sorry the API o kind and Route page right so I will add/ API sl/ login page okay and on the post login you can add the post login redirect URL is equal to and here you can add slash dashboard okay and then we'll keep this as as it is and obviously uh here you need to add the URL which you want to authenticate and here you need to add which route you want to uh protect from the unauthorized user so in this case I will write SL dashboard and all the path or all the route after the dashboard okay so I will keep this as it is let's save this one and make sure you implemented this this is important and if I try to access dashboard in this case and if you see it's redirect to me to sign in page cool right but if I try to log in login 3,000 it it will it will allow me okay let's try to log in or let's go back and like try to access dashboard we'll log in with the Google say Google some account and then see boom it jumped to the dashboard okay so this is how with the help of nextjs middleware you can easily uh protect your route from the unauthorized user so I hope you understand how we implemented the kind authentication for our application and then how we protect the route as well now it's time to implement the dashboard but before that we need to make sure in our application that user already have the application or business created okay for that one he's going to create scheduling correct so for that one we need to check once user uh login authenticated to our application it will go to the dashboard so over here we have to check is user already registered business with our application or not right and for that one we going to check the Firebase so we need to set up the Firebase and then once user check from the Firebase fire store database and it will check whether it's already registered or not if not then we will redirect the user to a create new business page okay and obviously once user added the business name we going to store it in our Firebase and once we store that data in Firebase we will redirect it to dashboard page but if you already have the business register with us then we don't need to navigate to any of this uh pages and it will automatically jump to the dashboard only okay so for that one first thing we need to do is to set up the Firebase so let's go to our application because Firebase is our back end for our application and as you know that Firebase is completely free to use now if you go to this firebase.com here you will see the official website let's create a new account if you don't have and go to the console here you can create a new project okay if you don't have already I already have some projects so I will open that existing one and over here if you see right already I have some of the apps okay but here I'm going to create a new app so I will click new and I will click on web application okay make sure you will select uh this particular icon to create a web application then you can give the name here I'm going to give meeting scheduler and then click register app and it will take couple of second to register our application now and then you will see that we first need to install or add the Firebase SDK in our application so copy this command go to your project and inside the terminal I will just paste it here so it will install the Firebase SDK then we need to uh add this configuration in our application so copy everything as it is and and then once the Firebase is installed let me close all of this tab and inside the root directory right I'm going to create a new file so let's create a new file and we'll call config only okay so all the configuration uh we will keep in this particular folder and inside this config folder I'm going to create a new file and we can call it as a Firebase config.js now paste the code which you copied now here you will see this API key key right let's put this API key in env. loal file right uh so over here I will keep this so here you need to give the name like next public and then the name of the environment variable so in this case I will say Firebase API key now every time if you want to use your Firebase key on the client side you have to make sure that the name of the key will start with the nextore public then you have to paste the key and then save it now here you can just access it using process. EnV and then the name of this key so I will just copy and paste it here and then save it now let's go back to Firebase config file and here obviously we are not going to use analytics so I will remove this one and then make sure to export this app okay so that you can use it in your application and that's all you are done of setup of our uh Firebase let's go to the console and if you see here uh the meeting scheduler is getting uh ready but that's all for the setup of the Firebase okay now in the next chapter we going to create a new route called create uh business and in that one we going to uh connect with the Firebase to store our database or store our data as you know that we already set up the Firebase and now we need to create a new route to check whether the uh or to create the business right but before that we need to check in the dashboard uh screen whether the user is already register or not and then only we will redirect it to a new page so let's go back to our uh dashboard route so inside the app folder we have the routes folder inside that we have this dashboard. page sorry in dashboard we have this page. jss file correct so over here I'm going to create a new method we'll call constant and we'll say uh is business register okay and then you first you need to uh Define or in initialize the database now if you don't know how to use Firebase right you can just search on Google Firebase and in this case we we want get doc right and if you go to this documentation fire base has very rich documentation here you will see the read data option right uh now obviously we want to get the data so if you scroll down first thing you need to do to initialize the fire store as we already have the Firebase config setup we already initialized the app the only thing we need to do is to uh initialize the fire store okay let's copy this one now when I say the fire store right if I go to this uh console right you will see the option called fire store database okay so this is a no SQL database Let me refresh this once so if I go to this Firebase store right here you will see there no SQL database it's very easy okay it has a collection and in collection that there will be a multiple documents and each documents have different from different fields right and you have to make sure inside the rule tab if you go to the rule tab make sure uh you will change this particular rule right you can add your own rule as well but right now to make it simple just give some future date so that this particular fire St can be accessible from the remote in the case from our application okay now inside this fire uh F store uh collection we going to check right whether the business collection is available and in that the given document is available or not so let's go back to our application the as I say the first thing we need to do is to initialize this fire store so I will copy this command and over here I will just paste it and and then you have to make sure to install the get fire store import statement so here I will paste it and make sure to import this app right if you do the control space you'll get the suggestion and here if you see we have uh at theate config Firebase config okay H because we already exported from the Firebase config file right and now save it now once the database is uh initialized right if you scroll down and and this is the gate document example right and if you see this is how they Define let's copy as it is and then I will explain you how it works so if I paste it here and if you see this is uh this particular meod use AIT so I will make this function as a sync or method and now over here let me bring this in one line or I will just format it now here first they Define the document reference okay so it check it will def initialize the document so we use this database here we need to use collection name so in this case I will give the business and the collection name is nothing but this particular collection name okay so I will start the collection name with the capital letter or we just say business and then you have to give the name of the document okay so this is the name of the document so in this case we will keep the name of document similar to the user email because we going to create only one business name belong to one user right so we need a user information in order to get the user information from the kind you have to use constant user is equal to use kind browser client and if you see this is importing from the kind o or kind SDK right like this and now from the user you will get the user email so user Dot and you will see this much information you will get it so in this case we want email so I will say user. email now here is the document uh snapshot so here we'll say await and with the help of Doc reference we'll get the document so make sure to import this get doc from the Firebase uh fire store and the doc as well now it will check if doc snap exist or not and if the document exist it will just print out if not it will say no such a document in the console and then we have to call this method once the this particular component get load so here I will say use effect and here I will pass the Mt array and use effect will execute only when the component get load right and I will pass this method now one more important thing as we are using this user from this use uh sorry the kind hdk right and it's a hook so it will take some time to F the data so here I'm going to pass user and here I will say if user is there right if user is available user information is available then only um execute this particular method right that's the reason I pass the user so that whenever the user is available the use effect will get executed and now let's save this one if I go back to our application go to the inspect panel here we have the console and if you see it's saying no such a doc doucment because inside our fire store you you don't see any collection name business right obviously we do not add anything and that particular document is also not there that's fair enough now what we need to do we need to navigate to a new route which is a create business route so let's create that route so inside the route folder I will create a new folder and we'll call it as a create business so this is our route name and inside that we'll create a new file called page. jsx add the default template here I will say create business and save it now inside the dashboard we need to navigate to the create business if the document is not there so for that one you have to Define route so this defined route is equal to use router and if you see this use router you will get two Choice one from the next SL router and another is from the next / navigation so we have to use next / navigation because nextjs 13 or 14 it use this next SL navigation now once you define the router here you need to just do router do replace okay and then you have to give the path name which is create business okay and then save it now if I go back to our application just refresh this page oh sorry let's go to dashboard first and if you see it's redirect to create business page page immediately now if you see one more thing if I go to the dashboard right it will show the dashboard page first and then it once the Firebase dat it will trigger the Firebase database it will get the result and then it will redirect it to our application but that take some time right so for that one we will add a loading so here I'm going to Define one state called constant loading comma set loading is equal to use State initially I will keep the value as it true and whenever the document exist I will keep the set loading as a false and when the document is even not uh there right that time also I will say loading as a false okay and whenever the loading is there so I will write the condition if loading is there I will just return the h2 tag and will say loading okay and save it now if I try to go to the dashboard and you will see the loading is showing and it's not showing the dashboard okay it's showing the loading and once we have the data then it will redirect to create business page that's perfect now let's go to this create business page where we going to add some UI so first thing we going to do is to add the image or logo so we'll add image tag We'll add a logo let's end the tag and here sorry we want to write logo. SVG then we will go width of 200 height of 200 and save it so this is how it looks let me bring this smaller screen yeah then after this one I'm going to add one D and inside D I'm going to add h2 tag and it will say what should we call your business correct and another h2 tag I will say P tag for you can always change this letter from settings and let's give some styling to this one first so I will say class name here we say text of 4 Excel now if you see if I hover on this uh particular TN CSS class you will see the corresponding CSS uh class so when I say text 4XL it belongs to font size of 36 pixel and line height of 40 pixel then we'll sa font board and save it and this is how it looks uh for this one I'm going to add a class name and we'll change the color of the text to text slit and 400 or let's say 500 and save it after this one I'm going to add one VI and in that I'm going to add a label we'll say team name okay and I want the input field right so for input field I'm going to use a Shad C UI and in that we have the one component called input so in order to use this component let's install this uh component first so copy this command paste it here and once it install it's available to use it's very easy okay let me bring our application side by side so let's add input tag and if you see this input tag is importing from the SLC component and here I'm going to add placeholder placeholder is equal to and here we say example tube guruji something like this see okay perfect now here I'm going to give uh class name as a wful and if you see if I in the screen side this is how uh ugly is looking but let's give some style now for this do I will add a class name make it Flex then we make Flex column make item to be in the center we'll give gap of four and also I want to give maximum width of 3 Exel if I save this one here make sure we Flex column so this is how it looks obviously we need to bring this in a center so for this particular D We'll add a class name we'll add padding of 401 item to be in the center make it Flex Flex column gap of 20 and margin y to 10 and if I increase size see this is how beautifully it look right now for this input I'm going to add a class name and we'll just say margin top to two class name margin top to two and for this label I'm going to change this color class name text slate 400 then we need to add button so maybe after this de We'll add a button and here we'll say create business okay let's go uh wait to be full perfect now obviously once you type the uh team name right we need to store store in a one state so let's define that state so we'll say constant business name comma set business name is equal to use State and you you are using the hook called use state so you have to make sure this particular component is on the client side now on the input you need to add or you on change event on change because we need to get whatever the user type right so on change here we'll say event and set business name will be event dot Target dot value okay and we will disable the button if the uh business name is not there so we say disable is equal to if there is no business name let's save this one right now if you see it's disabled because business name is not there but as soon as I type something the button get enabl okay and now you can obviously uh click on this create but button and then we have to store that data in data uh fire store database so let's create a new method called constant create sorry say on create business and over here we're going to add uh let's add method or we say just console.log button click just to show you okay so on create business we have to attach to this button so on the click we'll just call this on create business method now if I go to the inspect panel and let's go to the console if I click on button click see the button is get click right not only that but also let's let's uh give the business name so we'll just print the business name over here let me business name and save it now if I click on button you will see the business name whatever you type right that business name will come here perfect now the question is how to add that in a document so let's go to the fire store uh or Firebase documentation and here you will find the option called add and manage data so click on the add data and this is the a document to how to add a new document right so as you know first thing we need to do it to initialize the fire store so let's copy and just paste it here make sure to import the git fire store and the app as well now if I go back below right this is the simple way that you can create a new document right right it's called set document so let's define that one so first thing we have to write a wait and let's say set document you have to make sure that each of the um this particular method name you have to import called set doc inside that you have to define a doc and then you have to Define database comma The Collection name so in this case we going to give business comma and the name of the document so as I say we have to give users email as a name of the document so here we're going to change constant we have to get the user information so you'll get from the kind browser client hook and then we'll simply use user. email okay then you have to provide the field which you want to store okay as we are using a you have to make this method as a a sync and now let's give the field name so here I will say business name which is the business name then we'll say uh user email as a user. email the user name will be the user do given name plus I will attach user do family name okay I think that's enough if you want to store image that's also fine and we'll say then as this this is a promise and it will return the response okay and save it obviously once we have the response we just console here document saved and save it now if you want to store more data you can okay now let's test this out so if I go inside our this page here we'll say Cube Guru G YouTube let's clean everything and let's create a business and if you see it's saying document save let's go back out sorry let's go to the Firebase and just refresh this one so I will go I will refresh this and if you see the new collection get automatically get created with the name business inside that we create a new document with the document ID as a users email and then inside that we have this three field which we created perfect that's what we wanted correct that's good now let's go back to our application and over here we need to show uh some kind of uh toast message that okay your business get created successfully and then we need to navigate to a dashboard so let's do that so in order to show some kind of toast message right it has a component uh called toast so if I go below you will see the toast right here if you click this is how toast will look like but recently Shaden also added one new component called sonar it also act like a toast but little smarter okay so see you can see the last three toast so and it's very easy to use it at use it so first thing let's copy this command and let install it inside your application and in order to use it first thing you need to do inside your parent layout you need to add this component called toaster so let's go to the layout so this is our layout. JS right and here maybe before the children I can add it here as a toaster make sure to import it from the sonar save it and in order to use it you can just write toast and you have to import the statement so now in this case if you go here you will just say toast new business created okay and obviously once you use the toast make sure to import this toast I think we already added yeah okay and then we also want to navigate to a dashboard page right so we have to define the router first you order to navigate to the uh new screen or dashboard screen and here I'm just add router. replace SL dashboard when we say replace right it when uh then if you go back to the screen it will not go back on this this create business page right so it has a router has different different method called replace or push right you'll get to know once we uh start using our different different router uh functions now once we save this one let's go back to our application and one more important thing now if you create a multiple times right the team name it will get updated within the same document it will not create a new document because we have the same document name right so let's create a new document name say tube guruji YouTube okay and let's click create business and if you see we navigate to the dashboard page so this is how we uh created the um business name okay and if you see here uh now we have the business name called Tu gurji YouTube okay obviously next thing we we are going to do is to implement the dashboard but as you know that or you might understood how we beautifully uh created a screen for to create a new business if you don't have already business register with our application now let's implement the dashboard so for dashboard we need to make sure that uh we need to implement the side navigation as well as the routes which will be on the right hand side right so this side navigation will be fixed uh throughout the dashboard okay means whatever the route you will go it will go to the the dashboard or meeting type or setting only this right side head content going to change depends on the selection of the menu but side navigation will be the constant so for that reason we need to create a layout and in that layout we need to make sure that side navigation is fixed and only the URL or routing content will going to change okay so it might uh think it's confusing but don't worry it's quite simple so let's go back to our application and right now we are in the the dashboard okay and nothing is on the dashboard except that this particular text so first thing we going to do let me close all of this tab and then let's go to the dashboard right inside the dashboard we'll create a new file called layout. jsx so layout. JX file is a uh Reserve uh keyword or Reserve file okay and it used to um implement the layout for the given or specific route so here I'm going to add a uh new file layout and here I'm going to change the name to dashboard layout so I will copy this name over here and in in this dashboard layout we'll pass the children okay so whatever the uh route which which is come under the dashboard okay whatever the next route or the route which come under the dashboard will be rendered inside this dashboard layout okay now if I save it you will see the only dashboard is getting renter and if you see nothing get changed okay now over here inside the dashboard we going to create a different different routes but before that let's add a side navigation so for inside the dashboard I'm I'm going to create a new file for the components okay so all the component which is are related to this dashboard I will keep inside this underscore component folder inside that we'll create a new uh file called side now bar. jsx add the default template let's save this one and as I say we need to fix this side navigation bar on the dashboard so I will add this component inside the layout. jsx file so here I'm going to add a du inside this du I'm going to add a side now bar component and in another de I'm going to add this children like this okay and save it now if you see here right now the side navigation bar showing and below that the dashboard layout is showing right but we want the side navigation on bar on the left hand side so here I'm going to give some WID class name let's give width of 64 okay and then uh I will give some background let's say background slate 100 and also we going to give WID of height screen okay and save it and this is how it looks right let make it as a fix if I save this one now now it this particular side evation will will be the fix and you cannot scroll that one okay and now we have the this particular dashboard or children right for this one I'm going to give margin left to 64 okay so that it will come on the right handed side see okay perfect now when the screen size is smaller let me go here okay uh or maybe we'll decrease the screen we we have to make sure that side navigation bar uh should not present on the screen and we will we need to hide that one okay so for that one I will just say withd 64 only when the screen size is medium otherwise we have to hide it and when the screen size is um medium we just show as a block okay and if you see it gone but also we have to make sure this margin left will be app aable only when the screen size is medium now if you increase the size you will see the side navigation bar on the smaller screen it will be invisible perfect now let's go to the side new bar before that uh here I'm going to change this slate to 50 because we know that the particular size and how it looks now first thing inside navigation bar we're going to add uh the I uh the logo right but right now I want to show on the the right hand side so I will not hide this one let's remove it okay and let me remove this one as well I don't know why it's not working yeah okay so for the example purpose I keep like this and let's go to side navigation bar and over here the first thing we need to do is add logo for our uh sidebar okay so let's do that let's add a image of source here I'm going to refer to the logo. SVG then we'll add a width of uh let's add a width of maybe 100 or 150 then height of 150 and we'll give all tag as a logo here I'm going to give a class name and we see padding of uh five padding y I'm going to give to 40 perfect here uh we have to make this image as a cent inside Center so let me put this in One D and we'll add a class name make it flex and justify center now after this one uh I'm going to add a button so let's add a button from the UI button okay and inside that I'm going to say create and also I want to show the plus icon so we'll add a plus now if you see I got this if I type the plus right you will see that this particular component is importing from the Lucid react okay if you don't know about this Lucid react Library it's a very popular um icon Library okay and when we install the SAT that time the Lucid is also get installed okay and if you go to the icon you will search the icon here you will find a bunch of icon and as I say it's very easy to use okay just write the what you looking for and you will get the suggestion now for this button let add a class name here I'm going to give a flex oh sorry uh Flex gap of two with I want full and most important I want to round it as a full something like this okay if you don't want do you can remove it and then let me bring this down you give a margin top to seven see okay let me format this document and after this one we need to show the menu okay so right now uh instead of writing the menu one by one I'm going to create a new constant called menu and inside this one I'm going to add a menu so I will you ID uh then you can give the name of the option menu which call for example meeting type okay then I'm going to give path so in this case let's say dashboard SL meeting type okay now obviously we don't have this spth but we will add it later on and then I'm going to add icon so in this case I want a brip case icon so if you see if I type brip case you will see this icon is importing from the Lucid react same thing I'm going to copy here I'm going to change ID let's change the meeting name to schedule meeting here I'm going to change this to schedule meeting and here we'll say calendar here we'll say availability the type will change the this availability and here I'm going to change the icon to clock and the setting and the iconizer settings okay now let me change this ID as well and save it now if you see our menu list is ready now you just need to iterate this list of menu menu okay so inside this du I will just iterate it so we'll use menu do map item comma index and I will add a button okay like this obviously we'll give the key as a index and inside this button if you see right now the button is showing on the screen here we need to Define item do name okay along with that one I also want to show the icon so we access using item do icon see now everything for every the icon is Shing okay now for this button we'll add a class name and we'll simply uh say we to be full oops WID to be full okay we'll add a variant as a ghost variant as a ghost okay and now for this one obviously we'll make this width as a full we want text on the left hand side so we'll say Flex We'll add a gap of two and we'll just say justify stop and let's add a uh class name to this D we'll say margin top to five and we'll make a flex Flex column and we'll give gap of four okay let's say five perfect now right now if you see the how or the background is little lighter but here we going to do H effect so on H we'll just say background blue maybe 100 and if I hover on this one you'll see the background that's good right perfect and our side navigation bar is ready okay now obviously we did not add on click event or link once user click on this menu icon right so we'll simply wrap this button in a link tag and this link is we are importing from the next slash link that for that one we need to provide the hge reference and wrap our button inside this link and here obviously I'm going provide the item. path okay so this is the path which we are going to provide perfect now obviously right now if I try to click on this meeting type you will see the page not found because we don't have this path right let's create this path so I will create a new folder inside the dashboard folder because this is the how we want right so that is this is called a Ned route okay so inside the dashboard folder I'm going to create a new folder called meeting type inside that we'll create a new page called page. JX add a default templates here I'm going to give the name of the file as a meeting type we same meeting type over here and save it now if you see if I go to the dashboard SL meeting type you will see the route which is now active and which is the meeting type but we need to make sure that uh whenever we we are on this particular route we have to show this menu as a active one correct so it's quite easy first thing you need to do you are inside navigation bar right here you need to Define one book which is uh constant let's Define constant path is equal to use path name okay from the next SL navigation now this Ed path name will give you the path after the default domain for example in this case it will print or it will give you the dashboard / meeting type okay so once you define this use path name let Define one state called active path comma set active path is equal to use State and you can directly Define here like this path directly okay and in order to print it we'll just consol it inside the use effect to dis uh to just show you the actual result okay so as we are using this use State we have to make this component as a client side so mark it as a Ed client and if I go to the inspect panel go to the console so right now we got one error which is the key that's fine but if I refresh it you will see/ dasboard / meeting type okay and on the line number 40 42 okay and that's what it get printed line number 42 obviously we don't want this U for now so I will just remove this one and obviously that error is came because we have to mark this a key for the link now we have to dynamically apply The Styling depends on the selection or depends on this path name okay which is the active one so here I'm going to wrap this in a curly braces this particular tag remove this one and oh here we add a dollar sign here we'll say active path is matches with the current path means the current acem path which is item do path then we can write a condition that text need to be a primary and I think that's all if I save this one also we add a background blue 100 something like this see right now if you see the meeting type is active one and that's why it's showing like this okay so if you have any question let me know in the comment section now one more important thing what if us in the dashboard so by default we are going to show the meeting type as a default one so there are a couple of way that you can do it if I go to the dashboard page which is this one either you can route it as soon as you have everything is good you can route it to meeting type or I mean I I'm going to remove this particular data and you can just add the meeting type page as a component inside the dashboard if I save this one and if you see right now I'm on dashboard but it's showing meeting type and even though if you go to the meeting type you will see the meeting type over here okay also one more thing uh right now if you go to the dashboard right if I am in dashboard and if I click on meeting type it is in meeting type but this is not active because our set active state is not updated with the updated uh path right so what you need need to do let's go to side navigation bar and we'll use this use effect and here we'll say set active path will be the path but whenever the path change we will execute the use effect okay so I will add the condition like this this need to be set active path and save it now even though if I go to the dashboard and if I click on meeting type you will see the meeting type is active now okay now one more last important thing we we need to do is to add the user profile image on the right hand side as a header so let's go here so let me uh add a new component and we can call it as a dashboard header. jsx it to be H like this add the default template and this dashboard header we going to add inside the layout but in um about the children so here I'm going to add dashboard header and then save it and if you see this is how it looks okay now obviously I'm going to hide this so inside the layout we'll add medium here we add hidden and on medium We'll add a block and here I will keep as it is now we have the dashboard header that's what we are going to add so first thing we need to show the user image so we need to get user information so we'll add a constant user is equal to use kind browser client and we have to make sure this need to be at the client side and then here I'm going to add a image from the next SL image add a source and inside that we just add user do picture okay make sure to add this question mark because um this user will take some time to phase the data right here I'm going to add alt as a logo and then I'm going to also add the width so let's add a width of 40 height of 40 and if I save this one so it's giving me the error that this particular host is not configured under the image in your next. config.js file so whenever you are using any image or any assets from the third party URL you have to make sure that the particular host name or domain name should be configured inside your next in next config.js file because it's for the security purpose so let's copy this host name and let's go to the next. config.js file which is inside the root directory and here inside the next config you have to add images inside that we have domains and in you can give the list of array and the domain name okay so whenever you going to uh using any image from the URL that host name should be here okay let's save it and then restart your application and if you see right now it's broken so I don't know why it's not still saying not configured let's check we correctly added so this is the domain copy I'll paste it here okay so domain name was incorrect Let me refresh it now and if you see now we are good perfect now let's go here and here I'm going to write condition if user is present then only show the image and all okay if I save it right now the image is present perfect now let add a class name we'll add rounded to full and for this particular du I'm going to add a class name of padding of four okay and also want to wrap this image inside One D because I want to add one icon called sh and what is called sh R down something like this okay so let's bring in one line so class name let make it Flex and item to be in the center perfect now I want this user image on the right hand side so simply I'm going to add a float right float right so it will on the right hand side now okay now on the click of this one I'm going to I want to show the drop down Okay so this drop- down menu you can get it from the Shad CN UI so if you go here and you will find this drop down menu so if I click on this one this is how the menu will look like okay so let's copy this uh import sorry the installation uh command and add it here so want it install okay this is a import statement we need to add so copy this one paste it here and this is a sample use case so I will copy this and paste it here okay and let me show you how it look lies so save this one and if you see this open is coming but if I click on this one this is how it looks right perfect now only thing that we need to change is the trigger right now if you see this on the click of this open is getting trigger right but in this case we want to trigger it on this particular image and Sh out right so I will cut it from here and I will just wrap it like this and save it okay let's let's do one thing let's bring this complete de I will remove this du and let's try to wrap it okay let's add image and do here like this and for this trigger let add this class name to this event trigger and let's save this one yeah and we are good okay let me format this document save it and if I click on this one you will see the option okay now obviously we going to update this option so we'll keep this a label as it is we'll say profile then I don't want this building and team so I will remove it here I'm going to add a log out as option so profile and log out for now if you want to add a setting you can add settings perfect okay and now if I increase the screen size this is how it looks okay you can give some margin from the left so here I'm going to add let's add over here padding X to 20 maybe let's say 10 now if I click on this one see how beautiful it looks right now we have we have the beautiful header with the option now for this log out because we have the log out um button link so here I'm going to add log out link and inside that we'll add a log out okay and obviously for once I click on this log out it will get log out from the application okay so guys one more important thing right uh I forgot to add that we need when we have the option called uh create uh Team right or create business or create account or not account but create a business right we need to uh protect this route so copy this create business route and inside the middle we we have to add it here okay so for matcher right I will add a multiple so I will put it in the array and then I will add it here like this now once you log out right let me log out from the application so if I I log out from the application and try to access create business it will ask me to login okay once I log in to our application obviously we already have uh that business created so it will not redirect me redirect to create a uh business page rather it will redirect me to the dashboard page that's perfectly working now we are going to create a new route called create meeting so once user click on this create button right we want to open a new route called create meeting and on this create meeting uh screen we going to divide our screen into two parts one is the smaller which is a form to create the uh meeting event okay and on the right hand side we going to show preview that how it will look like once user you share that particular meeting with some other uh user okay so obviously inside this form we're going to add event name the duration whether it's a 30 minute meeting or 60 Minute meeting then location whether it's a zoom call or or or just a phone call or Google meet something like that for that one obviously we want need to add a URL of the zoom call or something like that then the start date and end date for the given meeting so once user share this one right you make you have to check whether you that particular date is uh available to book it or not okay so that's the reason we give start and end it and once you the create on click booking we going to store that all data inside our Firebase database okay but let's uh go back to our application and here we need to create a new route so let's go back to our application and let me close all of these tab first and inside the routes folder I'm going to create a new route and we can call it as a create meeting inside that one let's create a new file called page. jsx add the default template and here I will just rename this function name to create meeting and save it now uh inside the dashboard components right where we have the side navigation bar and on the click of create we want to navigate the create meeting page so here I'm going to wrap this to link here I'm going to add a h reference and just simply I will add the route called create meeting and I will wrap this button so the inside the link We'll add the button save this one and let's go back to our application Let me refresh once and if I click on the create uh it will jump to the create meeting perfect now let's go to the create meeting page and inside here okay let me show you the side by side the first thing we need to do is to divide the screen into two part so I'm going to add a class name We'll add a grid and when the screen size is smaller we we make sure that grid column is only one but when the screen size is medium or larger we'll make the grid column of three okay out of the three column two column we will assign to the preview and one column we will assign to the form so let's add a du and here uh will will say uh meeting form and another de for uh the preview Okay so for this preview we can add a class name and we'll make column span two so out of the three column we assign the two column to this preview okay and one to this uh one obviously we'll make this as a medium okay only one the screen size is medium now inside this one we need to add a form so we'll create a component and we'll create a folder first as a components so whatever the uh components related to this create meeting We'll add this in in this particular folder and inside that we say meeting form. jsx add the default template let's save this one and make sure to add this meeting form inside this form de meting form and then save it see now let's go back to meeting form and over here first thing I'm going to add a back or cancel button so here I'm going to say cancel and for this du I'm going to give some padding so let's give padding of maybe uh four I think yeah and let's go to the Lucid icon because I want the icon which is kind of back okay so let's see yeah this kind of back okay which call shaver on left okay so here we going to sh on left something like this and we'll make class name as a flex gap of four okay maybe two perfect so user click on this one it will go back to previous page correct so for that one obviously we need to define the route or you don't need to Define route actually we'll just add the link to the previous screen as well okay but we'll add add that later on and now we'll add a DE inside D let's add a h2 tag and we'll say create new event okay so here I'm going to you class name margin top through 4 and for this I'm going to go class name and we'll say font bold and text of 2 Excel okay let's add a margin y to maybe four I think that's good then after that one we're going to add a the horizontal line and then we'll add another D for the uh form okay so if I increase the screen size okay let me show you this is how it looks okay so let's add a shadow as well for this uh de so let's add a shadow um instead of adding here we can also add it to this form directly so over here also we can add class name Shadow medium and we'll say bom okay so if I increase screen size this is how it looks obviously you can give the height to screen okay so this is how it looks perfect then go to the meeting form and inside this de We'll add a H2 true tag and here we'll simply say event name we'll make it mandatory so something like this and then after that we'll add a input tag we add a placeholder and for this placeholder I'm going to give uh something name like um name of your meeting event okay perfect and here I'm going to class name we'll make Flex Flex column and we'll give gap of three Also let's give margin y to 4 perfect and for this event name mean this particular h2 tag I'm going to give I will make the font bold bold okay so this is how it looks beautiful next thing after this du uh let's add the button for the duration right so I will just add h2 tag we say duration and here instead of adding input right I will just add the button okay for example let's 30 minute and this button I'm going to make a variant as a outline so make sure to import the button and if you see variant variant perfect okay you can change this width or you can keep as it is it's better to change the WID so I will add a class name and here uh for this button I will say maximum width of 40 okay now what we need to do once the user click on this one we need to show a drop down with some options right so for that one we want to import the drop down so let's go here and I will just make sure that do we have the drop down already installed or not so we already have the drop down menu installed so we going to use that one okay so if you go to the drop down menu first thing you need to import this uh statement so let's add this one then we need to show the drop- down menu so copy this drop down menu and over here I will paste it then as this button is our trigger so I will put this inside this drop down trigger okay and then I think that's enough let's save this one and let's test this out if I click on this one see we got the button okay here I will just make ADD child and then I think uh let's update this one so we don't want this one here I will say 30 minute or let's say first 15 minute then 30 minute here we'll say uh 45 minute and the last is 60 Minute let's save this one if I click on this one you will see the beautiful options perfect right and save it now after this one we need to add the location whether it's a zoom call or Google meet right so for that one uh we going to create a some menu options okay so inside the app folder or let's see whether we created outside of folder or not so inside the app folder I will create a new folder called utils okay and inside that we'll create a uh one file called location option. jsx okay here simply I will say export default and the some option for example let's add a name we'll say zoom and here I'm going to want to add icon so here inside the public folder I have the already have some icon like see meet or for the zoom we have the let's say this zoom. PNG file okay now the question is where did I get this file many many people ask me in the comment that where can we get this file so if you go to this flat icon.com right here you will find a bunch of different icon okay and it's completely free to use there are lot of Icon you can search whatever the icon you want and you will get it from here it's free to install download as well so once we have this one here I will just say zoom. PNG because I have the file called zoom. PNG okay then I will just copy this one I will add couple of times and here we'll say uh M so it means a Google meet here we'll say m.png then call I will say phone I think the name of the file is phone only yeah and then the other right so we'll say other other.png and save it right now even though if you want to update right you don't need to update the code you just need to update this uh location option. jsx file okay now it's very easy first thing we need to do is just to iterate right but before that let's add h2 tag for the location here for this one I'm going to add a class name font bold same thing we need to add for the duration as well let's add a font bold and after this one I'm going to Simply add a du inside that one I'm going to refer that location option so if you see this location option okay do map here we say option comma item and the arrow function so in this one we'll add a view sorry VI do so let's add a du and inside this de I want to show the icon so for that one I'm going to add image let's add a source and obviously this is from option do icon we give a width of 30 height of 30 and for the Al tag I'm going to Simply add the option. name after that one I'm going to add h2 tag and here we'll simply add option do name let's save this one and this is how it looks okay now let's give some style to this one first thing I want to bring everything in one line so I will add a class name to this du and we make a grid of column four something like this okay then we'll give a gap of three and for this du I will add a class name we'll make sure to add a border then we'll make Flex Flex column justify Center and item to be in Center so it will in the middle okay also we'll give a padding of three and we'll make sure to add a rounded corner of large perfect and how beautiful it's looking right now obviously on how effect we will add it so let me bring this down and we'll add a h effect and we say background um let say on our background blue something like this so this is how it looks see and also I'm going to change the border on H so on H we add a border of primary color okay so see cool right and then make sure to add a cursor point as well perfect now obviously once user click on this one we have to show the input right so here let's add input first so after this do okay we'll add the h2 tag here we'll say add URL okay and then obviously We'll add a class name font bold and then in after this one I'm going to add input placeholder and we'll simply say add URL okay let's save this one and this is how it looks now what we need to do we need to show this only when user select any of this particular location right so let's define the state obviously we need to Define state for each of them right but for now let's define State for the location comma set location is equal to use State okay so initially is empty but user click on this particular de so here I'm going to add on click event and we'll just simply set the location with the location name so in this case let's see option. name okay now okay so we use the use state so we have to make this component as a use client and then once user have the location information then only we want to show this particular h2 tag right so for that one I will wrap this inside the empty uh tag and you will say location question mark or just will and end operation okay and if you see right now it's not there but if I click on any of this one see now it's came right but as soon as I click it right for examp I click M so here I will say add mid URL okay so simply you need to define the location see if I click on Zoom the zoom Lo phone phone okay also whatever I click right you have to make sure that this is get selected right so obviously we need to add a dynamic class so here I'm going to wrap this in a curly braces then this particular code and then I will add a condition if location name whatever the location user set right is matches with the option. name then we need to set the background as this one 100 right so we'll say background blue 100 also we need to set a border as a primary and boom if I select the mid say if I select the other other Perfect Right the next thing we need to add the dates as well okay uh sorry we can skip the date because it's up to you if you want to add that one okay but let's add a button to create it now we'll keep this form little bit simple or I don't want to make you make it confusion so after the d d We'll add a button to create okay make sure this button has a width to be full perfect right and I will give some margin top to 9 maybe little big perfect if I increase the screen size this is how beautiful it's looking right if you think the padding is little smaller let's give some padding it and now that's perfect now for this cancel I will just add I or let's wrap this in a link from the next SL link like add H reference tag and obviously we'll navigate to a dashboard simply okay let's wrap this S2 tag inside this link save it now if I click cancel see it going back to a dashboard page if click on the create see it's coming to this beautiful create new event or create new event meeting page okay so before moving uh forward to implement the preview screen I want to add one more option here to select the theme color okay so here we're going to do option uh to select the theme so for that one first thing let's go to this utl files and here I'm get the new file and we'll call theme options. jsx and here simply I'm going to add export default and then I will paste this uh list of colors okay so it will just the arrow of the array of colors okay this is the HG code and then after this one I'm going to add a du tag here going to add h2 tag or let's add h2 tag over here only and here we'll say select theme color so for this one let make sure to refresh once and I'm going to give a class name font Bol now after that one we will um iterate or the list of color okay so here I'm going to Define do inside that we will access the tee options do map here here we'll add item comma or we'll just say color comma index like this and here we'll add a du okay now for this du I'm going to give a class name of height of five width of five okay and in order to give a background color right we going to add a style and here we'll Define a background color and the color which is the uh this particular color okay let's save this one and if you see the color code is showing correct now obviously we want in one line so I will add a class name make it Flex justify evenly something like this see okay and uh here we'll make a rounded corner so let's make it rounded full let's give height to seven so little bigger perfect and how beautifully it's looking right so this is our theme color us can select any of them now we need to add the selection of this color right for example if you just select any of this color we will need to show something like this right here we showing this border as active one right so first thing we need to do is to Define uh State we'll say constant theme color comma set theme color is equal to use State and here we'll add on click event on click and simply we'll set the theme color as the color and then here um we need to add a condition so I will wrap this because we want to apply the dynamic styling and then over here let me bring this down and here we're going to add a border to the active color okay some we can add a black color border just to display okay this one is selected right so here we'll just simply say the condition first the theme color is matches with the color then we'll just simply add a border okay and uh we'll add a border black color let's save this one if I select any of the color it it's looking black but we need to um give the Border width so let's add a border of Four see something like this okay let me remove this one if I select this one see how cool right obviously you can uh change the size of the Border it's up to you how you want you can even give the white let's apply white white white it I don't think it look good right but that's fine let's put the black only and uh if you want to change the size you can change it and and this is how you can select the theme color now this theme color obviously we need it uh in order to pass to the preview section okay now next thing we need to do is uh to set this value okay so whatever the value we are going to uh enter in this particular form field we need to store in one state so let's define state for each of these fields so constant event name comma set event name is equal to use State when I say the event name which is the meeting event name okay then we need to set the duration so let's add a constant we'll say duration comma set duration and this duration is nothing but the time slot okay of 30 minute or whether you want 45 minutes some kind of thing right then we have to select the location whether it's a zoom call or something so we'll add the constant location type on set location type is equal to use State and the last once you select this location right we need a zoom something some URL right location URL so we'll just say location URL comma set or we can say meeting URL as well okay but location is much better to understand because these both are related to each other oh it's going to back screen let me go to the create one again and next thing we need to do we have to disable this button until this three field get selected so not three but the four because this uh Zoom URL is also mandatory field so let's make this add the star over there just to tell you that okay this is the mandatory field and for this button right here going to we going to add a condition disable the button okay and if I disable this is how it looks but we can add a condition if event name so we'll add an event name or or uh duration then or location type and then location URL this need to be there and if you see right now it's disabled but if I add the name I need to select some duration let's SE the milling and some add of value okay still it's disabled so there is some issue over here it's because we never set any value right for now once we Define this state right so this state are already but we need to Define this value so let's add on input so on the change so on the input change we will it will uh emit the event and then we'll set the event Name by using event. Target do value same thing for the duration so here we want to add on click event and we'll just say on duration and we'll just set the value okay this is the old Technique we are going to we are using we are adding on click in each of them item okay and only the value we have to pass correctly so here need to 45 minutes okay and obviously once you update this one right you have to update this value so duration over here okay by default we'll put a duration of 30 okay now if I select the different duration for example 45 minutes you will see it changed to 45 minutes on the location as well uh we need to add on click we already setting that's good for the URL uh the for this input as well we need to add onchange event set location URL is equal to event. Target do value and the last is the theme color which we already said let try to test this now we'll select some duration we'll select Zoom meeting and test so right now we got one error that saying the on change the value is not defined because the spelling the target spelling is incorrect so let's go to add URL and here correct the spelling and test URL and if you see it's work Let me refresh one so one more important thing here because we initially use the location uh as a name over here right so I will remove this one because we change this to a location type so make sure to update that as set location type and over here as well and now so okay so this need to be let's add even type is not there duration is not there location type is not there and location URL is not there so let's try to add all of this fill okay so it's saying object are not value as a react child if you want to render collection children we use array instead so that's came because we enter this set location type and I think I think we are good let me check what's the issue so let's refresh application once and that error become maybe cach but let's try to add the data so event I select some time let's add some 60 Minute and if I select the location Zoom still the button is disabled but as soon as I enter the URL let work okay and theme color is optional it's not mandatory now once we have all of this data right we need to send this data to another component because we are going to create a new component for the preview and on that one we need to send that data right so instead of sending all of this data one by one okay what we are going to do we create a new state we call constant form value comma set form value is equal to use State okay and as soon as uh any of this field get changed we going to update this form value so for that one we need to use use effect and inside this us effect obviously we need to trigger this us effect whenever some value get changed okay so here we pass for example event name duration then we need to also pass location type location URL and the theme as well okay means theme color so all of these value updated then we'll set the form value and simply We'll add in the form of object so here we'll say uh event name will be the event name duration will be the duration then we want a location type will be the location type location URL will be the location URL then uh theme color will be the theme this need to be here theme color okay and obviously this value once we Define right we need to pass to pass back to the parent component right I think we even though if you did not um use it here that's fine we'll just uh okay let's let's define it here as well so here is better not Define over here because we want to set this value so here we'll directly set the form value and then once we set this form value right we need to go to the parent comp component which is this page. jsx where we have this meeting form and here we simply add the set form value and just to make sure that it's coming here we'll print that value okay and save it now as we are using this set form we have to make this component as a client site and save it now if you see that error is gone let's go to the inspect panel go to the console and if I select the something right see you CAU the event name right if I select some different um time Z sorry duration you will see the change and this change in the on page page. JX file line number 10 which is nothing but this one okay now obviously once we have the data we will set it here so we'll say form value comma set form value is equal to use State because we have to make sure that we will store that data in order to pass to the preview screen instead of console we just set the form value and obviously whatever the pre uh component we going to create that uh form value we going to pass to this pre component so that as soon as we change this uh any event name or duration it will refl on the preview screen now in order to add a preview screen right uh on the preview section we going to divide the screen again into three parts on the left hand side here we want to show the um meeting details here it will be the calendar okay with the dates and here we're going to show the time slot depends on the user selected duration okay so this is the simple prw that's how we going to Define it so let's go back to our application and let me open this one and before the uh the implementing preview screen we need to add the component called preview screen so inside this component folder I'm going to create a new file and we can call it as a preview meeting. jsx add the default template and make sure to import this component inside this preview component okay and save it now as I say earlier that we need to send this form value because we are already setting over here to this preview meeting and save it okay and let me show you the magic here we need to accept as a form value and if you see let's print out the event name so here we'll say form value do event name now if I go here and type some name see it's coming right as soon as I type it it's showing over here so that's how or that's the reason we uh use that set form value and we are passing from the child to parent and then parent to another child now obviously uh let me remove this one and the first thing we're going to do to add a class name We'll add a padding of five padding y of 10 We'll add a shadow large will give the margin uh five and border from the top okay so I I will give border top to it if you see this is how it looks for now okay now below that we going to add our logo so image source and over here we'll just refer SL logo. SVG alt as a logo then we give width 150 height 150 let's save it and this is how it looks but perfect now let's divide the screen so let's add a do and first thing let's add a class name and we'll make a grid grid column one when the screen size is small and when the screen size is medium we'll divide the screen three part as I say okay out of that one part will be the in for the information purpose okay so here we'll say um meeting info and another du is for the um time and date selection and here we'll add that du so for this du out of three column I'm going to assign two column to this du okay so when the screen size is medium We'll add a grid sorry not G but columns pan two and save it right now obviously nothing will display on the screen now let's implement the meeting info screen first so for this one um we going to add h2 tag and here we just simply say business name or we can add the users's name as well second we're going to add the h2 tag for the meeting name okay so here we'll simply add a form value give the optional field because otherwise you might get error if the form value is not there and here we'll say event name if that event name is not there first thing we'll check if it's there then display that event name otherwise just display the uh meeting name some some uh simple text if I go here this is how it looks because that's what we type if I did not type anything you'll see the meeting name obviously here we going to uh add some styling so style and let's add a font bold oops sorry oh this need to be a class name and font bold text of two Xcel save it and perfect now for this do let's add a class name and we'll give margin top to five rather we can give margin top to five to this one and for this one let's give a padding of four okay perfect next thing uh one more thing is add a border at the right hand side see then we need to show the duration right for for the duration uh let me add a do and inside that one I'm going to add h2 tag first thing I want to show the clock so let's add a clock icon from the lucid and then we going to show the duration from the form value do duration and we'll add a minute here we add a class name we make Flex gap of two see something like this for this du let's add a class name and we'll add margin top to five We'll add a flex Flex column and we do gap of four okay so one more item because we want to add here so we'll copy existing one add it here and here need to be a location so map pin I will add and the instead of duration this time we'll add a location location type and here we'll say meeting so it's a zoom meeting or meet meeting something like this okay so right now if you see nothing is display on the screen except this meeting text but if I select the zoom see it came Zoom meeting after this I'm going to add h2 tag and here we just simply display the URL uh so whatever the URL user add right so form value do uh location URL so right now if you see uh whatever the URL we add it will come here but this URL need to be in the link kind of format so inop us2 let's wrap it inside the link and in the H reference as well let's add H reference and the link only okay but here I'm going to add some styling so add a class name and we'll say take to be primary because we want a blue kind of color oh this link is incorrect let me remove because we don't want the icon we want the next slash link okay so we import that one perfect okay so this is a clickable if I click on this one it will go some different page so it's saying the HTML exper string object in link but got undefined so here we we need to write a condition if form value uh is there rati show otherwise empty or let's say hash only and save it okay if I go back that's good now next thing we need to show the calendar now in order to add a calendar we going to use Shad CN component called calendar and this is how simply it is right and is very easy to implement so first thing we need to install this uh component so copy this npm command and then inside your terminal just paste it so that it will install the calendar okay now in order to use calendar this is the just simple component that we need to use so I will go over here and in the time and date slot right that's where we need to add this calendar so first thing we add a do inside that I will add the calendar and then make sure to import this calendar okay and if I save it let's see so it's obviously date is not defined so let's define the date some default date so here I'm going to add a constant date comma set date is equal to use State and the default date is new date and if you see this calendar okay let's apply some styling to this one so for this particular de because on the right hand side we need to show the slot right so I will CL make it class name I will make it as a flex and uh along with that one we make Flex column oh wait Flex column because I want to give the h2 tag over here and here we're going to add select date and time class name font Bard and uh this is good let's save this one and obviously as I say right on the right hand side we need to add a uh what will say we need to add uh time slot right so here we'll make a flex so right now if you see this is how our uh calendar will look like let's give some padding so here I will just simply add padding of maybe let's add similar padding to what okay padding of four let's add padding of four only perfect so let's add padding X only for now and for this one I'm going to add a margin top to five and uh we'll change this font little bit text large let's see how it looks I think this is good okay and here if you see you can select the time as well next thing as I told you that we need to show the slot over here on the right hand side so now in order to create the slot right depends on the selection of the duration we have to make our slot right so let's go back to our application and I already have code to create the slot so I will copy and paste it here it's little bit complicated but uh you can little bit you can easily understand this one here we got one error let's let's wrap this in this particular tag okay and this is the time slot I created okay if you want this particular line of code you can just pause this video over here and just copy paste it okay so here this is the format hours and the minutes as well obviously you can get it in my source code the link is in the description you can access it any time now here if I use effect in order to call this time slot right so first thing we need to check if the form value is there then inside the form value we have to make sure the duration is uh selected and then we said create time slot okay and here we need to pass the form value do duration so whatever the duration user select that duration we need to pass here we call it as in interval and then it will get the result okay let's print the slot first so if I go to the inspect panel okay go to the console so right now if you see one we have one error or it's actually warning it's saying that you the each child in the list should have unique key prop okay because I think we use the uh we iterate the value in meting um meeting form right I think over here so here we need to define the key as a index and same thing we need to Define over here as well key as a index because index value will be the unique right and we need to pass the unique value to the key and if you see the is not there and if You observe right now we have the slot of for the 30 minutes and every slot I I started from the 8:00 so 8 8:30 9 9:30 up until at 10:00 okay but but if I change this now let me clean this one and if I change this to 60 Minute you will see the 60 Minute slot immediately reflect over here okay so that's the uh reason this code um you can just use it now obviously this slot we need to store in one state so let's define that state we'll say time slots comma set time slots equal to use State and then simply here we say set time slot will be the slots okay and save it now this particular slot we need to iterate it okay so that we can display it on the screen so after this du I'm going to add a de and over here we'll add a time slot dot let's add do map and here will be the time comma index and the aror function inside that we'll simply add a button okay from the shads here and inside that I'm going to define the time if I save this one this is how we it looks right but if you see if I select the 15 minutes you'll see a bunch of time right and that's not looks good so for this button let's add a class name okay and here I'm going to add before that let's add a variant variant is equal to outline so it need to be a variant and then I'm going to add a border to be primary text to be primary and save it perfect this is how it looks let me bring this down now for this do I'm going to add a class name we'll make it Flex Flex column because we want it everything in one line like this then we'll mark it as a WID to be full okay then we'll add overflow Auto We'll add a gap of four and padding of five okay something like this but if you see it's scrolling to the end right so be uh to avoid that one we going to give a maximum height to this one we can do the height in the style something like this Max height and here we'll just say 400 pixel if I save this one you will see the change okay now you can scroll over here see how beautiful right you can have option to select and everything but as I say this is just a preview okay now one more thing as you know we added this theme color okay and but the question is where to use if you see this border right and that's where we are going to use this theme color so let's go here and for the Border where we are showing the border on the top right here we going to add that particular theme color so let add a style and for this sty let's add a border color this is just a border top color and which will'll get it from the form value dot theme color let's save this one obviously if you did not select Let me refresh it then it will show the default one but if you select any of this one you will see the change and it look beautiful right now as I said this is a responsive okay let's let's test this out so if I decrease the screen size see suddenly it comes down and you will see the slot over here okay so depends on the screen size as well our layout get changed depends on the uh mobile view or tab view or the desktop view now here uh if you see uh for the date and time right now it's you can select the previous date as well okay and that's what we don't need to um do it right if this a old date then we have to disable that date so for the calendar we have one option called disable here it will uh return the date and you can add a condition if date is less than the current date and save it then we can disable it let's add less than equal to okay so the user can select only date which is greater than this need to be d uh greater uh which need to be a greater than the current date so if you see right now this all the date are disabled and all the future date are enabled now okay perfect so I hope you understand how uh we implemented the create meeting UI part okay obviously we need to store this data on the database once user uh add all the details and then click on on the create button now it's time to store our all the data inside our database okay so let's go back to our application and go to the meeting form screen where we have the button called create here I'm going to add on click method let's add on click method sorry on click event and here we'll say on create cck let me create this particular method constant on create click sorry not like this the arrow function and here okay and first thing we need to initialize the database so constant DB is equal to get fire store and the app then inside here in order to store the data right you know the how we can store the data right so you can refer this document so first thing we need to define the await set Doc and the details right let's refer this document here we'll say await so as we are using await you have to make this method as a sync then await set doc make sure to import uh the set doc from the Firebase fire store then doc DB okay let's let's import the doc as well then DB here we need to give the collection name so we can give the collection name called meeting course we say created meeting say meting type let's say meeting event then we have to give the document name right so this document name you can uh generate automatically okay or you can have a unique document type as well so here I'm going to create a ID called constant ID is equal to uh date let's say date do now so d uh so date do now so it will return a Time stand for us okay so this ID we consider as a document ID and obviously we have to make sure this need to be in the string format when we store this so I converted into two string here we'll pass the ID and then we need to add the data so first thing let's add ID as ID then name it need to be sorry event name okay or let's copy all of this data because all of these data we need to store it like this now and one more important thing is to connect this with the actual business ID okay so if I go here in database right uh let me clean this up and obviously we don't have the um that new collection that we want to create but if I go to the ad field any add field right add ABC and you here you will see the type called reference okay once you click on that one you have to give the path of the document where you want to refer so in this case it's business the email ID which is the user's email ID and then you can attach that particular um meeting event to this business okay so that's what we need to do so let's go back to our application and here we'll say business ID we say business ID and then we need to give the path so in this case is uh business slash and the name of the use uh users email right so users email we need to get it from the constant user is equal to use user so not use user user user. find browser client like this and then we'll just add user do email okay and then we'll add a then response and we just send a tost message that uh new meeting event created and save it now let's test this out so here I will give the uh 30 minute minute meeting duration I will select the 45 minutes I will select the zoom here I will say HTTP Zoom call.com you can select the theme whatever your theme you like okay and this is just a preview okay you cannot add any action and let's call create and nothing is happened I think so let's go to the inspect panel just to check whether we got any error this is the different error let's click on create again let's check in database so let me refresh this one here if you see we have the new uh collection name called meeting event inside that obviously we click two times so that's the reason it comes as a two times and then here we have all the data okay so business ID I think that's not the correct one but that's fine we'll check it out but if you see all other details are here okay except the business ID because that's what we have to refer with the existing business okay so we'll change this one so over here um the our business reference is incorrect which we Define so the way we need to Define is let me remove this all of this and here we need to Define doc then the database reference the collection name which is the business and then the document name which is user do email okay and then save it make sure business I with capital I Let's uh go here and let's create a new meeting we'll say 60 Minute meeting let's select the 60 let's select the meet in this case uh we'll add me we'll select the theme which is green and then create now once it get created you will see the new meeting with the 60- minute meeting and the reference okay and if you see the type is referen now and is connected to the business/ uh the document name okay perfect now one more thing if You observe right when we create any meeting Let me refresh this once and me save it because sometime the toast mass is not appearing on the screen because we Define this to toaster right they initialize the toaster uh component inside the parent layout we have to also make sure that we'll Define this toaster to the dashboard layout okay so let's add it here let's save this one make sure to import this toaster save it and let me refresh this one now create a new meeting 60 Minute me some URL and create and and if you see now it's saying new meeting event created and obviously once user meeting created successful we need to navigate to the event page okay so if I go to the dashboard and we have to redirect it to the meeting uh type page obviously this is a dashboard page but we'll navigate to the specific page so we have to define the router over here Define constant router is equal to use router and then once it is successful here we Define the router dot let's define router dot let's replace this one with this URL okay let's save this one and uh let's go back to our application let's click create we'll say ABC event 15 minute meet ABCD select the theme if you see we have the time slot of 15 minute every 15 minutes let click create and boom it's redirected and you are a toor message saying new meeting event created perfect okay so that's how guys uh we successfully implemented the uh create meeting page with the form and the preview as well so there's one quick update we going to make it so when we create the meeting right we are going to store or we already storing this business ID which is reference then duration event name and all of this field along with that one we are going to store the users email who created this event right so let's go back to our application and this is where we are going to create uh the event right and we are setting the doc over here I'm going to add email and this should be a or we can just say created by okay and then here we pass user. email okay because we already have the user uh information and from that one we can get it the created by date Okay the reason is that we need a created by date because later on when we want to F uh the particular or the all the event belong to that particular user we can just simply uh fetch it with the help of created by with within a we Clause okay and that's the reason because I don't want to uh make Complicated by uh fetching it from the business ID and lot of things right so we'll keep that little simple and now if I go here and let's create a event Let me refresh this once and here I will create name of 60 Minute meeting I will make it 60 create some call let's add Zoom call.com and let's select the theme color and then click create and boom it's get created and if I go to the database here you will see the new ID but in this case you will see the created by field okay so yeah that's the only update that I wanted to tell you guys let's talk about our today's video sponsor cryptus which is the cryptocurrency payment Gateway with a low commission they charge only point4 to 2% commission now let's see how you can start accepting crypto payment with the cryptus you can integrate the payment Gateway by API documentation that you can find on your personal account phb hdk with all necessary Tools in one kit or by using a plugin for e-commerce website made with the ucommerce Shopify pra shop and others one of the cryptos feature is a white label all you need to do to configure all necessary data and use all the Crypt Payment Processing feature with your branding with the crypto processing you can create your own crypto exchange or crypto Gateway try crypto processing work with crypto transaction the way you want link the link to the Crypt will be description below register and try it yourself so as you know that once we create uh the event meeting right we are redirecting to a meeting uh type screen where okay so on this meeting type screen we are going to show the all the uh list of meeting which user created okay so here we're going to show all of them and then obviously from here user can copy the link okay or they can share uh the particular event with other peoples also we going to show some details the meeting uh event name or the duration where is the meeting and all of these things right here we going to give option for setting to delete the particular event or to edit the event as well okay so this is about the meeting event uh type screen so if I go here right and this is our meting type screen here we're going to show obviously we already have the route which we created for so let's go here and then let's start implementing so I will close all of this tab let's go here and the first thing let's go to the route called inside the dashboard we have this meeting type route okay here uh I will remove this one and here I'm going to add a de sorry uh the h2 tag will add and it will say meeting event type let add a class name we'll say a font bold and text of 2 XEL Let me refresh this once perfect let's add little bit bigger text let's say 3XL here I'm going to give a a padding so add a class name padding of five and then after this one I'm going to add a search bar as well so I will use the input component here we add a placeholder and we will just say search Okay simply obviously for this one I'm going to add a class name and we'll add a maximum width because right now if you see it's showing the full width so here we're going to add a Max x with small let's add extra small excess and uh for this one let's add a margin top to file or instead of that what we can do uh we can just wrap this in One D that will be good actually and for this de I'm going to give class name Flex Flex column and then gap of five okay after this we'll add HR tag the horizontal line we want to add so I added the HR tag so it will look like this on the bigger screen this is how it looks now the next thing we need to do is to iterate the list or to get the list first obviously and then we want to iterate it over here right so in order to get the list uh we need to fetch it from the Firebase so let's define or initialize the database called get fire store and pass the configuration which is app also we need a user information so constant here we'll pass a uh user is equal to use kind browser client okay and then we'll write a method constant get event list and inside that one uh we need to use uh document to get the data so if you go to this Firebase documentation here you have option called read data get data and here you just select the get multiple document from The Collection when we say the multiple document right you have to write a query and you have to pass the we condition okay and then you'll get the list of document so it's better let's copy everything as it is so I will copy this one paste it here and OB obviously we need to also copy this all of this import statement Inside the Fire store so I'll paste it here as we are using await so let's make this as a sync okay I will just format this document perfect let me remove this common line and then if you see we have the query The Collection name obviously here we need to pass the our collection name which is the meeting event then the condition the we condition we need to pass CL here as I say we created the created by field and with the help of users email okay perfect and then here we will we will get the document now let's call this particular method inside the use effect so let's define the use effect and once the user is user information is available then only we will execute get event list the reason is uh because we are using the users email over here okay and we don't want to fail our uh VI condition or this query okay now if I save this one as you see we got error because we are using use effect so we have to make this particular uh component as a use client and boom now error is gone let's go to the inspect panel go to the console and if you see we C the data okay now uh let's do one thing as we are defining our meeting list over here in same component right uh we can Define that in a different component and then we can display it over here so let's define that component so let's create a new component folder uh okay underscore component that's right and inside that one I'm going to create the new component name called meting event list. jsx Okay add the default template and and then save it now either way you can uh just call this meeting event list and use it here right so let's copy all of this thing okay and it's better to Define inside the meeting event list and obviously we need to copy this import statement so I will copy all of these along with the use client and obviously if you did not use use client here that's fine because we are just making this component as a client side component let's save this one and save this one as well and inside the page. jsx oh let me remove this use effect and all of this and over here let's save this one okay we need to import the meeting event list component okay so this is how it go and okay you can keep this inside this page. jsx it doesn't matter only for the organization purpose or sorry organized purpose right to make our code look organized that's the reason I created uh the new component called meeting event list now uh as we know that we got the data we need to store in one state so let's define the state we'll say constant I don't know why it's not formatted yeah I think constant we'll say event list comma set event list is equal to use State and this will be the array of list so I put the empty array initially and as you know that we are getting data one by one okay so here we'll simply set set event list and then we need to push with the existing value right so here I will simply add previous event say previous event comma and then the data which is this one and then save it okay now once you save it here inside this D I will add a class name uh we will give the margin top to 10 then we'll give um grid we make the grid columns one when the screen size is smaller when the screen size is medium we'll get get columns two and and the for last screen make gr column 3 now inside D we need to iterate this event list so here we'll just simply iterate it okay but once you don't have the data that's where as well we need to show some some data right but before that let's iterate this event list event uh comma index and inside the DU let's add our code okay now here the first thing I need I want to add the name of the event so let's add h2 tag and here I will add event dot event name okay and save it see here I'm going to add the condition if event list do length for example is greater than zero then only show the event list otherwise we'll show some different text okay we'll say uh loading for example obviously we'll change this later on now once we have the event name let's uh add some Styles so add a style We'll add a sorry not style the class name I want to add class name font bold text large or let's make font medium only to excel add Excel only then let me bring this down uh for this du I will add a class name okay we add a border we add a shadow MD and for Border top I'm going to add border top to a so this is how it looks right and uh I will add the rounded to be large and if I increase the size see this is how it looks right so obviously we need to give the Gap over to this particular de so we add a gap of 10 if I increase size perfect let's add a little bit smaller Gap okay now for this de bring this down we going to add a padding of five and then after this one let's add some more information so let's add h2 tag inside that I'm going to add a clock icon and then we'll say the duration right so let's get the duration from the event. duration let make it class name as a flex gap of Two And as the duration is in the minute so we'll say minute okay now one more information I want to add so I will drag this in one du and one more h2 tag for the location so here we'll say location type and we'll say map pin and save it see like this now let's bring everything in one line so class name flex and we'll say justify between so it will be in the one line now for this de let's add um Market as a flex Flex column and give gap of five let's let's give of three and on large screen this is how it looks now if you see this border we added right so if the theme color is there we going to change the Border color as well so here I'm going to Define style and we just say border top color will be the event do theme color and save it and boom see okay now the reason is right obviously in the uh in database right we all we only have I think three meetings right here it showing multiple I don't know why so I deleted the one meeting okay now it has let's it's okay so for this particular record don't have the created by date so let's delete this one as well and if I refresh it now we have only one but it's showing two right because the use effect is executing two times okay so for that one you need to update one uh configuration inside the next. config.js in order to avoid to execute use effect two times so here you need to add one property called react mode and you have to make it as a false okay and now save it now if I go here and refresh the screen obviously once you update the configuration file you have to restart your application and and now if you see loading was showing and then boom now you got the only one result because U effect execute only once okay next thing uh after this one I'm going to show the horizontal lines so maybe after this one I'm going to add HR tag so if you see as soon as I saved couple of more INRI get added because when we save it right this use effect will get execute once again and uh in event list right with the existing data the again this data get added on the top of that one so you have to make sure that U inside the G event list you will make sure to empty the event Le first before adding a new data okay and let's refresh it again and boom now we have only one data if I scroll down over here we want to add the one de inside that one we're going to add S2 tag a similar tag actually I want to add and for this one we'll add a text of gray 500 and same over here and for this particular h2 tag right which come after this one here I'm going to replace this with the copy and here I will just say copy link now I'm going to change this size and height so class name we add height of four width of four and text size as well text small we'll make item to be in the center let's bring this down and we'll also change the text to be primary okay and on the right hand side I want to show the button so let's add a button and here will the share so for this button let's add a class name and let's update the variant as well is equal to outline I will put border primary rounded to be full and text primary so why it's showing border to be primary text primary outline okay let me bring this okay something is not correct so this need to be a variant variant okay and now you can add text primary and Border primary and let's bring everything in one line so for this du I'll make it as a flex justify between perfect and if you see and if I increase the screen size this is how it looks okay let me refresh once boom now one more thing here I want to add the setting icon right so over here on this du We'll add h2 tag let's add a d first and inside that I will add a setting icon like this and let's bring this setting icon so we'll make it as a flex and let make it justify end so it will be on the right hand side okay and for the setting icon let's add a text to be the gray color and cursor pointer something like this or make it darker only that will be good okay now once you the click on this one we want to show the menu as soon as we uh Implement some more feature for this one right but if I go here and let's create a new meeting now here I'm going to say 45 minute minute meeting I select the 45 as soon as I select the fortify this also get updated okay here I will say Google meet and we'll sayp Google meet link.com select the color and then click create and boom if you see the new meeting get created so cool right so obviously one more thing here uh you can add the order by clause and if you want to order byy on depends on the ID you can just do that so what you can do because we already have the wear condition over here right after this one as well you can add order by CLA and you have to give on which field you want to order byy so here I will give the ID and then you can give uh whether you want ascending or descending let's try descending okay okay we got one error so it's saying that query the query requires an index you cannot create it here so obviously when you uh add the order by claws right you have to create the uh indexing inside the Firebase right so as soon as you implement you will get this err and you will see the link as well so click on this link right sign in with the account and once you sign in you will come on this page where it will look like this okay create or update the index and these are the field on which it is getting created okay obviously you can also create manually so if I go here you can go to the indexes Tab and here from here you can add the create index and you can add the fill name on which you want to create the index so in this case I want to create index on ID and descending let's click save and it will take couple of minute to create indexing for on your field so we'll wait and now if you see it's showing the status enable Okay it means our indexing is ready now let's go here again let's refresh the screen and boom now the one which we created latest or the new one it come first and then the uh the older one okay so this is how you can do the order by operation now here a couple of things we can uh Implement here for example if user click on this copy link right we going to copy the link on our clipboard so user can directly paste it on his mail or somewhere whe where wherever he want so in order to implement that one right it's quite easy so let's go to this copy link section and this is our h2 tag right let me bring this down here I'm going to add a cursor pointer first and for this S2 tag I'm going to add the on click event okay so this on click inside this on click event I'm going to add two method one to to show the toast message that okay you copy the link and one is actual uh copy link on a clipboard so here you have to add Navigator do clipboard. write text okay and here you need to add event. location URL as simple as that right and after that I'm going to show the toast message that link sry U URL copy URL clipboard or we can just say um URL copied on clipboard copy to kboard only let's save this one and now let's if I click on this one see it's showing the toast message that copy to click boo if I click multiple times see you can obviously um look for the previous one as well that's how the beautiful Sona toast message is okay and that will work for all of them okay perfect so guys uh that's all for this particular chapter that to bring the all the meeting event which user created and displayed on the screen okay so later on obviously we going to add more feature into this one so uh keep watching this complete video if you did not subscribe to my Channel please do subscribe next we going to add some option here like to edit the meeting or to delete the meeting right so here uh similar like this one right we going to add a drop down so let's go to the shat here and go to the drop down menu and as we already installed the drop down menu so I will just copy this import statement and then over here let's go to the setting or first we need to import obviously so let's import the statements and then I will copy this drop- down menu option let's paste it here and this is our trigger so I put this settings trigger over here okay and make sure to mark it as a as child now we remove this one here we'll say edit and then delete obviously you can add the icon for example pin icon and here I will add a trash icon we add a class name Flex oh sorry class name Flex gap of two and here as well and save it let's see how it looks so if I click on this one right I don't know why it's not clicked okay Let me refresh once so it's saying the drop down okay pin is not defined make sure to import this pin and then if I click on this one see we have pin and delete option perfect right now on the click of delete obviously first we are um adding delete functionality because edit is little bit um um uh big task but for the delete right uh we'll add on click event so let's add on click event on this one and here we'll just say on delete event meeting event meeting event okay and here I'm going to pass the event details let's go here and create a new method called UND delete meeting so here we'll accept it as event and save it right now in five base uh the question is how to delete it right so if you go here right we have the read data and I think this is the one is to manage the data and if you go here you'll find the delete data right it's quite simple and quite straightforward only thing you need to add the delete doc the document and the collection name and document name okay obviously we have the document ID so let's copy this one uh as you know that we already have the database instance created so we don't need to create it again and over here I will add the delete dock let make this as a ass think here we need to give collection name which is meeting event the uh ID of the meeting so which is we'll get it from event. ID so let me show you which one so if I go to the data and for the meeting event right each of these particular document we have the ID right and this ID and this ID is get matched see okay so that same ID we are going to pass so and we'll put the then operate okay I don't know then will work or not so I think OB delete doc I don't know then is not working okay that's fine and let's add dot then response and once the document is get deleted we going to show the toast message that um meeting event deleted okay something like this and then uh obviously once we the we show the tost message we also need to get a latest event so I will again call this get event list in order to get a latest event means it will update our list right let's delete this one of the meeting so click delete and boom if you see the meeting event deleted and our leas get updated okay so this is how you can add the delete functionality in our application now in order to uh book this particular meeting right we need to make sure that we will connect it uh to the users availability means whoever uh creating this meeting right uh they need to set their availability whether that particular um user is available in given specific days or not so two things we need to consider okay so one is um days user available and other thing we need to consider is let me draw like this uh the time okay uh the start and end time okay so these two things we need to consider while booking the particular uh meeting so that if user is not a aable in specific days we will not allow other user to book appointment or book a meeting or schedule a meeting okay so over here we have the option called availability if I click on this one right now you don't see any route and it's showing the 404 error so let's create a new route so inside the dashboard folder we want to create a new folder and we call it as availability inside that one I'm going to create page. jsx file okay and then add a default template and save it make sure to change this name I'll copy over here and here as well and then save it okay and now if I refresh the screen you will see the screen availability okay now we will keep this a little simple right uh we going to first uh let's add the h2 tag and and we'll say availability we'll add a class name font bold text L let's make it to Excel for this de I'm going to add a class name padding of 10 so this is how it looks after that I'm going to add a horizontal line so just add HR tag for this HR tag I'm going to give a padding y of maybe seven okay not padding my margin y to 7 let's add margin y to 7 okay after this one let's add two section one for the availability dates and other for the time so for that one I'm growing to create a new file under inside the underscore utls and we can call it as a dates list. jss here I will just add export default and inside this one and just AR I will just add dates uh like Sunday because uh you can directly add the array okay but here I'm adding as a object Sunday Monday Tu okay so this is how I added the remaining one now let's go back here and and we need to iterate this so we'll add one du inside this du I'm going to add h2 tag and we'll say availability days days then um here I will just add du again and we'll iterate the days list so we'll just say days list do map here I'm going to add item comma index the arrow function and then we'll just add a du like this okay and here let's give the key as a index next here we need to show the um the name of the particular day along with the checkbox so for the checkbox I'm going to use the shat component and you can search for the checkbox here you will find this checkbox is very easy to use first um make sure to add this particular component inside your uh project so just paste it here and then you have to copy this import statement in order to use it and then this is the particular component that we are going to use so over here I'm just add S2 tag I will add this checkbox and then I'm going to give the item do day okay and save it now if I go here inside our application this is how it looks but we want to show um throughout the particular screen so I'm going to give a grid so let's add a class name We'll add a grid and when the screen size is smaller we add we going to add grid columns two and the wind medium We'll add grid column let's add a four if I increase the size this is how it looks let's give some Gap so let's add gap of five perfect okay now for this one let's add a class name font bold and here I'm going to give margin y to 4 let's say three okay now next again we want to add availability time so let's copy same de sorry same S2 tag but in this case I'm going to add another D with the H to tag and here we'll just say time and we going to give a start time and end time right so we'll give a du with the S2 tag we'll say start time and the input field okay so input from this shaten component here I'm going to add a placeholder we don't need to add placeholder but the type here we going to change it to time okay so we can select actual time let me show you how so if you see this is how it look okay we got to have the input of type uh time next here I'm going to give class name margin top to I we say three and then uh one more let's let's add one more de here I'm going to wrap this de because we want in one line and then we'll add a class name make it flex and we do gap of 10 and here we got a end time now if I go here and you will see the ability time with the start time and end time okay only thing that I'm going to give some margin top to let's say 10 so something like this okay and the last we're going to add a simple save button so let's add a button and we'll just add a save see okay let's give margin top again here class name sorry my bad here we add a class name margin top tap okay now on the save of this one we have to uh save all of this information now in order to check whether the user is click on this checkbox or not in for that particular checkbox right we have one property called on check change okay and this will return the event e and then we'll just cons not event but this will actually return the value in the Boolean whether it's a true or false we'll put e and let me show you the result so as we use this uh function obviously the onchain method we have to make this as a use client we are going to use this particular page on the client side now if I go to the inspect panel and go to the console and if I click on Monday for example let's see they is showing true Wednesday true if I again click on this one make it false okay now here we going to Define one state to hold all of this value so we'll say uh constant we'll say uh days available Comm set days available is equal to use St okay something like this and then we going to Simply uh on the click of check box right we going to show our store the time so here I'm going to call constant on handle change and then this method we going to call on the click of on the instead of this console okay so here we say on check change or all handle check sorry now to this particular method we need to pass the actual checking value along with which item user click so in this case item do day okay something like this and then on the handle change we will get day comma the value the Boolean value which is this what we are passing as a e okay now over here we simply set the DAT available but it's little different way so first thing we'll add the previous value which is the days available comma we going to change depends on the day so for the day value we will select the value okay something like this and if you write want to write console let's say let's do that so let's say days available okay so obviously it will return a um the second value okay for example if I click Sunday right now if you see it's showing the previous value but if I click on Monday you will see the Sunday value okay because obviously state it will not uh update immediately okay and even though you click on any of this one you can check the value get modified only for that particular day okay that's what we wanted now two more State we want to Define one for the start time and other for the end time so start time comma set start time is equal to use state and another is for the end time comma set end time is equal to your St and then on the change of this input we're going to add that one so here we say say on change sorry on change here we'll say event and we'll say set start time e do Target dot value and here also I will copy this on change for this end time here we'll just set the end time sorry set end time something like this okay and save it now obviously once we have this information on the save we will we need to store that in our database so here I will add simply on change sorry sorry on click and we'll say we'll just add handle save so here I'm going to call that method constant handle save and inside that first let's print out whatever the value we have so we'll just add console log and here we'll say uh dates available along with that I will also print start time comma end time okay let's check it out so if I select the available time as a Monday Wednesday Thursday and Friday okay and the start time I will select 10 to let's say 7 okay and then click now if you see we got the available days along with we got start time and end time okay and that's what we are going to store inside our database but we are going to store inside the business only okay the in existing um document okay so obviously we cannot sa the document here in this case we need to update the document and for the update if you go here right you will see uh the uh inside under the ADD and manage data let's search for the update one so maybe if you go to this add data here you will see update document and it's very easy you have to take a reference of the document first and then you have to write update doc instead of s doc Okay so so uh let's go back to our application sorry in our project so let me bring this over here just to make a reference of this one and first thing we need to Define is our database constant DV is equal to get fire store and inside that we have to provide the app config and over here we'll Define the doc reference first is equal to Doc then then collection okay make sure to import this doc first and then inside the collection let's add a DB comma The Collection name which is the business and the document name which is the user's email ID right so we need to get user email ID so constant user is equal to use kind browser client so whatever the login user email we will get it here user. email and then once we have the document reference we'll just set await update doc so this is this is the example actually so update Doc and inside that we need to provide a document reference comma and then the field which you want to update so obviously we don't have that field but directly you can mention for example if I say uh days available days available days available and here for that one I'm going to provide the value as a days available okay and for the start time I'm going to provide a start time and end time I Prov the end time as we are using await let's make this as a a sync and over here we'll say then response and simply we'll toast the message that uh uh data updated or we can say changes updated and then save it okay now let's test this out so make sure we have add the updated dog okay that's good so if I go here and now if I select the Monday Wednesday Thursday Friday and start time at 10 so you can just type like this as well okay 00 a.m. and then we need to f 00 p.m okay and then click save okay so we got error that invalid collection reference collection name must add odd number of segment but business client has two okay so we did one mistake over here that okay so this collection name not need to be there okay because we are updating document so here I will remove and just we need a document with a business sorry collection name and in that the document ID let's save this one and let's taste this out now let me clean this one let's click save and boom it's saying changes updated now if I go back to application and you will see the days available is coming along with this information I don't know why uh okay so obviously we select only three that's the reason it added only three that's good right so that's how you can uh set the availability depends on your uh selection of days and time now once once we store the data right and whenever user come back on this page we have to make sure that the selection Remains the Same right then we need to bring that data again so let's go back to our application and let me bring this here and first thing we need to get to business information so here I will just add constant get business info and inside this one we need to get uh first cont doc reference is equal to Doc then DB comma the name of the collection and then the user the document ID Vis user. email okay and then here we'll just write constant doc snap is equal to await g doc okay and inside the get doc we need to write document ref and then Salo and obviously we are using event let make this as a sync and then here we'll simply add constant result is equal to do snap dot data okay now we have the user business data okay now once we have this data right we need to set that to this set available sorry days available okay so we'll just say set days available which is um result dot days available okay because that's how the field name is once we store uh inside our business uh document right now once we have this one obviously initially what we need to do uh we need to set some default value over here okay so for example for let's add Sunday and make it as a false okay so all of these thing we need to add one by one let me bring this over here then we need to add Monday as a false and so on okay and I added the remaining one okay now this value we need it in order to set the value okay for the default value for the checkbox now obviously this gate business info we need to call inside the use effect okay and once the user is available then only we going to call this particular method now over here if I scroll down to this check box there is a one property called check okay and if you provide true or false depend on that one it will set the value so here we just need to add the condition we'll just say week not week uh days available sorry days available has the item. day okay if this is available then we're going to show there is available otherwise we going to show it as a false okay now if I save this one and Let me refresh the screen once so if you see it's pop up immediately cool right same thing we're going to do for start time and end time so over here we'll set the set start time and which is from the result. start time and for the set end time will be the result dot set sorry end time only end time okay and save it now obviously once we store this value we have to add the default value over here in time and default Val for the start time and save it say now your whatever the you save previously it will be there now if I select this uh four values the time I will keep as it is if I save this one is get save even though if I refresh the screen you will see the selection will be there okay perfect let's talk about our today's video sponsor kryptus which is the cryptocurrency payment Gateway with a low commission they charge only4 to 2% commission now let's see how you can start accepting crypto payment with the cryptus you can integrate the payment Gateway by API documentation that you can find on your personal account phba hdk with all necessary Tools in one kit or by using a plugin for e-commerce website made with the ucommerce Shopify pra shop and others one of the cryptos feature is a white label all you need to do to configure all necessary data and use all the crypto Payment Processing feature with your branding with the crypto processing you can create your own crypto exchange or crypto Gateway try crypto processing work with crypto transaction the way you want link the link to the Crypt will be description below register and try it yourself now let's talk about when the user share the meeting right uh from this meeting event link so let me go here from here right we need to create a unique meeting event link okay and the format of that link once you click on the share button is a domain the the uh default domain then the name of the business when us are created with your first time right that business name and the meeting event ID because meeting event ID is unique uh in our case right each U meeting uh uh here is has a unique ID so this particular uh domain URL will be we are going to generate because we want to show this kind of page where any user who want to schedule meeting with the business he can open this particular page select the date select the time go to the next page where user can fill their information like um user name uh email all of that thing right and then once user um click on the SCH meeting we going to send an email right but in order to get once you just send this business name and meeting event ID inside this URL we need to get this business name and from the business name we need to get a data from our database right because this business uh detail uh contents the user email user all the uh user information right or business information and same thing we going to do with this meeting event ID because meeting event ID contains all the meeting information okay like the URL or the duration and all of these things so we have to make sure from these two things we will get the data and then uh we'll display it on the UI okay so let's go back to our application and first thing you need to create a nested Dynamic route okay if you see this business name is can be changeable and again the meting I meeting event ID can be anything right and it means it's a nested Dynamic route okay and that's very interesting interesting part when you are going to learn the routing so let me close all of this tab first and then let's go to the routes in this case we are not going to add our route inside the dashboard okay it's a complete separate route so here um let's add a new file and for the dynamic route as you know we will start with the the folder name with the square bracket and here we'll give the business okay so obviously the business or you can give business name whatever the right now I'll keep Simple the business right inside that again we need to create a dynamic route with the folder name start with the square and here in this case I will say meeting event ID okay and that's all and in that we have to add base. jsx add the default template and here I will say um shared meeting event okay because this particular page we going to share with the user let's save this one and now if I go to the application right here if you for example if you type uh my business name for example Tu guruji slash N1 2 3 4 5 which is the business event ID if I enter it now you'll see the shared meeting event that is actual uh page which we just created and that is called a next route right so this is very beautiful or important concept we also learn in our course now in this particular share meeting event right we need to create a two different uh screen okay one is this one where user can select the date time and obviously all the information we want to show here obviously this kind of U we already have okay this component we already have but along with that we going to create a new component which contain user information who are scheduling this particular meeting which contain usern name then user email okay Etc and I don't know we can add later on but this information and once us click create we going to send an email so first thing obviously this two screen right it means two component we going to create so inside the business folder we going to create a component folder and inside the component folder I'm going to create a new component called meeting uh we can say meeting time date selection. jsx add the default template let's save this one and inside the page. jsx I'm going to add this component called meeting time date time selection okay and save it now interesting part here right as I say we need to get a two information from the business uh the business information and the meeting event information right so let's get that one first so from the let's add over here right I Define a constant database first because we want to get dat from the database and then we'll write a method H constant here we'll say get meeting business and event details okay and inside this one first thing we'll get the business information so for that one we need to write a query que weite query make sure to import all of this um function then query then I added the collection okay inside that collection we have to provide database oops then name of the collection which is the business right and here we need to pass we Clause because we need to get the information depends on the business name right so here we'll say business name okay let me show you because I don't want you to confuse so if you see business okay and from the business we are going we are going to use we col because in the business name if you see this is how we Clause right so let me go back and then obviously is equal to sign and then we need a information so in this case if I type Tui okay but obviously we we don't have the business information yet because we don't did not create any URL okay so we need to create URL but that's fine okay because we we are already in this particular path right but still let's create a URL when you copy it right so uh inside the dashboard where we have this meeting type and the inside the page doj x file okay we have meeting event list where on the copy right so here we are copying right and right now we are just copying in on clipboard with the location URL obviously we are not going to do that but rather what we can we can call a new method we we create a new method and we can call it as a on copy click Handler and I will create a method over here and then I will put all of these two statement inside this method okay now let's create constant meeting event URL is equal to obviously we need to pass a base URL which is our domain so I will add that in our environment. loal file so nextore public underscore basore URL right so the base URL in this case is this local 3,000 oops so just copy this one and I will paste it here let's save this one and then obviously we can access it using process. EnV dot let's copy this paste it here plus the business uh name right so uh let me check whether do we have the business name over here so here we don't have the business information so let's get that one so constant here we'll say bus business info it's quite simple okay so constant then we'll say uh document reference is equal to Doc because we are getting single document and inside that we need to pass Database The Collection name obviously it's a business comma and the users name which is the ID right so here we'll simply pass uh user do email okay and then you say constant document snap is equal to AIT get docs and inside that we need to pass document reference okay obviously we are using await so we will make this as a sync and let's console this first so we just say business info okay and this business info we going to call it inside the use effect so user is available then only we can call this method okay and right now we are just consoling so let's Okay so not this one so here we need to call dognap do data okay let's save this one let's go back to our application so I think this is just a g do no get doc only not not docs because we are paging the single document let me go back to dashboard where we have the meeting event let me go to inspect panel go to the console okay we have one error but this is different error and if you see oh no this is document [Music] data oh that's correct I think uh yeah if you see meeting event list we have out the 43 number and here we have the data okay so that's good so if you see now we have the business name in that one okay so just we're going to save this information in business info comma set business info is equal to your state okay and let's go down and here instead of console log we will set business info okay now obviously once you click on this one right we already have the business information so after this base URL we need to pass business uh name which is uh let's add first slash plus business info do business name okay then the the ID of the event right so here for on click Handler right we need to pass the event event in the sense that particular event uh for each of the meeting right and then this event we will accept it here and from this event we have the event ID so SL plus event. ID okay and now we'll copy this meeting event URL and not the location URL and then save it now if I go here if I click copy go to the new screen paste it and boom if you see we have the business name and then we have the ID right if I click enter right now obviously we did not have all of these things ready but now our meeting URL at least is ready now if I go back to our uh let's go here inside the page. jsx file and inside this get meeting business and event details right here we need to get the details so make sure to import this app I think we did not import this app then as I say we need to get the business name right but from here the question is let me comment this how to get the meeting let me meeting time date selection sorry the meeting ID and the business right it's quite simple here you have to accept as a params okay and inside that param we will get the these two information so let me show you so inside the use effect we will console the params okay we pass Mt array let me go back to application obviously we are using use effect obviously we have to make this page as a used client if I go here go to the inspect panel where we are Printing and if you see we have the object called business which is this one and the meeting event ID which is this one okay and the field name which is business and business event ID is nothing but the folder name which we gave okay now obviously once we have this information here we'll get from the params dot business okay and here we'll call params whenever the parameter is a aable then only execute G meeting business event ID this need to be and okay now once you have the query okay you have to write constant doc snap is equal to await and get docs because in this case we use the vi Clause obviously it will f a multiple data but obviously we have only one but still this is the only method we can do that so make a sync and here I will just do KN doc snap dot for each doc right and we'll that console that document so here we'll say Doc do data and simply we'll just console let's go here let me refresh the screen I don't know okay I think we I don't know whether we call or not so this is the one business business name okay let's see the business name because I am yeah it's start with the small letter business B is smaller Let's test this out so we got error but that's fine there a key error okay but if you see oh not this one but over here if you see because we are testing on this particular page we got the business name and the business detail information obviously we're going to store in one state we call it as a business info comma set business info is equal to use state and instead of console log set business info same thing in order to get the event event is very straightforward so constant document reference is equal to Doc then database comma The Collection name which is the meeting event and then we need to pass the ID so ID we getting from parents dot see this sorry uh the parent Dot and the meeting event ID meeting event ID okay perfect and then let's get the document so constant result I will say is equal to uh document oh sorry not document request await get doc because we are ping single document and then doc reference okay and obviously here we'll get the result so let's console it so result. data okay so okay so something we miss out let me check so here we did me spelling mistake this need to be a meeting with a small M oh sorry as small M and let's save this one let me clean all of this things refresh once and if you see now we have the event information let's save this event information so we'll say event info event info here we need to set the event info set event info okay and here instead of console log we set event info and save it okay obviously we'll Define the loader as well so loading comma set loading is equal to use state make it false initially and over here we put the set loading as a true and here we put the set loading as a false and save this one now for this meeting time date selection we going to pass the uh event info as a event info okay and save it now inside the meeting time date selection component we'll accept it as a event info and save it now the question is here we need to add the UI right so we are not using existing component but rather we will copy the existing component because we need to make some changes in that one right so if I go to this create meeting inside the component where we have this preview meeting right I will copy all of these things including the date and all of these things so let's copy as it is okay from the bottom to finish and paste it here and another thing let's add the UT as well so let's copy all of these inputs and paste it here okay now only change we need to make because we use this event info everywhere right sorry uh event info when we accept it here and here instead of that one we use the form value so replace that one so here I will replace with this one event info here as well event info okay where whereever you see the form value replace it with the event info so this is fine let me check form value so over here as well okay I think that's good and if I save this one let's see whether we have any error and boom if you see we don't have any error and for this particular um ID we have the 45 minute name obviously we will replace with this business name later on but this ID this URL is comes up automatically the date is disabled and everything okay now add the business name as well over here so along with the event info we'll pass the business business info as well so let's go to this our because we already have the business info right so let's go here and pass the business info as well okay and here let's accept and from the business information we going to show the business name so business info do business name let's save this one and boom we got it right then we have this information all of these things perfect now let's add some styling so for this particular de right we going to add some margin so the first thing we'll add a margin X2 to end when the screen SI smaller when the screen size is medium we'll add margin X to 26 and when the screen size is larger we'll add margin X to 56 okay let's save this one and boom this is how it looks right you can add margin y as well so margin y to 10 okay now obviously if I go to the inspect panel and if I change the side see how beautifully it's change immediately okay now now obviously user can select the date user can select the time slot and all right now once user select the date we need to check whether the date or this particular day is available or user is working on that day or not and that information we already store inside our business information inside the days available see okay and that's how we can check if that that date is not available we will disable all of these particular dates so user cannot select that date now here couple of things we are going to implement okay so first thing when user click on any of this uh particular date we have to make sure that these dates will be enabled and disabled depends on the users uh availability if user is not available on Sunday we have to disable this uh all the time slots okay so let's go back to our application and over here so we need to implement on date selection okay so right now on select date we are just setting the date right so instead of that one we are going to add new method we'll say handle date change here we'll pass the date which is D and I'm going to create a new method over here so constant handle date change so obviously first say date we add a date as it is okay and then over here we're going to check in if condition if business info dot days okay let me check what is the field name so days available okay so days available let me bring this dates available Dot and the date we need to pass okay so in this case we need to format the date so that we can only get specific day okay so for that one uh when you install the shat C right U the shat also install uh one Library called Date FNS so date FNS okay so which help us to uh format the DAT in any specific format okay if I go to the documentation and if you search for the format section over here right here you will give uh the shortcut to get the particular date so in this case for example if you want the day only okay let me so like this right we want Monday Tuesday Sunday right so if you type e you'll get the date and let me show you how we can get it so here we say constant day and from this date we need to get right so format you have to write format you have to pass date which date you want to format and the format on which you want uh that particular string we need to pass so in this case if you see this is how you want right and then we have to just pass e e e in this case and then you'll get the actual day okay and here we need to pass a it need to be day pass a day okay and from this one it will return true or false so days available and day and I think that's all okay so here I'm pass like this okay over here as well and if returns are true then we'll set one state over here so constant here we'll say enable dates okay comma set enable sorry not date but we want to enable times time slot we will just say Okay time slot is equal to use State initially we'll make it as a false and then here simply we'll set enable time slot to be true okay otherwise if it's a false or undefined we set enable time slot as a false okay as simple as that and then save it now obviously here we have this time slot right so over here uh for this button we are showing the time right here we simply or not here uh disable the button so disabled if uh enable time slot is not there means it's a false okay so let's go here and this is our link right let me refresh this link once so right now see it's disabled because on Sunday disabl if I click Monday see it's enabl and let me show you so right now only Friday Monday Thursday Wednesday it's enabled okay even on Tuesday is disabled so if I select the Tuesday see it's disable but for all other day it's enable Okay so Sage disable so that's how you can add whether depends on the user availability you can add this particular logic okay now when user select any of this date right we need to update this particular section okay we need to show the selection of the date selection of the type on this particular part right so what we can do because here this part will be constant but this part is going to change so better we can move this time date selection inside a different component okay so this particular part will move in different um what it say different uh component so I will cut from here and we'll create a new new component is called time date selection. jsx then add the default template and I will just simply paste it here okay obviously we need to add a couple of things let's import the calendar first then let's import this button as well then we need to add this all the method first let's add a date we'll pass all of this information then handle date change okay and let me show you how simple we will do uh or update these things right obviously we add added the date already okay we need a time slot that is important and the next is we need to add on button select okay so here we'll say on we need to add on button select okay so here we'll say on click okay and we'll just set set selected time because we want to select the time as well right and we'll pass the time so this information also we need to pass back and this one as well enable time slot I think that's pretty much okay uh perfect let's save this one and let's go back and let's import this time date selection component okay just we make it little simpler so first thing we need a date we pass date as it is then we need to say enable time slot we'll pass enable time slot so this is how simple it is give the name same name which you G okay and you don't need a uh update a lot of things set select set selected time okay so we don't have said selected time but we will add it and the last is time slot so time slot as well and we'll add this state selected time because we want that one right constant set selected time Comm my bad here we need just need to say selected Ty is equal to use State okay guys if you confuse in between right you can always refer my source code now once we have selected time and everything there let's save this one because we move the component and make sure everything is working see okay now as I say once us select the date we need to show the date over here so let's do that so this is how our h2 tag is there right so uh maybe after this H2 I will add the calendar we need calendar right so let's add a calendar over here calendar icon uh let's add a calendar icon but this calendar let's add calendar check and here uh we'll just say date okay but this date is in the different format so we need to change the format okay so simply here I'm going to add uh let's wrap this in a format so format then inside date and the type right if you go inside this right and if you see uh we need in this format right PPP so Capital PPP so we'll just add here so we add this PPP okay and let's save this one obviously uh we remove this meeting text let's go back let's refresh the screen and boom see okay if I select 26 see 26 if I select 30 it's showing 30 okay now same thing we're going to do for the data as well so copy this one and here we will say uh time we will add a time uh I don't know what should we put here time range timer we add timer simply okay and uh here we will say selected time go here and right now if you see it's empty right so better what we can do if the selected time is there then only show that particular um h2 tag okay now if I select 28 for example let's select 11 a.m. boom see okay and all of this information is updated depends on our selection now obviously we need to go to the next page and next page we need to hide this one and we need to show a different form which where user can add the user information right so at the bottom over here I'm going to add one button we'll say next okay and for this one let's add a class name margin top to 10 okay and we want add the right hand side right so let's wrap let me wrap this in a de along with that we'll add a float right but I don't think so it will work we need to yeah it works but like this we do wow so I just WRA inside the D give the margin bottom and put the button inside that one right and then this next button will show like this okay also we have to make sure the date and time is selected okay so here we're going to add a condition um so it will be disabled if the selected time and date or or date is not there so not selected time and not date let's check it out wow so okay let me refresh it this once so right now it disabl you cannot select the time obviously even though you select date see if I select the time and date then only this button get enabled okay and on the click of this one right we need to set one state which will go to the next page so here we'll say step comma set step is equal to use State and the step is one okay initial value so what it will do it will set the step value the step + one okay and button name will change if the step is equal equal to one the button will be the next other button will be the or or button will be the schedule schedule now okay or just we can have schedule as a text so I will remove this text okay this need to be a question mark and this need to be a column now save this one boom okay now if I select the date some time if I click next right if you see the button get changed to schedule okay but at the same time we need to uh remove that component obviously we need to replace that component so here I'm going to add a step is equal to one if the step is one then only show this component otherwise show a different component right so here we need to add a component here we'll say um user form info. jsx okay and add the default template save this one and let's add that component over here user info form info okay now if the step is two then it will go to this particular form let's save this one go back and if you see this form is showing obviously oh sorry if I comes here click on some time date like say next and boom if you see it opens the user form info uh component okay obviously we going to show a back button here as well um but for now I hope you understand how we update all of this thing how we add the validation depends on the selection of date and the time and obviously we updated this information as well next what we are going to do we are going to implement this user information form where user can add their name the email and once us click on schedule we going to send an email with the all the meeting details to both uh user as well as the business owner who created this particular meeting so here I added the back button as well simply you can add uh once the step number is equal to two then you have to show the back button and for that back button you can set on click event with the set step as a one okay so once you click on step one and on the click of this back button it will show this date and time selection again okay so let's select some time uh let's select some date go to the next and you will see this user info form so let's go to this user uh form info component and let's add h2 tag and let's say enter details over here I'm going to give a class name and we'll say font bold text Excel and this is how it looks okay let's give some padding so let's add a class name you padding of four after that uh let me add a padding X to maybe eight after that we going to add the uh name of the user for uh the input for that one then uh input for the email and the note so simply We'll add one VI inside that I will add a S2 tag and here we'll say say name star and here we will say input okay let's save this one so this is how it looks so make it Flex Flex column and let's try to do gap of three perfect then I will copy this du another one for the email and one for the share a notes okay and these are the three uh inputs we added and over here I'm going to add one H2 text okay and it will just say by proceeding you confirm that you read and agree to gur G po terms and condition policy or we can say terms and condition terms and condition okay and save it obviously for this one I'm going to give class name text extra small EXs and then text of gray color 400 see like this okay now for this name email and share notes we need to add on change event so here we simply add on change it will uh imate the event e so just write event say and we'll say set usern name as event. Target do value same thing I'm going to copy for the remaining input one for this one and one for this one and here we'll set set user email and set user no okay everything will be same now obviously we need to pass this back to the parent component so here we need to send it so set usern name set user email and set user note and save it now if I go to this meeting time date selection where we use this component right here we need to accept this value and then we need to save in one state right so let's define that state first so I will just copy the existing one and here we say usern name set username user email set user email and then set user note set user note now we just Define the state right obviously we need to set that value once we get from this user info component so first username and we set as a set username second set user email as set user email because we kept the name same so it's quite easy to understand and easy to uh write it as well right H user no perfect and this is the component we saved okay so obviously this will save it in our state as well now this schedule button we going to disable until and unless we have uh let me go here we have this name and email okay so obviously uh I created a new schedule button okay and this button will be enabled when the step is equal to two Okay and here we'll say disabled if there is no user email or or there is a no user name and save it now if I go back if you see this button is disabled if i t type something some type some email and then it will work perfect right now on obviously you can add a node if you want okay for node is not a uh required I'll remove this star and if you want you can add the data and just once users click on schedule we need to store all the user information along with the you uh all this information the um meeting information as well right so let's do that as well so before that uh if I go here right and here we're going to write one method we'll say constant handle schedule uh schedule event and this handle schedule event we're going to call on this schedule button on click event onclick let's add handle click event like this okay and let's go here so here first thing I'm going to do is to check if user added the email or not if user email is there then I'm going to put this reject to check whether user uh entered a valid email okay and here I will just reject and here we'll say user email and here uh we can conso log this one but this is how you can write right and here just say if we can add the condition if okay or we don't need is this if actually and if the test is equal to equal to false okay then we return nothing and then obviously the next code will not get execute okay otherwise we going to store all of this data correct so first thing uh let's add the Firebase config I think we already have the okay we don't have have the fireplace DB so let's define the instance get fir Store app okay and then let's bring down and here on the handle schedule event we want to store that data in our new collection so it's quite easy you have to write await set doc okay and inside doc we need to Define DB then we need to define the collection name okay so in this case we can give the collection name like uh schedule meetings okay and then the ID so here we can create a new ID so constant we'll say uh doc ID is equal to new date sorry the date not now we can do the uh date do now okay so it will return return the time stamp uh in a number format so here uh this need to be a talk actually so Doc and inside that we need to Define this and then here we'll add document ID okay then we need to set the uh document I think uh let me check the AL so this is the API right and after doc okay that's I think we are good so now as we are using await let's make this as a sync and here we need to define the all the values right so first thing we'll Define uh the business name name so business name which is the business uh info. business name then we need to define the business email so business email which is the business info dot uh let me check what this this business and the email only Emil okay then next thing we need to save the uh the selected time selected date and all okay so selected time so here we'll say business info dot selected time next thing is a date selected date we can store selected date as date only let me go here in our application so we the duration we need to save so let's set the duration duration will be the event info. duration then what else we need so we have the date as we selected date we already did and the main thing is the URL okay so location URL and here we'll say event info. location URL and the event ID event ID will be the event do ID ID sorry info. ID and this own ID of this schedule meeting which is the uh doc ID and more important thing the usern name so let's add usern name as a username user email as user email and user note as user note okay so initially I will keep the user note as something like this and I think that's all we need to store okay and we'll say then and here we'll say response and we'll just toast the message that uh meeting schedule successfully okay and then we can redirect back to the home screen as well it's not big deal but or we can say or save some message that you schedule some something like that right we will do that later on and one more thing here right um when we return data here we can show the T message that email is or we can say uh enter valid email address and then save it so let's taste this all all of these things together so right now let's go to the some date select some date so right now if you see if I select the date but this date is not showing that okay this is one this is the selected one right so let's fix that one as well so let's go to the time time date selection and here you are selecting the date right so obviously you need to update the dynamic class wrap this in curly braces and here you need to add the conditional class okay so simply we have to write if time is matches with the selected time so I don't know whether we write the select time or not okay I don't think so but here we can pass that one selected time okay so here now you can use that one this matches then we'll set the background primary and text white okay and obviously we are we need to send selected time so inside this meeting time go to the component where we have this time selection here we'll sa the selected time as a selected time let's save this one and boom if I click on N 11 see okay perfect now click on the next here we'll add the email some name to G some email add invalid email invalid let's click enter and it's saying enter valid email address right so let's add some valid email address perfect not sample notes let's click schedule so right now if you see we got one error that is saying the set doc Doc is not defined right so because we added the doc later on right so let's add this Doc and save it now let's click schedule W one more error for the index of is not a function so let me go back and check what is the issue so here you have to make sure that you'll convert this doc ID uh into a string format okay because doc ID need to be in the string format Let me refresh one select the date oops this is the different error next not click schedule and boom it see it's saying meeting scheduled successfully now let's see in our database so let me refresh this database and you'll see the new collection name schedule event meeting and inside the schedule meeting you will see the new meeting ID this ID will match with the document ID and here you will see all the details which we St successfully right that's cool so this is how you can schedule the meeting okay with this all the information now another interesting thing about this one is uh once um you schedule the meeting right you can show some popup message or you can show something that okay your meeting scheduled successful uh or you can obviously we are going to send an email as well okay so uh this is Task or this is the uh what do you say exercise for you to uh show some page that it will show that your meeting schedule successfully thank you and then you can show some button that it will redirect to uh our home screen of our application okay so try this on your own obviously we are going to implement the email functionality as well where once use a schedule this particular meeting it will send it to the uh respective user as well okay so yeah that's all for this particular chapter now as you know that we already uh scheduled the event right and that logic is already implemented Where We Are saving all of this data right but what if user want to check whether the given uh slot is already book or not right and obviously we need to hide that particular time slot if user is already booked that particular slot now let's go to the 26 okay so 26 is uh disabled let's go to 27 and book some slot let's book 9:30 go to the next here I will I'm going to add some name some email and Sample note and let's get schedule and if you see meeting scheduled successful here as well you will see that particular new data is getting added okay now let me go back and over here we need to make sure next time if I refresh it right this particular slot on 27th is supposed to be uh book right that particular logic we need to write so for that one first thing we need to do is to bring this all of this data which for the given event ID as well as for given time okay and depends on that one we will check whether user already uh book slot or not so let's go here first okay and let me close all of this tab and first thing we need to go to this page.js file where we are fing this meeting business and event details right um obviously we need to add that logic over here okay in time date selection so let me if I go to this meeting details and here we add the time date selection right so it's better to uh face that data inside this component so here I'm going to create a new method called constant and here we'll uh write method name like uh get event booking okay we say get previous event booking and here we need to uh F the data data from the Firebase okay so let's write query first so constant query q is equal to query make sure to import this one then the collection okay then DB reference so we already have the DB uh let's check yeah we already have DB defined then inside that you need to provide the collection name so in this case the collection name is schedule meetings and once you done that we have to write a where Clause okay in that we Clause we need to provide on which we have to write so selected date that need to be matches so is equal to equal to the date which um we are going to pass to this get prevent booking right so whenever the date get change right where we have the uh handle date change right that time we are going going to call this get prevent booking so here we'll accept the date just to make sure the date okay so here I will write like this and I will just pass it here okay also we need to pass one more variable which is the event ID okay so meeting event ID that need to be passed and on where right we need to add the event ID so so we'll say event ID is equal to and event info do ID okay so from the event info. ID we'll get uh the event ID and then we check the we condition on these both the fields after this one you need to write constant query snap shot is equal to await and let's make this method as a sync and then we'll just write get docs okay because we are we might get a multiple documents right and here we will pass the simple query and then we iterate this query snapshot so for each we say Doc and we just console. log the doc do data like this okay oops and then save it now this particular method we need to call inside this uh handle date change okay whenever the time slot is available so here set enable time slot and here I'm going to call and here I'm going to pass this particular date now let just I will add some documentation here here we say uh use to fit previous booking for given for given event okay obviously we are not F all the booking right only booking which US just selected for the particular date now if I go back to our application go to the inspect panel and the console let me clean everything let's refresh it so we have one error it's child key that's fine let's select the 27 okay so right now if you see nothing we we did not get anything okay so let me check what's the issue so over here by mistakely we keep inside this else we are supposed to keep this inside the if condition okay only for those days is available then only we will face it right so let me clean all of this now let's go to 27 if you see nothing get executed but on if I select the 2 27 you will see we got the one information which is the same event ID and for the given date so date is you'll see the date over here okay obviously it says time stand showing but that's fine okay perfect now uh we will store this um information okay in one state so here I'm going to just write constant we'll say previous business um booking want set previous business booking not business we say previous booking only just to keep Simple looking is equal to use State and initially is empty and we'll copy this one and here we'll set that value okay so we have to set previous previous comma doc. data okay so it will if there are multiple then it will add a push to this particular State now this previous booking we need to set to the uh send to this date time selection here I'm going to add previous booking to previous booking and I'll copy this one and inside the date time selection make sure to accept it here as a props so I will add it here and save it now here we we going to create a new method uh here we'll say h check time slot and this method will check whether this particular time is available or not right so here simply we will return okay and we'll check previous booking with the filter option so it has a item and then item Dot and if I go to this so selected time right so it's called selected time selected time is matches with the time which we are going to pass to this method okay and obviously we'll check if at least do length method if length is greater than zero so it will return return true or false right and then only uh we will return true or false so this check time slot method we going to call on this disable method function so here I'm going to call R and then call this check time slot and obviously we are going to pass time so save this one let's go back to our application so over here okay let's select the 27 and boom if you see the time slot 9:30 is disabled because it's already booked right and if you see in our database that 9:30 is already booked okay let's try to book 11:00 because that is available click next add some details here I will say uh and share so click schedule the booking is schedule successful now if I go back and refresh the screen okay and select the 27 and boom the 9:30 and N slot is already booked now so cool right so this is how you can add the validation uh for the time slot now once we schedule the appointment right we need to send an confirmation email to the user so obviously our system will check if the given meeting is scheduled or not and once it's scheduled uh then we are going to use um email sender service okay in order to send an email to the user who scheduled the event obviously we can also send an email to the uh owner of the meeting event okay so this is how we are going to send so first it will check if it schedule and then it will trigger an event uh for the email sender service and then it will send to the user now for that one we are going to use a react email so react email is a very popular library in order to write an email when I say write so it will actually uh help us to generate or create an template okay so whatever the email you are going to send in specific format right that's where the react email is uh helpful right but not only that it also helpful uh in order to connect with the email service so that you can send an email right so here uh uh once you go to this react email react. email go to the documentation and here are some of the steps to follow in order to install the react email so we'll go go one by one okay so first thing uh let's go to the manual setup and here if you scroll down as we already have the app and everything installed you have to install this dependency okay so copy this command go to your project and inside the terminal just paste it here let me close all of these tabs next thing you need to add a script in order to run email da so this will help us to uh open a new uh Port which will you can see how your email will look like okay once you send an email to the user so this is the command in order to run it right so what we can do let's go to this packet. Json and inside the packet. Json file as we already have the da file so here I'm going to create a new uh command to run this email de okay so I will write email and email D and save it next thing you need to create a folder called emails and inside that folder you have to add index. TSX file right so go to the emails sorry go to your root directory here I'm going to create a new folder call emails inside that I'm going to create a new folder called index. jsx now here I will just simply add this HTML code or just copy everything as it is and then paste it here okay and then save it now this is if you see this is some special tag and it is only used uh um using this react email/ component and if you see the import statement here as well okay now once you done with this if you see the next step is to run the development server so instead of npm run de as we are using the new uh commands which is npm run email so just type npm run email click enter here you will see it using the post local 3,000 open that Port now it will take a few seconds to build the server and boom if you see this is the new server for the react email and here you will see the file called index the whatever the file we create inside the email folder you will see over here if I click on this particular file and you will see this button called click me okay and that's the only thing right now you will see here okay if I type subscribe and if you not subscribe then subscribe to my channel so I change the button name if I go here and boom you'll see the button name here okay now here you can design uh the UI for your email template but if you want a predefined UI then you can go to this uh react email and go to the example here you will see the example right obviously we are going to use notification kind of thing so I will prefer to use this kind of template where I can uh add the time the location and everything right but you can explore more see here you you just need to do one thing here go any of the uh example and you will see this code right click on this icon and you will see the code over here okay this is the react code for HTML we have and plain text obviously you need to use HTML so copy this particular lineup code okay now I am using this same uh code from this example but just I little bit modified so I will paste it here okay like this and let me go here so something we have one error so there's a small error but I just fix it okay so and if you see okay this is the method name right now and here you can change to email and then let's make sure to export that as a email you can give whatever the uh component name you which you want and here I am accepting some of the field like user first name the duration the meeting time date meeting URL and the business name okay you can add more parameter depends on your requirement and over here you can just use it like a simple react uh component right so I'm showing meeting URL date the time and some component or this text I change depends on my requirements okay now save this one and the and if I go here right if I go to our uh template and if you see this is how it looks okay so once user we sent to the user it will look like this obviously whatever the value we pass over here it will reflect on the screen right now we we are not passing anything so it's not showing on the screen but we once we pass it it will displayed on the screen okay so this is simple email template obviously you if you want to access the same email template you can access my source code now next thing is how to send an email right so if I scroll down on the left hand side okay and these are in the inside the integration section you will find a bunch of different services in my uh some of the previous videos uh I use recent okay but in this particular example I'm going to use this plunk okay and plug is a service if I go to this uh use plug.com okay let me go here okay use plunk so this is a uh very easy to uh integrate email service okay and if I go to the pricing it has a 3,000 emails per month for free okay so that's a good and it means it's a free to use okay if you are a developer then this is the best way that you can use it now in order to integrate it right with the help of react email is quite easy so if I go to this plunks documentation uh inside the react email you will see the first thing you need to do to install this plunk hdk so copy this one go to your project inside the new terminal so let's add a new terminal paste it here and then it will install the plunk note okay then in order to send an email okay so obviously we have the email template so we are not going to follow the Second Step but on the third here you need to uh add a couple of things right so first thing make sure to add or create an account on a plunk okay so this is how it will look then next thing you need to do is go to the API section so let me find it out so let me go to the documentation so inside the project setting inside the API key you will find this API key right so here in this case we are going to use this secret API key okay this is very important uh don't use the public API key you have to use Secret API key so that API key I'm going to keep it inside the EnV file so here I will say nextore public plunk API key is equal to and that particular key I paste it here and save it okay so this key obviously you will get it once you log to the plunk and create a new account on that one next thing let me go to the documentation this particular line of code you need to use the first you have to ini ize the plun so go here and we are going to use inside the time date selection because that's where we have the schedule button right if I'm not wrong oh not here in meeting time date selection so here we have this uh handle schedule event right so first thing I will initialize this plunk make sure to import the plunk and save it obviously environment variable this is the front name so I will copy this one one and replace it here and save it now I'm going to create a new method constant and we'll say send email like this and then I'm going to paste this lineup code as it is okay now obviously we will update it so first thing import the render okay I think uh we did not install renderer or what so obviously we need to import this renderer so let's copy this one and then paste it here if I scroll down so right now if you see the email template okay that email template obviously we are using from this index.js which we already created so obviously this is just a dummy so I will remove this one make sure to import this email template okay from if you see from that at theate emails that's where we have this uh email template right and then you'll see if I do the control space you'll see these are the parameter which email accept the first name is business name so business name you'll get it from the business info which we already have and from the business info I'm just making sure so inside the business right we have the business name right so that business name you need to pass and I will make it optional then next thing we need to pass date so here I will select the selected date I will pass then duration I will pass from the even info do duration then the meeting time right which is the selected time because as you know right we already have the all the information right meeting URL which is nothing but the event info dot location the location URL the next is user first name right so here we say just user name okay so these are the information we need it and save it so only add for the user first name right here I'm going to change this little bit so here I'm will accept it from the user email so here I will say user name or we say user only okay and that name I'm going to pass it here and the next is obviously to whom you want to send so in this case we going to send it to the user uh sorry user email right because we already have user email and here we'll say new meeting schedule details okay this is subject line and email t HTML it means this render okay so it will convert our email into a plain HTML so we don't need to uh worry about that one now next thing we need to do this send email we need to call whenever we schedule the event okay so here we are scheduling the event we are setting the value and here simply I'm going to call send email so here I'm going to pass the user here just a simple user okay and here I'm going to pass user name okay and I'm going to send one more for the business email but let's send only for the user first and that user I'm going to pass everything looks good to me let's save this one and here I'm going to write then operation as this is a promise just to check whether we are successfully sent an email or not and save it okay now if I go back to our application and select the 20 seven date let's book this appointment and one more thing I forgot actually once we sent an email right I'm going to route to the confirmation page so I created a confirmation page quite easy quite simple so inside the route only I added new folder called confirmation which will create a new route and inside that I added this log icon the 2 S2 tag and the button just saying thank you okay so in order to go to this particular route you have to write router obviously added the initialize the router first dot we'll say replace and then we'll say SL confirmation let's save this one go back to our application as we select all the details here we'll select add the name we say tub guruji the email counts at tub Guru g.com the share notes share notes not mandatory I will open the insect panel I don't know whether we will get error or not and let's click schedule so if you see we got the error that selected dat is not defined at line number 96 so at line number 96 that's here so selected date is not defined really selected date so it's just a date actually okay not the selected date so you just need to add date and save it so let's try it again let's click schedule okay so we have another error now the object is not VAR child and found object date Okay cool so over here okay you need to convert into a specific format so here what I'm going to do I will just format this date in a some string format oh so over here okay so we'll say format date and comma and we'll say ppv and save it and we just make it to string Let's test this out we'll say schedule and boom if you see it's redirect it to this meeting or confirmation page and if you see here it's saying that email is sent successful see okay obviously we going to take uh check it out and to this particular email now if I go to the email see we got the email called meeting schedule details and boom we got hibe guji because whatever user put his name then meeting with the tube gji because this is our business name here you will see the time on which the date the location that's cool right then duration and everything is there see and here is the join now button so cool right so this is how easily you can uh send an email to the user now obviously you can send an email to the business email as well okay so quite easy as I said and this is how you can show the successful page now if I try to go to the back button it will not go back because we use router. replace okay so thank you we'll redirect you to the home screen okay so this is how guys uh you can send an email to the user uh with the help of react email and the plunk guys plunk is completely free so you can easy to use and you can send to the any user email address okay no need to add your own domain okay so if you have any question any doubt let me know in the comment section and let me know if you face any issue so here is a quick uh fix that I'm going to make so inside the meeting time date selection right where we are scheduling the uh meeting and we are saving into our Firebase database here if you see we are uh saving selected date as a date and for this one right obviously this date is in the format of the uh time stamp and to avoid that right I'm going to add this two more uh field called formatted date and I'm formatting in specific format and then formatted time stamp which is in the form of seconds okay so this will help us to compare when we want to um get the scheduling meeting okay and this formatted date you use to display the on the screen so let's save this one and let's schedule uh so here I'm going to add let's let me go to the dashboard and from the dashboard we'll get the meeting event ID okay I need to log in so here I log in so I will copy this link and I will open in New terminal and if you see now you I click 27 okay because I deleted all of this data from the database so I will select at 2 p.m. click next I will add the email I will add the sorry name and email and click schedule now it's saying enter valid email okay so this n.com click schedule and boom now it will save on the database as well as uh waiting to send an email let me check on the espect panel console so we have one error okay let let us fix this one this is not the ER okay so it takes some time okay but it sent an email now if you see uh I also re the email actually but inside the database okay let me go here inside the schedule meetings and over here now you'll see this two new field get added okay so that's the only quick fix that I wanted to tell you now we are at the last uh section uh of the application development where we going to add uh uh option to see the scheduled meeting for the business owner okay so obviously on from the layout okay dashboard layout we have the option called schedule meeting and on the click of that one it will navigate to the new screen called schedule meeting where we going to display the list of schedule meeting okay so obviously in that one we want to show upcoming as well as the expired meeting as well so if I go to our application right here you will see the schedule meeting option so for that one let's go back to our application and here I'm going to going to create a new route under the dashboard okay so let's go to the dashboard here I'm going to create a new folder and we we can call it as a schedule meeting and click enter let's add page. jsx file add the default template and here I will just reame to scheduled meetings let's add meetings only meeting only okay and then just uh inside the side navigation so we have the Side Bar over here inside the menu let's see that we I did the schedule meeting now if I save everything right and if I go to the schedule meeting it will redirect to the schedule meeting page now let's go to the schedule meeting here I'm going to add h2 tag let's say schedule meetings I'm going to give uh for this parent VI first let's do padding of 10 this h2 tag I'm going class name font board text of 2 XEL then I'm going to add horizontal line here I'm going to add a class name margin y to five if I go back to our application Let me refresh this and if you see this is how it looks next uh I want to add a tab okay so if I go to the shat CN component okay there is one component called tabs and it's very easy to use see this kind of tab we are going to add so first copy this component and then uh you can have import statement let's import this one and then copy this uh tabs as well so D logic I will keep it here okay now this tab if you see see there are two types right now currently by default the account and password if I save this one and let's go back to our application over here you'll see the two tabes get added okay and depends on the selection this value get changed right but here if you see for this account and password this is just a text right but the value depends on the value it's showing the content See so the Valu is get connected to this TP content the default value and everything so here I'm going to change this name to first um will say upcoming here I will say expir okay and same thing I'm going to change the value upcoming expired by default I will keep upcoming so here the default value you have to set and for upcoming you have to show the content inside this type content and for expir we show in here okay now if you see it change to upcoming and expired if I refresh it so by default it's showing upcoming now in order to show the content I'm going to create a new component so here first I will create a folder and then inside that I'm going to create a component called uh meeting list or we say schedule meeting list scheduled meeting list okay jsx add the default template and then let's import this inside this particular tab content meting and here I will add schule limiting list save it and now if you see the just text is showing okay next inside this one obviously we need to show the data right so we need a data from our um database so first thing let constant DB get fire store we need to Define this one then I will find new method called get uh scheduled meeting and here we need to write query is equal to query inside the query we need to write collection from which collection you need to get so add the collection name so in this case the collection name is scheduled meetings then we need to add a we Clause because depends on the logic we need to get right only for that user uh we need to get the uh all the meetings right which belong to that particular user email and we already if you see in the database we already saving the business email right so I'll add constant we obviously we need a business user right login business user so here you can get it from the kind browser client and then simply we'll use where condition here we'll say business email I think B is smaller yeah B is smaller so see B then then is equal to equal to and the last we need to display uh the user. email that's all okay then we write constant query snapshot is equal to AIT get docs and inside that one we need to add the we have to pass query like this as we are using AIT make it this as a ASN and now we'll just iterate the query snapshot do for each data and inside that data we'll just console we'll say Doc instead of Doc and we'll say Doc do data like this okay now obviously this method we need to call inside the use effect so go to the use effect and whenever the user information is available then only we going to call this particular method right so let's add that condition user is available then only add that one here we'll say used to get business previous meetings if I go back to our application so here we are using await obviously we need to make this screen as a use client now if I refresh the screen go to the inspect panel As We Know app is not defined so make sure to import this app and then if I console if you see right now obviously uh I have only one meeting schedule okay perfect that is showing now obviously we need to store in one state so we'll Define constant meeting list comma set meeting list is equal to your state and that one we going to store here so set meeting list so here we first will get the previous as well previous comma the current one which is the doc. data now once we have the set of meeting list right I'm going to create another method and it will filter the meeting list whether it's a upcoming or expired so filter meeting list and here I'm going to accept the type whether it's upcoming or expired and if the type is equal to equal to upcoming so simply I'm going to add a condition and we'll return it uh the meeting list so we say meting list dot filter item Dot and in this case as I say right because uh in the last chapter we did Quick Fix we can update with the formatted typ St okay so here I will simply add formatted time stamp let me check that I'm adding current field name uh time stamp and then here is is greater than equal to and I will format the current time okay and uh comma T which is again time stamp okay so I'm just comparing the two time stamp the current time stamp and the time stamp from the schedule one like this okay and then this filter meeting list I'm going to call it inside the schedule meeting list so here I'm going to pass meeting list but only meeting list with the filter operation right means it will only get the upcoming filter upcoming U meetings okay and here I'm obviously passing the type as upcoming now if I save this one uh let's go back to our application make sure you don't have any error so if you see we have one error it's saying item is not defined so because we incorrectly Define this one item like this oh sorry like this and now let's see okay now good now here obviously we sent a meeting list which is filtered with the upcoming and inside the meeting list we need to accept it here as a as a meeting list perfect now here uh we going to use uh expand kind of component right if you go to the shatan component there is one component call I'm forgot but I think accordant yeah so if you see this is how it expand okay this is what I wanted so easy very easy to use first uh install this component then in order to use it right let's import this uh import statement and then you can use this accordian inside here and save it now if I go back to our application so this is how it looks okay but here now in according as we have the meeting list and it will be a might might be a multiple one right so obviously we need to iterate this meting list do map here we say meeting comma index and inside that I'm going to add this accordion component for this accordion I'm going going to add key as a index and here I'm want to show the time so here we say meeting dot uh formatted date make sure the field name is correct formatted date let's save this one make sure add optional field and also I will add meeting sorry if meeting list and add now if I go here you will see the Mar 27th I added right obviously we did not added any content yet now inside the content right uh the because to make it simplified right I'm going to use a existing component which is from the business component and here inside the meeting time date selection right where we have the pre kind of thing where we are showing the details like the date time and all right same thing I'm going to copy so the thing is I'm going to copy this de okay let's save this one and uh I I'm going to add it here simply okay obviously uh here we need to change with the meeting item so duration we have the I don't know whether we have the location type uh let me check inside our database so I don't think so we have the location type we have the location URL so I will remove this field for now then uh formatted dat date obviously we already have the formatted date so here I will just say do formatted date then selected time so meting do selected time the link so I will say location URL like this and the location URL as well over here that's perfect let's save this one make sure that you are not getting any error all right so obviously we are error because we need to import this all the icon so let's add Lucid uh clock from the Lucid icon calendar check the timer and most important I think done so upcoming is coming okay so it's saying okay this condition also we need to remove we don't want this condition anymore and let's see what else so link is not Define so we have to import the link this is this happened because we just use the existing component code and we did not import all of the import statement now if I expand boom if you see we have all the details right here uh I feel location URL right uh is correct I don't know why it's not coming so just verify so location URL right so he saying meeting do location URL that's pretty good save this one and refresh it once I don't know why it's not coming but yeah we'll find out why it's not coming here okay so the reason is not coming I found it because this is not icon link is we need to import from the next link okay and now if you see we got it obviously if I click on this one it will go to this particular URL but for now we are good okay and then we going to add button over here so it will say button say join now okay like this obviously we give some styling class name margin top to five and I'm going to wrap this in a link because we want to add H reference meeting. location URL and inside that I add but okay and if you see we have the button to join now as well so this is how you can uh show the upcoming now it's task for you to add the expired one okay so in order to add the expire one obviously we don't have any but the simple thing because we already have this component we are going to use use this existing component and then we're going to call it over here okay now now obviously we passing upcoming so for both the expired and upcoming so if you see we got a three multiple times because we need to make sure that when we save set the meeting list right which will be empty perfect now if I go to the expire right it's same thing is showing but here now instead of upcoming I will say expire right and over here I will add a else condition let's add else and I will copy this R statement only thing that I'm going to do here I'm going to say less than okay now if I go here and refresh it now if you see upcoming but expired obviously we don't have any expired but it will show the expired one over here okay so this is how guys uh you can add the schedule meeting screen it's simple you can add the table format as if you want and anything that depends on your requirements right so that's all uh for this schedule meeting chapter I hope you understand how to implement it and how to uh use it next thing obviously we going to deploy our application on a server so that uh anyone or any your friends or family can uh access your application now it's time to deploy deoy our application on a server so that your friends or family can access your application right so first thing and if you never deploy application so uh just follow me uh we'll go step by step so first thing we need to go to the github.com and if you don't have an account on a GitHub so please create a new account once you are on the dashboard you'll see to create a new repo okay you have option from here or you can go go on this plus click on this plus icon and click new new repository you can give the repository name here I'm going to give schedule meeting scheduler say meeting schuer uh I make it public you can make it private it's up to you then click repo and once you're done with this R right you will see uh some of the command line which you need to add so first thing you need to add the git initialize so which will initialize the git and it will make available a git into your application okay okay so inside the terminal let me clear this one and here just simply add G sorry uh enter git in it okay then you have to set this remote repository okay it means um it will connect your application to this particular repo right so you have to add git remote add origin and this particular origin right then you have to add git add space dot okay then git commit so you have to commit the message we say initial initial comment then if you see all the files is now committed and then you have to write get push so okay so obviously you are pushing the first time so you have to use this particular uh command to push it to the main uh Branch so right now it just pushing everything and done now if I go back and refresh this repository you will see that your code is now available on this particular repo okay and if you see just now we push it now next thing we need to do is to go on wor.com okay so if you never uh use the versal so it's very easy veral is use to deploy your nextjs application and most important is free Okay so let's create a new account on a worel and then you will launch on this particular dashboard here you have option to add new project so click on that one here you have option to connect to the git repo or maybe a bit bucket or a git lab so I already connected to uh git repo but you can add whatever you want okay then you will see the new repo which you added over here so right now if you see just 49 second ago I added this repo so it's showing over here and it also show that this is a nijs project now click import once you click import you will see the project name you can change the project name if you want here I will add the tube guruji as well meeting schedu tube guruji then you can add the root directory everything obviously we will keep as it is because it automatically detect that this project is a nees and depends on that one it will add all the build to and all all of these thing right so we'll keep the keep as it is main important thing in environment dot sorry envirment variables we need to add all the variables which we added inside our env. loal file so let's copy this as it is okay and then we'll paste it here and boom so you don't need to add one by one automatically it will add for you once you add it here you have to click deploy and then it will start your deployment process and if you see it's starting uh to build your application first then it will deploy your summary and lot of things okay so it will take some time maybe a couple of minutes so we I will pause the video and boom if you see our application is deploy and you'll see this preview page as well if I click on this one and it will open on this particular domain okay you can change the domain uh if you want from the setting and this is the launch page okay now if you click on login okay it will go to the uh local 3,000 right because inside the this uh environment variable right our uh site URL has this local 3,000 right um this is for the development purpose now we have the URL of the production URL so let's copy this one and then paste it over here okay uh for the log out R this one and then log it obviously we log into the dashboard so this one once you update here okay next public base URL make sure to update this one as well yeah and save it now one more important thing you need to do you have to go to kind.com okay so I don't know let let me sign in to a kind dashboard so it will ask me the username password and I log into my dashboard now over here inside this application which we created right you have to make sure that you can you have to add this call back URL okay so you have to add your domain so let's copy this domain and then write this kind call back and make sure to add this redirect URL and I will just copy this kind callback over here oh sorry okay so this is call back you need to add once it is in production it means the production URL you need to update okay and then save it now once it saved uh now if I go here and refresh it okay OB sorry my bad so obviously we we updated in here okay obviously we need to update in versal in environment not here okay so let's go to the setting sorry uh let's go to this application which we deployed just now which is this one let's go click on this one go to the settings and inside the environment variable right as you know that we already have this environment variable here if you see the issuer URL correct then we have the site URL obviously we need to update this one so we'll click on edit and we'll replace with the production URL same thing let's save this one uh we need to add the log out redirect URL so click Ed it paste it here save this one then we need to add login redirect URL so we have to keep dashboard SL dashboard okay and then save it now once you update this environment variable right it will not automatically apply to our application so go to the deployment and here you need to again redeploy your application okay so click on the redeploy and just click redeploy don't use existing catch a so uncheck that one and now if you see the Strat is showing now building so again uh with the updated environment variable it will deploy our application and in that case now our login functionality of the production application will work so we'll wait to complete this bill and now the deployment is successful now let's open our application okay if and refresh it and now if I go to the login see it will redirect me me to login screen of the kind okay it means it's working now if I go to the login with the particular account and once I login it will redirect me to the dashboard page where I can see my uh meeting event type even not only that one I can able to see my schedule meeting the availity tab and lot of more things okay if I log out it redirect me back to the home screen okay and even if I try to access this uh dashboard page it will uh ask me the login First okay so that's how uh you can uh configure uh the production environment variables depends on the uh your required configuration if you have any question let me know in the comment section

Channel: TubeGuruji

Views: 16,618

Keywords: Build & Deploy Full Stack Next.Js Meeting Scheduler App, next 13, next.js 13 tutorial, tailwind css, Meeting Scheduler App using NextJs, next js

Id: zrdbOx0eGtM

Length: 327min 53sec (19673 seconds)

Published: Tue Mar 26 2024