Build Location-Based NextJs13 App : Google Place Api, Google Map, React, Tailwind Css, NextAuth

hey there and welcome back to another course on nextjs 13 okay so today we are going to build this beautiful application with the help of nextjs react TN CSS Google Map Google Play API and next authentication as well and so on okay so uh if you are new on my Channel please do subscribe and before going uh forward let's walk through the application first and then we will talk about the technology which you are going to use in this particular course okay so if you see on this application right once user login with the uh Google account you will launch on this page and we have this beautiful header section okay and once user login you will see this user's profile pick and on the click of that you have log out option as well okay also on the left hand side you will see the different type of food because this is the restaurant finder application and you can find a different type typ of restaurant near you okay so if you see on H the color is getting changed right initially the color is uh gray okay black and white color but as soon as you hover on it the color is changed it's colorful okay so uh click any of this restaurant and once you click it if you see this beautiful border along with this particular colored uh icon okay also you have this option called radius so you can select your uh how uh the area which you want to find the restaurant okay along with this rating option okay so on the right hand side okay if I select any restaurant you will see this dot dot nothing but this markers on the Google Map okay and if you click on this dot you will see the information about this particular restaurant okay so if I uh this is my current location on the map and I can search by clicking on this particular restaurant detail and everything okay you will see how far it is from my location in miles or you can use it with the help of kilometer as well okay also on the click of get direction you can directly jump on the Google Map with this all Direction ready okay the root and everything also if you see you have beautiful scroller I can scroll left I can scroll right okay and this is completely beginner friendly course so if you have uh any question you can ask me anytime in the comment section now if you click on any of this restaurant right at the bottom side still automatically it's updating on the map see okay if I change this to Italian food you will see Italian food if I click on this any of this particular uh restaurant it autoally show where it is and all the details on the Google Map itself okay and guys if you are new you don't know about the nextjs you don't know about the react or tailn css don't worry because this is beginner friendly course and I'm going to tach everything from the basic okay so create creating the Google Map API key or place API key to integrate in our application so before doing any further delay let's begin and we are going to use next js13 uh which is the react framework for the web application and we are going to use that one as well along with the app router okay next we are going to use next .js for for the Google authentication so we are going to learn how to integrate Gmail authentication in our application then for styling we are going to use telin CSS and don't worry I'm going to teach everything because telin CSS is one of the highest and most popular uh UI library in the market right now and the most important we are going to use place a API okay if you don't know about the Google Map or how to integrate it how to use Place API don't worry we are going to learn everything and it's completely free okay if you go to the pricing you will see you will get a $200 of credit every month which is more than sufficient for any developer or small business okay also if you go back to our application you will learn how to style this particular Google Map according to your need you can change Google Map GRS color anything right now in our applic I use a gray color Google Map okay and I'm going to tell you how to style it in the Google Map styling Studio okay and if you are new on my Channel please guys do subscribe to my channel and if you really looking for exclusive video one to one session then please join the channel okay and if you go to my channel here you will see a lot of different types of project a different courses on nextjs react react native telling CSS go ahead and watch all of them so guys before doing any further delay let's begin so in order to create react nextjs project we are going to use next.js which is one of the best react framework for the web application okay so in order to create a project if you see here this is the command okay just copy this command go to a project where you want to create a project open the command prom by typing CMD and once it open just uh paste this particular command which is npx create next app at the latest okay at the latest will uh give you the next 13 um next version okay otherwise you can install the old version as well but just you have to remove at latest okay but in this case I will put the at latest and click enter then it will ask the project name so in this case we will you Google Map place okay and click enter now it will ask do you want to use typ yes or no right now we are not using uh typescript so I will say no then do you want to use es link say no so do you want to TN CSS say yes so here uh itally install T CSS for you as well you don't need to install separately say yes now and do you want Source directory say no app router say yes so it's saying would you like to customize default impul say no and done so now it will install all the dependency which is required like react react Dom next T CSS okay and everything so we'll wait for a few seconds and if you see our project is created now in order to go to the project folder just type CD Google Map place and enter okay now you can open project directly from here just type Cod space Dot and it will open your project in vs code okay so here here is our project is open okay now let's talk about the project folder structure so at the first you will see this app folder okay so in this app folder we will put all our components file the pages and everything okay so by default when you run the application the page.js will be um launch okay and this is our starting point which is the page. JX okay and if you see we have some uh default code here okay we will remove it in some time then we have lay layout. JS where you can Define the layout you can divide your um screen into different parts and then you can Define it here like this okay so in in old uh nextjs we have _ app.js s okay and index.js as a page but here we have the layout. JS and page.js we also learn how to navigate from one uh or how to route from one page to another page and everything so don't worry because this is completely begin friendly course after that we'll also have global. CSS which is applicable throughout the application so whatever the CSS you want to apply you can apply it here okay then we have this public folder where you can put all your images or assets or everything in this public folder then we have js. config.js okay then we have next. config.js which help you to configure uh some of these things like um if you are fetching the URL from the uh sorry fetching image from the URL then you have to put the domain name here so I will explain you how to you configure the next. config.js when it required then we have packet. Json which include all this dependency and the script to run the this application then we have post. CSS post CSS and T.C config.js where it includes this uh T CSS for the uh nextjs okay now let's run the application so here go to the terminal and click new terminal it will open you the in um the inbuild terminal okay in vs code only and just type npm Run start okay or you can just type MP R da and enter so as soon as you enter it will it will say the URL is Local Host 3,000 so port number is 3,000 right let's open this port number and wait for few second to build but it's building first time because you launch first time right it will take few seconds to build the application so we'll wait and if you see the page is uh showing on the screen okay as simple as that now let's uh go to this app folder and inside inside this app folder you will see this page.js okay inside the page.js let's remove this all of this code okay so just remove everything like this and just enter sample de and here if you I if I save it you will see nothing on the screen okay now let's type some text so I will type S2 and let's type subscribe Tobe guruji okay if you did not subscribe to my Channel please do subscribe and if you see subscribe Tobe guruji is showing on the screen okay you see this tell uh this kind of gradient effect is coming right this is because in global. CSS we have some uh if you see right background start and LG or a lot of things right so you can do uh one thing you can just remove all of these things okay because we don't want it and if you see as soon as soon as I remove this body um CSS right you'll get a plain screen with the some text that's what we wanted okay to start the application now let's implement the Google authentication for our application using the next .js so next .js is one of the best authentication for the next JS okay and which is very easy to use so in order to integrated let's get uh go to this official website and just click on get started once you are on this particular page here you will see the installation uh Command right just copy this one go to your project okay and in the uh terminal add new terminal and paste this particular command it will uh install the next O Okay uh then if you scroll down we have to add API route right and if you scroll down this is how we want to add this particular code but if you seeing if you see here right if you're using the next JS 13.0 or above we have to follow a different guide right so click on this guide and then once you on this page you'll find this particular page okay so here it's quite easy first of all uh we have to create this route okay so inside the app folder we have to create a new folder called API so just uh create a new folder called API inside the API we have to create another folder called Au okay inside this folder we have to create this next o folder okay so inside o create another folder next o and then we have to create a file called rot.js like this okay and that's all next we have to paste all of this code uh inside this our application right so next all and everything so just copy it and so I will just copy this one okay and paste it here now here we have to replace with our Google provider okay so if you scroll down and if you see the provider option right here you'll find a different uh providers okay so let's here okay and just search for the Google so if you see Google okay now scroll down uh we have to add this particular call back URL inside the Google Cloud okay but before that let's copy this code and then we will work it out so I will copy this line of code okay let's go back to our application and paste it here like this okay then you also need to copy this Google provider URL okay so let me copy this and let's go back and paste it here and let's see everything look good okay so here we have to add this providers forgot to copy this like this okay perfect now our Google provider is uh integrated okay inside or configur inside this route. JS now in order to generate this Google client ID and Google client key you can watch my previous uh some of the video which include the next .js okay and uh let's go to this uh Google Cloud console and if you don't have account create a new account and once you created a new project as well in this Google Cloud you have to go to this API and service so click on this API and services okay now if you are uh creating this project first time right you have to create first o consent screen here okay I already created you have to just enter this application information that's all then inside the credential you have to create a new credential okay and once you create this new credential you are done so now once you have created this particular creden you have this uh URL section right authorized JavaScript origin now you are doing this uh if you go go to this Google right for development you have to enter this local 3,000 the port number is the one which you are running okay then you have to just enter this port number I already have and the red URL as well okay and then save it once you save it we have this client ID and the client create key copy this client idea and client create key and let me open this in the right side and then go to this our project here you have to create a new folder called EnV in a root directory okay so make sure you are creating this in rout directory and paste this particular code so I created client adding client SEC ke and I pasted my both the keys here okay now this key you have to access it using the process. env. Google client security key which is the code is already there okay now in order to work it out right if you go to back to this particular page inside inside the layout. JS if you go to the layout. JS right here we actually going to implement or add the logic okay uh for the session provider okay but uh you can also do one thing you have to create a new folder inside this particular app folder called make sure it is in the uh here you have to call that as a provider okay just uh we'll create a new provider. Js and inside that you have to add the uh some default template so RFC added this default template and also add this children like this okay as a prop and remove this code and replace this with the session uh provider okay s provider like this okay now now here you have to import this line of code okay so this is little different uh we are doing okay because uh we are using next JS uh 13 right and uh if you follow this tutorial you'll understand how to do it okay now pay this session providers and then you have to just add the children here add the children like this and then save it now uh inside the layout. JS right here over here uh we have this particular code right here I have children here now wrap this children inside the provider okay bring this down and then you have to wrap this in a provider okay and make sure to import this one this and then add this children here okay and if you see the provider is imported from this/ provider and then save it everything okay now all this whatever this uh in inside the children is accessible or controll by this our authentication okay now what you have to do uh if you go back to application right it's saying react context unable server component so the reason is right you have to mark provider if you go to the provider here right you have to mark this as explicitly as a use client because we are using at client side so inside next 13 you have to apply like this you use client and as soon as you do it right you'll see right now nothing is on the screen but you'll see uh the error is gone so now if I go to the/ login we want to jump to the login page okay so let's create a folder in app called login and inside this folder login we will create a new page called page.js Okay add the default template and then replace this name to login okay so component name will give it to login and now if I go to this slash login on the URL so it will show the login as a text like this okay perfect now it is very important right uh when you create a new folder uh and inside that you have to create the page.js okay in order to Route it and and every time when you create a folder uh that folder nothing but the name of your route okay now inside the D let's add the image okay so we will add the image from the next SL image and uh uh in the source right we will provide the uh URL or link right so in the public folder in the local I already have logo.png okay so I'm using that one so just type slash um logo.png Okay so you you don't need to provide a complete path because it's a public folder and you can directly access the file from it okay and after that let's give the alt uh value okay and the width I will give 100 the height also I will give the 100 and U if you see the logo displaying on the screen okay perfect now let's add the button for the Google okay uh I already have the button okay uh so what I will do I will just copy it and here I will paste it like this okay I will remove this on click for now and if I save it you will see the button is showing on the screen along with the logo okay now let's give some styling uh to this uh parent de okay so first of all I will make it as a flex okay and after that I will make it Flex column okay so once I do it right uh it will be in uh in one column instead of in one row right so by default it will come in the row but you have to specify Flex column okay so that is very important so that's the reason uh it will be in one line after that I will make it justify Center and then allign uh item to be in the center okay so if I save it now it will be see it will be in the center now okay perfect now also I will give margin top to 10% okay and if you see uh margin top 10% I'm giving right here uh if you want to give the custom value right you have to give in a square bracket okay so this is very important when when you want to give your own custom value instead of telin CSS you have to give or uh in Brackets and if you see the telin CSS also provide some value and in background margin top is 40 pixel which is equivalent to margin top 10 in delin CSS okay if for Flex as well if you see uh behind CSS it's actually showing display as a flex but T CSS uh give some uh kind of shortcut you can say and nothing but the uh simple display Flex right also give some Gap to 10 okay so we give some distance between these two items like this okay perfect now what we have to do whenever user jump on this particular login page right we want to make sure whether us login or not okay and for that one uh in use effect we will check it okay in order to use effect you have to make this uh particular component as a used client okay so that you can use react in built hook okay so use effect we are going to use and uh inside this one uh obviously whenever the uh component load this us effect will get executed so that we are passing empty array here okay otherwise it will keep executing for every instance and infinite time so in order to avoid that we have uh adding this uh Mt okay now let's define the uh data session from the use session okay which store our whether you login or not that uh use session will give you okay so we can obviously check in use effect whether this session is available or not means user is login or not right so here in if condition we can check session. user okay so make it optional and if us session us is available then we will jump to the uh next page okay and we have to make sure that whenever the session is get loaded this user will get called okay so this is very important so let's print out the session first okay and let's check whether in the console we are getting session or not okay and uh if you see right let me go to the inspect panel okay let's increase screen and go to the inspect panel and in the console okay right now we are not getting any session okay it's saying undefined okay now here okay you have to provide the on click method right so on click okay you have to add the sign in okay if you see the sign in is coming from next all okay so this is very important this is inbuild function provided by um next .js okay now if I click sign in okay and once I saved click on this button okay and uh let's clean this one and if I click sign in see the sign in with Google button is coming now click on that one and you'll see option to select the account to login with the Gmail so I select the one and now if you see on the console right we got the session information and we got this users inside that one right and here we have email image and the name of the user perfect okay it means you user is login and we got the session information from this session. user okay I hope you understand this one now let's add the routing so that we can jump to the next uh page so you will add the use router okay and if you see right right now rout uh user router is importing from the next SL router but we have to in next js13 we have to import the router from the you um next navigation okay so let's write Port router and uh we have to write in a bracket is it's a hook use router okay from next SL navigation okay so this us router Hook is getting from the next SL navigation which is Us in next 13 it's very important okay now just write router. push and we'll give the default uh uh path which is slash okay so obviously it will jump to the default page and if I save it see it jump to the default page which is subscribed to YouTube gji is showing on the page.js okay and which is nothing but default page perfect and if I go to the login okay see it's redirect to this homepage because obviously user is login and we are just making sure if user is loging then redirect to the homepage okay and that is what right now is doing now in page.js if you see right we have this default subscrib to tube guruji now here what I will do I will just add the button okay the simple button called sign out and what we will do once us click on this sign out button we want to uh sign out the session user session okay and automically is supposed to jump to the login page so I just added the sign out from the next / react okay this is the again default uh method and save it okay right now what is showing the on click function okay so we have to make sure that we are adding as a used client here okay because we are adding the uh on click method and if you see uh after this one right the error is gone and D sign out button and now if you see here right in use effect We'll add the use effect obviously we want to execute only once okay so let's uh add the empty array okay so that you effect we will execute only once and here I will add the user session okay to make sure that we are uh in the in this page folder right page file we have this session information so if session is um oh session. user right means it's not there then we direct we redirect to the login page okay obviously I write not okay this means session is not available and OB obviously we have to add the router as well okay and this router is importing from the next SL navigation okay and now if session is not a available then we have to navigate to router dot uh push okay so if you see this is how we want to use it right only thing we it's going to change is the path now in this case we will give slash login okay and save it and pass the session here so that us will execute whenever the session is get updated okay so that's the reason we pass the session in a empty uh in that array and if I save it click on sign out button if you see uh Okay click sign out button now again and if you see it's redirect to the login now in order to create the uh header navigation bar right uh we will create one folder called components uh inside Ro directory so create a new folder called components okay and inside this component we will create a new file called heer new bar. Js okay and enter it now here you have to add the default template right so every time you need to import right the function and everything right in order to avoid that one let's go to this extension the vs code extension and just search for the react okay like this and you'll see this first uh vs code extension called es7 Plus plus uh react react native snippet okay you have to install this extension okay along with that there is another extension called tailin CSS okay which is the official uh extension for vs code install this one as well okay now let's see how how it works right in order to add the default template you just need to write RFC right which is called react function export component okay there are lot of different one if you see of if you you are developing the react native application you have react native function like this and if you just type like this RFC enter it you'll see you'll get the default template immediately see okay how easy it is correct now save everything once you save it you have this header navigation bar written in the heer navigation bar right now we want to put this H navigation bar the top of this application right and every time you want to we want to uh see throughout the application so instead of putting into the page.js we will put in layout. JS okay so it will be consistent throughout the application so here if you see right our children children is nothing but you can call a page is getting rendered in this particular children component above this we will add the heer so just add heer na bar and if you see it's adding from the component okay like this if I save it let's go back to our application and if you see header navigation bar is displaying it on the screen perfect now in layout. JS use this use client and heater. navigation bar also use this use client okay now let's start implementing this one first of all on the left hand side we will show logo then two a menu option called home and favorite then search bar and the users um profile uh Peak okay so here we'll add image from the next SL image and add the source obviously we will add the logo from the uh local asset from public folder and then here we'll give the alt tag so let's give alt tag call logo withd you can give 50 pixel height can give 50 pixel okay and save it and if you see log displaying on the screen now let's add another one more H one h2 tag for home and another is for for favorite okay and save it if you see home and already display on the screen okay now let's bring everything in one line okay so I will wrap this de because U they like this okay and for this one that's Ty sorry class name all Flex then Flex column Flex row obviously if you do not add Flex low it will be in one line okay then add you gap of five like this and make item to be in the center so it will be horizontally vertically to be Center like this okay now let's add the uh input uh the search bar okay so obviously here uh I will use the hero icons okay so this is one of the best uh icon Library okay you don't need to install anything and it's based on T CSS so just search the icon which you want and this copy. jsx file or you can copy the SVG file no issue and then inside this one I will paste it here like this and uh also I will add the input so input of type text like this okay and end the tag now if I save it and let's go back to our application okay it's coming here and this text box is coming under that one okay so let's bring everything together let me format this document first okay and then there a class name to be Flex okay now it will be in one line also I will change the background so I will change background to be gray 100 like this if you see is uh the background of this one is White currently the input field right so what I will do I will add the class name and make background to be transparent so BG transparent if you see it's working perfectly fine also make um you padding of one maybe for now or you can do custom as well okay for example six pixel like this and then uh after that one you can go rounded corner so I will to be medium okay then I will add width to be 40% like this okay see looking perfectly fine and uh if you see right this border is coming when I click on the that this one right so for this one you can save um outline to be none okay and make WID to be full if you see it's working fine also you can give gap between this icon and the input just say here gap of three maybe and perfect okay now for this de let's ask the parent do right ask class name and make it Flex so it will be in one line and also make it item to be in the center like this okay perfect now if you see it will be in one line and the last we will add the user profile Peak and then we will again apply some styling so after this du I will add one more du for the image and Source okay now in this case we need to add the source for the session the users login um profile pick right then here you have to add constant data session is equal to use session so from this uh from this use session right which is obviously from the next authentication uh we will get the user information okay and here we will add the condition okay if data is there okay sorry uh sessions do user is available then only show this image otherwise don't show anything and now on the session. user Right session. user. image we will get this URL of this particular user profile pick okay what I will do here uh let's some alt tag and everything so let's say alt user then width I will give 50 pixel height I will give 50 okay and I will add class name and I will make let's let's first see how it looks if I save it you'll see uh this canot property of undefined user let's make this optional and if you see we got this one error called host name this particular host name is not configur under image in next config.js right as I told you in the beginning of this particular lecture right we need to configure this next. config.js when you are fetching the image from the URL so let's go back to this next config.js okay inside this next config we have to create one uh field called images inside the image sorry we have to call domain like this and then inside the domains array we have to provide the this particular host name so whenever uh you are using the URL from the different different domain that domain need to be included here okay this is for the security purpose you can say and save it as soon as you save you have to make sure you stop the server and rerun it again okay because you made the change in the config.js file okay so whenever you make the uh changes in any config file or packet. Json you have to make sure you will ret return the application okay okay and if you see the users profile is showing on the screen now let's apply some styling to this one so here I will say class name rounded I will do full so it will be in circular see perfect if I increase the size it will look like this I think the uh user profile pick is too big I make it 40 okay and I think that's good now for this parent du I will make it justify between okay and if I make this like this it will look like this see okay also let's do padding so I add some padding to be four perfect and for this input right we added this input here I will add the placeholder so placeholder called search okay perfect we have search bar we have home favorite and we have this one okay you can give some gap between these two um menu so I will give gap of maybe we already have but I will increase to seven and now it looks perfectly fine okay but the thing is uh when we uh decrease screen size right see if on if you are in Mobile The Surge is overlapping okay so what we will do we will hide that search bar and it's quite easy okay so for this du right we have this du so here you can Define uh hidden property initially and this hidden will affect when you have this a smaller screen size okay and when the screen size is medium or larger then you can add this Flex it like this and if I save it you see it hiden if I increase size it will show it on this screen okay if you have any question until this point let me know in the comment section now let's update the font okay throughout the application right now if you see we have this default font let's go back to application right in the layout. JS we have this inter font available okay and if you want to change this font it's quite easy okay so we have this import statement called enter okay if you want to change to some others for example if I want to change this Railway font right uh which is inputting from the Google I will replace this with the in like this I will put the subs as a Latin only I will rename this or you can keep it as this but for the convention correct convention I will change to railway and make sure in the body tag we have this class name and right now is added inter. class name change it to the railway okay and save it as soon as you save see the font family Chang completely throughout the application right you don't need to specify every time for more detail okay you can just go to this uh uh this font section okay so how to optimize the font and how to use it you will find all the documentation all the necessary information on this page okay and if you have any question regarding this um Google font how to use Google font in nextjs let me know in the comment section now let's uh divide this layout into two section okay and uh on the first section it's 1/4 of this complete screen and then the another section is 3/4 okay so if you go to this uh page.js right here we will Define the class name and here we will Define the grid okay because we want to show the grid then we will Define a four columns okay means we will divide the screen into four sections okay next here uh let's define one VI okay and for Simplicity purpose what I will do I will put the background color to be uh red for now okay like this and here I will say first okay if you see it's showing and uh next I will copy this paste and here like this okay and we will be second okay and I will change to this to Blue and save it if you see it's showing but we want the second to be complete one okay mean full screen here then you have to just Define column span and Define three okay so the out of four column the three column is assigned to the second one and one remaining column is assigned to the first one and if I save it you see the change see okay so that's what we wanted now if you define this as a h uh screen okay it will be at a full screen see okay you can Define this one over here so it's also applicable to the both of this okay how you understand this is uh very important things okay because on the left hand side and right hand side we are going to implement two different components okay on the second component we will show the Google Map and on the left hand side we will show all the properties the accessing and means the searching and everything okay so let's see how we going to do that now now let's implement the category list first here okay so first of all I will remove this uh class name so I don't want to show this red and blue okay like this and save it now inside this uh component folder we create a new folder called home so all home related components we'll keep in this particular folder inside the home component sorry inside the home folder we'll create a new folder called category list.js okay and add the default template so here first of all uh we need to show the category list in this particular component okay also I created another folder called shared here okay inside the root directory and inside that I added this data.js okay which consist of the ID the name okay because right now we are showing the different type of foods okay and their restaurant we are showing on the map now uh we are showing value and the icon so all the icons I added in the public folder okay so you can get access to this particular source code and you can access the all assets so right now I added this four category you can add more and I exported this particular um array list okay the category list data now what you have to do let's Define constant and here we'll Define the C category list okay so inside the category list say set category list is equal to use State okay and inside the state we will try to face the data okay so you have to Define data dot uh category list data okay so obviously you have to import the uh data first okay so just import the statement and then you can access to this category list data okay now once you have the category list data we have to iterate it okay also make sure the component name is start with capital c and this is the small okay and make sure whenever you create a component file the component name should be a start with the capital letter now here we need to iterate it okay so first of all what I will do I will add one text called um select category okay so just write select or we can say food type okay and I will add the class name here like want to be bold and save it and make sure now once you added this category we have to add that category in page.js okay this is our homepage so here I will add that category so category list see okay and save it so as soon as save you got the select category types showing on the screen okay perfect I will sorry okay now let's iterate it okay so I will Define One D inside D I will call category list do map and we have item like this and the arrow function okay now here I will Define One D and inside this du we can pass or we can add the uh add the uh category list code okay so there are two way we can directly write code over here or you can create different component okay so what you can do uh you can create a different component right now I will keep here as it is okay so inside this de you can add this uh let's make sure that you are getting all the items so what I will do I will just print out the name of the category if I save it see all four category is showing okay perfect now first I will add the image okay so add the image from the n/ image The Source okay obviously Source will be item do icon okay close the tag here I will add alt tag for the AL tag I will give the name of the uh category which is unique okay or you can give ID whatever you want then the width so I will put the width of 40 height I will put as of 40 and save it if you see our icon is showing okay next add the item. name item do name and save it see it's coming now let's apply some styling to this one so class name make it flex and flex column okay and then we have to make it just sorry justify this Center and make item to be Center like this okay then me add the background so background gray 100 I will add okay then uh add some padding so I will add padding of two and margin of two as well okay then rounded to be large okay so the corner to be rounded to be large okay and then I think that's good enough right another thing right now I want to give some effect right whenever I did not select anything right um it need to be in the gray color and when I hover on this one it need to be it change the change to different color okay so we have property called G gray scale if you mention the gray scale right see it's changed to black and white okay but it's not look good right but on Hover when you Mouse h on it right you can change the gr scale to zero and save it now if I hover and it see per perfectly working right also I will make the cursor to be pointer so it will look like this okay one more thing I will add when I hover on this one right I can show The Border okay it's up to you but before that let's give some padding uh to this one right so go to the page.js and here only I will use some padding so padding of maybe four this is fine let do three okay so I give the padding of three and if I increase side it look like this right now okay but uh when this uh screen size is bigger right we want to show in the grid format so what you have to do go to the category list and for the do let's add some class name so initially uh I will show only one column when the screen size is smaller when screen size is medium we can show GD column to be uh two okay and when screen size is larger you can show Gade column to be three me bring this down like this and save it okay now if I increase size see it's showing three right and if I hover on it you'll see the image is getting colored right and it look beautiful now what you have to do once you us just click on it right we want to make it active correct so for that one let's first Define one con uh State okay constant selected I will name it selected category comma set selected category is equal to use State okay like this and whenever user click on it we will save the index so we will add the index here okay and for this du I will add on click m so on the click of this particular de we will set the set selected category and we will store this index so just write index now index contain 0 1 2 3 okay whatever and save it right now right now okay we are just storing this set selected category but now when you select it we want to change this color right so that for that one we have to apply the dynamic uh tell CSS classes right in in order to do that for this class name first wrap everything in a curly Braes and then this uh code right if you see and remove this single code okay now here whatever the uh dynamically uh class name you want to apply you have to write in dollar and curly braces okay and then you have to write the condition so in this case we can write condition selected category is equal to equal to index okay if select and index value is same then we can say uh just add this great Cel to be zero okay so just copy this like this otherwise show nothing it need to be one actually okay and uh let's see what's the issue okay we have to close this tag okay you can bring this down this one as well sorry let put everything in one L okay and if I save it and I click on it see still there and it's colored okay now what I will do I will also add some bord so if I say border of one pixel and Border blue 400 and save it you see the border is also in blue color but I only want to want to add this border when user select it right so remove this border one PX from here and add it in your condition with the G scale and save it see okay perfect I hope you understand this one okay and uh if you have any question let me know in the comment section I will change to purple actually yeah let look good okay and you can modify on your own whatever the animation you can put you want to add you can okay but right now as this is a beginner friendly uh um course so that's the reason I will keep everything simple okay and if you have any question if you do not understand anything then let me know in the comment section and you can access my source code any time guide okay now we will add the range selection component okay so inside the home folder we create a new folder called range select. JS okay and add the default template let's import this particular component into the page.js after category list so we'll add range select I save this one okay save this one and see range select is coming okay now everything okay now here first of all I will Define the I will give the heading so let's type H2 and here I will say select select radius okay and it should be in meter like this okay and save it see it's showing okay now apply some styling so I add the class name font bold I also add add padding X to two Okay like this now let's add the range selection okay so we'll add input and we put the input of type range okay like this and save it if you see we got this perfect uh range selection styling okay with this minimal code but let's add some uh classes to this one so add a class name first We'll add width to be full height to be two okay like this then we'll change the background color to 200 and then we'll make rounded to be large then appearance to be none okay so if you see the background color gone and we just want only this thing okay then we'll add the cursor pointer and uh we need to define the minimum Max right after this class name once we done with this class name okay so I think we are done with this name now here we have to give the minimum and maximum value so here in this case I will give minimum to be zero and maximum be 100 so it will move from0 to 100 okay you can mention maybe one for now let's make it uh 0 to 100 okay then you have to give the default uh let's say St as well so how many step you want to change 100 200 like this okay so we'll make the step change to 100 okay you can just mention in in this way or in this way that's that's not an issue okay so by 10 the value will get changed and uh one more thing is remaining is to add the default value okay so what I will do I will put one constant called radius set radius is equal to use State okay and default value I will put be 50 like this okay or you can put that's fine okay and then pass this radius to this default value okay so if you see it's passing here okay now the another thing what we have to do okay we have to set when we move this right we want to set the default value okay so here you have to Define uh on change method okay and it will be event e so here you have to mention set radius and here we want to set the radius value so in order to get value you have to write e do Target do value like this and save it and in order to display which value selected what I will do I will add one label here and inside this we'll just put the sorry radius okay in miles or in meter sorry and save it so right now default is 10 Let me refresh everything if I change this one okay if I change see it's change 6090 100 okay perfect now only thing we can do we can multiply this by 10 so for example 10 maybe 100 6,000 M 5,000 miles M like this okay I hope you understand this one and then you can apply some styling it's up to you how many uh radius you want to cover okay on user selection the minimum and the maximum you can give it okay so let me add some styling to this one class name and I will add the text to be gray 500 and I will take change to 15 pixel if I increase the size see it look beautiful okay we'll give some padding from the top so for this one class name margin top to five and if you see perfect it perfectly look beautiful okay now here if you see right uh when the screen is screen size is smaller this our all this uh function to select right is going down right to solve this issue what we can do uh first of all let's go to this page. J uh JS and here when the screen size is smaller we can change grid column to one okay and when screen size is medium or larger then we will show this column four okay if I save it it will look like this okay now let's go back to the category list and inside this category list I will add this columns to when screen size is smaller and then it will look like this if I increase the screen size it will look as default as we have already right but when the screen size is smaller it will look like this and which is pretty good right now right also if you want to little modify it right if you go to the page.js here you just Define uh just Define Center okay like this and maybe I come to be in the center maybe this I don't know why it's not okay but that's fine so this is how we can change the layout okay so now next implement this rating okay so user can select rating from 1 to five uh to check the all the nearby restaurants okay so what you need to do here we uh inside this home folder create a new folder called select rating JS okay and here add the default template okay make sure to add the select rating inside here select rating okay and if you see select getting displayed on the screen okay now let's add the title so h2 tag I will say select rating okay here let's give some styling so class name font to be bold okay and here I will give the padding X to2 margin top to five okay perfect looks good now here I already added this data in data.js this rating list okay it's contain ID name and this icon so icon I copyed directly you can directly copy it it's a text only okay and now we will iterate this icons list okay so after this uh title what we can do we can add new du inside do we'll add data so which is coming from share data dot rating list do map okay so this will be item like this and add the another D this now first we'll iterate this uh ratings icon so let's add label we can say item dot icon okay and if I save it see this beautifully comes up right and then after this uh we will add the check box so input of type take box and in the tag okay and save it so see but we want this tag at the one end okay so what you need to do um for this D right so add this due to class name make it flex and just say justify between it's coming on the right hand side and when the screen size is bigger beautifully looks right perfect now you when us select any of these right we need to store somewhere right so for that one let's define one state called selected rating comma set selected rating is equal to use State okay like this and pass the empty array then uh we have to write one condition on the change of this input so what I will do I will write on change right and here I will make Define one method right for example uh on select on select rating okay and for this one we will pass whether this particular checkbox is check or not so that will get from the event. target. check okay and then we will also get this uh item icon or we can pass the ID either of fine right also we'll keep this in IND here and make sure to pass this index here I will pass the item dot value you can pass or you can pass name we don't want this one now Define this method so here constant on select rating inside this one obviously we have to pass is check comma value okay and here we have to Define if is check if uh the check box is check then we have to set the selected rating and we have to append the value with the existing one if existing has a rating two in the array and user selected three then we need to make sure that two and three also store in the same uh select rating state so for that one you have to make sure you have add the previous value which is uh selected rating comma the value so it will store the existing plus new and if uh the user is unchecked the particular selection right here then you can say set selected rating okay and he said that you can just filter it out selected rating filter you can put the n as a value from the selected rating and if n is not equal to equal to Value like this okay and then you can print out obviously immediately the s rating will not get updated okay so but still we can just print it out here selected rating and save it now let me increase the size clean everything now if I select the rating three right right now it's not showing but next time when I click it it will show the three see see two uh 3 4 is coming or 3 42 is coming okay this is how it works I hope you understand this one okay so on the basis of this selection we will pass this value to our Google Play API so that we will get the accurate and exact result from the API okay and on and depends on that one we will show the information on the Google Map okay next we will add this Google Map on the screen now in order to integrate Google map in our application we need in need to install one dependency okay so just type npm I I atate react google-map SL API okay and click enter so it will install this react uh Google Map for the react okay once it install make sure in package.json it install correctly okay perfect now um the home folder we will create a new uh component called Google Map Google Map view. JS okay and add the default template like this okay now make sure that we need to integrate add this component in page.js inside this particular div Okay Google span so here I will add the Google map view like this and save it okay now let let's go back to our application let me open it here and if you see Google map view is showing on on the screen okay now go to the Google map view and here we will add this Google Map okay now uh first of all uh we have to load the script okay so load script and inside this load script okay let me do like this we have to provide uh one uh Pro property which is the Google Maps API okay so if I type like this you will see Google Maps API ke is coming okay here you need to add this Google Map API key okay so uh inment file you make sure you will add that one so go Tov file and here I will add like this okay perfect so both the keid if you don't know how to create this key I will tell you in a minute okay but before that Let's uh come back to our um Google map view and here you have to Define this environment key with process. EnV dot let's copy it's not suggesting let's copy this next Google Map API key Okay the reason that we use next right whenever you are using this uh any API on the client side you have to mention it as nextore public okay and underscore then you can give the name of key okay and if you are using on API side or anywhere then simply you can Define Google API _ key okay now once you save it go back here and after this right uh here you have to mention Google Map so let's Google Map and if you see Google Map is importing from this Google Maps a/ API okay once add this one open like this and inside here you have to provide some of the prop property which is map container style okay so here we have to define a container style okay so at the top we will Define it here as a constant constant container style is equal to and here Define the width so we'll Define width uh maybe we can Define 100% okay and height I will Define maybe 70 vertical height like this okay and make sure you will add this uh container style you have you can give the name container style and add it here like this okay after that uh we have to provide the coordinates okay the center coordinate so you can Define any Center coordinate okay I have one uh for maybe testing purpose you can say I will location uh constant I will say coordinate is equal to this latitude and ltitude okay and Define this coordinate over here like this okay and after that you can mention Zoom okay so you can mention Zoom like maybe 13 so this is the percentage not percentage but you will see how it works and then save it okay and if you see the map is showing on the screen okay now you can zoom it out zoom in in okay now if you change the percentage to 10 see if I change to five it will zoom out okay if I give more it will more go into this more zoom it applicable okay so that's the reason I will keep P maybe like this okay right now it's showing this coordinate because we give the coordinate to be this the center coordinates okay so I hope you understand this particular scenario okay now let's let's see how you can get this API key if for that you have to go to the Google Cloud console and once you go to the Google Cloud console uh if you don't have account make create account okay and we have to use same account which you use for the uh authentication right so go to this API and services okay here you have to search for Google to search for Google Map okay and uh map hdk you can say not need it but you can just SE Google Map and you'll find it okay so here um you can enable this place API first okay because we need this and here you will see the button just click enable Okay and let me search we do we need anything else so I don't think so that's the only thing uh which we need right and you can enable this one as well I'm not sure whether I enable or not let's see okay I think you don't need it okay so once you enable this Google Map uh then you have to go to this again uh API services and here uh you have to create a in credential you have to create a new API key okay once you create the new API key it will look like this okay and you can restrict this API key do you want for website or you can restrict to some ex some IP address or something like that right and you have to use this API key okay so I hope you understand this if you have any question watch my some previous video you will understand this one okay and this is how we can generate this API ke for us okay next we will show the users location on the map okay uh before uh showing users location on the screen first of all we will style this particular map okay and and uh we can change the color of this particular roads or everything you can customize this uh complete maap okay so for that one uh let's go to the just type Google Map custom styling Studio something like this okay and it will open this styling wizard okay the link I will put it in the description so this is the default map right now we have okay we install now if you don't want the for example labels you can just remove like this see okay and just map you can get it okay or you can if you want to add the labels you can add it how much label you want how much detail you want you can totally customize it okay the road how much Road you want or do you want Road or not everything now here you will select the themes as well so for example the silver theme right or maybe a retro theme you have dark mode okay the night mode a lot of different things okay and this is completely you can completely customize it if you go to the more option each these things you can customize it okay and once you done with the customization right for example in this case we will selecting silver okay you will select some labels like this okay not too much and the roads now if you click on finish it will give give you this Json file copy this Jon okay now you have to go to this uh Google Cloud here you have to search for map Styles see okay once you search this map style here you can create a new map style okay so just uh click on create style and you can select from the existing one okay so gray or something like this right uh or you can paste whatever you copied like this okay so maybe we did not copy correctly wait so here we just finish right just click on finish and then copy this Json okay now make sure to paste it and if you see it's showing the gray color okay the one which we uh modified and just click on save you can give name so gray map okay and save it once you save this right now we have to add the map ID okay so right now if you see we don't have any map ID so what you have to do you have to search for the map management okay once you go to this map management you you can create a map ID and you can create map ID gr map you can select for which you want I will say JavaScript keep the raster and save it okay once you save it you scroll down here you can select the map style so you can assign this key to the map map style which we created before so we can assign to the gray map and it will look like this and just click save okay and that's all it's done right now what you have to do if you if you go to this map Styles right and open this G map if you see this ID is assigned to this particular map ID okay sorry this Google Map is assigned to this ID copy this ID okay and go back to our application so let me open this one here and inside this load script okay you have to add this particular ID okay so you just need to Define map ID and and paste this ID okay like this also you have to add this ID over here in the options in the curly B you have to proide map ID map ID like this and add this ID here cly B okay and save it refresh it okay so sometimes what happen it will take some time to load the because we just created and map is getting assigned to this particular uh particular ID right so that's the reason it will take some time so maybe I think we need to put this in a square bracket and then refresh it and if you see the map is showing on the screen right make sure to put this in a uh square bracket now here you can provide a multiple value it's up to you okay and if you see the map is showing on the screen okay if you have any question any doubt regarding how to style the map right let me know in the comment section now next we will get the users location okay and and for that one we need a latitude longitude of the users okay in order to show it on the map so in order to get it right uh we will go to this uh layout. JS okay and here inside this return uh we will add we will P it the users's location at this particular uh section okay so I will Define one constant here I will say get user location we'll create this method and inside this method okay we have we need to get it so we have to type Navigator do geolocation okay do get current position okay and this will give us the current location of the user this okay and if I console. log the position you will see the all this information okay and make sure in use effect you will call this one okay so use effect obviously we want to only ex only once and Define like here like this okay and save it as soon as you save it right so let's see and go to the inspect panel in the console if you see the GE location is coming okay if sometimes if you did not enable notification it will ask you the notification see location permission right enable mean obviously it will ask you once you la land on this particular page okay and if you go to GE location in the coordinates you'll find the latitude and longitude okay and now this latitude longitude we will use to show it on the screen okay but one more thing we need we need this user location at many components right and every time we it's very hard to pass it to the different different components right so that we will use context here okay so once we store our um location information context we can use that context throughout the application okay and we can change it anywhere so that's the reason we will use the context and context is quite powerful okay and if you want to learn more about the context how to use in everything you can watch my previous video but don't worry in this course as uh particular video as well we will learn how to create the own context and how to store our data okay so in the root directory create a new folder called context okay like this and inside the context we'll create a new uh file called user location context. JS okay here once you are you in this user location context page Define constant user give the same name the with the file name okay user location context is equal to you have to write create context okay and it is importing from the react pass it initially null also make sure to export this um user location contact so that it will be available throughout the application and now save it and that's all our context is ready okay now until this point if you have any question let me know and one more thing now obviously this context we will use to store the data that's what I'm going to tell you now now go to the layout. JS here we have to wrap these children and these particular components inside our context okay so that whatever the um components you define in between this context the all the information is accessible to that particular components okay so here you can Define the user location context like this okay dot I to write provider okay and close the tag make sure to wrap this uh both the components like this and here for this provider you have to provide value which value you have to share with all the components right so obviously we have to store this users location okay so for that one you have to define the uh one state so here what I will do I Define State constant user location comma set user location is equal to use State like this okay and it will be empty initially and over here we can Define set users location okay and inside that we need to Define latitude and land okay like this so we added this latitude and land and for get user location and now this user location and set user location we have to pass it as a value so I will Define value in double you have to pass this to Value okay so that whenever you want user want user can access the user location and they can update it from anywhere okay and save it now now interesting thing right let's go back to our Google map view let's go to Google map view okay and here we we need to use the location correct okay so for that one first Define constant okay and now we want to use context information right so in the curly reses you have to Define user location comma set user location is equal to use context okay and inside this user context you have to provide the context name so in this case is user location context okay now we have this user location information okay if you want to print it here let's try to print it with location and if I save it if you see the user location printing on the map view see map view 12 okay so we got this user location and that we Define in layout. JS but we can accessible we can access it easy in Google map view that's the reason context is quite helpful when you are want to share the uh any State uh in any nested components okay now instead of passing this coordinate you can pass this user location as a center okay and save it now if you see it's showing my location on the map okay obviously it did not added the marker yet okay but it's Center Center um to the my current location okay next we will learn how to add the marker and for our user location we will add the marker now let's add the marker on the user location okay so let's go back to our application and inside this Google map right uh we need to add the marker okay so here let's define marker and if you see this marker F so I select that one and in the tag can close like this inside this you have to provide the position so obviously position is the user location which we already have then you can provide the name which you want you can Define your custom icon if you put like this and save it right you'll see the location and this icon is default icon from the uh Google okay but you can Define your own custom icon so just say icon and inside this you have to provide the URL of the icon you can put the URL U anything or you can access it from the your local user location pin so in order to access it just write user Das location.png okay and then you have to provide the scale side so just Ty scale uh scale size inside this you have to define the size so in this we say width of 50 and then height maybe I 50 make sure to give the comma here and save it okay now you have to refresh the screen in order to see the effect and if you see user location with the custom marker is showing on the screen okay so this is my custom uh sorry this is my custom marker with my current location see here okay so you can use any marker you can go to the any icon and select it and put it here okay it's up to you now in this particular section we are going to be the API for the Google place okay so if you go to this Google uh map Place documentation right and this Tex search SL Json this particular API we are going to use okay we already have this API key same API key we are going to use and along with this API key some more parameter we are going to send it to this particular endpoint okay so let's go back to our application and uh oop sorry so here it is okay so inside the API uh folder we have to create a new folder called googlepl okay this will be our API endpoint inside that we have to create a folder called route. JS okay every time when we create uh API endpoint the API endpoint name should be a folder name and inside that we have to Creator rot.js okay inside route. JS we are going to implement the API key okay so first of all uh we will Define the constant base URL okay so the base URL is the one which I already have okay and you can copy paste from the Google place documentation okay so this is the base URL then we have to add the Google API key obviously Google API key from the environment variable okay so I will add like this and after that we have to write export sync function okay so this will be our get function okay so it means get request so in that we have to write request and then inside that we have to call that particular API okay so obviously we have to write constant result is equal to await okay then with the help of f uh we will face the result from this base URL okay obviously we have base URL then there some uh I will copy paste the existing or everything right like this so this is the base URL then the end point like text se/ Jon the query is nothing but the whatever the uh category we are passing like Indian food Chinese food kind of thing right that we have to pass then in the location we have have to pass latitude comma longitude then after that we have to pass radius okay how much meters you want to search and then the Google API key okay after that uh it's quite simple you just need to return this result okay so after this one you have to get this result as a Json save it in a product and then with the help of next response obviously next response you have to import okay so from the next SL server and then you have to return this product okay now very important thing this is the next JS 13 okay and this little bit different than the old nextjs okay so in nextjs 13 you have to follow the same file structure uh and then this is the way we can face the data okay let's test it out so I saved everything let's go back here okay now you can accute theop API slash Google place so you can call this API okay is equal to Indian then we have to provide some more um value like radius th000 latitude and longitude okay so right now we got we are getting error let's see what the error so here okay so obviously we are passing this uh this all the value right this value we have to accept it here okay so obviously first of all here we have to Define constant then search uh parameters that which we are passing okay is equal to sorry is equal to new URL and then request the request which is this one okay dot URL okay and then simply we have to store each of these varable like constant category is equal to search params and sorry search pam.get and then we have to get that whatever the value we are sending here right if you see oops sorry so this one right category radius latitude okay so first is category okay same thing you have to do for radius latitude and longitude okay so I will just copy paste like this and paste it here and save it now let's save uh refresh the screen and if you see right now we get the result okay so with the help of location the radius and the category we are getting all the information okay perfect so this is how uh we are we can write the API in the nextjs okay so now this API we are going to use in our applic application okay so this in this component we are going to use this um result and then we will display the business list or place list uh on the UI side so we successfully build the API for our Google place okay now what we have to do we have to call this API inside our application okay so inside this shared folder I will create a new folder called global api.js where we will keep all our API calls okay so just type constant say get Google place is equal to right now I will put empty because I'm going to hardcode some value for testing purpose and then we will pass the actual value okay so in this uh particular example right I'm using this exus uh HTTP client okay which is one of the best uh in the market so it's very easy to install just execute this lineup code and just install it I already installed so you can just access like this exos and uh once you install right it will add this one so there are different way you can uh add this one okay then you have option called get and inside this get option you have to call your actual URL okay so it's very easy you have to just call slash then API because our API is in this API folder okay slash and the Endo so in this case is Google Play okay and then uh you have to pass the all this uh the category and radius everything right I will copy this one for for now but we will replace it with actual value okay so like this okay and now in order to use this right we have to export this particular Endo so export default and then just say get Google Plus like this okay now this get Google Play will be accessible throughout the application now save everything now go to the page.js where we are going to face this uh all the business or place list okay so constant get Google place okay so this is the function which we are going to create and inside this one we will access Global api. get Google Play okay and this is the promise so obviously we have to apply then response and then inside response we'll just console the response for now okay so here we'll write response do data okay because in this response. data uh as this is AOS right and this is promise our uh result will be in the response. data okay now save this one now obviously this we need to call it so what I will do I will create a new user effect okay because this us user effect will execute even though the section got changed and I don't want that one and obviously we want to ex only once and then you can call call it here okay like this and save now now let's go back to our application and let's open this terminal refresh the screen and if you see okay just wait so right now it's saying uh the 404 error okay this particular API is not finding because if you see right this API in point we added is incorrect so obviously let's go back to Global API and over here we have to add the question Mark okay so that's the that's what we miss so let's clean everything now let me refresh the screen and if you see we got the product list okay if you see we got two times here and uh another one is here okay and inside the product we have the results see okay so we can access it like uh is page.js just result so WR product Dot results now we'll get only the this 20 uh items okay so let's save this one let me clean and refresh the screen again and let's wait so something is not correct okay so canot read property of undefined so let's see maybe it's a only result let's see what's the what is called this results product result okay product results okay make sure the spelling is correct everything is correct and save it now let's go back to application and if you see we got this result okay so all the 20 now let's pass the actual data okay so uh let's get the category list so first of all let's go to the category list and on the click of this category list we will write another uh call like uh on category change okay and here we will pass the item do value okay and make sure we have to pass this on category change back to the parent component okay so like this in curly Braes you have to pass it back and now let's go to this page.js inside the category link we have to accept it here like this okay sorry so like this okay and here will be the value now we need to store this value somewhere right so we will Define a state so constant say category comma set category is equal to youth State okay and similarly we will also set it for the range so we say or we can call Radius set radius okay like this obviously we will give this radius value by default to 250 and for category just write set category and then you have to pass the category name which is this value okay now what you have to do whenever this category change okay or get updated we have to call this get Google place okay so here you have to write category okay so whenever the category change this will get execute okay and same with the radius as well when radius get changed this us effect will get called and get Google place will call a latest information with the actual data okay same thing you have to do it for the range select so let's go to the range select here uh let's define on Range or on radius change have to pass the actual value which is this e. targeted value okay and pass it back to the parent component like this okay now save this one and now let's go back to the page.js here you have to accept it okay similarly like above value is equal to set radius and here you have to set the value okay perfect now we have this category and radius value okay and whenever this updated this particular get Google Play method get call obviously we have to pass this category comma radius okay and get Google place API here we have to uh accept it here category comma radius okay and pass this category in of this one so I will write like this and for radius as well okay perfect now save everything and let's test it out okay so clean everything and let me go here go to the console clean and refresh the screen okay so now if I click Indian if you see we got this 20 result okay and if you go to the network tab okay we have this Google Play API call method and in uh payload we got the Indian restaurant and default radius value okay the latitude and longitude is again is hardcoded we will change it later on okay if I click Mexican you'll get new AP get call and with the category as a Mexican restaurant radius to 5 if I change the radius see again new call get call and with the radius three 3,000 okay so our API call is working and also we are also getting this information okay every time with the new data which we are providing right if I open you will see the Chandra Mexican grill right charandas whatever if I select Italian right you'll get some Italian restaurants let's see some piz see okay so some piz it rest like this okay and depends on this radius as well now let's go back to our application right and just check uh let me where it is in page.js right here once get we we got this information we store it in some state so here is a constant business list comma set business list okay is equal to youth State and inside here we'll store it okay so just right set business list and here we will store this like this okay perfect and I will comment out this one for now now we send this category and radius okay but we also need to send a latitude and longitude of the users location okay and right now we are not fing any user location here so obviously with the help of uh context we'll get the users location okay so just type location comma set user location is equal to use context okay and in use context you have to provide user location contact okay this now we have user location user location. latitude and user location do longitude we have to pass now in get Google place obviously here as well we have to accept it here as a lat lione okay and I will replace this one plus attitude and this one as a longitude okay perfect and save everything now we will taste everything together so now if I select Indian okay and if you see this is my uh current location sorry uh the latitude and longitude okay so if you see right some the okay so we get the call but we are not consoling it so let's go to the network Tab and inside here if you see with the current latitude and longitude okay and if I go to the preview the response right in the results we'll get this okay this is my current location okay M I'm living in m so that's the reason the nearby Mexican restaurant is showing me okay so all the Mexican even though if I um decrease this um area right still showing me some of the businesses okay perfect so that's what we wanted and we also storing these businesses in our uh State okay where it is okay so this business list now this business list we will pass to the our new business list component where we are going to display the businesses okay now uh this rating section you can do your own okay this is challenge for you and uh in Middle if you you face any issue you can um access my source code anytime okay now let's implement the business list and let's display it on the screen okay so we already have the list of business we store one one state right in page. jss and if you see here um we have this business list correct so what we will do in the home uh in the component folder inside a home folder we we will create a new file called business list.js okay and add the default template business list like this okay in page.js after this Google Map VI okay in second column we have to add this uh business list component so add it like this okay and save it and if you see at the bottom you'll see the business list text is showing okay now to this business list list we will pass the business list okay so pass it as a business list only okay and business list we will accept it as a prop so business list so it's small B now here we have the business list as well okay now let's implement the Lo uh or display this business list right here we have to iterate the business list in order to display all the business list so what we will do inside this D I will iterate this business list map okay in order to iterate it item and inside this we add one view okay like this okay or now you can implement or write your code here or you can use another component to write the business item so what I will do in a home component I will create a new component called business item. JS okay and add the default template here and this business item I will call it here so just call business item okay and pass this item so I pass it as a business is equal to item okay perfect and IO I will add the index and I will pass it as a key okay index like this now inside the business item we'll implement or we will first accept it here as a business okay now each business we need to show it on the screen okay so let's Implement that now so first of all I will add the image from the next SL image oop sorry it to be this source and then for now okay I will temporary I will add the uh image from my local okay the placeholder only then I will let you tell you how to uh face the image from the Google uh photo API okay that I will do do it later so first of all I will add placeholder do JP okay so this is the image in my local and we go Al as a name of the business so name of the business is business do name then with uh I will give 180 we can give uh 0 okay and if I save everything okay let's save everything if you see we got this D image okay now obviously uh we need to bring it in one line right so for this class name make it Al or not here actually but in order to put in horizontal right in a business list for this one we make it Flex if you see string flex but it's string too small all right so what you have to do first of all you have to say overl overflow scroll okay and then you have to also say overflow X Auto okay like this but still it's not working right because we need to specify the width for this uh du okay so what I will do right now um I will mention the width so let's give class name width of 180 pixel if I save it okay is not changing uh so let's say Flex shrink zero so it we are telling the um this particular do don't shrink it and if you see it's working perfectly fine okay and if you see it's scrolling inside okay only this de is getting scroll okay that's what we wanted now after this let's add the business name so I will add the to tag and business name okay business. name and in same way uh I will add the other components okay if I say the same so same way you can add the other all the components and I will just copy paste it okay so I already added this um just I have to replace this business name then I will add the address as well I added some styling to this one and then at the last we have rating okay what is this okay so let let's make sure everything is correct so for this de we have to close this de like this and save it and if you see if we are getting this name of the business and the address as well okay and the rating okay now for this de we have to apply some styling okay so first of all let's give padding of two okay and I will make rounded corner to be large okay look like this and also make background to be white okay perfect so I will make this corner of round rounded corner to this image so I add the class name I say rounded be large okay and then it will look like this okay and uh I think just make object to be cover here like this okay and that's all now what we have to do uh we have to put this on top of this image okay and that is big task so right now we can able to put but we have to put it on top of of this particular map okay so now let's go back to the page.js okay and wrap this business list in One D okay like this and for this du you can mark the position as absolute okay once you mark it absolute obviously nothing going to change but this is is going to change right if you see because you mark it as a absolute okay so in order to uh uh avoid this scrolling right because we just want to we don't want to scroll complete page right so to avoid it you can mention the width to be 90% when the screen size is smaller if you see the screen size is smaller and when the screen size is larger or medium or larger we'll mention width of 71% okay so that's I calculated so if you see like this it will look like this okay then also I will give some uh when the screen size is smaller I will give margin left to six and when screen size is medium or larger I margin left to uh maybe 10 okay let's see how it looks okay look like this but now it's not on the top right obviously we have to give some uh bottom property so in this case we can say bottom to be three and if it's go up to this point right so obviously uh this bottom will be applied to this one and uh when the screen size is uh smaller we can give bottom to be 36 like this okay and obviously we have to we can mark this as a Rel when the screen size is uh smaller and when the screen size is medium or larger we can mark it absolute you see the change right if I increase the size it will look like this okay now we will give some gap between these all the items right so in order to give the Gap let's go to business list and over here we can give the Gap okay and if you see we got the Gap as well okay now if you have any question until this point let me know in the comment section okay now another thing now we want to remove this scroll bar right we don't want to add this scroll bar so for that one you can just type telin CSS hide scroll bar okay and then you will find them some npm this T scrar hide right this uh dependence you have to install Okay so let's go back here I will open our project side by side and inside a new terminal just paste this particular dependency okay and once it install it's very easy to use if you scroll down right you just need to add this plugin first so let's go to the twiin CSS config.js okay and inside here inside plug-in you have to add this required field okay and if you scroll down more just you have to write scroll bar hide okay so obviously you change this you have to run your project again because you change the config file and inside the business list you can add scroll by hide here like this okay and save it now rerun our project so let's wait for to build this project so that we will get a we will see the change on the UI and if you scroll down okay let's select some uh food type and if you scroll down we don't have that particular uh scroller right now you have to put you have to move that with the array sorry the arrow button of the keyboard okay but I hope you understand this one next we will put some um this button on the left and right hand side so on the click you can move this particular um slider okay perfect now let's add the buttons so that we can click on it and this slider get move okay so on the right and left hand side we have to add add the buttons okay so let's go back to our application first and uh sorry so here right so on this one right uh go to the business list and at uh we will wrap this du first inside another du so I will wrap it like this okay and one button is come after this business list and another will come before the business list okay so uh I already have the SVG okay so I will copy paste it here like this and I will also add this on click slid R method okay so this is simple method uh and this is just icon and I also applied some styling to this one okay and same thing I am adding to the previous Buton so I will add it here like this okay and this slide left I'm adding okay now interesting part is uh for this de we have to provide the reference okay so we just need to write uh reference is equal to element reference like this okay it need to be is equal to and this reference we have to mention it here okay so constant element reference is equal to user so this user hook will hold the reference of the current uh component okay so initially it will be null okay and there are two method that we need to write so first it constant slide right okay and here we have to pass the element okay which uh you means that on button click that element reference is sending and for that element we are adding some uh properties like scroll here we have to write uh element dot scroll left okay and here we can add whatever value you want to add in this case I will add 500 okay okay this need to be actually Arrow function like this okay and same thing we will add for the right okay uh the left and the right so this need to be actually uh both we can put left only thing that sorry uh this need to be minus and this need to be plus okay and save it and now let's test it out so let's go back to application if you see right we got these two buttons here and if I click on this we got the scrolling okay but this scrolling is not smooth right it's it is getting scroll but not smooth so for that one for this du right we have this uh scroll property to apply to this just write scroll smooth okay and once you write scroll smooth you can see see the change okay now depends on how much scroll do you want on button click you can change the value from here okay but this is how we can Implement okay I hope you understand this now right right now if you see right we uh this for this image we added the placeholder right now let's add the actual business image so let's go to business item and over here right we need a couple of things first need we need the API key okay and the photo reference so I just added this particular two lines so this Google API key will hold the API key from the environment uh file and this photo reference will hold the business photo reference okay because business uh this particular result from the API will not retaining the photo URL okay for the business so they just give the reference of the business okay the ID so with that help of ID we have to F or display this image okay so that is also very easy you just need to uh replace this particular source with this particular command okay so what is saying this is the API endpoint for the photo okay if you see the map / API SL photo and for that one we are providing maximum width the photo reference that which we are storing in this photo reference this photo reference you have to provide along with the API key okay and now save everything and let's test it out okay so if you go back to our application and select for example Indian so right now we got this error it's saying the host name go map. Google API is not configured okay so that we need to configure in next. config.js file okay so here before we configure this particular domain for this new domain we have to configure like this save it and then stop the server and return return it again okay so this is very important whenever you are using the new URL okay uh to display the image we have to make sure that this host name or domain name need to be configured or added in next. config.js okay now I reloaded this uh uh screen and let's wait for a few second now let's click Indian and let's see what we are getting so let's click Indian see it's coming up if I click Mexican see Mexican coming up okay but if you see this image is the height is getting changed okay up and down so let's fix this issue so for business height let's go to the business item here we can Define the height as well okay so here what I will do height to be 80 pixel like this okay and if you see now height is all are 80 pixel and it's already object cover okay now you can do some modification according to your need it's up to you how you want okay you can give the I will increase the WID little bit to maybe 90 like this and I think this is much better okay and see I can able to SC scroll this one easily or you can move it okay now if I change to Indian okay it will change to Indian see s Balaji or bani po if I want to change to Chinese it will change to Chinese see okay perfect now here you can uh show the some type of loading or some type of uh skeleton effect it's up to you okay this is challenge for you you on the click of this you have to load some uh loading effect okay so that you will get to know okay uh this result is getting loaded okay perfect so if you have any question until this point let me know in the comment section so here quick thing so if I change this one right if I change to Indian and if you see this uh loading effect is coming right immediately it's going but this loading effect coming up right that is nothing but but a skeleton effect so if you search for this TN CSS animation section right you will find this uh beautiful animation okay okay and this is nothing but a skeleton but in t CS is called as a pulse okay and you just need to Define uh the your do as animate pulse okay and it will be look like this particular beautiful skeleton effect okay and let me show you how I added so I created new component called skeleton loading okay and inside this component I structure means I write this D tag and everything like the our business listing item structure okay and inside the page.js where we are loading this uh or we are calling this get Google Play API right uh I defined this loading State initially I will def defining as a true but when uh this particular Google place is loading we are showing it as a true and once the we got the result we'll set it as a false okay and below this one we are just showing if the loading is not there means loading is false then we are showing business list and if loading value is true then we will uh showing the skeleton loading five times that's the reason I provide this 1 2 3 4 five ARR list and obviously five time the skeleton loading will be iterate and displayed on the screen okay and this is how it will show if I change to Mexican see the five item is showing on the screen okay I hope you understand this one and if you have any question let me know in the comment section and obviously you can access this source code any time um for free okay so if you face any issue while implementing this particular skeleton effect you can access my source code now in this section we are going to show all this business uh on this particular map okay using the marker so whatever the business you uh we are getting from this particular category okay from the API we are going to show it on the map okay now let's go back to our application and uh in this particular uh home folder right we are going to create a new folder called markers. JS okay and add the default template like this okay next uh in page.js we have this Google map view right which we already Define here we will send the list of businesses okay so by using the business list which we already have in the page. jss okay and in Google map view let's accept it here as a business list okay like this now obviously uh we have to show marker in between this Google Map tag like we defined for the users right here we will Define for the business list obviously we have to iterate all the business list okay so I will do business list do map item and here we will call M um markers okay so we created markers so this is the markers component and we will call that one okay and in that markers we will add this marker okay so if you go to this marker inside this you will add this marker obviously we go and change this position and the icon obviously okay but uh in Google map VI inside this markers let's say this item item nothing but a single business of okay so we'll say business is equal to item okay so each business we are sending to the marker one by one okay and what I will also add this index over here okay and add key is equal to index also I will just show first seven elements okay so I will do equal to seven and and okay so it means first eight business will displayed on the map okay now once you go to the marker here you have to accept it as a business because we send it um business in from this particular component to this Markus component okay and if you see the field right this is our the response and inside the result we already have we have this geometry and inside Lo inside geometry we have location and inside that we have latitude and longitude okay so what we'll do obviously um we have to do replace this position with a business location like business do geometry Dot and if you see after geometry we have the location okay from there we will get the latitude and longitude okay and here also I will change this URL to Circle because circle is the uh this particular Circle one okay which we are showing at as a marker and obviously I will change this to 10 10 okay and save it now now let's go back to our application okay now nothing will show you on the uh screen because uh if you did not select the any category you are not able to select any um business okay but if you select this for example if I select Mexican okay okay so if you see we got the error that marker is not defined because we just copy P but we forgot to import it right so make sure to import and now save it okay now again let's select the some of the any category if I select it as soon as soon as I select you will see the result along with this marker see on on the screen okay so this is the actual position or location of this business okay and if I scroll it right now also I'm showing only eight uh business and here also it's showing eight business on the screen okay if I can zoom it and I can uh I need to want I want to see this uh which location it is or information right but right now if you see we successfully able to add the marker on the Google Map okay now next obviously if us just click on any of this marker okay we want to show the information on the uh about this one okay uh immediately and uh obviously if I select any of this one obviously this also want want to change okay this marker also uh Circle in the center and then we will show the information about this marker okay but until now this if you have any question any doubt let me know in the comment section now we will show the business information for each of this marker right now we are just showing this marker and right now we don't have any onclick event or anything right so let's Implement that one so let me move here like this or maybe okay so here uh we already have this business okay now in order to show the the uh information for this marker uh let's write in between this marker tag okay so I will in in between this marker we have to write the over overlay view okay so here we have to write overlay view okay like this and uh inside this overlay view we have to provide two important property first we have to provide the position at what position do you want okay so obviously the position is the business geometry location like this okay and one more important thing is map pan name okay so we have to write map pan name and which is overlay view do overlay Mouse uh Target okay now and now whatever you display over here it will display on on the screen for example if I display the business name like this right in between S2 tag and save it let's go back to application and if you see the name of business string right but we want to modify it so what we can do instead of this business name right we can write D sorry here we will write the DU and inside du we already have the business item right so let's add the business item here and pass the business okay so here we have to pass the bus business okay so if you see this business item as a business um prop and that we have to pass it okay and if an save it let's go back to application see it's showing on the screen okay immediately and if I zoom out see everything if I zoom in it will show okay but the position I'm not expect this one okay I want this particular um details of the business above this particular marker okay so let's do that so it's quite easy you have to just give the styling to this one so we'll say margin left first to minus 90 pixel okay and you can use the same coordinate you can change little bit depends on your requirement and then margin top will be 200 pixel okay so this particular margin I calculate from the business item okay if you see our business item has the width around 195 okay and above that I also took extra five and the the height and width okay depends on that one I give this um margins okay and if I save it and let's go back to application if you see now above each marker we have this location okay if I zoom out zoom in see above the marker now we have the information okay that's what we wanted but this is quite uh I mean a lot of business detail is showing on the screen we don't want that one okay on the click of the marker then only we want to show this information Okay so so in order to do that we have to write on click method on this marker F so write on click okay and for this on click we have to set the value okay so here we will set the value for example console log and here we will say okay this is the business user click on okay but in order to save this state right we are going to use um context for this one because we want to know the selected business in other component as well right so let's create a new component in so in the context sorry um so we have to create a context actually okay so here we'll create a context called um selected business context. JS okay obviously I write uh selected business context is equal to create context okay and default is null and make sure to export it so that that we can use it okay now uh in our layout. JS here you have to import it okay and by default uh I will add selected business set selected business okay this is default value we are going to pass and we will add another provider okay so selected business context do provider and then I will provide the value with we just Define like selected business comma set selected business okay and in the tag and wrap this uh for all of these particular components and save it okay now we have selected business to all the components in our application okay now let's go back to our markers and here we have to accept that one okay so me we have to get the selected business so I will say selected business comma set selected business is equal to use context and here we'll say selected business context okay so here we are we are defining because we want to set the business selected business okay and from this markers we from this on click on the marker we are going to set the business okay so let's say set selected business and we have to pass the business information okay interesting correct now if I uh select any of this uh particular food type if I click on it right now obviously it's not affecting anything because we did not apply any uh any logic but we are going to storing this business information in this particular selected business okay now what we have to check we have this selected business information right here we going to check so unique property if you go here right and and uh we can check with the name of the business or we have this reference okay so if you check the reference with the current reference we can do that okay so let's take this reference as a key because that will be a unique okay so here we can write the condition selected business okay. reference is equal to equal to business. reference okay if this condition is valid then only show the overlay okay otherwise don't show it okay as simple as that and let's bring this down and let's save it okay so initially you will not see anything okay because this is we are showing because we click on it okay but refresh it and let's check newly okay so let's select any of this restaurant let's see Mexican okay and right now see nothing is selected okay if I click on this one only this information is showing see if I click on this one only this are showing see okay so it's up to you which you want to see okay and this is how you can see it okay now one more thing we we showed this everything right but on the click of this one as well we want to show it on the map okay interesting correct so if I click on this one I want to show this on the map as well okay so in order to do that right obviously we have to use this all the context similar contact because we are going to set the value from the business list okay so copy this one go to the business list and I will paste it here okay make sure to import the use context as well as selected business context and on the click of business list we are going to say so what I will do I will wrap this in one de okay like this put this key onto this one so you can put on click here as well it's up to you okay and on click okay we are going to set set set business selected business and I will pass the item which contain our business so it contain only single element right and let's save it and let's go back to application Let me refresh everything let's select anything like Italian okay now if I select this one see this information if I select this Pizzaria see see pizar string okay so this is how it work okay and this one is also working for us means if I click any of this one see the result is coming okay now one more thing uh you can do whenever uh you just selected right you can Center it this particular map okay it's up to you how you want to Center and let's uh apply your knowledge because in Google map view we center with the users location see okay now whenever the business is selected you can replace this user location with your business location and automatically the map will get centered okay let's try it let's give a try and if you have faced any challenge let me know in the comment section or you can use my source code so now we will show the distance and the button uh over here okay so we will show we will uh display how far it is from your location okay so it will be in the miles or kilometer it's up to you how you want to display and the button so that once you click on that button it will open the actual Google map with the navigations okay so let's Implement that one so first of all uh in the marker right uh here we have the business item and inside the business item we are going to implement okay so let's define One D here and inside this D we'll Define H2 tag okay and uh we will say uh for example for my okay we will we will replace this particular value with the actual distance okay but right now we will just implementing the UI and uh also in Span I will add Get direction okay now uh let's save it and let's see how it looks if you see the Four Mile and get direction is getting on the screen okay but if you see for this business also it's uh displaying because we are using the same uh component right so in order to just display on this one and not on this particular item what we can do go to the marker and here we will pass show direction as a value okay and we can pass it as a true okay from this Markus business item and here we have to accept it here as a mark show directory okay and default you can give false okay so it's optional obviously because we give this value to this show directory okay and now you can just write condition if show show directory Direction it means is true then show this do otherwise don't show it okay and if you see now it's not showing on this business item but it's showing on this one right even though the business the component is similar but uh with this condition is not showing on this one okay that's what we wanted now let's add some styling to this one so for this H2 I will add class name text okay and here uh we have some value right but you can give the custom value as well okay but if you see WEP blue and you'll get the value but in order to give the custom uh value right you have to type hex like this sorry uh the hex value and if I save it and if you see the change okay perfect now let's add some more values say let's Flex then I will say justify between okay and that's all and I will also make item to be in the center so it's uh vertical and horizontal will be Center like this okay to this du what I will do I will add the border at the top of one pixel okay and I will give padding of one margin top to one as well okay and save it and if you see right now showing like this right so let's make sure everything is correct so border need to be like this and then we'll see the Border okay then what I will do I I want the button like structure to this gate direction okay so to this pan you can apply some styling class name you can order border of one pixel p and add the padding to one okay and if you save will look like this okay so it's not really looks good because we added a too much border width okay now we can make it rounded corner so just write rounded to be full okay and then I will change border color so it will be blue 500 okay and save it and see it's showing perfectly fine okay now on how I want to uh change this color and combination okay so what I will do onover I will change text to White okay again on H will change the background okay so you can write um background blue 500 okay and if you see if I overrun it it's changing the background okay and here you can write the distance I want to show distance like this okay perfect now obviously if I click on this one we are getting distance okay now what we will do we will implement the logic to get the direction between the user I means your current location and this business location okay so we'll uh do that now so now on the click of this gate direction button we want to open the map okay and uh I already have the function WR so what I will do I will just copy paste it here okay like this so this is on Direction click method and here is just I'm opening the new window with this particular URL okay and for this URL I'm passing the origin okay and the um destination okay here obviously we need to bring constant uh the user location right so just add user location comma set user location is equal to use context because we have in context user location context okay and from that one we'll get the users location okay so it will be latitude and longitude okay and save it now just call this method on this particular gate direction button okay so what I will do I will add on click method to this one and let's call it here like this okay on Direction click and save it let's test it out so let's open uh click any of this food type so if you see it's saying object not iterable the reason is right this is very important err if you see because many time this error will come and you will not find any issue or issue or you don't get it how to resolve it right so whenever you use the context instead of this bracket you have to use this curly brackets okay so don't use the square bracket and now um we are here click Mexican for example anything right if if I click on this one you got this beautiful popup and if I click on get direction right okay so we got this error let's see what's the error okay so it's saying selected business is not defined okay obviously we have business not the selected business so replace this with the business okay and now save it and let's test it now okay so if I click on it now if you see it's open a new window and it's also showing the distance Act okay you just need to click get started it's showing how much minute is required and everything because it's actually we are using Google Map okay so this is how we can implement this get direction uh and open the new map okay now let's implement the distance so for distance we have a big uh logic actually so I will just copy paste it here for us okay you can get it anywhere from the internet as well or you can use my source code okay so it's simple uh it's the distance and for that one we have to provide latitude and longitude of the uh source and destination okay and obviously we have the user location so set user location sorry in the use effect right we will call this method because whenever um we have this business item we'll call it okay so in use effect uh here we'll pass empty for now and here we have to calculate the distance so just write just call this calculate distance okay and uh inside this one we have to provide some value first thing is um business latitude and longitude or user latitude longitude okay I will write business dot geometry. location. latitude okay and same thing I will copy I will change it to landitude LNG okay next users location do latitude and user location do longitude okay like this and save it now once we get this user location lud and longitude we have to save in one uh state so I already but here we can Define it here like this distance set distance is equal to use State okay this and what you have to do set the distance we already set it here like this okay perfect now let's replace this hardcoded 4 Mile with this actual distance so we'll say distance and save it okay let's test it whether it's working or not so let's select any of this one and if I click if you see 2.8 M Shing if I select this one it's showing 2.5 this is far so it's showing 3.2 okay if I select this nearby I don't have any nearby but see 2.4 mile if I select Indian right I only have one nearby Indian okay if I select Masala must is little far and it's 8.7 M okay say bani Port 255 M okay so this is how uh it works right I hope you understand this one so how to calculate distance how to show it on the screen and everything okay and obviously if you face any issue because I copy pasted this calculation thing and already implemented it okay so you can access this uh through my source code is completely free and guys uh if you did not subscribe to my Channel please do subscribe and even you can join my channel as well right it's nominal free start from to uh $99 and you will get a lot of things okay the member only videos and everything so please do join the video and help us to grow this channel I made some couple of updates in our application for example for this header I added this Shadow effect also on the click of this profile um image I added this log out option once you user click on this log out button user will get loged from the application okay and you can also go ahead add some new features so whatever you want okay and anytime you have any doubt or you are facing some challenges you can access my source code for free free and if you are new on my Channel please guys do subscribe to my channel and if you really looking for exclusive video one to one session then please join the channel okay and if you go to my channel here you will see a lot of different types of project a different courses on nextjs react react native tell CSS go ahead and watch all of them so guys before doing any further delay let's begin

Channel: TubeGuruji

Views: 24,669

Keywords: react, javascript, nextjs, Build Location-Based NextJs13 App, NextJs GoogleMap, NextJs Google Place API React, NextJs Google Place Tailwindcss, NextJs Tailwindcss React Google Map, build full stack next js application, google maps app tutorial, google maps places api react

Id: SGsDxZukodQ

Length: 150min 43sec (9043 seconds)

Published: Fri Aug 04 2023