Transcript for:
Doctor Appointment Booking App Tutorial

hello and welcome to another exciting tutorial of great stack in this tutorial we are going to build a full stack doctor appointment booking app using mongodb Express react and nodejs in this full stack project we have added three levels of login first one is patient login where patient can login and book the appointments second one is doctor's login where doctor can manage the appointments check their earnings and update their profile and the third one is admin login where admin can create and manage the doctor's profile along with this we have also added the online payment gway in this app so that user can pay the appointment fee online so let's explore all the feature of this doctor appointment booking app so this is the homepage where you can see we have this Banner then we have these images to choose the doctor with some a speciality then we have the Top Doctors list and after that we have the banner and at the bottom we have this footer let me scroll up and if I click here on all doctors it will display list of all doctors available on this app right and in the left side we have option to filter the doctors based on the speciality if I click on this one dermatologist so you can see we have three doctors and if I click again on this link so it will be deselected and we will see the list of all doctors again right now we have this about page and then this contact page after that let's go to all doctors and click on any doctor image so it will open the doctor's appointment page here you can see the doctor image doctor's detail like name their degree and year of experience then we have the about text then we have the doctor's fee and here we have the option to choose the booking slot we can choose the date and time right and then we can click on this book appointment to book the appointment and at the bottom we have the related doctors but before booking an appointment we have to create one account so let's click on this create account so it will open this account creation form where you have to enter the name email ID and password and you can create one account or here we have the option to login so I already have one account so I'll enter the email ID and password and login into my account so I have added the email ID and password then click on the login button so now I am logged in on this website here you can see now we have the option for my profiles then my appointments and we have option to log out so let me go to this my profile here you can can see we have the image and other details if I click on this edit button here we can update the image name and some other information then click on the save information that's it and if I go to my appointments right now you can see we don't have any appointment so let's book a new appointment I'll click here here I will select this first doctor here we will select the date let's say Fifth and we will will select the time 12:00 p.m. and click on this button book an appointment so now we have successfully booked the appointment with this doctor right now after booking the appointment we have the option to cancel this appointment or we can also pay the appointment fee online here you can see we have the option pay online right so after booking this appointment let me come back to the admin panel so this is the admin dashboard if I refresh it here you can see we have a new appointment with this doctor that we have just booked right and here we have option to cancel it and if I go to appointments list so you can see the patient name right here we have the doctor's name then appointment fee and here we have the date and time correct now in this admin panel we have the doctor's list also so the admin can see the doctor's list and admin can also add add a new doctor here we have the add doctor right so using this form we can add a new doctor let me select the image I'll select this one after that we will add the information about the doctor so let me add the doctor's name let's select the speciality then we'll add the doctor's email ID so let's add this dummy email then in the degree we will add mbbs then we will set one password for this doctor then here we have to add the address let's select the year of experience then we will add the doctor's fee and here we will add the description about this doctor then click on this add doctor so you can see the notification doctor added and you can see the same doctor in this list if I scroll down here you can see Jeffrey Williams that we have just added right so this was the admin panel now let me log out from this admin panel and here we have the option to login again and you can see here we have option for Doctor login let me click here and here we will add the login detail for the doctor so let me add Richard at demo.com we will add the password and click on login so this is the dashboard for the doctor and in this one you can see the earnings appointments and number of patients so here you can see the new appointment that we have just booked so after completing the appointment Doctor can click on this check mark to mark this appointment as completed or doctor can also cancel this appointment by using this button right and here we have the appointments list so here doctor can see all appointment data and here doctor can update their profile also if we click on this edit then doctor can update the description doctor can update the fee and address right then click on the save so this was the doctor's dashboard here you can see the payment mode is Cash because we have just booked the appointment we have not made the payment now let me complete the payment online I'll click here and here we have two option a stripe or razor pay let me click on razor pay here let me add the card detail this this is the test card detail after making the payment here you can see it says paid now let me go to the doctor's dashboard refresh it and here you can see the payment is online right because we have made the payment using online payment gway so this was the project overview and I have provided the project live Link in the description so that you can all also explore this do appointment booking website I just want to tell you that this is the best project to learn M Stack and a standout in the developers Community also you won't get this kind of project anywhere on the YouTube it took me more than 1 month to design and develop this awesome M Stack project in exchange I want you to provide th000 comments on this video so that I can bring more projects like this for free to make you a master in full stack development but not only that this project can be customized to use in your college project or personal project purpose so let's start the development process and build this full stack project a step by step now we are at the desktop screen and here we will create a new folder let's add the folder name prescripto that is going to be our app name now we will open this folder in vs code editor so right click and select so Moree options then select open with code now our project folder is open in vs code editor here we have to open the integrated terminal so right click here and select open in integrated terminal so in this terminal you can see we are at the prescripto folder here we will create the front end project using the V package for that simply write the command npm create V at latest after that just click okay and here we will add the project name so let's add front end after that we will select the framework that is react then select JavaScript as you can see here in the left side we have one folder called front end now let's navigate to this folder using the terminal so simply add this command CD front end now we are at the front end folder here we have to install all the dependencies so simply type npm install so it is installing the dependencies in the front end project after that we will install some other packages also so let's add npm install exos react router Dom and react toasttify so we have installed these three packages after that we will run our project to run this project simply type npm run Dev now our project is successfully running on this Loc local URL so we have to open this link in our web browser so simply open this link in web browser now you can see our project is successfully running in the web browser now we have to clear this default project so let's come back in the sidebar open the front end folder and here we will open SRC folder and from here we will open this app.jsx file let's clear this file and here we will use the command and here we will use the snippet rafc if you are not getting this rafc snippit then you have to install one extension that is es7 plus react Redux after installing this extension you will get this rafc snipet after that we will save this file and we will delete this app. CSS file after that let's open the assets folder and from here delete this react. SVG after removing this SVG file let's open index. CSS file let's clear this file Also let's save this file now we will open the web browser so you can see our project is clear now next we have to update this title so let's come back to the index.html file and here we have the title tag so in this one let's remove the text and we will add our own title so let's add prescripto after that let's save the changes and open the web browser so you can see the title has been updated after that we are going to use the Tailwind in this project so we have to add the Tailwind support so let's open a new tab and here we will search for wheat Tailwind let's open the first link and here we have the steps to add the TA BND in our project so the first step is to copy this statement npm install and these dependencies so let's copy this and we will come to the terminal and first we have to stop this project so simply type control C yes now just paste the command execute it now it will install the telin dependency in the project after that we will copy the second statement and paste it here then execute it so it will create one Telvin config file in our project so in the sideward you can see we have telin doc config.js file after that we will copy this configuration and we will paste it in this Telvin doc config.js file so let's clear it and paste the configuration that we have just copied save the changes and come back to the web browser after that here we have the next step we have to copy these lines and paste it in the index.css file so let's copy it and let's open index. CSS file and paste this now save the changes next we have to run the project so in this terminal we will type npm run Dev now it will start our project in the development mode now we have added the tnd support in our project to test it let's come back to the app.jsx file and here let's add some text so let me add testing tnd and in this div we will add the class name property and here we can use the tnd classes so let me add any tent class name here so just add text green 500 we will save the changes and open the web browser now if I open the website so here you can see we are getting the text testing tailwind and here we have the green color it means we have successfully configured the tent support in our project now let me remove these class name and this text also let's close this tab also after that we will insert the Assets in our project so here we have one assets folder where I have some images you will find this assets download link in the video description so let me copy all these files then open the project folder go to front end then SRC then assets and paste all the images now let's close this and open the vs code editor now in the sidebar you can see in the assets folder we have all the images icons and we have one assets. JS file also in this one we have imported all the images and exported it in this assets object so whenever we have to use these images we will import this assets object and by using this we can can simply access these images in this assets file we have some data also we have added the speciality data where we have this text and image after that we have the doctors's array where we have multiple object each object is representing each doctor it has doctor name image a speciality degree experience about fees and address here we have total 15 Doctors Data that we will use to display the doctors on our front end project after that let's close this file now we will create the folder structure in our project so in the SRC folder we will create a new folder and we will name it components now in this folder we will create multiple components and we will reuse these components like navigation bar and footer now in this SRC folder let's create another folder with the name Pages we can create multiple pages in our web app now to add the multiple pages in our application we need the support of react router Dom so first we have to add the the react router Dom support in our project so to add that let's open main. jsx file and here we will import browser router from react router Dom package now here we will remove this strict mode and here we will use browser router so between this browser router tag we have the app components now let's save this file after adding this tag we have the support of react router Dom in our project after that in this SRC folder let's create another folder with the name context here we will create our context for the front end project where we will manage the user login and other context data after that we will create multiple pages so in this Pages folder let's create a new file with the name home. jsx that will be the homepage here we will use the rafc snippet remove this text after creating this homepage let's create another page p and write the file name doctors. jsx here also we will use our afce after that let's create another page in this Pages folder write the file name contact. jsx here also we will use our af fce after that we will create about page so right click and create a new file write the file name about do jsx here we will write R Ace we will save this file now we have created these Pages now if we come to our web browser and here we have this figma file you will get this figma file Link in the video description so that you can open this and see the design file here we have all the pages design that we are going to create so according to our design we have created the pages file for home doctors about and contact now we will create the page for the user login so in this Pages folder let's create a new file the file name is login. jsx here also we will use our afce now we have created the login page also next we have to create this page that is profile page for that let's create a new page and write the file name my profile. jsx here also we will use rce we will save this file after that we will create this my appointments page where we will display the already booked user appointment so let's create a new file in this Pages folder and the file name will be my appointments. jsx here also we will use R afce now we have created these Pages by using this page component we will set up our routes for that let's open app.jsx file and in this div first we will add the class name property and here we will provide some margin from xaxis so let's add mx4 and for different screen size we will add MX 10% in this div let's add routes tag here we are getting the suggestions routes tag from react route Dom select this so it will import the routes tag from the package now close this tag between this tag we will create route tag we are getting the suggestion so let's click here so it will import the route from react router dump package now after that let's close this tag and here we have to define the path that will be slash for the homepage and here we have to mount our homepage component so let's add the element property and in this element let's add home that is the homepage component let's add opening add home so we are getting the suggestion so let's click here so it will import this home from this Pages folder now let's close this tag now whenever we will open the SL path it will display the homepage so let's test it so first we'll open the home. jsx file and here let's add one text that is homepage save this changes and open the web browser and let's open our website so you can see here it is displaying homepage now if I go to other route like this now that home page text has been removed so now the react router Dom is perfectly working now let me remove this text and save the file now we have added the homepage similarly we will add all the pages that we have created here for that let's make the copy of this line here we will add the path that will be doctors and in this path we will add doctor's page we will select it from here so it will automatically import this doctors from the Pages folder now let's create another copy here we will add the path that is SL do/ colum we will add the speciality this speciality for the doctors so whenever we will click on any specialist then a specialist doctor will be visible here for that we will use this parameter after that we will create another copy of this and here we will update the path that is login and here we will add the element login page component select it so it will import it so it will import the login component from the pages folder now let's create another copy of this line here we will update the path so it will be about page so let's add/ about path here in the element we will add about now let's create another copy here let's add the path slash contact and here we will add the contact page so just add contact after that let's create one more copy then update the path it will be my profile and in this element we will use my profile component after that let's create one more copy here we will provide the path my appointments and in this element we will use my appointments component after that we will create one more page so in this Pages folder let's create a new file and we will add the file name appointment. jsx here also we will use ource after that we will use this page to create one more route and in this page we will display this do appointment page where user can book a new appointment so let's create one copy of this route tag and here we will add the path that is slappointment slash then we will add one parameter that will be the doctor's ID so just add doc ID after that we will add the element so in this element just add the appointment page that we have just created by using all these Pages we have created multiple routes now after this we will start building our UI components so first we are going to create this navigation bar so to create this navigation bar we will create one file in this components folder and write the fin name ne. jsx here we will use ource here we have created this Navar component next we have to mount this component so that this Navar will be visible on the web browser so we are going to add this Navar in this app.jsx file before this routes so it will be visible in all the pages so simply add this nav bar select it from the suggestions we will get it from the components folder close this tag now we have mounted the nav bar outside of this routes tag so it will be visible in all the pages now let's come back to the nav bar. jsx file and here here we will create our Navar so first in this div we will add one image tag in this SRC we are going to use this assets. JS file so simply add assets we are not getting the suggestions so let me manually add it so just add import cly Braes assets from double do/ assets folder SL assets file after that here we will use assets dot as you can see we are getting the suggestions of all the images so we will use do logo so after adding this image tag we will add one UL tag in this UL tag we are going to use the nav link tag so let's add opening Arrow nav link as you can see we are getting the nav link from react router Dom so select this one so it will import this from the react router Dom between these tag we will create one lii tag and one HR tag so let's add the lii tag between this Alli tag let's add home as you can see in my figa file in this navigation bar we have the first menu which is home then we have all doctors then about then contact after this allite tag we will add one HR tag now just copy and paste it for three more times in the second option we have to add the all doctors so let me update the text it will be all doctors in the third one we will add about in the fourth one we will add contact after creating this UL tag here we will create one D and in this div we will create one button tag here we will add the button text that will be create account so let me copy the text from the design file and paste it here create account now if I save the changes and come back to the web browser now we have added these text and image in the navigation bar next next we will add the CSS properties so first we'll add the CSS class name in this div so let's add the class name property then we'll add the tent classes so in this class name let's add Flex item Center justify between text a small padding then margin then border bottom then border bottom color after that save the changes and open the web browser so now you can see one horizontal line and all these contents are aligned side by side after that we will add the CSS for this image tag that is our logo so in this so let's come back hide this terminal and in this image tag let's add the class name property and here we will add width then cursor pointer we will save the changes now this logo is looking good next we will add the CSS properties for these UL tag so in this UL tag let's add the class name property here first we will add the hidden class name so this UL tag will be hidden from the phone view then we'll add the medium device here we'll add the flex item St start Gap then font medium so it will be visual on medium screen size now save the changes so you can see this UL tag is visible now it is aligned horizontally next we'll add the CSS properties in this lii tag so select all the LI tags in all lii tags let's add the class name property here we will provide padding y1 after that we will add the CSS properties for all these HR tag select all the HR tags here let's add the class name here we will provide border none outline none height background color width margin Auto here we are going to use the primary color for the background first we have to add this primary color in our Telvin do config file so let's open Telvin do config file here in this theme option inside this extend let's add colors that will be one object here we will Define primary color so write primary and here we have to add the color code so we are going to use this color code that will be our primary color for our website save the changes close this file now here we are getting this background color using this BG primary if we save this changes and come back to the web page now you can see here we are getting one underline effect in all the menu items next we have to display this underline only on the menu that page is open so for that let's come back to the vs code editor and now after this margin Auto in all the HR tag let's add the hidden class name so it will be hidden for all the menu now in this naving tag let's add the two property and here we will add one string so let's add the slash that will be for the homepage that we have defined in the app.jsx file so you can see the path is/ for the home component now let's open na. jsx file in the second nav link we will add the two property here we will add the path for the doctor's page that will be our slash doctors now in the third one we will add the two property let's add slash about after that in the next nav link we will add the two property here we will add slash contact after adding this two property in all the naving tag we will save the changes and open the web browser now if I click on the inspect and from here we will expand the body then this D then go to this ul and here we have multiple a tag we are at the homepage and in this first one we have the first a link we are getting one class name called active it means the homepage is active right now if I click on all doctors when we select the all doctors now the active class name has been removed from the first anchor link and it it has been added in the doctors's menu right in the second a tag if I click on about now it will add this active class name in this about Anor link Now by using this active class name we will add the underline effect on the active menu link so to do that let's open index. CSS file and here we will add Dot active class name then HR tag here we will provide apply block property save the changes and we will come back to the web browser as you can see we are at the slab path and you can see the underline effect in the about menu if I click on home now we will get the underline on the home menu so this functionality is working fine after that we will come back to the na. jsx file now in this button tag we will add class name property and here we will provide background primary text white padding border radius font weight hidden and for the medium screen size block now this button will be hidden in phone View and in the medium and large screen it will be visual after that we will save the changes now we will get this button here now after this in this div tag let's add the class name property here let's add Flex item Center Gap four now in this button we will add the functionality so that when we click on this one it will redirect us to the login page for that let's come back to the vs code editor and before this return statement we will add const navigate equal to and here we are going to use the use navigate hook after that we will come here on this button tag and let's add the on click property here we will add one Arrow function here we will call the navigate function after that here just provide the path of our login page that is/ login if I save the changes and if I click on this button now you can see the path it is/ login and when we will Design the login page that login forms will be visual here after that we will click on home so we will come back to the home path now whenever the user gets logged in then here we will display the profile picture of that user and one drop- down menu so let's create the UI for that so before creating that here let's create two State variables first one will be show menu and the second one will be token so let's add const show menu then we will add the setter function name set so menu equal to user State then initialize it with one buan data that is false similarly we will create one more State variable the name will be token and Setter function name will be set token equal to user State and initialize it as Boolean data true now whenever we have the token it means we are logged in when we don't have the token we are logged out so we have added the Boolean data by Default true after that inside this div let's use the turn operator so we will check if the token is true it means we are logged in in that case we will return one div let's move it in the new line then we'll add the colum and if we are not logged in in that case we will display this button so let's remove it and past it here after this colum now let's check this logic so now you can see this button is hidden because the token is true and if we make it false save the changes then again this button is visual so by default we will make it true for now so that we can Design This D so when it is true the user is logged in in that case we have to display one drop- down so in this div we will add one image tag and in this image SRC we have to add the assets do profile pick for now we are going to display this profile picture if the user gets logged in then we will display the user picture after this image tag we will create one more image tag in this image SRC we are going to use assets. drop-down icon if I save the changes so here we have this profile picture and this drop- down icon now we will add the class name properties for this image so first We'll add the class name in this image tag and here let's provide width then border radius so let's add rounded full after that in this image tag let's add the class name property and here we will Define the width that will be 2.5 that is a CL 10 pixel now we will add the CSS properties in this div so let's add the class name and in this class name let's provide Flex item Center Gap cursor pointer group relative save the changes and open the web browser now the profile icon is looking good and here we have this drop- down icon also now we'll create one drop down menu so whenever we will hover on this image then the drop down menu will be visual so to create the drop down here we have added this group and relative so after this image tag let's create one div in this div we will create one more div and inside this div we will create three P tag now according to our design file if we come to this design here we are going to create this drop down something like this so first we have this text my profile so let me copy this text we will paste it here then we have the my appointments let's copy and paste it here then we have this Tex log out copy and paste it here after that save the changes so you can see all these text are visible in the right side of this image next we will add the class name so it will be displayed as drop- down for that in this div let's add the class name property and here we will provide absolute top zero right zero padding top text base font weight text color Z index hidden group hover block so by default it will be hidden and when we will hward on the image it will be visual save the changes now this drop down is hidden if we h on it then this drop down is visible after that we will add the CSS property in this div for that here let's add the class name property now let's add minimum width background color border radius Flex Flex column Gap and padding save the changes now if we hover on this here we are getting these options in the dropdown next we will add the class name property in these P tag so in these three P tag let's add the class name property and here we will add hover text black cursor pointer if I save the changes when we h on it you can see the text color is changing it becomes black after that we will add the navigate function so that when we click on the my profile then we will be redirected to the my profile page that will be slm my profile path so for that in these two P tag let's add the on click property here we will add this Aro function now we will use this navigate function function so here after this addo function just add the navigate in the first one we have to send the users to the my profile path that is my Dash profile after that in the second one we have to send the user to the my appointments page for that here we will add my Dash appointments after that we will save the changes if i h on this and click on my profile now we are redirected to the/ my profile page if I click on my appointments now you can see the path we are redirected to the my appointments after that we will add the functionality on this log out button so that when we click on this then we will make this to to false and this drop down and profile icon will be hidden and here we will get the create account button again for that here let's add the onclick property on this paragraph tag here we will call the set token function and simply provide false if I save the changes now if we h on it and click on the log out button now that profile icon and drop down is hidden and here we have the create account button and if I refresh this one again we will get this profile icon and this drop- down menu now we have completed this navigation bar after this navigation bar we have to create the header section so let's come back to the figma design so here in this design you can see we have this header component with background color text and image so let's come back to the VSS code here in this components folder let's create a new file that will be header. jsx here we will use R afce here we have cre created this component now we have to mount this component in this homepage so let's open home. jsx file and from here let's add opening Arrow headers select this header component from components SL header let's close this tag and save the changes now let's open header. jsx file in this div we have to create two section one for the left side and another one for the right side in the right side we have this image and in the left side we have these text description button and small icons so here let's add one comment let's add the comment text left side after that we will create one div inside this div we will create the left side of the header after that let's add one more comment here we will add the comment text right side and after that let's create another div in this div we will display the right side content in the left side let's add the paragraph tag in this paragraph tag we will add this text book appointment with trusted doctors so let's copy and paste it here after that we will add the BR tag to add a line break then we will copy the second line that is with trusted doctors we have pasted it here after this P tag we will create one div and in this div we will add one image tag in this image tag we will provide assets dot group profiles that is this image after this image tag we will create one P tag and here we will add this small description so let's copy this and paste it here now let's move it in the single line and here we will add the BR tag to add the line break after this div we will create the anchor link and in this anchor link we will add this text book appointment so let's copy it and paste it here after this text we will add one image tag and in this image tag we will provide assets do Arrow icon so we have created the left side of structure now in the right side we will add the image tag and in this SRC we will provide assets dot header image now let's save the changes and open the web browser so here we have created the left side and right side now let's add the Cs properties for this header section so first we'll add the CSS properties in this div tag here we have the here we will add the class name property and in this one we will add the tent classes so just add Flex Flex column for medium and above a screen size We'll add Flex row Flex wrap background primary rounded large padding for different screen size then save the changes now you can see this background color and we have some padding also after that we will add the CSS properties in the left side div so just add the class name property and let's provide medium width half Flex Flex call Item start justify Center Gap padding y margin Auto then padding for different screen size then margin bottom so now you can see the space around this next we'll add the CSS properties for this text so in this P tag let's add class name property let's provide text size then we will add the different text size for different screen text white font semi bold line height for different screen size we will add different line height save the changes now you can see this text looks good after that we'll add the CSS properties for this image tag for that here in this D we will add the class name property and let's provide the Tailwind classes so for the medium and above a screen size we will add the width 1 by two position relative after that we will add the class name property for this image tag here we will add width full position absolute bottom zero height Auto rounded large save the changes now this image is displayed in the right side and these text is displayed in the left side after that we will add the CSS properties for this div where we have the group profile icon and text so let's add the class name property we will provide Flex Flex column Flex row item Center Gap text White texture small and font weight now we will add the CSS properties for this image tag so let's add the class name width 28 after that save the changes and open the web page as you can see we have this image in the left side and this text in the right side after that in this BR tag let's add the class name property and here we will add hidden and for a small and above a screen size we will make it visible so just add block save the changes after that we will add the CSS properties for this button so let's come back and and here in this a tag we will add the class name property here we will provide Flex item Center Gap background white padding border radius text color text size margin Auto H effect transition all then duration 300 after that we will add the class name in this image here we will provide the width three save the changes now here we have this beautiful button and here we have the hover effect also so now we have created this header section now let's come back to the figma design and you can see here we have some other content so when we will click on this button Buton it should scroll the web page to this menu which is find by speciality for that we have to add the smooth scroll so in this button tag in this anchor link let's add has a speciality now our header section is ready now whenever we will create this section then we have to add this ID in this section so whenever we will click here it will scroll the web page to this section now let's create this section for that let's come back to the components folder and here we will create a new file and we will name it a speciality menu. jsx here we will use our afce next we have to mount this component on our homepage so let's open home. jsx file and after this header we will Mount this component so in this suggestion we are getting this component so just click here so this component will be automatically imported now just close this tag save the changes now let's open this component file so in this component here we have to add one title one description then these menu for this menu we will use assets. JS file and in this one you can see we have added this a speciality data in one array where we have multiple objects where you can see the image and name we have exported this file so we can use this in any component so first in this dip we will add one ID property and here we will add the ID that we have added in this button so just copy this a speciality and paste it here in this ID now in this div tag let's add the H1 tag and here in this H1 we have to add this text so let me copy this paste it in this H1 after this H1 tag we will create one P tag and in this P tag we will add this text so simply copy and paste it after this P tag we have to display these menu with image and name so here we will create one div and in this div tag we will use this aray so first we have to import this a speciality data so let me copy this and here we will add import curly presses speciality data will get this suggestion so just click here so it will be imported from this assets file in our component now in the step tag we will add the curly addesses and here we will use this as speciality data then in this one we will add the map method here we will pass one add function here let's use this a small bracket in this one we will add link tag that we will get from the react router Dom so when we click here this link tag will be imported from the react router Dom now just close this tag now in this parameter we will take individual item and index number now in this link tag let's add the two property and here we will use template literal so to use the template literal just add the back tick here we will add SL doctors path after that we'll add SL dollar sign curly bres and here we have to add the speciality path so simply add item dot we will select this option A speciality now in this link tag let's add the image tag and in this image SRC we will use item. image after this image tag let's add the paragraph tag and here we will add the curly Braes then add item do speciality now in this link tag we will add the key property where we will provide index that we are getting from this parameter now if I save the changes and open our web page so here we have this title description then we have all the items right so we have total six menu now let's add the CSS properties for this component so first We'll add the CSS property for this div so here let's add the class name property and provide the Tailwind classes so just add Flex Flex call Item Center Gap back heading then text color save the changes so now you can see everything is in the center after that we'll add the CSS properties in this H1 tag so let's add the class name property here we will add text 3 Xcel then we will add the font medium save the changes so this title is looking good then we'll add the CSS properties for this paragraph tag so in this P let's add the class name and let's provide width 1x3 text Center then text small save the changes so now you can see this small description is also looking good in two lines because we have added the width now we will add the CSS properties for these list that contains these image and text so here in this div let's add the class name property here let's provide Flex for a small and above a screen we will add justify Center Gap four padding width overflow scroll save the change es here you can see we are getting all the items in horizontal line here we are getting this a scroll bar so we will make this a scroll bar hidden for that let's come back to the index. CSS file here we will write double colum Dash webkit Das scroll bar here we will apply hidden save the changes close this file now that a scroll bar is hidden after that we have to add the CSS properties on these images so here we have this image tag so let's add the class name property and here we will provide width 16 and for a small and above screen we will add width 24 then provide the margin bottom to save the changes so this is the perfect size for the image now we'll add the CSS properties for this link tag so here let's add the class name so let's provide Flex Flex call item Center text extra small cursor pointer Flex shrink Zer over Translate Y minus 10 pixel transition all duration 500 milliseconds save the changes now if I hover on any item you can see it moves up now when we click on this icon it will navigate us to the doctor's page and here we are getting the specialty menu right if I go to homepage and click on this General physician then we will come to the doctor Page and here we will display the doctors with the speciality of General physician and if I and if we directly come to all doctors then it will display the doctors of all the speciality now we have created this section after that in this link tag we have added this two property next we have to add one onclick property also so let's add on click here we will add the arrow function and here we will call a scroll two that is one JavaScript function to a scroll the web page here we will simply add zero comma 0 so whenever user will scroll the web page and click on this menu then it will redirect us to all doctors pages and it will also scroll the web page to the top now we have completed this menu section after that we will create the top doctor section where we will display the Top Doctors list for that let's come back to the vs code editor in this components folder we will create a new file write the file name top doors. jsx now in this file we will add this snippet ra Ace after that we will Mount this component on our homepage so let's open home. jsx file and here after this a speciality menu we will Mount the Top Doctors component now save this file come back to the top doctors. jsx file and here we will create the UI so as as you can see in this figma design first we need the heading then description then doctor's profile and one mode button so let's come back to the vs code editor within this div we will create one H1 tag here let's copy the text from here and paste it in this H1 after that we will create one P tag and copy the text from the design and paste it here after this P tag we will create one one div and in this div we will display the list of top doctors so to display the top doctors's profile we will go to assets file and here we have the doctors aray and we are going to display these doctors data in this Top Doctors component so here we will add the curlys then at the doctors we are getting the suggestion from the assets folder assets file so just click here after that this doctors will be imported from the assets file on this one we will use the dot slice method here we are going to display maximum 10 doctors for that here we will use the slice method and in this slice method let's add 0 to 10 after that in this aray we will use the map method and in this map we will pass one Arrow function function and here we will use the small bracket now in this parameter we will get the individual item and index number after that in this bracket we will return one div and in this div we will display the doctor's information like name profile picture a speciality and other details now in this div we will display the doctor's profile that contains the doctor's picture available status doctor's name and doctor's speciality now in this div let's add the image tag in this image tag we will use item do image after that let's create One D and in this one let's add another div and here let's add one P tag in this P tag we will display this Green Dot so let's add another P tag here after this p and here we will display the text which is available so let's copy this and paste it here now after this div let's create one P tag to display the doctor's name so here we will get the doctor's name using item. name after this P tag we will add one more P tag and here we will display the doctor's speciality so just add item do speciality after this div here let's create one button tag that will display this mode button so let's add the button text Moree save the changes and let's come back to the web browser so now you can see we are getting this text then image then doctors's information available name and a speciality next we are going to add the CSS properties in this component so in this div we will add the class name and here let's add the tnd classes so let's add Flex Flex column item Center Gap margin text color and margin from the xaxis then save the changes now you can see all the text and doctor's profile are displayed in the center now let's add the CSS in this H1 tag here we will provide text 3 XL font medium after that let's add the CSS in this a small paragraph tag so just add the class name width text Center text a small now save the changes so you can see this title and paragraph is looking good after that here in this div we will add the class name here we will add the width full GD GD columns Auto Gap four padding Gap in y then padding X for a small and above a screen now save the changes and come back to the web page now after that here in this div let's add the key property where we will insert index that we are getting from this parameter after that in this div we will add the class name property here we are going to add border border blue border radius overflow hidden cursor pointer then we will add the hover effect so we will add translate y- 10 pixel transition all and duration 500 milliseconds now save the changes now you can see this B and H effect next we will add the CSS property in this image tag so here let's add the class name in this class name let's wide background blue 50 after that we will add the CSS property in this div also so here let's add the class name and here simply provide padding for after that let's add the CSS properties in this div so just add the class name let's provide Flex item Center Gap two text small text Center text color green after that we are going to use this first P tag to display one Green Dot so let's add the class name here we will provide width height background green then rounded full that is border radius full now save the changes now in this background we are getting the color blue now we will create the custom tent property for this greed columns Auto for that let's come back to the Telvin doc config.js file after this color let's add the comma and here we will write grid template column grid template columns then add one object here we will Define the auto property in this Auto property we will provide the custom property so let's add repeat autofill min max 200 pixel and one fraction after that we will save the changes and open the web page now you can see all the doctor's profile are aligned properly we have the width of 200 pixel and we are also getting this H effect that we have added here after that we will add the CSS properties in these P tag so here in this one we will add the class name property and in this class name property let's provide text Gray text large font on medium now in the second P tag let's add the class name property and here we will provide text Gray 600 text small after that save the changes and come back to the web page now this doctor's name and a speciality is looking good so after creating this Top Doctors we will Design This mode button so here we have this button tag let's add the class name and let's add background blue 50 text Gray padding X and padding y border radius full and margin top then save the changes and come back to the P page now this mode button is looking good now when we click on any doctor's profile card nothing is happening so we have to add the navigate path so that when we click on any card we will be redirected to the slappointment SL doctor ID and on that page we can fish the doctor's information and display the doctor information on that page for that let's come back to top doctors. jsx file and here before this return statement we will add const navigate equal to use navigate we have to import this use navigate so just click on this suggestion so use navigate has been imported now add the bracket after that in this du here let's add the onclick property and in this one we will add the arrow function and just call the navigate function in which we'll add the we will add the template literal so just add the back text and here let's add the path that is SL appointment SL dollar sign curly brushes and paste the doctor's ID that we will get from the item so let's add the item dot underscore ID after adding this let's save the changes and come back to the web browser now if I click on the card it will redirect us to the slappointment path and here we have the doctor ID which is Doc two now let's come back to the homepage now this functionality is working fine after that we will create the context so for creating context let's create a a new file in this context folder this file name will be app context. jsx after that here we will create the context so we can access the common Logics from this file so to create the context simply we will type export const app context equal to and here we are going to use the create context that we will get from the react package just click here so it will import the create context from react now add the bracket so here we have created one app context after that we have to create the context provider function so to creating the context provider function simply WR const app context provider equal to and it will be one Arrow function so we have created this Arrow function in this function we will add one variable with the name value and it will be one object so whatever we will add in this value object we can access that in any component so let's first import the doctors from from the assets so we have imported the doctors from the assets folder assets file that is one array that we are using in this top doctor component so here we have directly imported it from the assets file now we will add this file in this context and we will try to access this file from the context for that in this value let's add doctors that we we have imported here and after that here we will return app context dot provider and with this tag we will add the curly Braes and from this parameter we will get the props and in this curly Braes we will add props do children after this we will export this app Contex Tex provider function for that we will use export default and here we will use app context provider function next we have to add this value in this props so just add value and use this value object now we have added this value object in this app context our context file is ready now next we will add the context support in our front end project for that let's open main. jsx file and here first we will import app context provider function from Context file app context. jsx after this browser router we will create app context provider tag now between this tag we will move this app component so here we have wrapped our app component using this app context provider after adding this we will get the support of context in our front end project so now let's come back to top doctors. jsx file here we will remove this import that we are importing doctors from the assets file and instead of directly importing this file we can use it from the context so let's add const CES doctors equal to and here we will use use context hook and in this one we will provide our context which is app context by adding this we will get the doctors from this file now let's save the change changes and come back to the web browser as you can see still we are getting these doctor list that we are getting from the context after that here we have some mistakes in this H1 tag we have to add the font medium so let me collect this font medium so now this heading is looking good now in this mode button we will add the functionality so that when we click on this one we will be redirected to the all doctors page for that let's come back to the vs code and in this button tag let's add the onclick property now in this on click let's add the arrow function and here we will add this curly bres here we will call the navigate function then provide the path that is/ doctors after that let's add the the semicolon and here let's add a scroll two function so just add a scroll two and in this one just add zero and zero so whenever we will click on this more button we will be redirected to all doctor Page and it will scroll the web page to the top after that here we have added the functionality book appointment so it is coming to this section so here we have to add the smoth smooth scroll so that when we click here it will scroll the we page smoothly and it will come to this section so just come back to the vs code Editor to add the smooth scroll in the project let's come back to the index.html file in this HTML tag we will add class scroll smooth we will collect this double quat save the changes and come back to the web page now if I click on this book appointment it will display the smooth scroll effect and we will be moved to this section and after that we have this top doctors now after this Top Doctors we will create this Banner where we will display the text this button and this image so to create this first we will create one new component so in this components folder we will create a new file and we will provide the name banner. jsx in this file we will use our afce now save this file now we have to add this Banner component on the homepage so let's open home. jsx file and after this STP doctors component we will Mount the banner component now save the changes and we will come back to the banner. jsx file and here we will create the banner section so to create the banner let's come back to the figma design file and here you can see we have this background color and here we have two sides left and right in the left side we have the text end button and in the right side we have one doctor's image so first we will add one commment here let's add the comment text left side after this comment let's create one div now let's copy it and paste it here it will be right side now in this left side div we will add another div and here we will add two P tag in the first one we will write book appointment just copy and paste it and in the second line we will add this text with 100 plus trusted doctors so copy and paste it here after this div we have to create one button tag so here we will add this text create account so just copy and paste it within this button tag after that in the right side we will add one image tag and in this image SRC we will use assets dot appointment image now save the changes and come back to the web browser so here we are getting this text button and this image now let's add the CSS properties for this Banner component so first we are going to add the CSS property in this div so let's add the class name we will provide Flex background primary B radius padding for different screen size then margin now save the changes so here in the left side we have this text and in the right right side we have the image and we have the background color also now let's add the CSS property in the right side in the right side in this div let's add the class name property here we will add the CSS properties so in the desktop view this image will be displayed but in the phone view this image will be hidden for that here let's add the hidden then for medium we will add block then we'll add the width for different screen size then we'll add the relative now we have to move this image in the right side for that in this image tag we will add the class name property here we will add width full absolute border zero right zero Max width medium now save the changes come back after that we will add the CSS properties in this left side div so here let's add the class name property here we will use flex one so it will use the available width then we'll add the padding we will add different padding for different screen size now save the changes now you can see in this left side we have the text and in the right side we have have this image next we will add the CSS property in this paragraph text so we will add the color and size so let's come back to the vs code editor and in this div here we will add the class name property here we will add text size we will provide different size for different screen size then add the font weight semi bold text WI fight now in this second paragraph tag we will add the class name property and here we will add margin top for Save the changes and come back to the web browser so here we are getting this text and here we have the button text create account now we will add the CSS properties for this button so in this button tag let's add the class name we will provide background white text small then text base then text color then padding X padding y border radius margin top then hover that is a scale then transition all save the changes and come back to the web browser here we are getting this button create account when we move cursor you can see this hover effect after that we will add the logic so that when we click on this button it will open the login page for that in this button tag we will use navigate function that we will get from the use navigate hook so here before this return let's add const navigate equal to use navigate now now in this button tag let's add the on click property and here we will add this Aro function and we will call the navigate function and in this navigate function we will add the path so here let's add SL login path after that we have to add it in curly bres then provide one semicolon and here we will add a scroll to and provide the path 0 and Zer we will save the changes and come back to the web browser now if I click on this create account we are redirected to the login page after that we will create this footer section to create this footer we will come back to the vs code editor here we will create a new file in this components folder and provide the file name footer. jsx here we will use R fce next we have to mount this component in the app component after this routes tag here we will Mount the footer component so we have mounted this footer component outside of this rout tag so this footer will be visible in all the pages next we will come back to the footer. jsx file and here we will Design the footer so to create the footer first let's create one div here we will create three columns as you can see if we come to homepage here in this figma file we have three columns left Center and right for these three column we will create three div So within this div let's add one comment here we will add the comment left section after this section after this comment we will add one div similarly copy this and paste it here and provide the name Center section similarly we will paste it again and provide the comment right section now we have three sections so first we will create the left section in the left section we have to add the logo and this paragraph text for that we will come back to the vs code editor and in this P tag and in this left section within this D we will add the image tag for the logo here let's add the assets it will import the assets from assets file so here let's add assets. logo and after this image we will add one P tag now in this P tag we will copy this text and paste it in this P tag so we have added the text this is unsupported characters so let me remove it and save the changes now the left section is ready next we'll add the structure for the center one so in this Center we have the heading and Four lii Tags so here let's add one B tag in this P tag we will add this text company after this P tag we will create one ul and in this UL we will create Li tag here we need four lii tags so I'll add lii into four in the first one we will type four so let me copy and paste it now just copy about us paste it here now just copy contact us paste it here now just copy the privacy policy and paste it in the fourth Alli tag now the structure for the center section is ready now we'll create the right section so here we have the heading text so just copy and paste it here in this P tag here we will add the text get in touch so just copy and paste it after that we will create one new tag in this UL we will create two Li so let's add Li into two now in the first one simply copy and paste it this is random phone number now let's copy this email ID and paste it so we have added the structure for all three columns after that we have to add one horizontal line and copyright text at the bottom for that after this div where we have created three sections so after closing that let's create another div here we can add the comment so let me add the comment text copyright text so in this div we will create one HR tag so just add HR now after that let's add one P tag and in this P tag we will simply copy this text and paste it here after that we will save the changes and come back to the web browser so now at the bottom we are getting the image and all these text in the footer next we will add the CSS properties to design this footer so to add the CSS property let's come back to the the vs code editor and in this div we will add the class name here we will provide medium margin X10 now in this second div we will add the class name property and here let's add Flex Flex column for a small and above a screen we will add grid then grid column then Gap then margin y then margin top and text size a small save the changes and come back to to the web browser so now you can see all contents are aligned in three columns this is the left and center and right section now we will add the CSS property for the image tag so in this image tag we will add the class name property and here we will add margin bottom five width will be 40 now save the changes come back to the web browser after that we will add the CSS properties for for this P tag so let's come back and here in this P we will add the class name property so here we will provide width full then width then text Gray then line height save the changes and come back to the web browser now this left section is looking good next we will add the CSS property for the middle section for that let's come back to the vs code editor and here we will add the class name property and let's provide text Excel font medium margin bottom after that we will add the CSS properties in this UL tag also so here we will add the class name property so let's provide Flex Flex column Gap two then text color gray save the changes now this Center section is looking good next we have to provide the CSS property in the right section for that simply copy this class name and paste it here now for this U tag also just copy this and paste it in this U tag save the changes now this right section is also looking great next we have to add the CSS properties for this bottom copyright text so let's come back to the vs code editor and in this P tag we will add the class name property and here we will provide padding text small text center now save the changes and come back to the web page now our copyright text is also looking good now we have successfully created our homepage after that we will add some custom fonts to improve the UI of our homepage so let's open the new tab and here we will search for outfit font now let's open this fonts. goole.com website and here we will click on this button get font after that click on this get embed code after that just click here on this import so simply copy this import statement and come back to the vs code editor let's open index.css file and in the first line we will paste this import statement after that here we will add the CSS properties for all the elements that will be font family and here we will Define outfit font that we have imported here after that we will save the changes and come back to the web browser so now we have updated the font in our project now our UI looks good after that we will create this all doctors pages so whenever we will click on this category it will open this doctors page with this a speciality and when we directly click on this doctor from the navigation menu then it will open this SL doctors path so when we are at the/ doctors path it will display all the doctors and when we click on any speciality from here then it will display the particular doctor with particular aspect speciality for that let's come back to the vs code editor and we will open doctors. jsx file now in this page first we will get this parameter which is a speciality so to get this parameter we will use the use pams hooks so let's come back to the doctors. jsx file we will add const curly bres in between this we will add the speciality and after that let's add use padams hook after that we will try to log this a speciality now when we open homepage now we have to add one link tag on this logo also so that when we click on this logo we will be navigated to the homepage so let's come back open nap. jsx file and here on this image tag we will add one onclick property here we will add one Arrow function where we will call the navigate function and here we will provide the path slash that is the homepage now save the changes and close the file now we will open the inspect tab then go to console and we will reload the web page now when we go to the doctor Page using these menu now you can see here we are getting the parameter if we go to another then we are getting the second parameter from the URL so this parameter is working fine now we have to show the doctor according to this parameter when we directly move to this all doctors then this parameter will be undefined then so in that case we will display all the doctors so let's create the UI first so to create the UI let me remove this console log and here we will get the all doctor's data from our context for that here we will write con curly veres doctors equal to use context and here provide the app context after that we will come to this div and here in this div we will create one P tag so let's see the design so here is the doctor space design so we have to add this text so let me copy this and and we will paste it in this P tag after this P tag we will create one div now in this div we will create one more div and in this one we will create six paragraph tag for this six menu that we have created here so here let's add P into 6 now in the first one we will copy Cy this text from here and paste it similarly we will copy this second text and paste it in the second B tag now copy the third one paste it here now copy the fourth one paste it here now copy the fifth one paste it here and we have added all six P tag now save the changes after that let's create another div and in this div we will display the content in the right side where we will display all the doctors list so to display the doctors simply add curly presses in this div we will display the doctor's card for that we will create one more State variable so let's create it we will add const filter doc then set function name is set filter doc equal to user State and initialize it as empty aray in this aray we will add the do do s if we click on any of this button then that a specialist doctor will be displayed in the right side so we will display the doctor using this filter dock array now in this curly veres we will add filter doc do map in this map method we will directly copy the UI of this card that we have already created in top doctors. jsx file so from here we will copy this do map method inner function copy till here now come back to the doctors. jsx file and in this map method we will paste the code next we have to add the doctors in this filter dock array So currently this array is empty so if we open our web page all doctors page here we are getting nothing right so we have to set the doctors according to our speciality for that here we will create one Arrow function so let's add const apply filter equal to it will be one Aro function after that here we will add the logic so here we will check if a speciality is available then we are going to set the doctor according to this data so simply write set filter Doc and in this Setter function we will add doctors do filter method after that here we will add the doc as a parameter and here we will check if doctor specialty equal to this speciality from the parameter in that case we are going to save that doctor else we will filter out the other doctors now we will add the else statement suppose here we are getting nothing in this speciality in that case here we will add the set filter Doc and here we will provide all doctor's list now we have to apply this filter whenever our doctor or a speciality gets changed for that we are going to use the use effect hook and in this one we will pass one Arrow function and here we will add the dependency array in this dependency array we will add doctors and a speciality now in this Arrow function if we write any statement that will get executed whenever any of this gets changed so here simply call the apply filter method we will save the changes and let's open the web browser so as you can see here we are getting all the doctors details that is available in our doctor's array now when we click on any of this menu like General physician now here we are getting the doctor's list who is a specialist in general physician so here we are getting only three doctors if we click on any other category here we are getting three only so these are dermatologist now our logic is working fine and filter is also working after that here we are using this navigate function so we have to create this navigate so let's add const navigate equal to use navigate and import this use navigate now whenever we click on any of the doctor then we will be redirected to the appointment page now after this in this TP we will add the class name property and here we will add width full grid grid columns Auto Gap and we will save the changes now this doctor's card is looking good after that we have to display this card in the right side and in the left side we will display these menu as you can see in this design so let's come back to the VSS code and we'll add some CSS properties so first let's add the CSS in this P tag here let's add the class name text Gray 600 after that we will add the CSS properties in this div here we will add Flex Flex column Flex row item start Gap and margin top after that we will save the changes now you can see in the left side we have these menu and in the right side we are getting the doctor's list now we will add the CSS properties for this menu so for that in this dip we will add the class name property and here we will add Flex column Gap text small then text color gray 600 after that we will save the changes after that we will add the CSS properties in these P tag so simply add the class name property now in this class name property here we are going to use the Dynamic class name so to add the dynamic class name we will add the cly bres now we will add the backtick and in this back TI we will add the class name that is width then padding left padding y then padding right then border border color rounded transition all cursor pointer now save the changes now these buttons are looking better after that here we have to add the flex after adding the flex save the changes and come back to the browser now you can see the Gap here after adding this we will come back to the vs code editor again and in these P tag we will add onclick property in this on click we will add the addo function and here we will check if our speciality is equal to for now here we will add this empty string and here we will add navigate function in this we'll add slash doctors after that here we will add the column and now we'll add the navigate function and here we will add SL doctors SL so now when we click on this first P tag it will check if the speciality is equal to this one General physician so here we'll add the general physician so let me copy the exact text copy and past it in this single code so it is checking if the speciality is General physician in that case whenever we will click on this one it will navigate us to doctors and we will display all the doctors and if it is not equal then we will navigate us to do/ General physician speciality so let's add SL do/ General physician that will be our speciality so let's paste it similarly we will copy this second one we will add it here if it is true it will redirect to the doctors and if it is false then it will redirect us to do/ this speciality now let me copy the third one paste it here then paste it in this navigate now copy the next one paste it in this check check then paste it in this navigate now let's copy the next one paste it here in this turn operator then paste it here in this navigate now copy the last one paste it here and paste it in this navigate after that we will save the changes and come back to the web browser now let's check this logic when we click on this General physician we are navigated to the general physician and here we are getting general physicians list and if I click again then it will display all the doctors because we have added the turn operator here if it is already selected then it will navigate to/ doctors so it will get deselected now this menu is working perfectly fine after that we will come to this class name property and here in all these class name we are going to use one turn operator using the template literal so just add dollars and curly brushes and here we will add the speciality here we will check if it is equal to and for now we'll add the empty string after that question mark we will add this empty string after that let's add the another string and here let's add BG Indigo 50 BG Indigo 100 then add text black after this string we will add colum and one empty string now as you can see here we are using this template literal and here we have added it in all the menu here in this string we have to provide the menu text which is the general physician for first one then if it is same then it will display this background color and text in black color and if it is not the general physician in that case it will add this empty string only so let me copy this and paste it here similarly we will add the text in other menu copy and paste it here copy and paste it in this turn operator now just copy and paste we will do it for all the menu now save the changes and come back back to the web browser as you can see here we have selected the general physician so the color is changed if I click again then it will be deselected and if we click again it is selected so this logic is working fine similarly if we click on another one now we are getting the doctors for this speciality so now this logic is perfectly working now this all doctor Page is ready and at the bottom we have this footer also after creating this we will Design the appointment page as you can see here this is the appointment page whenever we will click on any doctor like this one so here we are getting this doctor's ID by using this ID we will get the doctor's data and display that on the appointment page and on this page we are going to display the booking slot option where we will display the next 7 Days right and we will display the timing then we will create one book and appointment button and we will also display the related doctors suppose we have opened the general physician in that case in this related section it will display all the general physicians so to create this page we will come back to the vs code editor and after that let's come back to the appointment. jsx file in this page first we have to get the doctor's ID so let's come back to the web page and if I click on any doctor so in this URL you can see we have the appointment SL doctor ID so we have to get this doctor ID and store this in a variable so for that but before this return statement simply add const clys we will add doc ID equal to use PMS now after this here we will get the doctor's data from the context for that let's add const cly addes doctors equal to use context here we have to provide app context now here we have the doctor ID and all doctors data now we have to find the particular doctor from this areay using this doc ID for that we will create one Arrow function so let's add const fetch doc info equal to and and it will be one async Arrow function so we will create this Arrow function now within this function we will create one variable with the name doctor info so let's add doc info equal to and here we are going to use this doctor's array and in this one we will use the find method here we will pass the parameter that is individual doctor and after that here we will check if the doctor doore ID is equal to Doc ID in that case that doctor data will be stored in this variable next we have to create one state variable and in that state variable we will save this doctor information so to create the state variable simply add con let's add the name doc info now the seter function name is set doc info and it will be use a state and initialize it with null now after finding the doctor we will set the doctor info so simply provide doc info next we have to run this function whenever our page gets load for that here we will add use effect in this one we will pass one Aro function and after this Arrow function here we will add the dependency array now in this dependency are we will add doctor's are and Doc ID so any of these two data gets changed then this function will get executed so in that case we will call the F doc info function after doing this we will get the doctor information now let's try to console log it here so here let's add doc info now let's save the file and come back to the appointment page now we will right click and inspect then go to console and here we are getting one object and in this one we have individual doctor information here we have the ID do2 that you can see in this URL also now if we open any other doctor like this one so here we are getting the another object where we have the doctor about address degree experience fees image name a speciality and do ID now we have to use this data to display the doctor profile so let's come back to the vs code editor and here in this div we will add one comment so the comment text is Doctor details after this comment we will create one do in this div we will create one more div in this one we will add one image tag in this image tag we have to display the doctor's image so to display the doctor's image we will use this doc info data where we have this image property so in this SRC simply provide doc info. image now if I save the changes and open the web browser here we are getting the doctor image now after this return statement we will check if do info is available in that case only we will display this div for that here we will add dror info and this operator after this div here in the right side we have to display the doctor's name then degree speciality experience about text and fee so to display that here we will create one div and in this div we will display the doctor's details like name degree and experience for that here we will add the comment here we will write doc info like name degree and experience so after this comment we will create one P tag and in this one we will display the doctor's name so to display the doctor's name just add the clys and we are going to use doc info do name name after that here we are getting the name after this name we have to display this check mark that is the verified icon for that simply add the image tag and in this SRC we will add assets dot verified icon save the changes here we are getting this verified icon after this P tag let me make it clear by moving in multiple lines so after this P tag here we will create one div and within this div we will display the doctor's degree and a speciality so here let's add one P tag we will use the curly presses and in this one we will add doc info. degree after that here we will add the space Dash cly presses we will add doc info dot a speciality if I save the changes and come back to the web browser here we are getting this degree and this General physician after this P tag here we will create one button tag to display the doctor's experience as you can see here we have this button so in this button tag we will add the curlys and we will provide doc info. experience we will save the changes here we are getting the experience of 4 year that is saved in this data you can see the experience 4 year after this div here we will add one comment here we will display do about here we are going to display the about text so let's add one div in this div let's add the P tag and in this P tag we will add one text that is about then we are going to add one image tag where we will display assets doino icon after this paragraph tag we will create one more P tag in this one we will display the doctor's about text so just add doc info do about now let's move it in the new line so it looks perfect now save the changes and come back to the web browser so here we have this topmost section for our web page next we will add the CSS properties for this elements so let's come back to the vs code and here in this div let's add the class name property and here let's provide Flex Flex column Flex row and GAP four after that we will save the changes and come back to the web browser so here we are getting this image in the left side and these text in the right side and in the right side we have the name degree about text after that we will add the CSS properties in this image tag for that here let's add the class name property and we will provide background primary width full Max width then border radius save the changes and come back to the web browser after that we will add the CSS properties in this div so here let's add the class name property here we will provide Flex one border border gray border radius padding background color margin now save the changes and come back to the web browser now you can see this image size is looking perfect and in the right side we have this box next we will add the CSS properties for these text and icons for that come back to the vs code and in this P tag let's add the class name property and provide Flex item Center Gap two text size font weight and text color save the changes so now this name is looking good and beside this name we have this verified icon so now let's add the CSS property for this icon so here let's add the class name property and here simply provide width five now this icon is small after adding this we will add the CSS properties in this div so here let's add the class name property we will provide Flex item Center Gap two text small margin top text Gray 600 after this we will add the CSS properties on this button so let's add the class name property here we will provide padding y padding X Border text size and B radius so let's save the changes and come back to the web browser here we are getting this text and this button after that we will add the CSS properties for this about section so we will come to this P tag here we will add the class name property so here let's provide Flex item Center Gap one text small font medium text color gray 900 and margin top after that we will add the CSS property in this P tag also so let's add the class name property and here we will provide text a small text color gray Max width and margin top after that we will save the changes and we will come back to the web browser so after creating this about section we have to display the appointment fee so after this div tag here we will create one paragraph tag and within this P tag we will add appointment fee so let me copy it from here after that here we have to add one a span tag and in this span tag we have to display the doctor fee so here let's add doctor info dot fees save the changes here we are getting 50 as you can see here we have this currency symbol right so we have to display this currency symbol at various places on our website so for that we are going to create one variable in app context so let's add con currency symbol equal to and we will write one string and in this one just add dollar sign after that we have to add this currency symbol in this value object now we can access this currency symbol in any component so let me copy this currency symbol from here here now let's come back to the appointment. jsx file and here while destructuring this doctor's data here we will destructure this currency symbol also after adding this I scroll down and here in this SP span we will add one more curly reses and just provide this currency symbol so now you can see appointment fee $50 so now if you need to change this currency symbol you have to change it in the context file and from all the pages the currency symbol will be updated so that is the benefit of creating this variable in this context file after that we will add the CSS properties for this P tag so in this P tag let's add the class name property and we will provide text Gray 500 font medium Mar in top after that we will add the class name in this as tag and here we will provide text Gray 600 now save the changes and come back to the web browser so now this appointment fee is looking good now we have created this top part of this appointment page next we have to create this booking slot UI so to create this we have to get the data of the 7 days from current date and time from the current time so to get that data first we will create some State variable we will store the data in that state variable after that we'll create the function to calculate the data so let's create one state variable with the name doctors's slot so just add const doc slots seter function name will be set doc slots equal to user State and here we will initialize it as one empty array after that we will create one more State variable with the name slot index so just create const slot index set a function name will be set slot index equal to and here we will add use effect and initialize it with numerical value zero after that let's create one more State variable so just add con the name will be slot time after that we will add the setter function set slot time here we will use the user state and initialize it with empty string so here we have created three state variable where we are going to store this slot data that we will calculate using the function so to calculate the slots we will create one Aro function with the name get available slot so here let's add const get available slots equal to and it will be one asnc Aro function so just add asnc Aro function so whenever this doc info gets changes then also we will execute this function so for that let's remove this console log from here and after that here we will create one more use effect in this use effect we will add one Arrow function here we will add the dependency at a in this dep dependency add a we have to add doc info so whenever the dock info gets updated or changed then our function will be executed so simply call get available slots now in this function We'll add logic to calculate the available Slots of the particular doctor so in the function first we have to clear the previous slots so simply write set doctor slots and and set it with empty array after that here we will add one comment and here we will add the comment text getting current date let's create one variable let today equal to new date and here we are using this date Constructor after that we will get the date object in this today variable by using this variable we will calculate 7 Day from today here we have to run a for Loop so let's write for let I equal to 0 we will run it for seven times so just add I less than 7 and I ++ now in this for Loop we will set the date using this index so here let's add the comment getting date with index here we will create one variable let current date is equal to new date and here we will add today so here we will get the current date today and after that according to this index we will change the date so let's add current date dot set date and here we are going to increase the date by this index suppose we will get the first value Zer it means today + 0 will be today only and if we get index one then today's date + one so let's add today dot get date and here we will increase so let's add plus I so by doing this we will get the future 7 days from now after that here we will add one more comment here let's add the comment which is settings end time of the date with index here we will Define the end time so suppose we will Define the end time 6 p.m. so in this slots we will get the slots till 6 p.m. for that let's add variable let end time equal to we will create one new date after that we will add end time do set date here also we will provide today dot get date + 1 now for the different date we will get the different end time after that here we will Define the end time do set hours here we will provide the hour which is 21 after that we will add 30 for hours minute and seconds after that let's add one more comment that is setting hours here we will check if today do get date is equal to current date dot get date method in that case we are in the current date so here we are going to set the hours from current hour suppose the current time is like 11:00 then for the today's slot we will not display the 8:00 a.m. we will directly start with 12:00 p.m. if the time is 1: p.m. then the slot will start from 2: p.m. so simply add current date. set hours and here we will add current date. get hours if it is greater than 10 then our current date and hours will get started from current hour + one else we are going to use 10 for tomorrow if we check it should start with the 10 a.m and if we check the slot for today we will get from current time plus 1 hour after that we will set the minutes also so to set the minutes here simply add current date do set minutes here we will use the operator get minutes if it is greater than 30 then we will set 30 lse Zero by doing this we will get the 30 minute interval after that we will add one elsea statement and here if the date is not today it means we are in the future date and here we will start the hours from 10:00 for that simply dat current date dot set hours 10 for minute also we will add current date dot set minutes equal to zero now after this else statement here we will add one while loop so let's add while and in this while loop we will check if our current date is less than end time that we have defined 9:00 in that case here we are going to create slot in every 30 minute interval so here we'll see 8:00 8:30 9 9:30 that's how we are going to create the slot for that here in this vile statement let's add let in this variable we will store the time as a formatted time that means something like this 8:00 0 minute and a.m. p.m. for that here we will add current date do to local time string here we'll add the array after that we'll Define our two digit minutes 2 digit after doing this we will get the time from here and current date now now we have to store this data in a variable so here we will create one variable let time slots equal to an empty aray and in this array we will push the time with date so let's add the comment and here we'll add add slot to add a now here we we are going to use the time slots array do push method and in this one we will add the object where we will Define the date time that will be new date object here we are going to use date Constructor to create a date object here we will provide current date after that we have to save the time also so just add time and here we will add formated time that we have created here after saving the time and date we will increment the time by 30 minute so let's add the commment that will be increment current time by 30 minute after that here we have to increase the time by 30 minutes so just add current date do set minutes and from here we will get the current date do get minutes and increase it by 30 when the while loop gets ended in that case we will save this time slots so let's add set doctor slots and here we will pass the previous slots data and here we will end the data in previous areay so just add the add a and a spread operator then add previous and in this one we will add the time slots now our function is ready to create the slots now let's see how our slots data get structured so to view this slots data here simply add one use effect and here we will add the dependency aray here we will add the console log where we will console log doc slots we will run this function whenever our doc slots gets changed we will come back to the web browser we will reload this web page we will click on inspect then we will open console here we have three arays let me open the last one here we are getting only data for two days and remaining datas are empty so maybe we have made some mistake in the code so let me inspect this so here when we are increasing the date here we have added one instead of I so we have to add I let's save the changes and come back to the web browser now we will reload the web page now let's open the last areay as you can see here we have seven areay for 7 days and in the first one here we have the 15 object so each object has the date and the time so the time is 1:30 so the current time is 12:44 so the first slot will be 130 second will be 2 p.m. and after that 2:30 then 300 p.m. so for the first date we are getting 15 slots and for the second day we are getting 22 slots that start from 10:00 similarly in every are we have 22 slots each day so now we have to display these data as booking slots on this web page so that user can select it and book the appointment so to do that we will come back to the vs code editor and here first we will create one aray so after that let's add one add with the name days of week and in this one we will store days in this format Sunday Monday so here we have created this aray by using this aray we will display the date in this format like Monday Tuesday and date also to do that let's come here before this last closing div we will add a space and here we will add curly bres and we will add the comment let's add the comment booking slots after that here we will create one div and and in this dip we will add the class name property here we will provide margin left for different screen sizes so we will add this margin left and padding left then margin top font weight text color we will save the changes so we have added the CSS properties so that we will get these booking slots data in the right column after that in this div we will add one P tag and in this P tag we will write this booking slots so let's copy and paste it here in this P tag after this P tag we will create one div tag and in this div tag we will display the date and day so here in this div we will use the curly brushes we will check if Dr slots. length is not equal to zero then only we will display this format for that simply add and operator and here we will add doc slots do map method and here we will pass the arrow function here let's add this bracket and here in this parameter we will get the individual item and index number here we will return one div and in this div we will add the key property that will be index number after that here we will add 2 P tag so let's add P into two now in this paragraph tag we will add the curly bres here we will check if item 0 is available then we will display days of week and here we will provide date time dok day after that we'll add the CES and here we will check if item Z is available in that case here we will display item zero dot date time dot get date now we will be able to use this get date and get day property because in this data we have saved the date object as you can see here in this date time here we have this date object in which we have the Prototype methods like get month get time get hours so we will be able to use the get methods on it if we save the changes and come back to the web browser so here we are getting Tuesday so so we are getting this get day that provide us number and by using this number we will access the element from this aray that we have created here that's why here we are getting Tuesday wednessday Thursday like that after that we will add the CSS properties in this section for that first in this div we will add the class name property and here we will provide Flex Gap three item Center width full overflow X scroll and margin top for after this in this div we will add class name property here we are going to use the dynamic class name so let's add C Lies We will use the template literal so let's add backtick here we will add text Center padding y Min width rounded full cursor pointer now here we will add the dollar sign curly bres and here we will check if our slot index is equal to the index in that case we are going to use BG primary text white else we will add the column here we will provide a string and in this a string let's provide border border color gray so here after adding this come back to the web page now you can see our index is by default zero so by default the current date will be the selected date for the booking so here we have added the logic so if the index is selected then we will provide the background primary and text white to that index now here let's add one onclick property so when we click on these buttons then we will change the index so to change the index simply add add a function and we will call set slot index and here we will simply provide this index now let's click on this third one then it will get selected then the slot index is getting changed after that we have to display the booking time also as you can see in this object we have the date and time also so now we have to display the time of the selected date so let's come back and after this div we will create one more div and in this div we will add the curly bres and here we will check if our do slots. length is available in that case we will use the doc slots and here we will provide the index number slot index so that we can get the time of that date after that we'll add the map method here we will pass one AR function here we will use this bracket and in this parameter we will get item and index here we will return one P tag so simply add one P tag here we will add the key property that will be index after that here we will add the curly Braes we will provide item do time dot to lowercase so it will be converted to the lower case now if I save the changes and come back to the web browser here we can see the slots time it is available till 9:00 p.m. if we click on this current date then the current time is 1 p.m. that's why here we are getting the slots from 2 p.m now let's add the CSS properties on this one so to add the CSS properties in this P tag we will add the class name and let's use the dynamic class name so that we can display the selection so in this curly bres we will add the back Tex in this one we will add the class name text small font light Flex string zero padding border radius cursor pointer we will see the changes after that we will add the CSS property in this div so here let's add the class name property here we will provide Flex item Center Gap three width full overflow x a scroll margin top we will save the changes so now all the times are displayed in single row we can also scroll this list by using the scroll wheel and shift and we can also use the touchpad guesture to scroll this after that we will add the dynamic class name so that when we select here it will be highlighted like this to add the effect we will come back to the vs code editor and in this paragraph tag we will add dollar sign curly Braes and let's add the turn operator and in this one we'll add item do time is equal to slot time if it is true in that case we will set the background primary and text white else we will add text color gray border and Border color after that we will save the changes now you can see we have this border for all the time slots next we will add the on click property so that we can this time so let's add on click and here we will pass one Aro function and here let's call the set slot time in this one we will set the time using item do time next save the changes and come back to the web page now let's click on the first time so it will get selected so you can see when we change the date and select any time this time will be selected so this is how we can create this booking slot option after that we have to create this book and appointment button so let's come back to the vs code editor and after this div we will create one button tag in this button tag we have to type the text book and appointment so let me copy and paste it here after that we will add the CSS properties so let's add the class name in this button we will add the class name property so let's provide background primary text white text a small font weight light then padding then border radius then margin we will save the changes so now you can see this appointment button is looking good after that let's come back to the design and here we have to create this related doctor section so to create this section first we have to create a new component so in this components folder let's create a new file and write the file name related doctors. jsx here we will use our a fce we will save the changes now let's come back to the appointment page and after this div we will add the comment so the comment text is list testing related doctors after this comment here we have to mount our related doctor's component and in this one we will pass the props so the first props will be Doc ID so let's pass the doc ID now the second props will be a speciality so let's add the speciality cly bres and provide the doc info dot speciality after that save the changes and let's come back to the related doctors. jsx file in this file first we will get all the doctors from the context file so just add const Cly addesses doctors equal to use context and provide the app context so in this file we will get the all the doctors from the context file after that we will create one state variable where we will store the doctor's data for that let's add const variable name is r doc which is related doctor then set function name will be set ra doc set Del docs equal to user State and initialize it with empty aray after that here we will destructure the props that we have passed here in the appointment page so we will copy this props and paste it here so we have D structured both props Now using this props we will filter the related doctors and store them in this rail dock for that we are going to use the use effect hook so just add use effect inside this we will pass one addo function and here we will add the dependency areay in this dependency areay we will add doctors and this props now any one of three will get changed then this function will get executed in that case we will first check if doctors dot length is greater than zero and we have the speciality also in that case here we will create one variable with the name doctor's data it will be one temporary variable that we are creting here so here we are going to use doctor's aray and here we can use the filter method and here we will pass the individual doctor and here we will check if doctor do a specialty is equal to this speciality that we are getting from the props then we are going to store that doctor in this variable here we are also getting the doctor ID suppose we open this doctor that is General physician now at the bottom we have to display the doctors accepting this one so we have to display only other two doctors because we have already opened the doctor's profile for that here we'll add one more condition that is Doc doore ID is not equal to Doc ID in that case the current doctor will be removed from the doctor's data data now we have this doctor's data next we have to set this doctor's data in this state variable for that simply add set related doctors and provide Doctors [Music] Data now we have this related doctor state which is an aray now we can use this data to show the related doctors as you can see in this design so this design and this top doctor's design is almost same so we are going to copy this design so let me come back and we will open top doctors and from here let's copy this complete D after that let's open this delet doctors. jsx file and paste it here after that here instead of this doctors do slice we are going to use related doctor so just add real doc do slice here we have to display only five doctors right maximum five doctors will be displayed so just add 0 comma 5 after that here we have to use the navigate function so let's create this navigate function so just add const navigate equal to use navigate now save this file and come back to the web browser now we are at this doctors's page and here we are getting other two related doctors if I click here it will change the doctor's profile here so if I click on another one that doctor will be displayed on the top so this logic is working fine but here we have to add a scroll two property so that when we click here it will a scroll the web page to the top for that in this related doctors we have this on click so here let's add curly bres so we have added this inside this curly bres then add the semicolon then add a scroll scoll two and in this scroll to function just provide 0 comma 0 after that we will save the changes and come back to the web page now if I click on any doctor so now it will navigate us to the top part of this appointment page so in this Top Doctors also we will add this a scroll to for that simply copy this onclick property from here and let's open top doctors. jsx file and replace this onclick that's it so in this one now we have this SC scroll to property now if I come to homepage and click on this doctor then it will scroll the web page to the top part of the website now this logic is working fine now we have created the doctor's page homepage and the appointment page next we have to create the about and contact page so first we are going to create the about page for that let's come back to the about. jsx file in this div let's add another div here we will add one P tag and here let's write about then we will use one as span tag and in this one just add the text us after this div let me come back to the figma design and go to About Us section so here you can see this About Us section that we have added now we have to create one div and where we will add the image in the left side and this text in the right side for that here simply add div tag and in this div tag let's add the image tag for the left side and here we are going to use assets do about image after this image let's create one div that is for the right side and in the right side we will add these text so here let's create three P tag so just add P into three this is the first paragraph tag and this is the third one and between these paragraph tag here we will add this B tag so let's add the B tag before the third P now let me copy the text from here so just copy the first paragraph text and paste it here so we have added the text in the first P now let me copy the second one just copy and paste it here now we will copy this text our vision just copy it in this B tag now let's copy the last paragraph text and paste it in this P now save the changes and come back to the web page so here we are getting creting this about us text then image and other description now we will add the CSS properties for this section so first we will add the class name property in this div and here let's add text Center text to excel padding top text color gray after that in this aspan tag let's add the class name and we will provide text Gray 700 then we will change the font weight save the changes so you can see this about us text is looking good and it is in the center after that we will add the CSS property for this section where we have the image and text so here in this div let's add the class name and let's provide margin Flex Flex call then Flex row then gap of 12 we will save the changes and come back to the web browser now you can see the image and text are aligned side by side in the left side we have the image and in the right side we have the text next let's add the CSS property for the image which is displayed in the left side so in this image let's add add the class name and provide width full Max width 360 pixel save the changes and come back to the web browser so this image is looking good next we have to provide the CSS properties in the right section so in this div let's add the class name property and here we will provide Flex Flex column justify Center Gap six then width 2x4 text size and text color after that in this B tag let's add the class name and here let's provide text Gray 800 so it will look good now save the changes and you can see this description in the right side is also looking good now we have completed this section now we will create this why choose a section where we have three blocks so here we have the title description in each block first we'll create this text so let me copy this from here and and after this div let's create another div and in this one we will create one P tag and let's add this text here we will write the text in uppercase so let's add y choose us after this y let's add the span tag and between this span tag we will move this text now let's add the class name property here and let's provide text Excel and margin y4 after that let's add this CSS properties in this aspan so we will provide text Gray 700 font semi bold after that let's come back to the web page so here you can see this text why choose us it looks good next we have to create this column so let's come back to the vs code and here after this div let's create another div and in this one we will create three columns so let's add div into three in the first one we will create one B tag and one P tag similarly let's copy this two line and paste it here after that let's right click and select format document now let's copy this title from here and paste it in the first B tag now let's copy the title from the second column and paste it here now copy the title from the third column and paste it in this last B tag now let's copy the description for the First Column and we will paste it in the first P tag now we will copy the second description paste it here and copy the last description and paste it here after adding this save the changes and come back to the web browser so here we are getting this title and description next we have to add the CSS properties so that it will be aligned side by side and we will get the border so first let's add the CSS property in this div so we will add the class name we will add Flex Flex column Flex row and margin bottom we will save this file so here we are getting three columns left Center and right next we will add the CSS properties for each individual column so in each div will add class name so let's add the class name in the first one and here let's provide border padding for different sizes then Flex Flex column Gap and text size we will add some hover effect also so just add hover that is background primary then text white then we'll add the transition all dation 300 milliseconds text color gray and cursor pointer we will save the changes so you can see this First Column is looking good and this hover effect is also looking good now just copy the class name from the first one and paste it in the second div and in the third div after that save the changes and come back to the web browser so now you can can see these columns are looking good and this hover effect is also working on all three column so now we have completed this about us page as you can see here we have the footer also on this aboutus page next we will create this contact page so to create this page let's come back to the vs code editor and we will open contact. jsx file in this file we will create the contact page so let's create the figma design of the contact page so this will be our contact page where we will add the title and in the left side we will add the image and in the right side we will display these details so first we need this text so let me just copy from here and let's come to contact page and within this div we will create one div and let's add one P tag just paste this text contact us and here let's add the asan tag and within this asan tag we will move this us now we will add the class name and and let's provide text Center text to excel padding text Gray 500 now we will add the class name in this aspan tag so here let's add text Gray 700 and font semi bold we will save the changes and come back to the web browser so on this contact page you can see we are getting this title after that we have to create this section where we will create two column in the left side we will add the image and in the right side we will add the text so let's create one div and in this div we will add the image tag for the left side so let's add the assets dot contact image and after this image tag we will create one div for the right side and in this div we will add five P tag so just add P into five after this P tag we need the button also as you can see in this design so here we will add one button tag next we have to copy the text from here so let's copy the first text and paste it in the first P tag now let's copy this text we will copy this complete address and paste it in this second P tag now let's move this text in same line and here we will add the BR tag to add a line break after that let's copy this dummy telephone number paste it in this P tag here also we will add the BR tag after this let's copy this email ID and paste it here now let me copy the text from here and paste it in this P tag now just copy this a small description and paste it in this next P tag now let's copy the button text and paste it here within this button tag save the changes and come back to the web browser so here we are getting this image and after that we have all these description next we will provide the CSS properties for this section so first in this div let's add the class name and here we will provide margin y flex Flex column justify Center Flex row Gap 10 margin bottom and text size a small we will save the changes now you can see this image and this info side by side next we will add the CSS properties for this image so here in this image tag we will add the class name we will provide width full then Max width of 360 pixel save the changes so now you can see the size for this image is perfect now we will add the CSS properties for the right section so let's come back to the BS code editor and here in this div we will add the class name property and here let's provide Flex Flex column justify center items start Gap six we will save the changes so here we have very good alignment now we will add the CSS properties in these P tag so first in this P tag we will add the class name and let's provide font semi bold text large text color gray 600 after that in the both P tag we will add the class name property and here we will provide text Gray 500 now in this P tag we will add the class name property and here let's provide font semi bold text large text Gray 600 now let's copy the class name from here and in this P tag we will paste this now save the changes and come back to the web browser so these title and these text are looking good next we have to add the CSS for this button tag so let me come back and in this button tag we will add class name so let's provide the classes border border black padding X and padding y then text size we will save the changes so here we have this button next we will add the hover effect on this button tag so that when we hover on this button it will display some effect so let me come back to the vs code editor and after this class name here let's add hover background black hover text white transition all and provide the duration 500 milliseconds save the changes now when we hover on this button you can see this effect the background is getting changed so now we have created the homepage all doctors's page about page and contact page next we are going to create the login page so so to create the login page first we have to click on this log out button so here we will get this create account button and when we will click on this create account it will open SL login path where we will Mount the login form so after that let's open login. jsx file and let's open the login page design in figma so this is our design for the login page that is convertible so that when we click on this link it will open the login form and when we click on the create account it will open this create account form so to create this design we will open login. jsx file and here first we will create some State variables so the first state variable name will be a state that will manage the login state set function name will be set a state equal to user State and we will initialize this variable as a string where we will add text called sign up after that we will create three estate variables to store the values of these input field so the first variable name will be email Setter function name will be set email equal to user State and initialize it with empty string now let's create a copy of it and provide the variable name password Setter function name will be set password now let's create one more copy and here we will provide the name then set function name will be set name so here we have created these three state variables after that let me remove this div from here and here we will add form tag for this form tag we will create one onsubmit Handler function so just add con onsubmit Handler equal to we will create this Arrow function so it will be one async Arrow function so just add the async keyword now in this parameter we will get the event from this form so just add the event now here we are going to use event do prevent default so when we are using this event. prevent default then whenever we will submit the form it will not reload the web page next we will start designing this UI so first we have to create this container for that in this form tag let's add the class name property so just provide Min height Flex item Center after that in this form tag in this form we will create one div tag and in this div let's add one p and in this P tag just add the curly bres and here we are going to use the Turner operator so we will check if our state is equal to this ST which is sign up so let me copy it from here so if this statement is true then we add the sign up a state in that case it will display the text create account so let me copy this text and paste it here if the condition is false it means the state is login so in that case we will add the column and here we will display the text login now let's check this functionality if we come to the web page here we have this message create account right and if we change the state like something else we will add login now you can see the text login so this logic is working fine we will keep it as sign up after this P tag we will create one more P tag and here we will copy this text from here and and paste it in this P tag now let me remove the sign up text from here and here we will also and here also we will use this turn operator so let me copy it and paste it here here we will check if our state is signed up in that case we are going to add the text sign up and if the state is login then we will add the text login to book an appointment we have to add this cly bres if I save the changes so here we are getting the text please sign up to book appointment and when we are at the login state it will display please sign in to book appointment after that here we have to create these three input field so to create this input field after this ptag we will create one div and in this one we will add one P tag and in this P tag we will add this text which is full name so let me copy it from here and paste it here after this P we will add one input field so input type will be text and here we will link our state so that whenever we will update the input field then it will update the state variable so first let's add the on change property and in this one we will pass one Aro function and here in this Aro function we will get the event e and here we will call the set name here we will provide e. target. value after that here we will add the value property and in this one we will provide the name state so whenever we will change the input field that value will get stored in this estate variable after that let me copy this div from here and paste it two more times after that let me copy the email from here we will paste it here then copy the text called password and paste it in the third piece this input type will be email and the last input type will be password after that in all three input field we have to add the attribute required now let's save the changes so here we are getting these input field after that here we have to create create one button so after this div let's create one button tag and here we are going to use the Turner operator that we have created here so let me copy this turn operator and with this button tag we will add this so when the state is sign up in the button it will create create account and when the state is loging then it will display the text called login we will save the changes so here we are getting this message create account next we'll add the CSS properties so it will look something like this so first in this div we will add the class name and let's provide Flex Flex column Gap margin Auto item system start padding minimum width we will add the minimum width for different screen size then we will add the Border rounded Excel text color text size then Shadow save the changes and come back to the web browser so now you can see this container with border and Shadow after that we will add the CSS property in this P tag so just add the class name let's provide text 2 XEL font semi bold save the changes so this title is looking good called create account next we will add the CSS properties for this div so let's add the class name that is width full now just copy it from here and paste it in the second and third div save the changes after adding this we have to modify this on change and value property for each input field so in the second one we will use set email and here we will provide email State now in the third one we will use set password and in the value we will provide password now in this first input field we will add the class name we will provide border border color border radius width padding and margin and we will copy this class name from here and paste it in the second input field and third input field save the changes and we will come back to the web browser so now you can see these input fields are looking good after that we have to add the CSS for this button so in this button tag we will add the class name and let's provide background primary text white width full padding y then border radius and text size save the changes and come back to the web browser so here we have this button after this button here we are currently at the sign up state so after this button we will create this text so user can change the sign up form to the login form so simply copy this text from here and we will come back to the vs code editor and after this button tag here let's add Turner operator we will check if our state is equal to sign up in that case here we will add one P tag and we will paste this text that we have just copied from the figma design now we'll add the column and here also we will add one P tag and in this P tag we will add add the text create a new account after that just add click here so when the state is signed up then we will get the first message and when we are at the login State then we will see the second message that is create a new account click here now we will add the aspan tag here and within this aspan tag let's move this text and Here Also let's add the span tag and move this text within this span now save the changes so here we are getting the message already have an account login here and after that we will add the CSS properties for this P tag so first in this asan tag let's add class name here we will add text primary after that we will add the underline and cursor pointer now save the changes so here you can see we are getting the cursor pointer but when we click on this link nothing will happen so we have to add the logic so that when we click on this link then the estate will get changed for that in this asan tag let's add the onclick property and here we will pass one Arrow function and here we will call set a state function in which we will add one string so in the first one where the text is already have an account we will add the Tex login and in the second one we will add the text sign up now save the changes and come back to the web browser now when we click on this then it becomes login and when we click again then we are getting this create account option now here we have this name input field that that is not required in this login form so here after this P tag we will add the turn operator so just add the curly braces and here we will check if our state is equal to sign up in that case only we have to display this div so let's move it from here and here we will add this operator and just paste this div let's format the document save the changes now we at the sign up a state and when we click on this login here now you can see we have the email and password field to login on this web page the name field has been removed now this login page is ready till now we have created the homepage doctor's page about page contact page and login page Let me refresh this website so we will get this profile my appointments and log out option now we will navigate to my profile section and here we will create the my profile page so let's open the figma design so this is the my profile page design so we have to create this my profile design where we will add the two buttons so the first button will be edit so when we click on this button then these Fields will be changed into the editable field so we can easily update our profile we can update the address phone number gender and date of birth then we'll click on the save info so it will save the changes so to create this page we will come back to the vs code editor and we will open my profile. jsx file so in this page first we will create one state variable where the name will be user data Setter function name will be set user data equal to and here we are going to use the use State hook initialize it with one object here we will add the name property in this name property we will will paste this name so let me copy the name from the design file and paste it here then we will add the comma and we need the image property and this image property will be assets dot profile pick after that we need the email property here we will add one email ID so let me copy this this is one dummy email ID after that let's add the phone number so let's create this phone property and copy this dummy phone number from here and paste it here after that we have to create the address so let me copy the address text here we have two lines for this address so let let's add address and it will be one object where we will add the line one and in the line one we will add first line of address then we'll add the line two property so we have to copy the first line and paste it here now just copy the second line and paste it here after adding this property we will create the gender property here we will add maale after this gender property we will add date of worth property and here let's add wor date so here we have created the object where we have stored the user data now using this user data we will display the information on this my profile page so let's come back to the vs code editor and here in this div we will create one image tag in this image tag we will display the users's image for that let's add user data dot image property we will save the changes so here we are getting this image after that we have to display this name so after this image tag let's display the username but before displaying the username here we will create one more State variable with the name is edit so just add const is edit set function name will be set is edit equal to user State and initialize it with Boolean data false after this image tag here we have to check so just add the craes and we'll add the turn operator if is edit is true it means we have to edit this name in that case we will provide one input field and suppose if the is edit is false then we'll add the column and we will add one P tag where we will display the user's name so just add user data do name property now let's save the changes so here we are getting this name now if I change this to true now here we will get this input field now in in this input field we will add the onchange property in this onchange property we will pass the event and this Aro function and here we will call set user data then provide the previous data by using this previous data we will modify the name property so whenever we will change the input field then it will update the name prop property so let's use the spread operator so let's add the bracket and craes then triple do previous and in that one we will change the name property to e. target. value after adding the on change property here we will add the value property here let's add the user data do name now save the changes so here you can see we are at this input field and here we have this value right now if I change the status false then we will get the simple paragraph text that is not editable so in this design when we'll complete the design in this edit button we will add the functionality so that when we click here the estate will get updated and we will be able to update the users email phone number address gender and birth date for now let's make it false after this let's add the HR tag after this HR let's create one div in this div we will add one P tag in this P tag we will add this text contact info so let me copy it from here and paste it here here after this paragraph tag we will add one more div and in this div we will display the users email so in this div let's add the P tag and here let's add the text email ID then paste it here in this P tag after that let's add one more P tag and here we will use the curly addes and here we will display user data. email we will save the changes so here we are getting the email ID and this email ID after this P tag here we will add one more P tag and in this paragraph tag we will add this text which is phone so we will paste it here after this B tag here we will will copy this and paste it here here we will add the user data do phone and here we will update phone property after that in this P tag let's add user data. phone now let's format this file and save the changes so now here we are getting phone and this phone number and when we will enable the edit true then this phone number field will be editable because it will be converted in the input field after that here let's add one more P tag here we will add this text which is address so just paste it here after this P tag let's add the curly Braes and here also we will check if is it it is true in that case we will add one P tag and if it is false then also we will add the P tag in the first P tag we will add two input Fields so let's add input into two in between these input field we will add one BR tag similarly in this paragraph tag also we will add curly bres and here we will provide user data do address doline one now let's copy it and then add the BR tag and paste it again and we will update line two now if we come to the web page here we are getting this address and this address value in two lines now if we make it editable then we'll get two input Fields so we have to add the logic in this input field so that we can update the address using this input field so here let's add the onchange property here we will pass the event and we will add the user data then provide the previous data then we will add the spr spread operator previous data then add the address then here we will use previous do address and in this one we will update line one e. target. value so here we have used the nested spread operator where we are updating the object that is stored inside the object after that here we will add the value property where we will add user data do address do line one similarly we will copy this on change and this value property from here and we will paste it in the second input field here we have to update this line two and here also line two now after this div we will create one more div and here we will add one P tag here we are going to display this basic information so let me copy the text and paste it here after this P tag we will create one div and here we will add one P tag where we will display this gender so just copy it from here and paste it here after that we will copy this tary operator and just paste it here here we are not going to add the input field instead of the input field we will use the select tag so just add select from here we can remove the ID and name property and here we will create two option tag so in the first option tag let's add mail in both value and this option tag text now in the second one we will add female after that in the select tag let's add the onchange property so that whenever we will change this data it will update the object for that simply add the onchange property here we will pass the Aro function and event and here we will call set user data in this one we will pass the previous data and here we will use a spread operator so we'll add the triple do previous and in this one we will update the gender property and here let's provide e. target. value Val after this here we have to add the value property and in this one we will use the user data dot gender now save the changes so here we are getting this gender after that in sh of this name we will add gender save the changes so here we are getting this value mail now let me make this a state true if we save the changes as you can see we can edit these information this phone number name we can select this gender after that let's right click and select formate document and after this turn operator here we will add one P tag here we will add birthday here we will add the column then let's add the curly Braes here we will check is edit is true in that case here we are going to add one input field and the input type will be date so we will select date from here let's remove the name and ID property and let's move it in the new line so we can easily read it after that we'll add the colum and add one P tag and within this P tag we will display user data dot date of worth after that in this input field let's add the onchange property in this onchange property we can use the same format so let me copy it from here and paste it here after that here we will update this gender to date of worth and after this we will add the value property that will be user data. doob after that save the changes so here you can see we are getting this calendar to select the date and we can change the date by selecting on this calendar now let's make it false so we will get these text date of birth and we have all the information that we cannot edit now here after this div we will add one more div and in this one we will add the Cs and we will check if is edit is true in that case we will add the button tag and if it is false then we will add the another button tag when the is edit is true then we will add the save information button and if it is false then we will provide edit button so in that case if it is true here let's add the save information button so just copy and paste it here and if it is true then we will give this edit option so just paste it after that in both button tag we will add the on click property here we will pass this Aro function and here we will call set is edit here in the first one we will add false and in the second one we will add true now save the changes and come back to the web browser when we reload the web page here we have this edit option till now we cannot edit it but if I click on this edit button now we have these input field to edit the name phone address gender and date of birth and here we have this save information now all the data gets saved let's check it again if I click on edit now these fields are editable we can make it test and save the info now you can see this name has been updated and it has been updated in the object after that we will make this project full stack then we will make the API to change the data in the database also now we have created all the structure next we will add the CSS properties to design this layout so first in this div let's add the class name property and here we will provide maximum width Flex Flex column Gap and text small now let's save the changes and come back to the web page after that we will add the CSS property in this image tag so let's add the class name property that will be withth 36 then we will provide border radius we will save this property now this image is looking good after that we will add the CSS properties in this name so let me reload the web page so it will reset this name after that we will add the CSS property in this input field also so just add the class name here let's provide background color gray text 3 XL font medium Max width and margin top after that let's add the CSS properties in this P tag so just provide font medium text 3 XL text colored and margin top for Save the changes and come back to the web page so here we are getting this name now if I click on edit now it will be converted in the input field and here we have the background color which is very light color so that we will come to know that it is in the edit mode after that we will add the CSS property in this HR tag so in this HR tag let's add the class name property just provide background color height and Border none save the changes next we will add the CSS property in this P tag so in this P tag let's add the class name property and here here let's provide text neutral 500 then underline margin top after that save the changes and open the web browser so here you can see the changes in this text contact information after that we will add the CSS properties in this div so let's add the class name property here we will add grid gr columns one fraction three fraction Gap and margin top text color we will save the changes now you can see when we provide Grid in the left side we have these email ID phone number address and in the right side we have the values this dummy email ID phone number and address now when we click on this edit it will convert it into the input field after that we will come back to the vs code editor and here in this B tag let's add the class name font medium here in this P tag let's add the class name property and here let's provide text blue 500 after that in this P tag let's provide class name property it will be font medium now in this input field Also let's add the class name property and here we will provide background gray Max width after that let's add the class name in this P tag that is user data phone just add the text blue 400 now save the changes so here we have the color in this email ID and this phone number also now when we click on it it in the phone field you can see the background color same as this name input field after that we will add the class name in this P tag which is address and here let's provide font medium after that in this input field Also let's add the class name property and here we will provide background gray we will use this gray 50 similarly in this second input field also we will add the same class name so just copy and paste it here after that in this P tag we will add the class name property and here we will provide text Gray 500 and save the changes so here we have the text color gray after that we will copy the class name text neutral 500 underline and margin top from this contact info and paste it here in this basic information so let's add the class name and paste this classes save the changes so here we are getting this underline effect and text color in this basic information after that in this div we will add the class name property and here we will provide grid grid columns one fraction three fraction Gap margin top text color now save the changes so in the left side we have this gender birthday and in the right side we have the mail and this date of birth when we click on this edit button here it will be converted into the select tag and this date input field next we will add the CSS properties for this section for that in this P tag let's add the class name property here we will provide font medium after that in this select tag also let's add the class name property and here we will provide Max width 20 background gray after that we will add the CSS property in this P tag also here we will provide text Gray 400 we will save the changes so here we are getting the changes in this text after that we will add the CSS properties in this P tag so let's add the class name font medium in this input field we will add the class name here let's provide the maximum width background gray now in this P tag let's add the class name property and here we will provide text Gray 400 now save the changes so here you can see the changes in this text and if we click on this edit here in the background we are getting this gray color after that we will add the CSS property for this button for that first we will add the CSS property in this div so let's add the class name that is margin top 10 after that in this button tag let's add the class name and here let's provide border border primary padding then border radius save the changes now we will add the same class name in the second button so just copy and paste it save the changes here we are getting this edit button and when we click here it will display the save information button and all the P tag will be converted into the input field and if I click on this button it will again display the paragraph text and edit button next we will add the hover effect on these buttons so here let's add hover effect that will be background primary H text white transition all after that let's copy this H class name from here and add the same thing in the second button save the changes now when we hover on this button you can see this effect the background is changing and color is also changing you can see the same hover on both button now we have created the UI design for the profile page also as you can see on this figma design it is ready now we are not changing this image but whenever we will make the back end we will add the functionality so that user can edit their profile picture also and the image will get stored in the database now we have created this profile page also next we have to create the my appointments page where we will display the already booked users appointment for that let's come back to the my appointments page and here we will create this page for that let's come back to the vs code editor and we will open my appointments. jsx file in this file we will create this text which is my appointments for that here within this div we will add one P tag and let me copy this text from this design file and paste it here in this P tag after this P tag let's add one div and in this div we will display the appointments but right now we don't have the appointment data so instead of the appointment data we will display the doctor data here and when we will create the back end and appointment booking system then we will display the user appointments in this page so here we will get the doctor's data from the context so just add const curly Braes doctors equal to use context and in this context we will provide app context here we are not getting the session so let me manually import it so just add import curly bres app context from double do/ context folder SLA context here we have the doctor's data now within the this div we will add the curly Braes and here we will use the doctor's array to map the data so let's add the doctors dot then we will add the slice so that we will get only two entries so just add 0 comma 2 after that here we will use the map method now in this map method we will pass one Arrow function and here we will use this small bracket here we will create One D now in this parameter we will get individual item and index number after that in this div let's add the key property that will be index number after that let's save the changes now come back to the web browser after that we have to create this item so that we can display the appointment so for this individual item we have to create this structure to display the image name a speciality address date and time and here we have to create the button called cancel appointment or pay online button so just come back to the vs code editor and after this we will create another div and here let's add the image tag to display the doctor's image so let's add item. image now save the changes and come back to the web browser so as you can see here we are getting two doctor's image after this closing div let's add another div and here let's add 6 P tag so we will type P into six now in the first one we will display the doctor's name for that let's add the curly Braes and in this curly bres let's add item. name in the second P tag we have to display the doctor's speciality so let's add the curly Braes and we will use item dot a speciality after that in the third P tag we have to display the state which is address so let me copy it from here and paste it in this P tag after that in the fourth P tag we have to display the address line one and line two so in this P tag let's add the CES here we will add item do address Dot line one now just copy and paste it in the second one instead of line one we will add line two after that we will display the date and time so from here let me copy this text date and time and in this P tag we will add the span tag and within this span tag paste this text here we will add the colon also after that here we have to add the date and time so let me copy this and paste it here after this div here let's add one more div in this div we will not add anything in this one we will add the structure so that we can make this component responsive after this div here we will add another div and in this one we will display this button so here we are going to create two buttons that will be pay online and cancel button so let's add the button tag into two so in the first button tag let's add pay online now in the second button tag we will add cancel a point ointment after that save the changes and come back to the browser screen so here we are getting this image details and this button next we have to provide the CSS properties for this component so here in this P tag let's add the class name property and here we add padding margin font medium text color then border bottom save the changes so here we have this horizontal line at the bottom of this my appointments next we will add the CSS properties in this div tag where we have the key right so here let's add the class name property and in the this class name we will provide grid grid columns one fraction two fraction Gap and we will use the flex then Gap six for different screen then padding then border bottom save the changes and come back to the web browser so in the left side we have this image then we have this text and in the right side we have this button text after that let's add the CSS property for this image tag so in this image let's add the class name property and here we will provide width 32 then background Indigo 50 save the changes so now you can see here this image size is perfect after that we will add the CSS properties for this container where we have added all these text so here in this div let's add the class name property here we will add Flex one so it will use the available a space in the row so just add Flex one text small text color save the changes so now you can see we have the image then this text and in the right side we have these button text after that in the first P tag let's add the class name property in this class name property let's add text neutral font semibold after that in the address let's add the class name and here let's add text color font medium and margin top after that in these paragraph tag where we have the address line one line two so let's add the class name and here we will provide t size extra small after that in this span tag we will add the class name property and here we will provide text a small and margin top after that we will add the class name in this P tag and here let's add the text a small and margin top after that in this a span tag let's add the class name and in this one we will provide text a small text color font weight medium save the changes we will come back to the web browser now this text are looking good next we will add the CSS properties for these buttons so first let's add the CSS property in this div so here let's add the class name property and in this one they will provide Flex Flex column Gap and justify end we will save the changes now these buttons are arranged in column now we will add the CSS properties in these buttons so just add the class name and in these buttons we will add text a small text color text Center and for different screen size we will add the minimum width padding y border and Border radius save the changes and come back to the web browser now you can see these buttons are looking good now in these buttons we will add the color as you can see in this figma design file so we will add the hover effect and when we will hover on these buttons it will display the color which is the primary color and in the cancel button it will display the red color so here in the first button let's add the hover property let's add the hover background primary then hover text color white then we will add the transition all and duration that is 300 milliseconds now save the changes and come back to the web browser now if I hover on the pay online button we are getting this primary background color now just copy this hover class name from the first button and paste it in the second one and here instead of using this BG primary we will use background red 600 now save the changes now you can see if I hover on the second button it is displaying the red color now let me increase the slice it will be three so here you can see three entries now our appointment page is looking good let me come back to the home page so now we have created almost all the UI part of this web application next we have to make our web page responsive so most of our component will be responsive by default but when we click on inspect Tab and click on phone bu so here we have this profile section but here we are not getting the mobile menu so here you can see we have the menu on the main screen but for the smaller screen this menu is hidden so we will create that menu so let me come back to the vs code editor and let's open Navar do jsx file now in this file after this tary operator here we will add one image tag and in this image SRC we will use assets. menu icon after that save the changes so here we are in this menu icon now we will add the class name property in this image tag so just add the class name and here we will provide width six after that we will add the medium size and here we will add the hidden so by adding this hidden this menu icon will be hidden for large screen or medium screen so let me come back to the web page so you can see this menu icon is looking good now when we click here nothing happens right so here we have created the state variable with the name show menu right now we will link this state with this image tag for that we will add on click property and in this on click property we will add one Aro function and here we will call set so menu and we will make it true from the false so whenever we will click on this then it will update this state to True by using this state we will display the mobile menu on this application for that after this image tag we will create one comment and here let's add the comment text mobile menu after this comment let's add add one div and within this div let's add another div and here let's add two image tag so just add the IMG into two now in the first image SRC we are going to use assets do logo now in the second image tag we are going to use assets do cross icon now this cross icon is for closing our mobile menu so here let's add the on click property and here we will pass this Arrow function and here let's call set so menu and here we will add false now after this div here we will add one UL tag to display the menu and in the UL tag we will create Four navlink tag so let's add nav link we will copy this nav link for three more times now in the first one let's add home in the second one let's add all doctors in the third one we will add about in the fourth one let's add contact now after this let's save the changes and come back to the web browser for now we are getting this menu something like this next we will add the CSS properties for this mobile menu so let's add the CSS property in this div so here let's add the class name and here we will use the dynamic class name so let me remove it and add the curly bres and back tick here we will add hidden for the medium size screen then right zero top zero bottom zero Zed index overflow hidden background white then we will add the transition here we have added hidden for the medium devices and above size so this menu will be hidden for medium and large devices after that here we have to add dollar sign curly bres so we can add the dynamic classes so let's add the tary operator to check whether our so menu is true or false so let's add so menu and here we will add fixed width full then height0 with zero so here we are checking the condition if the so menu is true then this class name will be added and if it is false then this height zero width zero will be added now save the changes and come back to the web browser we will reload the web page by default we are getting this icon and when we click on this here you can see the mobile menu is visible and if I click on this cross icon it will hide this mobile menu after that we have to design this mobile menu for that we will come to this div and here we will add the class name property here we will provide Flex item Center justify between padding and save the changes so here in the left side we have this logo and in the right side we have this cross icon next we will add the the width for these images so in this first image that is logo we will add the class name width 36 and in the second image that is the cross icon We'll add the class name and here let's provide width 7even save the changes and come back to the web browser now you can see this logo and cross icon size is looking perfect and if I click here it will hide this mobile menu and if I click on the menu icon it will display this mobile menu after that we will add the CSS properties for this UL tags so here in this UL tag we will add class name and let's provide the classes Flex Flex column item Center Gap margin top padding X text size and font weight that is medium save the changes and come back to the web browser now you can see these menu in the center and we have some space between these menu after that we will add the CSS properties for this naving tag before that here we will add the two property and we will add the path so just add two property here we will add the string and in the first one we will add slash for the home path in the second one we will add/ doctors now in the third one we will add slab in the fourth one we will add slash contact now let's save the changes and come back to the web browser here now you can see we are at the Home Path and when we click on all doctors here the path is/ doctors now when we close it you can see we are at the doctor's page and if I click on about and close this then we are at the aboutou US page if if I click on any menu then this menu is open we have to close this menu when we select any menu right so it will close the menu and we will be redirected to these Pages for that in these nav link we will add the onclick property here we will pass the Aro function and here we will call set so menu that is false now save the changes and come back to the web browser now if I click on home we will come to homepage and it will hide the mobile menu if I click on contact we will come to the contactors page and it will hide the mobile menu so this logic is working fine so after that we will add the CSS properties on these menu links so here in these naving tag let's add the class name property and and in this class name let's provide padding border radius inline block here we have to remove this full save the changes and come back to the web browser here we are using the nav links then we will get the active class name property in these tags so if I open the about page and click on this about and inspect it so here you can see we have added these class name and here we have one extra class name called active Now by using this active class name we are going to provide a background color for that let's come back to the index. CSS file and here we will add one media query here we will add the media and we will add the condition Max width that is 740 pixel and within this media query let's add active class name plus we will add the paragraph tag and here let's add the curly bres and in this one we will provide apply text white background primary now save the changes now let's open na have. jsx file and here we will add one P tag also and within this P tag we will move this text here also we will add the same thing let me copy this text from here and move it in this P tag similarly in this about also We'll add the P tag and move this about within this P tag and for this contact Also let's add the P tag and move this text save the changes and come back to the web browser so here we are getting this background color in this about text let's come back and here let me remove this class name from here they will add this class name in the P tag so let me remove classes from here and in all these P tag we will paste the class name now save the changes now you can see this background color is looking good for this menu when we open the homepage this home menu is highlighted if I go to all doctors page and here we have to create the filter button so that when we click on that filter button then these menus will be displayed and when we click again it will hide these menu that is the doctor's speciality so for that let's come back to the vs code editor and we will open doctors. jsx file now in this div here we will add one button tag and in this button tag let's add the text filters so just add filters after that let's scroll up and here we have to create one state variable with the name so filter so let's add con so filter Setter function name will be set so filter equal to user State and initialize it as false so by default in the phone view this menu will be hidden let's come back to the vs code editor and in this button we will add the on click property so just add the on click and here we will pass one Arrow function and here we will call the set so filter and here we will take previous state value and we will return not of previous so if it is true then it will make it false and if it is false it will make it true after that we have to add the class name property in this filtered button so let's add the class name and here we will use the dynamic class name so just add the curly Braes back ticks and we will add the padding border rounded text size transition and above the smaller screen it will be hidden after that here let's add the dollar sign col addes and here we will provide the dynamic class name for that first we are going to use the turn operator and if the so filter is true then we'll add the background color and text white so just add so filter if it is true then we will provide the background primary and text white if it is false then simply add empty string now save the changes and come back to the web browser so here we are getting this filter button now if I click here you can see the color gets changed now when we click here it will update the estate and it will display the filter for that let's come back to the vs code editor and in this div we will wrap it with curly bres so that we can use the dynamic class name and here we will provide the back tick now we have wrapped this classes with the curly bres and back tactics and in this one we'll add the dollar sign curly bres and here we can check if our so filter is true in that case we will make it visible and if it is not then we will make it hidden for that from here let me remove this flex and here we will check if so filter is true in that case we will provide flex and if it is not then we will make it hidden and for the above screen size we will add Flex now save the changes and come back to the web browser as you can see here we are not getting any filter and if I click here we have these filter option let me select this and turn off this filter so here we are getting the doctor according to the selected filter and if we click again it will be deselected and we will get all the doctors's list now this logic is also working fine now we have created all the UI part responsive let me check the responsiveness if we scroll down here we have this section we can scroll it and after that here we have this doctor's list that is also responsive here we have the mode button create account button and if we click on this mode button it will open the all doctors page so this page is also responsive here we have the filter button now let's check the about page so you can see this about page is also looking good in this phone view now let's see the contact page so here we have this contact page which is looking good now let's check this profile page so in this phone view this profile page is looking good now let's go to my appointments page so you can see this appointments page is also looking good in a smaller screen here we have this button in the right side because in this my appointment page we have added one empty div and by using this grid we have added this empty div at this place that's why we are getting this button in the right side now we have completed the UI part of our website in the next video we will create the back end and we will also create the admin panel for the doctors and hospital I hope this video will be helpful for you if you have any question you can ask me in the comment section please like and share this video and also subscribe my channel greatest Tech to watch more videos like this one thank you so much for watching this video