Build & Deploy Full Stack Next.js Real Estate App Using React.js, TailwindCss, Supabase

hey there and welcome back to tube guruji channel today with the help of nijs react super base we are going to build this beautiful real estate application completely from the scratch and this application is a full stack application and perfectly fit for the beginner now let's walk through the application first so in the on the top side you will see the header and currently if you see the for sale uh menu is activated because by default we are showing all the property who is for sale now on the right hand side you have option to post the ad and also you have option to log to the account then on the left hand side of this particular complete screen we have this beautiful all the list of the property where you have option to search by the address or you even you can filter it out depends on your selection on the right hand side with the help of Google Map we integrated the Google Map inside our application now let's search some address and if you see automatically you are getting all the suggestion as soon as you type it so with the help of Google place API we integrated the place aut complete feature as well now select the one area which you want and click search and boom if you see as soon as I search it the filter get or the listing get filtered automatically and on the map you will see the custom marker which we added that marker is also set on that particular C coordinates or particular address you want to learn how can we add that kind of marker on the Google also you you will see how can we add this kind of how uh overlay effect where you can show the details of the property as well you can even remove it and open the another one as well from here you can jump to this detail uh of that particular property screen also if you want to open any of this property to view the details you can just click on this one and boom you'll navigate to that particular property and with the help of modern telin CSS Library we integ implemented this beautiful UI as well here you will see all this information along with the map and the location with the custom marker everything we going to build it from the scratch now here we have option for sale and for rent as well if I click on the rent now obviously in order to access the rent you need to access or you need to log to the account let's log to the account account and here I will log in with this one of my account and boom if you see now you are on the Rand page and the for Rand menu is activated also if you see with the help of the uh use the same component inside our application we going to learn how can we do that so that we don't need to write a code um multiple time right we use the same component just we pass sailing or rent and depends on that we f filter out our listing here you have option to add a post or post your ad and also you have option to go to this profile my listing and log out okay let's add post a new ad here you can have option to search any location for example if I want to search some location some this particular location and if you see now you can click next here you have option to add all the details not only that but you can even upload multiple image and all this image we going to store inside our superb storage okay once you have save and publish it it will live and it will are ready to view on the application also you can manage your listing from this my listing section just click on that one and boom you will see your listing over here currently you have one one listing is in the draft mode and other listing which is published you can have option to manage from here or you if you want to delete you can delete that particular listing okay if I go to this edit here you will see the listing which is already published and here if you have want to modify it you can just modify it and then publish it so cool right also with the help of clerk you can have access and add the profile section and obviously if you see we have all the profile details the security details and also we can learn how can we add our own custom option in this case is my listing see okay so all of these things we're going to learn in this particular video guys if you still did not subscribe to my Channel please do subscribe because we are going to not only going to build this application but we we are also going to deploy this application on the cloud and this application is completely responsive friendly so if you see depends on the screen size this application will change their layout and boom so cool so guys without doing any any further delay let's begin to develop this application and one more last important thing I want to tell you that we are going to use super base to store all of our data and I'm going to tell you how can we set up the super base how can we efficiently use the tables uh the storage and some of the features from the super base so that we can build this beautiful real estate application so let's start so to create the react application we are going to use nijs uh the nijs is a the best react framework and if you go to this nj.org and you'll find this uh landing page where you have the command to create a react application or just simply go to the get started documentation and inside the installation section you'll find this command to create the project so go to the folder where you want to create the project open a terminal add that folder and then paste the command which you copied so simp command is npx create next app at latest at latest means it will install the latest version of The nextjs Click enter and it will ask you the project name so give the project name so here I'm going to add real real estate app Okay click enter so it will ask you will you like to use typescript so right now we are not going to use typescript so we say no for the ESL say no the TN CSS say yes so it automatically install the tailin CSS for you so you don't need to install manually again then it will ask you to do you like to use Source directory say no the app router we we are going to use app router because app router is the latest um way to build the nextjs application there is a two way uh there is a page routing and there is app routing so app route is the latest one then would you like to customize UT Ally say no and then if you see it installing some dependency like react react Dom next which is default dependency is getting installed and some de dependency as well and if you see right now our project is get created now open the US code and if you don't have vs code make sure to install that one and open a folder locate the folder where you just created that particular uh project and then inside that one open that particular project inside the vs code here in this popup you can say yes I touch the author and if you see on the left hand side these are the some of the uh folders get created when we uh create the application so let's see one by one the first thing is app folder it contains uh the layout file the page.js file and the global CSS the global CSS file contain the all the St uh CSS styling okay uh which is obviously applied to the throughout the application so whenever you appli something over here and you can Define it to the all the application then layout. JS file which is the uh we can we can say kind of starting point of our application and if you see uh here the children is provided so all the pages all the route all the components will get render from this uh children uh tag okay and this is the inside the body tag that we Define the children tag this is the metadata which is used for the SEO purpose and this is the inter font which is applied by default to this application you can change it uh any time right we will see it once we start developing this particular project how can we change the font to some uh different some other different font then we have the page.js file which is the default page for the our application now once we run the application you will get to know how this page is getting rendered on the screen and how you can update it immediately then we have this node module uh folder obviously we are not going to touch to this particular folder so whenever we install a new library or new package this uh the the package is getting added in inside this node module folder then we have the public folder where we can uh store all our images assets font any files right and you can directly access through this public folder next we have this next. config.js file which help us to add a nextjs related configuration okay so obviously uh we going to need this or we are going to update this file according to our need once we start developing our project then we have packet. Json file which contain the name of the uh application the version along with the script to run the application or to build the application right uh depend and their version you will see over here and some D dependency right and to maintain this dependency version that's the reason we have this package lock. Jon file then we have this post css. config.js file and T.C config.js file which is uh used for the T CSS now if you see inside the content there are some uh lines you over there right so whatever the uh component or folder is defined over here only to that folder the telin CSS get applied if you are creating some other folder outside or inside the root directory and you want to apply telin CSS classes to that particular folder you have to make sure that particular path is added inside this content okay now let's go to this terminal and then click new terminal and let's uh run this application so just type npm run da and once you type npm run de if you see it open the port uh 3,000 okay so on the local because we are running on the local machine open the open this link inside the browser and boom so this is the default uh page you will see on this application okay now let me bring this uh side by side and now let's open the default page which is this uh page.js inside the app folder and if you see if you want to edit something right for example let's edit here so here uh let me remove this code and here I will just say subscribe to tube guruji and save it and boom if you see as soon as I save this file the changes are reflected on the browser and to this particular page right obviously we are going to remove all of this code so I will remove this one and then I will keep simply a d tag and inside that we'll add a h2 tag and just say subscribe to TU guruji and then save it and if you see now I change uh the complete page we obviously deleted all the code only the text which we added which is subscrib to TU gurji so guys if you still did not subscribe to my Channel please do subscribe because in this particular course and in upcoming video you will learn a lot of different things now you see on the screen there are some uh gradient lines coming on because inside the global uh CSS file uh for this rout right there are some default CSS get added so I will remove this one and save it and boom you will see the white background that's what we expected so this is how how uh the default project uh will look like once you create the next GS application now one more thing we need to add is a Shad CN Library so let's go to this uh open Shad CN just search on the Google you will see this ui. Shad cn.com this is the uh a very popular twin CSS Library okay so it's contain a lot of predefined component and it's totally customizable you can control uh to the all the component which you are going to add inside your project so in order to install the shat SC inside your application go to this installation and click the framework obviously we are going to use uh we are using nextjs so click on that one and uh you have to follow a couple of steps okay so obviously we already created the project and we already added the TN CSS so I will skip this part second thing we have to install this shat so I will copy this command go to your project inside your terminal click add a new terminal so here and then paste this uh line okay so it will install um the shats here now it will ask some question would you like to use which style do you like to use so default or New York so I will select the default the base color I will s the neutral and we like to use CSS variable for color say yes and then it will install um the shat SC now as soon as uh the installation is completed you will see that new folder get added here okay called components so inside the component if you see right now nothing is there okay because we did not install any component yet inside the leave folder we have this .js file which we are not going to touch any way so this is again related to Shaden then one more file is created called component. Json which is again uh connected to the shadon and to our telin CSS that is related to the configuration kind of thing and more important thing inside the twin. config.js file you'll see see the variable get added if you see over here right a lot of different things get added once you install the satat okay next let's add a button component okay so on the left hand side you will see a different different component called button outar alert and lot of things go to the button component which is easy to add in order to add any component you have to install uh that component inside your application so in this case copy this npm command go to your project make sure to install this one and once you install it's easy to uh add in your application right so as soon as you install this button component you will see inside the component folder there is a UI folder and inside that the button. jsx file get added now here it's a predefined uh code already there once you install the button component from the Shad CN and here you have option to control how you want to look like and everything now let's go to this app folder inside the page.js file here simply I'm going to add a button and if you see this button is getting added from the at theate component / ui/ button and here I will say subscribe and save it now if I go back to our application you will see this beautiful button now in this case if you see we don't need to give height or weight some padding everything is taken care by shadan predefined component right it's very easy to use and easy to access and as I say complete control on the component which you going to add okay so guys that's all about the setup for our application um and if you have any question if you stuck anywhere let me know in the comment section guys now we are going to build a header for our application and this header will be a fix okay so even though you scroll the content the header will be fixed on the screen if you see on the screen we have this beautiful section okay uh on the left hand side we are going to show this logo this is a logo placeholder then we have the option for sale rent and agent finder depends on the selection of this one right we going to filter our data and displayed on the screen then we want to add two button one for to post your ad and another is for login now this obviously once user loging then we want to show the profile image over here but if user did not login then we will show the login or sign up button let's go back to our application and here inside the app folder I'm going to create a new folder and I'm going to call it as a components If You observe I give the name starting with the underscore it means this folder inside the app folder will not consider as a route inside the nextjs okay if you give the direct the folder name then it will consider as a route but in this case case if I start with underscore then it will not consider add the create a new file called h. jsx and add the default template so here if you don't know right you have to install this es7 plus react Redux extension and the tailin CSS extension which is added uh you need to get it from the vs code only okay so from the extension so that you can just type RFC which stand for react function component export component enter it and boom you'll get a default template immediately then you have to add this header inside the layout. JS file so here you can add that okay but obviously if you are in login screen right we don't want to show that header uh on the login screen right and one more thing uh obviously we cannot use any uh hooks inside this layout. JS file because this is on the server side if you want to make it client you need to mark it as a client you need to remove metadata and that's a bad idea so rather I will create a new folder inside this app directory and we can call it as a provider. jsx and add here a default template okay now this provider uh we can use it here so here I will write provider like this and inside this provider I will add this children okay and now inside the provider accept it here as a children and then just render the children over here and then save it okay now obviously I just clean but nothing get changed if you see we don't have any error at the moment now let's add your header inside the provider so I added the header and then save it you will see the text header is showing on the screen okay let me bring this side by side so it's easy to you to check out so once we have this header let's go to the header section and let's start implementing first thing we need is the logo okay so uh you can get the logo placeholder from the logo logo EPM and here uh just search for the logo which you want you can copy any logo this logo is in the form of SVG file so I will use this logo I will copy it if you click on this one it will get copy and then let's go back to your public folder where you can add your asset so in this case I will create a new file called logo. SVG paste your logo you can directly use your own uh logo in the PNG format as well you just need to paste it inside the public folder then let me close this one and then here inside the image tag which is importing from the next SL image next is providing their own image tag inside that let's provide a source here I'm just giving logo SVG so here how uh you can access the logo logo okay means any file from the public folder just give slash and the file name here uh let's give width uh we'll give 150 the height I'm going to give 150 and let's give all tag as a logo if I save this one so this is how it looks okay after this one I'm going to add UL tag okay uh to show the list of menu inside the L tag I will say for sale and one for rent and we'll give another option called Agent finder and then save it now let's bring everything in one line so here for this UL we add a class name make it Flex okay and then we'll give a gap of 10 let's save this one and when the screen size is smaller right uh then I will hide it but when the screen size is medium or larger then only we can show it okay otherwise we'll hide it now if you see the screen size is smaller then we hide it but as soon as I increase it show on the screen okay but for now let's display it here and now let's bring everything in one line so for this de I will sorry for this image and U tag I will wrap inside One D okay uh after that we need to add uh two button okay so let's add one D and here I'm going to add a button so this button we we are going to add from the shat CN and here I'm going to add uh we'll call it as a post new add or you can say post your add post your ad and uh uh here I'm going to add oop sorry plus sign as well okay so you can get this icon so this icon if you see I'm importing from the L Lucid react so if you don't know about the Lucid right when we install the shat here it also install the one icon Library called Lucid DOD so this is very uh powerful I will say and very uh beautiful I uh Library where you can find a bunch of different icon it's very easy to add it in your application just need to write name you'll find that one that particular icon and boom if you see right now I just added now even you can give some height and weight for example let's add a class name we give height of five width of five and save it for this button I will add a class name make it flex and we go Gap of two something like this okay and then I'm going to add one more button okay to sign up or we say login oh this need to be button and save it okay now right now um this login button uh will only dis display when user is not authenticated in our application now let's bring in one line so class name make it Flex gap of two okay for this login button I'm going to add a variant okay is equal to outline okay just I'm going to show outline like this see okay and boom now another thing that I want to do by default if you see the color of this particular button is kind of black and we don't want that we want our own primary color Okay so let's go to this twin. config.js file okay you will find at the bottom and here if you see we have the bunch of different um CSS variable inside here we have the primary and the default is kind of black I'm going to replace it with my own color code so I'm going to add this particular color code hash 7f 57 and F1 and save it and boom if you see the color is changed to our theme color so this is our primary color okay and now whenever you add the button it automatically add this particular color all the Shad CN component okay now let's bring everything in one line so for this particular de first thing I will bring this uh in one line so class name make it flex and then I'm going to give a gap uh of maybe let's say p gap of p and save it for this you will as well uh I don't know why did not came okay so we'll make it Flex like this and then we make item to be in the center and for this de I will add a class name and then we'll add a padding of six okay and padding X to 10 now as I say right we will hide this so on only when medium and when smaller screen I will hide this menu something like this if I increase screen size so this is how it looks here I will give some more Gap okay and then uh we want this button on in one line so for this one leg make it Flex will justify the between so it will be on the right hand side okay and if I increase the screen size this is how beautiful it will look okay next thing whenever I however on this particular uh icon I want to change the color so simply to this L tag I'm going to add a class name I will add H effect on H we say text to be primary something like this okay if I hover on this one you'll see the text is Chang the color along with that one I'm going to also uh let's add font of medium okay and we'll change the text size to small and we'll make cursor pointer okay let's copy all of these things so I will copy this class styling add a class name paste it here and same thing for this one as well okay now if I hover on this one see it change the color Perfect Right Next Thing obviously on smaller you are not able to see that's perfectly working fine let's add some Shadow so here I'm going to add a shadow okay we'll add Shadow small and as I say in the beginning we need to fix this one okay to the top and we'll just make sure to give withd of full and then J index 20 100 also make sure to add a background to be white okay now if I increase screen obviously it's fixed right now and once we start implementing this bottom part and when we scroll it you will see that hiter is still there and it will not go not change now once we have this beautiful header section on the click of this particular U uh menu right we need to make sure that it will keep the selection as it is okay so let's do that so obviously we need to add some folder okay but for now um let me give you one example so for here I'm going to add a link and here I'm going to add H reference okay and obviously when user click on for sale it will go to the homepage because by default we are uh showing by default we are we are going to show uh the selling items first okay so I added the link tag if you see this link tag I'm importing from the next SL link okay which is very helpful we we want to navigate from between one page to other page you just need to give the path name and that's all for example if I give about it will jump to the about page for now it's empty so I will keep as it is and then let me bring this down and if you right now if you see you don't have anything right now depends on the URL if I select the for rent okay for rent then we need to F this particular path correct so it's very easy so inside the header you have to Define constant we'll say path is equal to your path name okay and let let me show you inside the use effect the value of that particular path okay so here obviously I want to execute use effect only once so I get I provide the empty array and we use this hooks called use path name or use effect that's the reason it's saying you can only apply this particular changes on the client side so you just make sure you'll change this particular component to the client side okay and here I will consult the path and if I go to the inspect panel inside the console and if I refresh it you will see the slash only that is PA that default part if I go to this slash about right you will see the path name is about obviously we don't have that page but it will return return the path whatever the path is there right so that's how you can get it so obviously we have the path information here we'll just say uh we'll add uh the dynamic styling mean depends on the condition right you have to wrap this particular class name for this one inside this curly Braes then this tag and maybe after this one you can remove this tag is up to you I'm going to add dollar sign and inside that I will write the condition if path is matches is equal to equal to slash right then I'm going to apply condition we say text to be primary and save it and if I see by default the text is primary because that is what it selected correct and if I even though if I click it because this is the default one that's why it's showing for sale on same thing you can do for the rent obviously once we uh implement this for rent um button sorry H rent uh page then we will add that condition as well so that's all for this particular header section obviously there are a lot to go okay and you will understand how easily we can build this application throughout this particular course now we are going to add authentication in our application and uh let me walk through the flow uh where we are going to use authentication and why we need it so first thing if you see we have the user and user want to uh add a new listing or manage the listing or view profile right you have to make sure that user is authenticated without that one we cannot uh give access to this all the features okay so for that one we going to use clerk okay which is the sponsor of this particular video and I'm in a moment I'm going to help you to set up the clerk account and everything now once you have the authenticated then obviously it will redirect you and then you can able to access all of these uh features okay so these features need authentication if you don't you are not authenticated then you just can view the existing listing and their details and nothing so let's go to this uh clerk.com if you don't have an account create a new account okay and the most important part about the clerk is clerk is very easy to integrate okay within a couple of few lines you can add the clerk uh inside your application and you have bunch of uh uh provider where you can add it within a one click everything about this clerk okay the most important part the it's free to use so if I go to the pricing you will find uh up to 10,000 monthly active user um it's free if you want to upgrade every uh you can do that so uh the link is in the description uh go uh click on that one and then you will access the clerk.com uh then uh if you don't have an account create a new account and go to the dashboard so right now I already have some of the project but I will create a new not new organization but let's create a new project so here if you see I have bunch of different application and for many of my project I use the clerk create a new new application over here and give the name for the application so in this case we're going to give real estate so you just write real space that's will good and then you can select the provider which you want so by default I will add the email okay uh also I select the Google you can select the Facebook if you see you have bunch of option Apple GitHub Microsoft uh LinkedIn Facebook you as I say right you just need to add in one click okay so obviously I will keep only some of them so I will add the Google and Facebook for now and then on the right hand side you will see the preview how beautifully the UI will look like also uh clerk automatically add you the UR uh the UI as well if you want your own custom UI you can do that as well create application and boom here uh if you see on the screen uh the setup for the nextjs application you will see the different framework where you can add the clerk so in this case we are using nextjs so these are some of the step we need to take uh in order to add the clerk inside your nextjs application okay let's do that and then we'll jump on to this uh some of the features about the clerk how can you uh customize the clerk and everything so first thing uh let's install this lineup code so oh sorry this is the um installation command in order to add a clerk inside your nextjs application so I will open the terminal click add a new terminal and then paste this command then these is the two variable which you need to add okay you can obviously get it from this uh API Keys as well anytime so copy this key and inside your root directory I will add a new file and call do env. local and inside this I will paste this to kids then uh as we are using the app router right we need to wrap uh our complete application inside the clug provider so let's go to this layout. JS file and inside here I will oops my bad so here I will add the cler provider now make sure to import this clu provider so if you see we are importing from this cl/ nextjs okay so this is very important and then you need to add this middleware dots file so copy this middleware dots file you need to create this file inside the root directory and we'll call it as a JS and then paste this line of code so let me copy this one and we'll paste it here and then save it now if I go to this our application and let's refresh this application local 3,000 and boom if you see you redirect it to the signin page but if You observe here uh it has some different and we uh domain name which is not belong to our which because our is Local Host right so the question is how can we change that one so in a moment we can change it and we can add our own custom signin and sign up page but before that let me walk through the clerk feature so on the left hand side you'll see a bunch of different icon on okay so inside the user you'll find the whoever log into your application you will get the list of all the user inside this user tab even you have uh they introduce a new uh feature called organization and uh in this feature you can also add this uh clerk authentication to the organization if you really interested to know about the organization please comment down in the comment section to know about the clerk organization and we'll create the uh application for that then we have the user authentication configuration here you will find the bunch of option we have you have the email and phone as I say you have full control on what you want to access or what you want to enable inside the clerk inside the social connection you will find whatever the uh provider you want to enable so right now we just enable this two then we have the web 3 Enterprise connection the multiactor authentication also you can enable that's cool uh features then you can even restrict to the specific domain if you want to just allow uh to the your domain.com for example if you want to allow only to the user who has the email uh including domain. tug.com then you can add that uh listing over here okay and only that email address can able to sign in or sign up to your account same thing about the different different uh domain block list as well you can even block the uh different domains okay then we have attack protection as well and as I say it's completely free the attack protection inside if you see we have the maximum limit at time you can just put for example 10 okay and then save change so after 10 it will get blocked automatically then as I say this is organization setting again the sessions you can add the session lifetime you can increase that one you can minimize that one inside that then we have this account portal uh which contain the profile Pages here as well you have a lot of different option and customization the most and interesting part about uh the clerk that this particular option called customization here you can add your branding you can add your logo icons okay even you can not only that but even you can change the color so I will keep this color because this is matching to our application then you can even change this out and lot of things how you want the email response that also you can add it here okay you can just update your logo if you want but you can add your own message as well same thing goes with the SMS the integration part you can connect with this Firebase and Google analytics you can even connect with the JWT uh with the help of JWT templates you can connect with the lot of different uh services like super base the convex graph base and lot of things then it also provide the web hooks as I say you'll find the API key over here inside the API key section and and there are lot of things you can even connect with your custom domain okay and if you want to upgrade it anytime you can go to this plan and building and then you can upgrade to the um paid Service as well if you have more uh number of user login per monthly I will definitely recommend to upgrade it so guys uh that's all now just uh search on Google like clerk nextjs okay and here you will find the documentation to how to install the clerk as we already took this particular steps okay I already added some of the uh steps over here so and right now it also asking for the authentication so we'll skip this St but if you scroll down you will see uh the next step is to create a custom sign up and sign up page click on that one and these are some of the step now we are uh we are need to follow first thing we need to create this particular uh files and folder so I will copy this complete path and make sure to select app router go to your project and now inside the app folder I'm going to create a new folder but in this case I'm going to start the folder name with the uh circular bracket and then name of the folder okay so again this particular path will not consider as a route okay inside the nextjs and inside this folder I'm going to create a new file and whatever the path you copied just paste it here as we are using JavaScript so we'll change to this jsx which stand for JavaScript XML click enter and boom if you see it automatically create the folder for us and then file as well copy this content and paste it here and save it same thing we need to do it for the signin page so copy this path go to your folder make sure you are in the folder Okay click plus sign and boom and make sure to change this one and then copy this content and paste it here and save it and then make sure to update this environment variable as also so copy this one go to your env. Lo file and paste it here and I think that's all and now if you if you want to access this sign in sign up page you will find uh SL U on the local / signin and sign up now let's go to this local 3,000 boom and if you see now it has our own domain also redirect URL it means once it sign in it will jump to the direct page okay and now you will see the sign in sign up page but if You observe here our page is going um below to this particular header because as our header is fixed right so you can quickly fix it so let me close all of these Tab and let's go to this provider where we have this children is getting rendered right here I will wrap it inside the DU and I will format this one and now for this due I will add a class name will give margin top to maybe let's say 16 and let's give more maybe 22 I don't know whether 22 is available 20 let's more and I think that's enough and if you see now our signin page is completely visible now you you can even customize this signin page okay so for customization right uh because uh you can just go to this hyper ui. D okay okay and just search for the O form or o forms right this one here you will find uh this kind of UI this hyper UI is based on T CSS which already have some of the components ready so what I'm going to do I will go to the view and here you will find the code right change to jsx and copy this content and let's go to the signin page where you want to add and simply let me bring this down I will put this whatever the code we copied right make sure to delete this comment and then this sign in particular signin component I will replace it with their form so if you see we have the form over here I will remove this form and paste my own signin component and save it now if I go back to our application see this is how it will look okay now you can even replace this uh image as well okay everything you can customize inside the page. J x file whatever you need okay so I will do it later on but this is how you can customize your own signin and sign up page now let's do one thing let's sign into to our application let's click on the Google account I will log in with one of my account and then if you see boom it redirect to this local 3,000 and you jump it on this home screen but still it's showing login and post ad because we did not update the header okay according to whether user is sign in or sign up so let's go to this header okay so right now if I go to this header here you have option to add whether usually sign in or sign or not so let's add a constant here you have option called user okay or we'll add a hook called ug user and if you see this H user is importing from the nextjs so this is Hook is uh provided by the clerk only and here is also have one option called is sign in okay inside the user you get get the user information like name profile image email and he sign in will check whether his user is sign in or not now if you scroll down we can add a condition okay if user is sign in then we going to show a button called user button and this user button is utting from the clerk we going to replace it later on but right now we'll keep this user button and if user is not login then we will show this button to login it here we need to add condition so this is a ternary operator I will format this as well and this is the way you can do it let's save it and boom if you see now we have this beautiful user profile icon which is the actual user button if I click on this one where you'll see this uh beautiful drop down which you have the option to manage the account and everything this is again provided by the clerk only which is the sponsor of this video now uh obviously we'll make this item to be in the center because it was not in the center I think now it's good now if you see our application is updated now if I click on sign out you will see it's changed to login as well also um I think here we need to give the redirect URL okay we'll update it later on and we'll go to Local Host if you see we have the login obviously Local Host 3,000 is not accessible without permission so to fix this issue because we want to make sure that local the default page which is a slash is supposed to is not supposed to add authentication for that one so you can do that or fix it using the mid. JS file so inside here right you need to add a public path okay so public route so and this particular line of code again you will find it on this documentation okay so inside the middleware see like this okay so here you can just add the public routes so whatever the route you want to make it public means you don't want authentication you can add that particular path so in this case we want the homepage don't need a authentication and now if I try to access local 3,000 see you don't need authentication and right now we did not loging to the screen also if I go to the header and here on the click of this login I'm going to add a log uh sorry the link which will redirect it to the signin page okay like this and save it now if I click on this login see it's redirect to the signin page now let's log in it and then once you log in you will see it will redirect to the Local Host along with you'll see the profile image as well okay so this is how you can guys you can add a beautiful clerk authentication inside your application let me know your thought about the clerk if you really like it press the like button to this video as well and just comment down in the comment section like clerk you can access the uh clerk link from the description so click on that one and then create your account and start building this beautiful application so in order to store all of our data we need a back end our database right and for that one we are going to use a super base super base is a one of the best alternative for the Firebase and super base is based on postrace database it has their own SDK so it's very easy to connect with the super base as well as to read and do the all the crude operation as well U super also provide a lot of different feature like the most important service like database then it has their own authentication the storage where you can store the all IM images or files okay also it has the age function and the real time database so that you can uh implement the application like chatboard as well so uh and the most important part about the super Bas is a free to use okay they have a free tire as well where you can uh use it for free the the uh if you don't have an account on the superbase uh then go to this super.com and then create a new account then we'll go to the dashboard if you see right now I don't have any project so we'll create a new project and then give the project name so in this case I'm going to add real uh estate then you can add the database name so I will add some database name or let's generate uh I will generate the one I copy this one and then create new project so select the region which is nearby you and then click create new project so once the project is created you will see it has this uh public key and the service role U I don't think so we need that one but this URL is important okay so this project URL configuration so we'll see that in a moment but if you see these are some of the uh docu sorry project which is already there okay and you can just try that one so right now uh we are more dealing with the uh uh database right uh data to store the all the our back end information everything so right now if you see uh the project is still setting setting up okay so we'll wait but in meantime just search on the Google super base uh nextjs okay and then uh you will find this documentation that how to connect the super Bas with the nextjs so if you see these are some of the steps that we need to follow so on super provide a server side um SDK as well as well client side as well so right now this documentation is on the server side so we'll Implement that one so so first thing right uh you need to create a project but we already have the project so we can just install the super base okay so um better let's go to the our application and over here we'll just type npmi at superbas superbas JS okay so this particular hdk will use on the client side click enter and then it will install the super base then next thing if you see right now our application is is ready to use okay and this is the project URL uh to use it okay so let's copy this project URL and then uh we'll go to ourv file so let's go to the sorry uh. Lo file here I'm going to add that nextore public here we'll say super base URL and then paste this one and also we need this API key so we'll copy this and here I again we'll say next public super base API key is equal to and paste this key let's save this one and then go back to our application now in order to uh initiate the project this is simple uh JavaScript code that we need to add so copy this everything as it is and then inside the root directory I'm going to create a new folder called utils okay as this is outside of app uh app folder so you don't need to give or start the folder name with underscore or something like that right and again this is not a route and inside this uh utls I'm going to create a new folder called super base or this need to be a folder so we call it as a super base and inside that I'm going to add client. jss file here paste the code which you copied and make sure that you refer this super base key and the URL so I will remove this one from here and then uh from the env. loal file I will just use it so process. EnV do the uh URL and same thing for the key as well so process. do this particular key and then with the help of create client it will initialize the super base so whenever you want to use the super base it will automatically or when we import it right we have to import from the client.js so you don't need to to uh create a client every time okay you just refer to this super base and then you can access it obviously we will uh see it once we start developing the application now as our project is ready to use it now if you go to this uh database right here right now these are some of the um uh features that you will see on the left hand side but let's go to the table editor okay and this is the public schema that we are creating inside here we'll create a new table and we can give your name as a listing okay so this is table name you can give the description if you want and over here you can add the column depends on your requirements so now here we need a lot of column but we'll go step by step and depends on the requirement we will uh keep adding the column inside our super base okay so first thing uh let's add column so here I'm going to add address address of which the user want to list the particular listing so that one so I will keep the uh type as Ware now here you have option to set whether you want null or empty string also in setting if you go to the setting you can make it nullable unique or something like that right so I will make this as a unique because I don't want to add uh uh same listing with the same email address that doesn't make sense right so you can make this as a unique then along with the address I want to add the coordinates so this coordinates will be in the form of latitude and longitude so it will be a Json format so I will keep this as a Json then after this uh I'm going to add a created bu who created this particular uh listing so that users's email address we can attach so that need to be in the form of Vare and again here I will see that okay this is a not unique but this is a not nullable so some value need to be there and one more important thing that I will put the active status okay so this active status will hold whether this particular listing is active or not okay and we can make the value true or false so I keep the Boolean value by default I'm going to add a default value over here okay so I don't know why it's not showing but by default it will add the false okay uh it's supposed to have some option over here to add it like I don't know but yeah you can add that as a false okay yeah here only this is the column so let's add a false as a default one then uh obviously right now we'll keep at this moment but there are some more option that the type of the um listing whether it's a sale or rent the property type bedroom having bedroom everything all the fields we going to add it but later on because I don't want to put all of this thing at once okay and now save this one now once you save it right uh this particular table has connected with the some policy okay when I say policy only some of the only authorized user can access it but as we are not using the superbase authentication we already using the clerk authentication so we can add your own policy so right now let me go back and if you see here we have option called add RLS policy Okay click on this one and here right now uh you can create new policy you can disable the policy as well okay it's up to you but you can create new policy here uh you can give the policy name we'll say allo public we'll say public only simple and here I want all the operation that user can perform and here we'll say true only okay so using true means I'm giving in fact I'm giving access to the all the users whoever is trying to access from my application and then click save policy now this policy is attached to our listing okay and if you see the O policy uh the one polic is get added now obviously you can insert the row as well by adding the data but right now obviously it doesn't make sense to add it from here uh next what we are going to do we going to create a new uh page okay so when user click on your post your ad it will redirect to a new page and then it will have option to add the listing information okay but right now I hope you understand how easily we integrate the the the super base now obviously if I go to this API documentation you will find how to add the documentation all also they have the graphql and everything we going to learn in this particular course because you will learn how to fade data how to write a data update it delete it all of this thing you going to learn uh in this course so you will learn a lot of things from the super base now uh in meantime uh whenever you get a chance I will definitely suggest go through the some of the features in the super base so you'll get much more understand understanding if you really want to know about the superas particular feature let me know in the comment section now in this particular chapter we are going to implement add new listing page where uh user went to the when user click on this post your ad right it will open the new page and then it will go to this uh on add new listing page where user can select the address now this address uh user can select it from the Google at to complete drop down user will type something and then it will get the Google Play suggestion and then select the address once user click on next we going to store the information like address who created it inside the super base immediately as soon as user click next obviously it will return the new record ID this ID um we going to use to navigate to the new page which which will be the dynamic route to add the remaining information like uh the uh whether it's for rent or sale bedroom bathroom parking all the details okay and when user click on the save and publish then it will update that particular existing record inside the super base so first it will create the new record then add the remaining information and then update that existing record okay so this is the basic workflow that we are going to follow so if you see here uh we going to add this page which contains the Google Play aut complete so let's go back to our application and let me close all of this tab first and first thing we're going to do is to create a new folder to keep all our routes in that particular folder so go to the app folder and inside that I will create a new folder and we can call it as a route so I started with the name uh curly brace sorry um circular brace because we I want to organize all my roots in one folder inside that I will create a new folder and we'll call it as a add new listing okay and inside that we'll create a page. jsx file let's add a default template and here I will add add new listing like this and then save it now uh if I go back to our application now on the click of this one we want to navigate to that particular page so uh let's go to the header where we have that button correct and here we have this button correct so let's wrap this inside the link H reference and here we'll just simply add that path listing add listing or it's add new listing right what's the name I forgot add new listing I think so yeah add new listing that's all right how simple it is with the help of link you don't need to add anything just wrap the the component inside this link tag and that's all now save this one and let's go back to our application now if I click on the post your add right let me click on it I don't know let me refresh it this once and also before uh showing the demo right here I want to add inside the add new listing and loading. jsx okay so whenever page is getting load uh this loading. JS will execute and it will just show this loading text okay obviously you can add the actual loader now let's go to this post uh your add and if you see right now you are in the add new listing page uh inside the add new listing page we have the data but the problem is here I think it went back behind this uh header okay so uh here instead of margin 28 I sorry 26 I changed to 28 and now if you see the add new listing page is showing on the screen now let's go back to our page and over here I'm going to add some of the information right and if you see the we going to make the layout similar like this so first thing let's add a h2 tag and here we say add new listing now in uh inside this add new listing right um we also add need to add the add to complete Google place but we'll add it in moment let's add a class name we will add a font bold text to Excel and let me bring this side by side so it's easy yeah and then we'll add a class name We'll add a padding of 10 padding uh then I will add a flex item to be in the center and justify in Center then after this add new listing I'm going to add a one de inside that do uh let's add a text we'll say enter address which you want to list uh so this is a flex make it Flex column and give G of five and after this one we want to add the auto complete like Google Play auto complete uh I going want to give some font uh we keep medium but just text to be in the gray find and save it and if you see this is how it looks now for the Google auto complete right Google Play auto complete I'm going to use this Library called uh react Google Play auto complete I will keep the link is in the description now first thing let install this uh Library okay or depend see and then uh you order to use it is quite simple you just need to add this Google play at to complete just provide the API and you are good to go so copy this Google play at complete fi and then let's go back to our application and paste it here make sure to import it okay and here you need to provide the API key now this API key you will get it from the Google Cloud console so just go to this Google Cloud console okay let search and then if you don't have an account create a new account now many user ask me the question whether it's a free or not free or it's asking me billing and everything right the thing is you need to add the you need to add a billing because for the validation purpose okay so Google makes mandatory to add the billing information but they will not charge you the single penny if you go to to this Google place pricing right and right now the the Google API right they will give you the $200 of credits every month okay so if you see you will get a $200 uses every month means after the uh first month right they will give $200 next month you again they will give $200 okay and up to $200 uses you can do it so for the development purpose or if you have a small business I recommend you go with this and you they will not charge your single penny until unless your users is more right once you create an account and sign up here okay you will see the dashboard like this then if I go here right and go to this API and services inside this API Services let me uh it's loading okay so it's loaded now go to the cred initials okay and here you can create a new credential so click on create credential and obviously we know we need API key so click API key and now if you see it's generating the API key for us okay and see the API key is ready now let's go back to our application and in. loal file we will paste that API ke we'll say nextore public Google place API key is equal to and past this key then let me close this one and you can obviously rename this one but let's open this API key here you can say uh I will just rename Google place map API key now same API key we can use it for Google Map as well now here you can restrict this okay to your application or to website so that third person will not use this uh particular key and then you can add the website and all of these things up to you what you want to add it right even you can select the restrict key and you can select which key you want to add it so this key I want to add FL Place API then uh Google Map as well okay so let's add map so map ended this Java hdk I think that's enough and then click save now again uh if you search here the place uh API right and if you go here right the places API make sure the place API is enabled right now if you see right now it's saying that API enable but you might have option or button to enable this API key so make sure to enable this button same thing uh search for the uh map okay map hdk okay and if you see we have the map hdk as well uh I don't know whether we need a special for the JavaScript as well okay but uh see map JavaScript API see make sure to enable this one as well okay so this will help us to display the map on your application so this couple of API you have to enable it and and once you enable you will see this API key is now ready to use you can every time you can use this API key okay you can show it from here now uh we already inserted this API key then we are good to go now copy this API key and only thing you need to add inside this ATO complete so paste this API key process or this need to be in process. EnV and provide the API key and save it and that's all now if I go to here right now it's saying is not a function we have error because uh we need to use as a use client so instead of uh adding this lineup code over here what I'm going to do I'm creating one component because I want to use this Google play at to complete at multiple location so we'll create a new file and we'll call it as a uh we'll say Google address search do jsx add the default template and over here I will put this line of code okay make sure to import this one and save it and now import this component so you can use it at multiple location as well now save it and obviously I forgot to make this as a use client and save it now you make this as a client side uh Let me refresh it I don't know why still we are getting this error okay so maybe we have to remove this import statement and if you see now we have this beautiful add new listing now if you type something you will get the suggestion see and this suggestion we are getting from from the Google Map now here right I did not add anything only that component I provide the API key and it has all the details now if I go to this documentation right if you go to this repository here you will see the documentation that how to use it and everything now there are lot of different customization you can do it okay it's up to you what you need to add so now let's customize this address search so first thing let me bring this in one line and here they have property called select props inside that you can provide the placeholder here I will add search property address okay now if you want is clearable you can make it true then uh I will add a class name and I will make sure it the width is full um along with that it has a method called on change okay so whenever the value get changed right it will return the place information and I will show you uh inside the console what are the information it will return okay and then save this one now if I go back to our application and go to the inspect panel inside the console let's clean everything and here we'll say for example some address and boom if you see it on the change right we got this response which contain the label which is the actual address and the value so inside the description we have the place ID and lot other information okay so obviously uh once we want to store this we will look into that one but for now I hope you understand how we use it now let's uh add some styling to this particular uh component so here uh about this Google Map I'm going to add a map pin okay the icon so it will look little better here uh let's add a class name make it flex and we'll give a gap of two item to be in the center and we'll make width to be full okay so this is how it looks uh for this map pin I have a class name we'll give height of 10 width of 10 because I want to give a padding of two we'll make rounded to be full and we'll make text to be primary and background slate color maybe 200 something like this let make uh primary only but lit or not primary but purple color okay so purple maybe little lighter something like this let's make not make uh we'll make our rounded left side only and large okay and uh not to give Gap oops sorry my bad I think that's good okay and obviously uh if I go here I'm going to add a class name We'll add a padding of five okay uh rounded corner so we'll make a larger We'll add a order we add a shadow as well and we'll make Flex Flex column gap of five and let's see how it looks so this is quite small okay so so here what we can do uh we can give the height directly okay so let me wrap this in one de because we want to give some width and height to that box so I'm going to do class name first We'll add a margin top to 10 We'll add on medium if the screen size is medium we give margin X to uh 56 and when the screen size is large we give margin X to 18 and uh I think the WID need to be bigger that's correct and after this one uh we want to Simply add button okay so after this Google ad search We'll add a button for the uh we say next and let's see how it looks here so uh for this deal I don't know I go the width sorry width to be full I think that's pretty good okay and on the click of next obviously we will jump to the next uh page but right now on the click of this next we want to store our data okay so whenever you just sck the information some of the information from like address and all we want to store it so as I as you remember right along with the address we also store the coordinates and we need to get the coordinates information okay so this particular API okay uh also provide the coordinates as well so if I jump to this documentation and click on get started here you will see how to get coordinates okay so see GE code by uh I think yeah get latitude and longitude and this is the example that you can get the latitude and longitude from the address so let's Implement that one as well uh so inside the Google address Place API as soon as we get this information right which is on change and getting the place information uh we'll also write a method to get the coordinates so here we say GE GE code uh by GE code by address and inside that we add the add we need to provide the address which is Place do label okay which is the address uh then it will return the result okay oh result and then uh it has a method called get lat longitude and this result we need to pass it here so this result will has the information I think yeah zero and then operator which contains the latitude and longitude okay and we'll obviously console this first latitude and longitude and if you see this is the exam simple example right so this is nothing but the one which I wrote it so you can just copy it from here and I think that's all let's save it and let's test this out so go to the inspect panel and oh okay yeah inside the console if I select some property okay and if you see right now we got this one but it's saying this API is not authorized to use this service API okay so the it's not converting the coordinates because it it need a special uh permission so to fix this issue right we also need to uh enable geoc coding service so if I go to the credential and if I type Geo coding over here I don't know whether we have see so this go coding API make sure to enable this ge coding API as well in this case I already have enabled in my project now go to this Google Play map API key and here you can just search for the Geo coding and then enable this one okay make sure to add it for this API because we restricted to some of the API and that's the reason we give this error okay but now if you refresh this screen so let's refresh it clean this out and then let's search it and now in this case if you see we got the latitude and longitude for that given address and this information obviously we needed so now next thing we need to do we need to pass this both the information uh to this page. jsx file to store the data now let's send this back to the uh parent component so let's add this latitude and longitude so here we'll simply uh say set coordinates and we'll put this coordinates okay so inside the bracket we'll say latitude and longitude and save like this let me remove this console and save it and along with that we also need to save the place information means we need to send and place information so here we'll say selected address and we'll pass the all the place information now both this uh value we need to pass so here I will pass it here selected address comma uh set coordinates so these two property or two props we we need to pass back to the parent one which is this page. jsx so here we will accept it so first thing is uh the select address and here obviously we'll get the value and we need to save in one state so we Define one state we'll call it as a uh selected address comma set selected address is equal to use State and another one is for the uh set coordinates Comma just coordinates set coordinates is equal to your state and here we uh set the address from value and the coordinates it also have wring the value so that coordinate with the set coordinate as a value now we have this both information right and for this button I will add on click method so it will we'll say uh next Handler and we'll create a method called Next Handler over here constant next Handler like this now if I want to console this information which is selected address and the coordinates we'll print this out to make sure that we are getting data and on the click of this next we just consoling it so right now we got error because we use the hooks to make sure that then this um page need to make it as a use client so save this one and let's go back and right now okay let me open the inspect panel as well so here if you see the structure is quite bad uh so here uh I just remove this padding x228 and now it's good now if I go to the console make sure to clean everything everything and let's search some address so if I search this address right uh and click on it see we have this place that is we are getting but on the click of next we've got one error that it's saying select is not defined that's where so we'll see what the issue oh so this name is incorrect so this need to be selected address and now let's test this out so click next and if you see we have the place information along with that we have the coordinate information now uh we have to enable this button only if we have these two information like address and the coordinates okay so we'll add a condition uh disabled and the the condition if the address is not selected which we'll call it as a uh selected address or if the coordinates is not there okay so if this two condition is not present then the button will be disabled if you see right now let me refresh this screen and right now if you see the button is disabled next uh let's save this information in the superbase database now as I told you in the beginning that uh you want to learn how to add the uh or write the query right so if I go to this uh super base table right here you will see the option called API docs click on that one and it will give you the option that uh the query that how to rate rows or filter insert row and lot of things in this case we want to insert a row so click on this one and this is the example this is just example okay this is not actual query but this is example that how to use it so copy this query okay and we we need to install in the listing so copy this one and paste it here oh I don't think so I copied so again I will go to insert row and copy this one and paste it here let me format this now as this is a promise you have to make this as a sync now over here uh make sure to import this super base okay from the uh super base client which we already have so first thing it's not getting imported because inside the client.js we have to export this one so export this super base so that once you export it it will available to use it in your application and now if you see as as soon as I do the control space you got the suggestion saying you can import from the U superas client so make sure to import this one now you are importing inserting the record inside the listing table and the column which you want to import so here couple of column we want to add the first is address then make sure to uh add that one the value so we'll say selected address then we want to add the coordinates so add the value for the coordinates as well and the who created this okay so which is the created created by okay now in the created by field we need the users's email address now in order to get the user information the login user information from the clerk you have uh clerk hook okay which call it as a use user if you see this is importing fun from the CL nijs and we already used this one right so from this user if you type user do primary email address do email address and from there you can get the created by okay so this need to be created by and if you see right now inside our we have this created by column coordinates column and address the active column is by default one now everything is looks good let's add a condition if data because this is the data if data is uh we got the data mean it's successful we'll consol it say uh new data added and then we'll just write the data okay if there is any error or means or we just just write if error we console the error as well and save it now let's go back to our application and then test this out so I'm going to add property if you see I got the suggestion click on one of them and let me open this panel side by side and then click next and if you see it's saying new data added and the inside uh once data is added inside our database it also returning the ID of that database this ID is important in order to go to the next page okay to update or to add all the information to update that record but if you go to the database and if you see now inside this super base as well we have this information so right now we added the incorrect information because in address we just want the actual address and not all of this information but in coordinates we have the Jon format coordinates and the created by now just to fix this here the selected address so in this inside the selected address we can access the address by using label now now once the data is inserted you can add uh the toast message right and that to message you can import it from the Shad CN so shadan has a component called toast from here you can import it okay and this is how it works but they recently introduced one more component called sonar and this is pretty much uh similar but it has a more feature see you can see the previous three to message and the main important thing is I think better uh easy to use than toast so copy this uh command in order to install it and then uh you need to import this toaster component inside the root layout so uh let's go to this root layout file and let's add it here can make sure to UT from the toaster I will add about the children and the next uh in order to use it just write the import this toast and then you can use use it so what I'm going to do so inside this once we have the data I will just toast it and we'll say new address added for listing and there if there is enter error then we'll say something like server side error okay now let's save it and let's test this out right now this record is invalid so I will just remove it because the address was not correct but now if I clean everything and let's search for the address and click next and if you see we have the it's saying new data added let's go here and if you see now we have the proper data so proper address and the coordinates that's perfect now over here once the user is adding the data right it some it will take some time because we are adding into the server so we can add a constant loader comma set loader to make sure that uh uh the button is disabled right for that one we have to make sure the loader is uh true or false so right now initially we can make it false but as soon as user is click on next we'll set the loader as a true and once we have the data we'll set the loader as a false and if there is inner we still set the loader as a false and whenever the loader is true so we can add a condition then disable the button okay now let's test all of these things together and one more thing we can add okay whenever instead of just putting the um load making the making this as a disable we can add a condition so I will keep this condition as well but instead of showing the next button I want to show the loading effect so here we say if loader is present then I'm going to add a loader from the Icon otherwise show the next button and for that loader I'm going to add a class name and we simply animate to spin and save it now let me show you how it looks so let's add one more property click next and see okay and now if you see we got the toast message is saying that new listing is get added if I go to database if you see the ID3 with a new address coordinates created by and the currently is active is false because the user is not published this particular uh uh listing okay so that's how with the help of Google place auto complete we implement the first page where you can user can search the address and add it into your database next we going to add much more information to the existing record so that user can publish it so now we are going to implement the next page where user can add more details about the given listing so if you see uh on the screen right here once user add the listing right uh our application will check on that particular page whether that record is belong to that user or not because anyone can go to that particular user um URL right in order to edit so better to check that with the user that that particular record is belong to that user and if not obviously we'll redirect him to the homepage okay and obviously from the super base with the help of users's email address and the record ID we will just confirm okay this particular record is belong to that user and then we will redirect him to this particular path where we can have a route called sledit SL the record ID and then user can add the all other information okay because our record is already there only the we need to do is to update the information with the extra Fields And once it's updated or once we add the information then we will update it inside our superbase database so uh let's go to the super base and here we going to add some uh few more column so here in order to add extra column inside the listing you can click edit table or you can even add it from here as well insert column okay but if you want to add more columns at a time go to this edit table and over here and if you scroll down here you can add more column so a couple of column I'm going to add so type uh which is the type of like whether it's a sailing or rent so just I will add a type of Vare okay and next column I will add more column so I will pause the video and now I added all the uh required columns okay you can take a screenshot if you want with the uh data type and then click save uh some okay so I don't want this empty column and then save it now if you see all the column get added so we'll wait to make sure to all column is ready to use it and once it's done you will see the all the column is available over here see right now it's null because we did not have the data and we did not updated that particular record now let's go back to our application and now uh on the click of next we want want to navigate to the new URL right so inside the route folder I'm going to create a new uh route called edit listing okay and click enter and inside that I want to make a dynamic route the reason is I want to make Dynamic route because if you see right uh our edit listing and after that one the record ID we are going to pass so in this case for example two or six right and every time this Rec uh the ID right is going to change and we cannot create that much route right so that's the reason you can add the ID over here like this okay the dynamic which is called a dynamic routing now here you need to give the folder name inside the square bracket and then inside that one you can create a page. jsx fold file so add the default template here we'll say edit listing and I will paste it here okay also inside the edit listing I'm going to add loading. jsx file okay that's all now uh our edit listing page is ready if I go here and H uh hit enter if you see now edit listing page is showing on the screen let's go here and start building the edit listing page so first thing uh let's uh so here first thing thing we need to do is to just add a form okay so simply I'm going to add uh h2 tag and I will make sure that this will be a client side I will make this as a use client okay to make it simple will just say enter some um more details about your listing I make this class name font bold and uh text large class name I will give padding X to 10 and save it and now if you see this is how it looks I will increase the font size to maybe uh Excel when the screen size is medium okay or larger we make padding X to maybe we'll to 16 or let's make it 20 something like this so I added the 36 and margin y to 10 as well uh I think here we'll make two Xcel that will good okay next thing uh we want to add the DU and inside that we want to add all our form so here simply I'm going to add a du okay and inside this let's give class name we'll give a padding of let's say eight uh rounded large and we'll add a shadow medium so this is how it looks next thing uh we'll add a du and we'll du add a class name We'll add a grid grid column two when the screen size is medium or larger otherwise grid column one or make it three actually that's really good and here I will add a one more de and inside that I will write h2 tag here we will say do you want to or just we say rent or sale rent or sale and here we going to give option now uh it's here simply I'm going to add a checkbox sorry not check boox the radio box whether it's a uh rent or sale and if you see uh from the Shaden radio group you can import that one so I will copy this radio component paste it here and then in order to use it is quite simple first thing you need to import uh I think we need to import the label as well make sure to import the label component so here is the label component because uh it uses the label as well okay and then once you install this label and radio component we already import this one then copy this radio group and we'll paste it here now just format this document perfect now if you see uh we just add this radio group and we just rename we will rename this one right now if I save this one and this is how it look let me show you see we have two option option one and option two and it's simply saying uh okay let me add a class name with the Flex Flex column so that we can do gap of two and uh for this h2 tag I'm going to add a class name text large and here will text slate 500 okay something like this and then we have the two options see now you can edit this option so here I will say rent and second option is sell obviously hm for I will change this to sell everywhere you have to change this to sell okay this yes it need to be a capital and here we need to change to rent and the default option I will keep as a sale okay and I think that's all let's save this one and if I refresh the screen if you see by default is sale but you can change this later on any time and now we have option for rent and sale as well next we need to add the drop- down to select the property type so for the drop down obviously I will go here and select the select operator or select component okay so this is how it looks here you can select from the drop down so copy this select first inside your application so that you can use it so this is the import statement let's copy this one and we'll paste it here and then this is the select uh component example so we'll paste it after this okay so we have this D wraid over here right so I will create another D for the select and if I save it let me show you how it looks so this is the how it looks right obviously we need to give the h2 tag for this one and we'll say property type now uh same font and style I'm going to apply to this S2 tag and we'll change this value so here I'm going to add the three value one is the single family house then townhouse and then condo okay and uh uh obviously we need to change the value so I will keep the same value over here because same value we going to store inside our database side so that's the reason you can add more value if you want and uh I think that's all right so let's see how it looks okay placeholder name we'll change Select Property type and this is how looks oh the text is quite bigger I think something so we have to follow this S2 tag not the upper one and this is much better now and for this let's add a class name Flex Flex column and gap of two see now perfect after this we need to add uh option for bedroom and all of this now what I will do I will just uh enter it okay because you know now how to create the form you just add it okay so I will pause the video over here because I don't want to make it uh this video little longer so we'll just I will just add the all the field which is required and you can also try obviously if you face any issue the source code I will keep in the description so here I added all the required Fields uh with the help of Shad CN component and this is how it looks so it has a property type which is drop down which we already added but along with that now it has a input simple input which is bedroom bathroom built-in parking lot size everything right now if you make this input as a number field for example bedroom obviously we want in the number field right so uh for the input you can mention the type as a number and now if I try to enter some text it will not allow only number is allow or decimal same thing you can do for bath bathro builtin and everything which is the number right so I will just copy and paste it so built-in will be the number the parking uh will be the number right the lot size the area and the selling price and the HOA right so most of the thing obviously text area is the text so we'll keep as it is now once you add everything right now it's time to save this data first okay save in the sense uh we have to gather this information first and then we will store it in our inside our database now we cannot add or create a used state for each of these field right we can do that but that will be a little uh complicated I will say so uh in order to Avid that we going to use a form and for that one we are going to use this formit so formit is one of the best form Builder inside the react and uh let's go to this for.org and here I'm going to tell you how to implement it so let's get started and the first thing we need to do is to install this forming so it's very easy command just type npm install formic and then it will install the formic for us okay and save it now obviously if you face any issue while implementing you can always refer this forming documentation and here you'll see the all the uh way that how to implement the formic or how to add it right so first thing let me format this document and then we going to wrap our complete de okay so this particular D inside the formic so you have to write formic and if you see it's importing from the formic and to this formic right uh let me close the tag first and as this is a du I will wrap it here like this now to this formic we can provide the initial values okay if you have any initial value you can Pro for example let's say type okay and the initial value you can add it as a sale or something like that or you can keep it empty as well so whenever you want to update your information that time you can provide the initial value so here for example let's add property type okay and we'll say for example townhous or you can keep it empty as well this is just for example now it has one property called unsubmit so once user click on the submit button right it will return the data so uh let write values and obviously we will print that one so we'll just console this values and then here uh we have to wrap it like this okay so it will have values it has a method called handle change okay something uh handle change and then it has a one more method called handle submit and then we have to wrap it here like this oh I think something we did wrong so here I uh I think I forgot here let me undo this one and this need to be like this right and then here uh we will add the complete bracket and then we have to wrap it here like this okay I think yeah theor is gone obviously if you think that's a little complicated to understand every time you can access this documentation now after this we will wrap our inside du inside the form and which has a onsubmit method and we'll just simply add handle submit so whatever the form you have right for that one you have to wrap inside the formic and this need to be like this right and if I save this one and if I extend it right make sure to the uh we have this submit button correct so so we kep these two buttons save and publish I think that's good right uh let me again format this document I think that's perfect now next thing if you see the uh this form documentation you need to add the name of each of these field right and the onchange method okay which will handle the change now so what you need to do uh first thing for each of the field you need to add if I let me show you the example right uh the name like this see bedroom I already added so each of the input you have you need to add some meaningful name so better you can add it the similar name what you give for this column okay and for each of them you need to add the handle change method for example if this is the input right here you can add uh the on change method on change and then inside that we'll add a handle change see so copy this for all of this uh input so I will just paste it uh so whenever you will see input just add it for the select and the uh radio button is little different so I will come to that point as well and save it okay so for all the field except the select and the radio group I added now for the select right select has the uh select don't have the on change method in chat so they have on value change so here it will return the selected value let me show you inside the console so let's go back to application and inspect panel right so we added this condition to this select so if I select the town for example if you see the town is coming if I select condo the condo is coming right it need to be down only yeah and now we just simply going to change value dot property type is equal to and the value which is e right we assign this uh properity value to uh to the selected value right and that's the reason this value is important so that you can manually also update it same thing we going to do for the radio change so it the radio group right also have the uh on value change method so if you go to the radio right and if you go to this example where they use the form and for the radio group if you see they also have the on value change so here we'll say on value change let's say there's a value V and let's consol it to make sure that we are getting the expected result so if I select the rent if you see it's coming rent if I select the sale the sale is coming and now what we are going to do we will set it using values do type is equal to the whatever the value US select which is V and then save it now on the click off say or publish right we are just consoling the result so right now let me clean this out and if I click save and publish you'll see the type of property is empty because we did not select anything but if I select some value and property type if see now we got the result correct let's add some more value so for bedroom so for bathroom so builtin the parking area lot size the area total area for example let's add some pricing the HOA I will add some sample description and if I click save and publish okay so it's saying for ho must be great than equal to 1900 okay so that's so validation we added so let me remove that validation okay because by mistakely I added see if you see right uh to the HOA so mean max value I give so let me remove that one and now I think let's I think I'm okay right and now if I click save and publish see we got all the information area bathroom H everything right and you don't need to add it this field in the form of just on anything right it automatically the form me automatically taking care of that one you just need to uh add the onchange handle change method so that for me will automatically assign the field name along with the value and will give you the result inside the on submit method this is how simple it is okay now most important part is to save inside our database now as you know that we already have this ID and this ID is nothing but but the matching ID correct so obviously right now the two three we we'll open the two click enter and if you see over here that uh we have the listing two and this record depends on this record ID we need to update our uh listing as well right so the question is how to get that particular parameter value so it's very easy you just need to write constant params is equal to use path name okay and let me show you what it's return so inside the use effect I will just print this out and here we say console.log parents okay let's save this one and now if I refresh it it will return this edit listing /2 see okay I think that's correct right 23 yeah okay now obviously I want this second parameter so you can just do dot split uh using this slash and then take the second value and if I refresh it now see it just return me the ID perfect right next uh you need to write one method called uh on some submit Handler and this will take the form value like this and we already have the ID which you need to update okay so what we we are going to do now uh we need to define the super base in uh update statement so let's go to the super base go to the API doc here we need to update the roads right so copy this uh query example and then paste it in your project now if you think that you don't understand let me explain you this particular query so obviously when we Define this super base from the super base client so make sure to import it then uh do from means from which on which table you want to make update that table name then we are we want to make update operation so update and which column you want to update okay so in this case instead of passing one by one column I will pass the complete form value because in the form value we have the field and the value as well okay the condition we need to update obviously which is equal to so in this case I'm going to pass ID and the ID will be this parameter information so copy it and paste it here and the select query it means once it install sorry once it's insert or update it will return the value so here I will like console.log data okay but let me add if data is available then inside that I will console it but along with that I'm going to show the toour message that uh listing updated and published something like this right and SA save it uh I think we are good now call this onsubmit Handler method inside the onsubmit like this and then save it and once you save let's teste this out so I think uh uh let's add some value so we'll select the townhouse let's make it sale the bedroom I will add three bedroomroom bathroom the three built-in let's say 2015 parking has a two lot size parking plot size is 1,900 oh lot size we can add bigger the selling price let's say $350,000 okay the ho will'll add 2 10 sample description and then click save and publish and right now we saw you we have one error right obviously this is patch patch method is to update let's go to the network Tab and over here inside the network tab if you see it's selling column selling price on listing does not exist so by mistakely um I give the wrong name for the pricing okay so just update I will update it so here instead of name and I will just say price okay that's the column name inside our table so let's clean and let's save it again so one more error that obviously we need to refresh it that's weird because we updating the form and this form need to refresh it so let me add all the values I will add some random value now and then save and publish and boom if you see it's saying listing updated and publish and now if I go back to our record which is I updated the record number two see and if I scroll on the left you will see the type property type all of this value are F get updated immediately so cool right so this is how you can update the record now obviously if I open any other record right and which is not belong to uh me right which is the created by and which is not belong to me we need to restrict it to or access it right for example there is a one record with the name with the ID 10 right if I enter it see I can able to access it right but that's what we need to avoid it the question is how to do it so simply um when user come on this particular page we going to check with that ID that particular record is belong to that user or not so it's very easy let's Implement method called constant check is uh record correct record we say correct record okay or we just say verify user very verify user record just meaningful little bit and here um we'll select the we'll add a select operation let me add it directly so here constant it will return data and the error message if there is any error then await super base dot select statement we need to add okay uh yeah that's right oh sorry we need to add from first and from which table we need to get the information so which is the listing dot select statement okay so we'll select all the information dot equal so inside the equl we'll say created by is matches with the user information so we need a user information over here so constant user is equal to use user okay and as we This Is Us way promise we'll make it this async and inside the created byy we need to provide the user email address like this and the next we need to add equal again and then we have to pass this ID see this one right so ID which matches with this param split the second which is the actual ID and simply here we'll say if data do length is greater than equal zero obviously then we will redirect it to the uh uh home screen maybe okay so in order to programmatically R we need to use the use router hoop from the next SL navigation okay and then simply We'll add router. replace and the homepage and here we'll say verify user record so we'll call this method whenever the user information is available user that's all right let me comment this code and save it now if you see uh Let me refresh this screen uh so um before showing that one more update I just realized that uh because this is a dynamic path right and if you see we have used the ID we can directly use this ID as well using just you have to accept like parents and and then uh you can use it here instead of doing this split and all so here you can just do sp. ID okay and same thing you can do it over here so parents. ID okay because this is a dynamic path so that's the reason now save it and uh let's make sure that everything is right and one more condition that this need to be a reverse one the less than equal to zero okay let's save it and if I go here right if I refresh the screen and if you see it's going to the home screen because this 10th record is not belong to me right only record which is uh edit listing SL2 is belong to me and that's the reason now it's showing or it's allowing allowing me to edit that particular record okay so uh guys this is how you can update the record obviously this is just a one part that one user add the record and is to navigate to this particular page now let's Implement that missing piece between the first and second screen right so when user click on this button right where we are handling inside the next Handler and here I'm going to add the router so constant router is equal to use router and make sure that use router is importing from the navigation okay and let me go to this post your add over here so right now I'm on add new listing if you just click on the next okay uh obviously we are inserting data but here we are getting the um the record ID and all right so here we'll add router dot we say replace and we want to go to the slash edit slash and the data do id data. id means the new record new uh ID of the inserted record so let's taste this out so if I go here let's add a new record so we'll say 153 Cali Loop okay now if you see button is enabled click next so right now if you see uh we got the undefined data let me check what's the issue so let's go to the console and uh the the problem over here I feel it that the ID the which we use right is incorrect so it it has a it will return return the list of arrays so maybe it's need to be a data zero of ID so let's test this now again so we'll add 175 C Loop click next and now if you see it's went to the edit /5 oh again my bad it's not only edit but it's need to be edit listing okay not edit listing this path and let's take this out okay let me let me delete all of this record for now so I will delete all of this record because we don't want that anymore but let me go to the post your add and here I will select the new record okay and click next and boom if you see the new address added for listing the edit SL listing sl6 and now you have option to add this detail now let's add these details so bedroom I will add three bathroom 3 buil-in now you can even add the validation okay it's up to you I will add some random value okay and then click save and publish and if you see it's saying listing listing updated and published now let's check in database so this is our database it has a address coordinates the created by but along with that it has all the value which we added inside this particular form okay so guys that's all for this particular chapter I know it's little complicated to understand but this is quite easy right you just need to understand the flow how we save the data that's all and how we update the data as well now next uh we going to uh update the images we learn how to upload the image to the super base uh storage so that we can also attach it to this particular record so we'll see you in the next chapter so here uh one tip I want to give you so right now I'm on the uh sixth um record okay and this record obviously we already had the all the value right but right now uh even though if you want to edit the exis existing record right we can directly show the default value if there is any value right and if you see uh when we we are verifying the user record right we are we are already fetching that record information so here I can Define this if the data is available we can store that data and then we can set the default value inside the form so let's define one state we call it as a uh list uh listing comma set listing is equal to use State and here uh we'll simply set the listing as data of zero okay because it has AR list and the first record we are setting and then save it now whenever we have the default value for example let's take this example for a bedroom here you can just change the default value to uh if the listing has value then we can just show as a bedroom okay and save it now if I go here you will see the default value the three showing obviously you can change this later on but even though if I refresh it you will see the default value okay so same thing you can do it for all other uh Fields so let's add it for a bathroom here will be a builtin then this is a parking so let's add for parking as well the lot size lot size make sure the uh fill name we are adding correctly perfect then area the here will be the pricee only so pricee and make sure whatever you added is still showing okay just to make sure everything is getting see then uh we have the HOA so we'll add ho as well and then the description and if you see we have all the data now for this two also we can update it okay so let's go to select uh radio group and the default value here if you see we can add it from uh oh sorry let me add it here and here we'll say type okay so now if you see for a type it's showing sale and for property uh here also we can change it to a default value so here we can say default value okay just add this one and then this one is the property type listing do property type see if I refresh it I don't know why it's not coming the property type or maybe uh you can change this placeholder so here we can write a condition if the property okay sorry the listing to property type is there then add that otherwise set the value see perfect okay and if I refresh it you'll see all the information so so this is the quick tip right and now whenever uh you are going to implement uh the edit functionality right uh for the existing listing you can just call this method and that's nothing you need to do it right so that's the reason I added uh immediately means I want to tell you this quick tip right now only so that in uh later in this course it's easy for you to add that functionality now inside our superas uh listing table right I'm going to add two more column for uh one for the adding the username who is posting this list and one for the holding the profile image of that particular user okay so let's say here uh click edit table and let's add that two column uh one is for the username this be a Ware and I will make sure that this is not unable and one is for profile image profile image and this again A Ware okay okay let's save this both the columns and it's saying the username is not uh inserted maybe because of the column name is a uh let's let's remove uh this column might be that name might be a a reserved one okay so here I will change this to um full name and let's make this as a Ware and let's save this one now and now if you see the full name yeah that's the reason username is resered one and now if you see we have this both the column now when we are saving this uh form information right while adding the new listing we're going to add a default value so one is for profile image and here I'm going to use user dot um image URL this will be a default one and one for the holding the full name which will the user do full name or you can add first name you can have I think name as well see okay and then let's save this one so now we are going to implement the image upload part functionality as soon as we um add this data right and fill the information and obviously user will upload multiple images so we need to give option to upload a multiple images at once and once user click on this publish image we need to follow a couple of steps first thing we're going to store all the image inside the super base storage super base will give a free storage up to 500 MB obviously you can upgrade it later on and once we store these images we need to create the or generate the image URL and I'm going to tell you the easiest way to create the URL okay whatever the image uh user stored right from that one we have to create the image URL and this image URL we need to store inside our image table obviously we don't have the image table we will create it as soon and we have to refer that each of the image or record with the listing ID okay so it will connect with each other so first thing um we going to create or we'll go to this storage section if you see on the left hand side we have the storage section go here and if you see on the top we have the option called creating a new bucket consider bucket it as a folder okay and click new bucket and here you can give the bucket name so here I will say listing images okay and we'll make this public so anyone can read an object without any authorization and then click save now obviously you can uh even if I go here right uh and if you want to upload the file you can upload the file let's upload this file and if you see the file is getting uploaded yeah and then from this get URL you can open this file like this see okay so same thing we're going to do it here as well now inside the if I go to this policy right now it's a public policy but you can create your own new policy okay uh click for full uh customization and here you can select the all the options then uh I will keep everything as it is you just give uh public the policy name and I will keep this as it is let let's say review here we'll keep as it is and save policy okay this is not important but it's better to add the policy sometimes you got might got error that policy is not defined so it's better to add the policy okay now this image can be accessible through from your application now you define the buckets let's go to the table editor and then we we going to add a create a new table called listing images the description uh will keep empty okay here we need to add a column and we'll give image just we'll say URL here I will select the whereare and then we'll add another column and this column will connect to the listing underscore ID okay and uh this will be a integer I think but that's fine what you need to do if you scroll down you have option called foreign key now click on that foreign key foreign key is nothing but that we will connect this to some other uh key okay and which will be a primary key in some other column uh here you have to select the schema so make it public and then you have to select the table from which you want to uh add here as a foreign key so we'll select the listing you have to select the which field you want to add a uh add as a foreign key so in this case listing ID and you have to connect it right you have a bunch of option obviously we'll connect with the ID only and then everything will keep as it is and then click save and if you see now is get added the forign key also get added and then save it and now it's added adding the all the four column so we'll wait and now your listing images is ready now if I try to insert a row you here you have option to add a URL but here you can connect it with the uh uh the existing record see right now we have two record and it's trying to connect to the exist listing record so cool correct so that's how you can do it right now we'll keep everything as it is and then uh we'll go back to our application and for the form up sorry file upload I'm going to create uh the one new folder inside the edit listing and we can call it as a underscore component and inside this folder I'm going to add a new component called file upload. jsx add the called template and we'll keep the file upload part in this particular uh component so obviously for file upload we want kind of drag and drop and multiple file right so on Google just search um tawin CSS file upload okay and if you see I got this first link I will open the first link and here is some example that how you can upload it right but if you scroll down I will select this kind of uh example so I don't want to code all of this thing you can if you want but I will use this existing one quite easy so copy this one and then paste over here right now if you see it has a on uh class okay and obviously in react we use class name so what you can do you can just add a oh sorry you can just add a class over here and replace it with the class name okay so you can replace everywhere where you have the field called class I think that's all okay and save it now add this file upload inside your uh after this form right so maybe we can I can upload about this day we say file upload component and save it now if I go back to our application Let me refresh this once and you will see the file upload perfect if I want to give h2 tag let's say uh upload property images add a class name we say uh font large text Gray find and we'll give margin y to two something like this see now obviously if I open this one right here if you see I cannot select the multiple one okay if I try to select multiple one it will not allow me so uh the simplest way you can do inside the file upload you can here you can have give the property called multiple okay as a true and now if I try to upload it now you can select the multiple one see and if I click open it will open it but here you cannot see whether it's a get selected or not right so you have to add the some method over here so let's do that so first thing uh on the input right here we need to add on change method so we'll add on change and here we'll handle file upload only right and here we'll create a new method let me format this document first and above this one we'll create a method called constant handle file upload like this and obviously uh this will take an event e so we say event Arrow function like this now inside this event we have the list of files because we we are uploading multiple so in order to get list of file you have to write F uh e for event. Target do files okay and let me show you whether we are getting the list of file or not so let me go to the inspect panel first go to the console clean everything and if I try to upload it right this are four file right open it and B we got an error it's saying the can property of undefined let me check what this okay it's need to be a Target not okay so let's do it again open it oh nothing happened so let me check what's the issue okay so I don't know but let's refresh it once maybe it's not get updated and if I try to upload this four images and boom if you see inside the file list we got the four images okay now it has the all the information which is needed now obviously whatever the image we uploaded we need to know which images are uploaded right and also we want to store all these files so let's define two State one to store the files so here we say uh okay we obviously we will not save this file because we want to send it back we'll keep as it is for now but here I want to show image preview so here I will add a image preview Comm set image preview is equal to use State like this and inside this one we need to create an image preview okay and then we want to save it so I will just Define constant previews is equal to in order to create a preview right we have to Define array do from we'll Define file files do map and each file we have to uh in order to get the uh object URL right so we have to write URL dot create object URL and then we have to pass each of the file from the array okay sorry this file from this files list and then simply we're going to set this save this inside our state now inside this image preview right uh we will just iterate it so maybe we can iterate it after this label maybe let's let's define d and outside of D we can just iterate it so we'll say image preview Dot map we say image comma index let's add a de we don't need it actually but that's fine and then add image source here we'll say image and that's all here I'm going to give uh width let's give width of 100 height of 100 class name of rounded corner so we'll round maybe a large Al tag I will just say let's add index unique and for this de I will add a q as a index okay let's save this one and let's see how it looks obviously we need to give some style so I will upload this three images open it and if you see this images look like this so that's weird little bit but let's bring in everything in one line so here I'm going to add a class name we'll make it grid grid column two initially if the screen size is smaller we say G column column 3 when on medium we say grid column uh five and on large screen we'll say grid colum 7 extra Excel column we'll say grid column 8 maybe I don't know because we need to test whether it possible or not and and save it and we do gap of three see like this also uh we give margin top so margin top to three perfect right so if I open it and upload this four one Okay click open and boom now you have four uh as you are giving the height here I I'm going to add object to be cover and let's give height of 100 pixel over here withd 100 pixel and this is how it looks perfect right also right now if you see you can able to upload the uh PDF and all right so just restrict that one so for this input just write accept and image PNG GIF or jpg and once you save it now what it will do it will only accept that file format or file extension see you now you can just upload the uh images which has that particular extension see okay perfect now obviously you have uh you are able to upload the multiple files you can able to preview it now the thing is we need to save uh send back these all the files to the previous component so here I will just say set images and then inside the files and this set images I will send back to our parent component which is inside this file upload right so here I will just add set images here we say value and then I'm going to define a state to hold this all the files sorry the images here we will say uh images comma set images is equal to use State and below this one we just set the images as a value perfect now you have the list of all the images correct let me remove all of this Gap now the thing is right right uh obviously I will just uh uncol this one now as soon as uh you save this data right uh we need to upload or store the images inside the super Bas storage right that's our next uh big thing to implement correct so let's do that now so first thing you need to do you need to uh with the help of for each Loop right you need to iterate that one and one by one you have to store it so we'll Define for Loop and inside that we'll Define a constant images of we'll say image of images of images and inside that we'll take constant file is equal to image okay and uh we'll also get the file name so for a file name I'm going to get the date do now. two string okay obviously it will be the unique every time uh then we'll we'll get the file extension using the file name do split on the dot and we'll pop the very first element oh this need to be dot like this and pop means the yeah obviously it will uh get it will give you the uh whatever the value comes after The Dot right means for example in this case if you have the um sample le. PNG file oh let me sample.png file right then uh this command will give only the PNG okay because it will divide into two and then it will pop it the this particular element then we have the file extension after that what we are going to do we need to write a code to store the value okay obviously you can get it from the superbase documentation but here I will just write it here so here we'll say data error is equal to super base so here we need to do await then superbase do storage and uh uh here we need to define the form okay so you need to give and then here you need to give the bucket name okay so in this case our bucket name is listing images so let's go back and add that bucket name listing images then dot there is one method called upload okay and here you need to define the name of the file which is a file name okay and then comma the file which you want to upload comma and then the content type you can mention okay so in this case the content type content type I will give image slash dollar and the file extension name okay so file extension like this okay and then next you need to give upsert false upsert means whether you want to uh update if the already exist that particular file okay we don't want that kind of feature so I will do upset as a false and if there is any error right we will just toast the message that error while uploading images else we'll just uh console the result okay and save it now let's test this out okay so what I'm going to do for now I don't want to update a super base or any uh field in the list so I will just commment this code uh this all code and save it right now remember we are just on this particular part where we are storing the images okay now let's go back to our application and let me upload the only two images for now so open this images which is kind of food image and also open the inspect panel just to make sure that we are if you have any error we will see it here and then click save and publish so right now if you see we we got the inside the data we got the result that the idea and path and all all of these things right but if I go to the storage now and inside the disting image you will see two more file get added just now okay so this one see it means uh we are able to upload successful successfully with the multiple images and now if I go to this get URL okay see this particular path will be the constant only the file only the change in the file name okay so what we are going to do this file name we already have so I will copy this uh image URL and let's go to theu dolal file inside here I'm going to add a nextore public we'll say image URL is equal to and then I will paste this URL only thing that I need to connect is the file name so that we can easily connect it so if I go here and here you know that we are able to get the data here I will say constant image URL is equal to process. EnV do this next Public Image URL plus I'm going to add file name and if you know that we already have this file name perfect right now obviously you have the image URL as well so if you go here and we'll say image URL and if you uh remember we are still in the for Loop correct now once the we have the image URL let me show you the result so let's upload one I will upload the one image now okay let's upload this image click open I clean everything and then click save and publish and if you see we have this image if I open this uh URL see you caught the image right so this is how you can generate the image now the next part if you remember once we have the we store this uh all the images right we we also generated the image URL for each of these uh image right now we need to store these images in our images uh what we call I don't know I uh listing image uh table correct so let's add that code as well so once we have the image URL here I'm going to Simply write a code to store that one so mean it will create a new record so constant data comma error here inside that I will say sorry uh await super base dot uh from so obviously here you need to give the table name so in this case we'll say listing images just to make sure the file name which is correct and then here we'll say insert operation because we are inserting record right and then inside this we need to define the column name so which is the URL image URL uh yeah that's correct the for the URL will be the image URL and the listing underscore ID which will be the this particular ID if you this one see okay so obviously this one we are getting from the parents. ID because we already use this one right and then the select obviously we don't need select but yeah we are not doing anything with the data for now okay so that's all now um I think that's good and obviously I don't know yeah uh we also need to show the loading so I Define the loading set loading is equal to use State and initially I will make it false so whenever user click on this publish or submit we'll say set loading to be true and once everything goes well here uh maybe after this fall we'll say set loading to be false I think that will be good and when there is in the loading State we're going to Simply show the loading indicator so here I'm going to add a condition if loading is there then show the uh loader I icon correct otherwise show this button the text correct and here I will add an uh sorry uh class name animate Spin and also I will disable the loading uh disable when the loading is true okay now let's clean everything let's upload a images let me download some images so let's upload it and I don't know whether we have any file over here for the house okay so I have this file click open obviously you can upload more but I want to test with the single one right now and click save and publish if you see we have this indicator and wow we got error that cannot access data before initialization so on the line number 82 so say let's see so online 82 right over here we are trying to access the data so this data okay we don't want this one so let's save it now and let's test this out if you see that even though we have the error that loading is still showing so here I will just add if error set the loading as a false and here as well set loading as a false now let's refresh once clean everything upload the file I don't know let's upload the image with the home okay and open it click save and publish and okay we have again we have one more error that it's saying unauthorized see the network tab so it's saying new row violation okay and security policy issue so for this listing images we did not add any policy right so let's add the policy we'll create a new policy similar the way that we did for the listing table here we click all we'll say uh public and here we'll say just a true okay so it will be accessible save this policy and hopefully it will work now so let's clean and submit it again boom and now it's submitted successfully we don't have any error at the moment now if I go to the table editor and listing images you will see the record see and now this record is connected to the uh listing which is at the six which is this one okay so this is how you can add the images now let's try to upload the multiple images so I'm going to add multiple images now so we'll select for example let's select this image then we'll select this image and let's select one more image I don't know whether select this image as well three images open it you will see that we selected the selected the three images now click save and publish and boom now if you see it's get published obviously we are not showing any message but inside the listing images see we've got the three more images which is connected to the listing uh id6 okay so if you see this all complete for we done it perfect right so this is how you guys uh you can upload or uh the images and save it inside the super base and also update your uh record and attach that particular image URL to the listing now here I will just uncomment this previous code okay so that everything will work now everything is working properly but the thing is right now if you see right on even though if I refresh it we are getting the form data but we are not getting the images which we uploaded right the question is how can we add that one so if I go here right and in order to F the uh obviously we are fetching the data over here if you remember okay to verify it we also need to fetch or join the two tabl so that we'll get the images correct so if I go to this API Doc and read rows here you will see the option called read reference table here you can even read the reference table which you already connected with some other table so in this case we connected listing with listing images and here you can get the the way you can get the other table using this uh just defining that table and the column which you want to F cool right so let's Implement that one so uh inside this select statement okay here I'm going to add uh the table name so comma then here we'll say listing images which is the table name and then the column which you want to fetch so I will provide the column name over here we'll say listing ID comma URL as well obviously URL is main thing let's save it and I just want to print a consoer data and and save it now if I go here open the inspect panel go to the console clean everything let's refresh it and if you see we have got the data inside this data you will see the listing images F now and inside that obviously right now we uploaded five images that all five images you will see it here now once we have this image you can pass this images okay so what I'm going to do uh obviously we are storing in the listing right right so inside the file upload right component we'll pass this so here we'll say uh image list is equal to listing Dot and the field name what what is this listing images listing images okay let me bring in one line and then and once we are in the file upload let's accept it here as a image list and then we can also uh iterate this image list one by one okay so uh I don't want to touch here I'm going to copy another method here I'm going to add uh the image list is there if and and I will put the operator and and if the image list is there then iterate the image list and from the image obviously uh we need to display from the URL so I will add the image URL let's save it and let's test this out so right now if you see we got an one error it's saying that this particular host name is not configur under the image inside the next. config.js file so this is happen because in nextjs whenever you are using any third party URL or um any images from the third party you have to make sure that you will add that domain name inside your next JS application because that's for the security purpose okay so copy this host name and then let's go to this next doc config.js file which is inside the root directory inside the next config just simply you can add the images inside that you have to add a domain which you want to Whit list okay which you want to allow inside your application let's save this one and restart your application I will refresh it okay and then we'll wait and now if is loaded and if you see these are the images which already uploaded along with that one we have the existing data if you try to upload some other images it will show over here and then you can just say save and publish and boom now if I refresh it you will see the two images something okay with this image yeah the second image came right see so this is how guys you can upload the data save the listing upload the images and save that and connect with your listing if you have any question you let me know in the comment section make sure whenever you uh are implementing something right make sure to draw it so you can understand it the Eraser application that I'm using is quite cool to display everything so until this point our listing is not yet published because if you remember we have this active column where the status is false correct and here we are just saving it and we are not yet upad or published right so uh make sure instead of adding that uh handle submit method on this button we will handle on this save button okay so I will update that one so if I go to the the page. jsx where we have this button I will just add the same button okay or instead of adding yeah let's add same button only thing that I will make this as a variant outline and then I'm going to add this class name as well like this okay and let me remove the save button now and here I'm going to give only save and this button will save and publish as well so first let make sure everything's right and uh and that's all right so obviously on the click of this save it will uh save everything okay okay I I think I forgot to reload this one let's click save and if you see it's still in the loading state but it keep in the loading for a while it means somewhere the loading State loading is not getting false okay let me update that one so here set loading is true that's correct cor okay so here we will say if the data okay let's try to set loading as a false over here and now if I refresh it let's save this one I don't know whether still showing loading only oh so the reason is right uh we we keep uh set the loading inside the image upload functionality only and not here so here I also if the data is there I will keep the set loading as false and again inside the else um oh my bad sorry let me keep this move this over here so set loading as a false and again when the image is getting upload we'll set the loading as a true and let's test this out now so if I just save it see now it's work perfectly fine now the next thing as I told you right on the click of this s let me bring this a little bit down on the click of this button we need to show some kind of dialogue which will ask do you really want to publish publish it right so what we can do um let's go to the Shaden uh component and inside this Shaden component we have one option called alert dialogue so if I open it this is how it will show okay so we want to use the it so let's import this npm package first so inside the terminal I will add that one and then we need to import the statement so let's import that one I know it's bigger you can divide this component to multiple one and then you can use it directly here like this so at the bottom only for this button I will add it now this is the trigger right let me format this first and this button is actually a trigger point correct so let's cut it from here and then I will add it inside the alert dialog trigger here we can make as a child and if I save it and for this button you can give a type as a button okay other it will save it now if I go back and click on Save and publish it will show you the see how beautiful correct and are you absolutely sure here we'll say ready to publish do you really want to publish uh the listing okay and then you have cancel and we'll say publish I say continue that will be good actually okay and I think that's enough now on the click of this alert dialogue right I will add on click event and here we need to write one method called publish button Handler and here we'll Define that method constant publish button Handler and this will actually update the active State okay so let's go to the real estate let's go to the API Doc and here we need to update the row so let's click update row copy this uh example code paste it here as this is a await let's make this as a sync now everything is good here we need to update the column which is the active column and we'll make it as a true right and obviously the ID on the depends on the record so here we'll add the ID and ID will be params do ID okay and here we'll write condition if data then we'll simply uh display as a set uh we also Define the set loading false here we set loading as a true and then we will show the toast message that uh listing publish okay and whenever the there is a loading obviously on that alert dialogue as well I want to show the loading indicator so here we'll simply add if loading is there then add a loader otherwise show button called continue and here I going to add a class name animate spin so it will spin it if I go now to back to our application right if you see the state is false right for the record number six I think yeah if I click save and publish it will ask R to publish you say continue you'll see the listing publish okay and now if you check this now active change to True okay so this is how you can public the record now next obviously later in this course what we are going to do once you user publish this particular listing it will redirect it to the listing detail page where he can uh see the complete listing but right now we'll keep as it is until this point now the next and very interesting thing that we are going to implement is uh the homepage for the sale right if I go to this for sale here user can see the sale for rent it will see all the rentable property for property for sale and all of these thing and I just realized the spelling is incorrect wow let's fix this so go to the header where we have that bad spelling mistake here we say sale I think that's good let's move here yeah that's good now so for rent for sale hey in this section we are going to implement the home screen and if you see on the screen this is how we are going to implement the UI so on the left hand side uh we're going to show the all the listing having the search operation and the filter operation and on the right hand side we going to show a beautiful Google map with the marker which is obviously whatever the listing we have that marker we are going to display it on the map it means we need to divide our screen into two different parts okay and on the left hand side then we will again divide the one section for the search and filter and other for the listing so let's go back to our application and here we have this page.js file and here I'm going to create a new component for this page.js so underscore inside the underscore components I'm going to create a new file and we can call it as a listing map view. jsx so it has a listing and map view as well and add the default template and then save it now this listing and map view I'm going to add it here so we just say listing map view and then save it now if I go back to our application uh you will see on the home screen let's go to the home screen the listing map view okay now again uh let's add a uh class name we'll say padding X to 10 and padding to 10 as well let's see how it looks I think that's good and after this uh listing map view we need to divide this listing map view into two parts okay so I'm going to add a class name here we'll say uh grid grid column one when the screen size is smaller and the when the screen size is medium or larger we'll change the grd column to two one column we'll assign it for the listing and other column we will assign it to the map if I go back you will see the two section okay now for the listing let's create a new component and we'll call it as a listing. jsx add the default template and then save it now let's import that component over here we'll say listing and save it now here we have the listing component now first thing we need to do uh we will f page the data okay so whatever the latest uh um listing we have right uh it doesn't matter with the address for now we will show it on the screen whenever user launch first time but when user search by the places or address or by the filter then obviously we will update it accordingly but let's create a new method and here we'll say get latest listing Arrow function like this now here uh we'll Define constant data comma error and inside that after this we'll say await super base if if you see this is inputting from our client Dot from so we have to give the name of the table which is the listing again we have to write a do select operator and inside that you have to give what are the value you needed so in this case the all value comma star and then listing images because to face the all the images and inside that you have to provide the URL which you want and the listing ID as well and make sure uh you will change this to a sync because you be use await now obviously it will return um all the data but we we have to filter it we need to only fet the record which has the status active right so here we add a condition equal and inside that one we will Define the cost column on which we need to add the condition which is the active one and the type here we need to provide right right now we have the two type the one which is the sale and one for the rent so from this page.js we'll send the type as a sale okay so here I will accept it here as a prop and then simply I will pass that type over here as we are going to use this listing map view in other uh page as well so you don't need to rewrite it that's the reason I kept this a little flexible after this one uh we also need to give the um we already give the type right so sorry here active means the true or false here we obviously pass true and then one more for the type and this will be a type okay and obviously it will return data so we will check if the data is there we'll just console the log and data and this gate latest listing we want to call inside the use effect at very first time so whenever this component get load we'll call the get listing get latest listing method let's save this one and check in our application that we are getting data or not so right now if we have error that the we use the hook so make sure to change this component on the client side just mark this component as a Ed client and boom now if I go to the inspect panel go to the console and if you see we have the data with the four listing perfect currently if you go to the database right inside the listing table we have the five listing but one of the listing has the status uh as a active as a false so that's the reason it only F four now let's save this all the listing in one state so here we'll say listing comma set listing is equal to use State and here we'll Define set listing with the data okay if we have any error we'll just simply Define that uh toast message we say server side error and save it now this particular listing whatever the value we got we will pass it to this listing component so we'll say listing and then save it now inside this listing component let's go to the listing component here we'll just simply Define the listing so uh first we'll just simply iterate it and we'll displayed the list okay and then after that one we want to implement uh the search functionality so let's go here and add here so let's add a du and then with the listing we'll map the data with the list we'll say or let's say item only comma index and we'll add a d now inside du first thing we'll add a image from the next SL image add a source and inside the item uh we have the let me go to the console so inside the item we have the list images and from the list image we'll pick the first image so list item do listing images first image. URL okay here we're going to give a width let's give withd let's give some height add a class name here uh we'll Define rounded large object to be cover and let's give some defined height so if you see I'm giving height inside the bracket it means I'm providing my own uh pixel size let's save this one go back to our application and if you see on the screen it's showing uh the images that's perfect now obviously this obvious we want to uh show it in the grid format so for this de I'm going to add a class name make it grid and grid column one when the screen size is smaller and the when screen size is medium or larger you can show grid column two see like this also uh we'll do Gap uh of let's gap of four let's see how it looks I think that's good that five after this one um after the image right I'm going to add one de and inside that let's add a show the pricing so simply on dollar and then item do price add a class name We'll add a font bold and text Excel so we have one error let me check what's the issue maybe we need to add a de see like this now for this du I'm going to add a class name make it Flex justify uh not justify but make it Flex uh margin top to two Flex column and we'll go Gap of two as well so that whatever the element we want to add it will um it will give the Gap as well next thing we're going to add the address so for the address first thing I'm going to add a icon and then we'll display the address so item do address here class name make FL gap of two and save it uh let's see how it looks perfect here uh for this I'm going to change text to small text little bit gray color change gray to 400 and for the map pin I'm going to change the height so height of four width of four and if you see this is how it looks next we're going to show the how many bed room bathroom do we have right so if I go here see like this so out of this uh maybe inside the same de we can add the h2 tag and inside the sh tag uh we'll add icon called bit double and then we going to display item dot bedroom and this is how it looks let's bring everything use some style so for this S2 I will add a class name make deflex gap of two uh then we'll make text to be smaller background slate 200 uh let's make a 100 only then we'll make rounded to be medium padding of two and text to be gray um let's say 500 and if I save it this is how it looks for now but uh you can also make this as a justify Center so it will be in the center see so obviously uh we want to add some more but for this um bed I'm going to give class name we'll make height of four and width of four and here we also make item to be in the center I think that's good now I'm going to add this multiple times and one for the bathroom so I will say bath icon and one for the ruler for the square footage here we'll say bathroom and here we'll say area and save it and if you see this is how vertically it looks but let's bring in one line so for this particular de let add a class name here we'll say Flex gap of uh uh let's add a gap of two and margin top to two let's save this one and let's see so here we'll just uh we'll add one more property called justify um bit and let's see how it looks so uh we want WID to be full so let's add WID to be full and let's see how it looks yeah so let's add WID to be full for everywhere for all these two t so now it equally divided perfect and whenever the screen size is smaller right you can uh or you can add the grid over here okay so for now let's make as it is but if I decrease the screen size let's see how it looks I think that's good now on how right we want to change this uh mean we want to show some kind of effect right so for this Gap let's add a gap of 10 so for this du let's add a class name We'll add a padding of three and this is how it looks uh for this one let's add a height of one 1 70 little height is little larger okay so here I'm going to add a h effect so we'll add a border of primary color and cursor pointer and Border corner to be large so if I H on this one let's see Let me refresh this one I don't know why H effect does not work so we miss one more property so let's say on H we also want to show the border so we added the border and now if you see we have this beautiful border okay perfect so that's how we can able to display the list of all the latest uh listing but one more thing here we need to add right now uh if you see the listing is uh depends I know I'm not sure whether it's order by but let's order by uh with the latest item if I go to the API documentation here we will see the filtering option and I think you can also order it by so inside the API documentation is not there but here uh this particular documentation they give the example how to do it it's quite easy so if I go to this um listing map view where we are fing data here you can add the order okay and on which you want to order so ID and then you can add a condition whether you want descending or ascending so if you add ascending as a false I think ascending only we have to give as false if I save it and if I go and refresh it here you will see the change okay now the latest item will display on the top every time okay and as this is completely responsive so see depends on the screen size it will change the layout if you have any question until this point let me know in the comment section obviously we are next we going to add add the search functionality and the filter option as well so that if you just search on a specific area he will only get the listing from that area only now here uh the quick thing that we are going to uh add it so right now whenever the uh this particular listing is getting load right it takes some time because we are loading from the server so in the meantime we want to show some kind of loading so for that one we are going to a skeleton effect so let's go here inside our uh listing map view and here we are going to show the list right inside this listing only I'm going to add the condition over here so we'll check if the listing do length is greater than zero then show this listing otherwise show the skeleton effect so for that one we can just show uh sample array do map and inside that we add item index and let's add a du and here we'll add a key as a index so for this do we going to add a class name we'll give height of 230 pixel for example width let's give a full width and it will be inside this du so automatically obviously this particular grid layout also applied to this um AR mean add iterating map view okay and now over here we'll just simply add a background slate of 200 and we'll animate the pulse effect which kind of give the skeleton effect and also we'll make the rounded large so if I reload it see we got that skeleton effect okay if I reload again see that's the reason we added this skeleton effect so that's quite easy okay to add it if you have any question let me know in the comment section now it's time to add this uh Google at complete play search uh section okay and as you know that we already have this particular component so same component we are going to implement here and then we're going to add the search uh Button as well so inside the listing only above this particular de I'm going to add that search bar so we already have this Google address search I will add it here and it will it's taking two uh parameter so one is selected address okay so right now I will just console the selected address over here and then another is set coordinates which we don't really require okay so but let's add it here and we'll console that cord as well here we'll say value value this need to be V and save it now if I go back to our application and if you see now we have this beautiful search bar obviously we going to edit it okay according to our requirements so uh let's wrap this in one de and we'll give a padding of three and I think that's enough okay obviously we want to add a search bar so sorry button so we'll add a button we'll just simply say search here we're going to add the search icon here I'm going to add a class name as a flex gap of two okay and let's bring that in one line so here for I'm going to add a flex G of 7 six maybe and this is how it will look okay now if I go to the inspect panel and let's go to the console let me clean everything so whenever I search something right here if I search some area for M and if you see we got the uh we printing the console that the result we got inside the console it means that is working fine and as expected only some customization I'm going to do it here so this search icon I class name height of four width of four I think that's good okay now on the click of search we want to make a API call to the database it will fetch depends on the selection of this uh address so let's go here and bring this down so let's add an on click method to this button here on we going to add on click and here we'll just simply say handle search click and then create a new method or we can just simply um call this hander search click method or we'll send back method to the listing map view okay and inside the listing map view we'll accept it here like this let's save this one and this one so obviously we need to create a method over here and whatever the um query or API call we make it here right same thing I'm going to copy and paste it here here we'll make this as a sync and in the listing we are getting the address right we'll store we'll send that address value to this uh parent component so here we'll just simply say uh search address okay so this is a search address I'm going to pass so that it will accept it here here we will say set search address okay and then obviously we need to define the state and it will accept the value and let's define that set search address over here here so constant here we add search address comma set search address is equal to your state okay now inside here we have the S search address okay and sorry we set the search address over here now obviously we want to use it inside the handle search click now before that one let me show you what it will that address will contain so console here we will say search address and then if I go to the console now let's go to the inspect panel and console clean everything let's search something and click search you'll see the value called label and the value as well from this uh structure right we need to get the data from the structure formatting okay and inside that if you see this is the main text this main text we want to fet okay and on the basis of this main text we going to search on the address column okay so inside here I'm just going to add constant we say search ter is equal to search address do value dot uh let me copy this structure formatting field name and then we need to get from the main text from that maincore text like this now we have the search term let's uncommanded but here obviously we want the active as a type true the it's a selling or rent that that one also we needed the order will be in the ascending and along with that one we need a like operator and here we'll we add address comma the percent sign plus the search term plus percent okay so this like operator if you don't know about this one so it what it will do when you define the percent sign like this right so whatever the uh uh search ter we are passing right if that search ter is present in any of the address complete address right for example in any of these particular address then that particular data will F the same query the uh same query but uh only thing is we added the like uh operation okay and everything will be as it is now if the data is available then we'll uh just set the listing list so we'll say uh listing list or I don't know what we call set listing I think yeah set listing and then set that particular data okay and I think that's pretty much let's save it and let's test this out so right now if you see we have the M wheel we have this one is from the concer right and three of the M Wheels so let's search with the m whe and if you see now we got only the data or listing from the M wheel now let's search some order one so let's search for the conquer right and click search now if you see only one uh listing from the coner obviously same thing you going to do it uh if you want to search the specific address right like this and if I search it now you'll get only that particular address listing see so this is how you can able to search it and filter it and obviously this data we are fetching it from this uh database only we are not just filtering out the list which we already have but we actually fetching the data according to this particular query now here I'm going to show the some kind of take that how many result uh is available so simply let's define one state called address inside the listing component is equal to use State and over here we'll simply along with the search address I'm going to add the set address and then we'll simply add the response not response the B which is the value let's save this one and now just before this du right let's add a du and here we'll add a condition if the search address or sorry the just address is present it means and an operator then only show the result so here I will just simply say uh found will give the length of the result so which is the listing do length found uh for example for result if and the address which is the address do label okay let's save this one and just check this out so if I search it let's refresh it once so right now if you see nothing is displaying but if I search something see it's saying found four result in M will okay now obviously we'll give some style to this one so first thing to this class name We'll add a pading x23 three then uh here I'm going to wrap this in a S2 tag We'll add a class name we'll change the font to bold or just We'll add the text to be large now over here for this address I'm going to wrap it inside the span tag so that I can give the text of primary color and we'll change the font to be bold so like this obviously uh we need to use some spacing I don't know why or let's bring this in one line so spacing will automatically get applied see for the in as well let me bring this in one line so oops my bad so for this h2 tag I'll bring it here and now it's good obviously I will change the font to maybe Excel yeah okay so it's saying f for result uh let's give some margin y to5 so it's little uh look good to me now and for the number as well I will wrap it inside the span tag just say say class font Bol okay so it's saying found four result in MO if I search different address we'll say and search it we'll say found one result in conquer okay so it give some visual effect to our uh UI okay that's very important so now we are going to add the filter option so for the filter option we going to add a b filter bath filter parking and the home type okay so let's go back to our application and inside this underscore component I'm going to add a new component and we call call it as a filter section. jsx add the default template and save this one now inside the listing after this Google search address I'm going to add uh after this de uh we can add it the search not search but filter section and save it now inside the filter section obviously I'm going uh we need to show the drop down like this right the select operator and then we can get it from the Shad CN UI so we already used the select operator previously uh inside the form so let's go to go here and uh copy this input statement because we already installed so don't need to install it again and then copy this uh example as well and paste it here now obviously I will select the placeholder to bed here we can give 2+ 3+ 4 plus kind of value right but here I want to little bit customize so you can even customize this select item uh so I'm going to add h2 tag inside that we'll add 2 plus and uh also I'm to add a bed icon over here okay and then uh you can add a bed uh there is a bed double icon that's will good actually and obviously we make class name make it Flex gap of two and for this uh CL um bed I'm going to add a height of five width of five let's save it let's see how it looks first so let me refresh this screen once and if you see the bed is showing and this is how the icon will look like okay I think that's pretty good uh same thing I'm going to copy just want to check if I change this to primary let me see how it looks so this is of I select the primary I think we can keep the primary one okay let me bring this down over here now uh if I go to this listing right if you see we gave the uh for this address we give the padding x23 right so overall uh we can add a padding not here but let's add over here only so we'll add a class name padding x23 so what it will do it will be align over here okay and also We'll add a padding y to 4 so let's we'll keep some distance let's make it two perfect now uh this particular item I'm going to copy couple of times so here will 2+ 3+ 4+ and one more you can say 5+ paid okay and uh everything will be as it is if I go here oh that's weird uh I think something I made a mistake somewhere I don't know let me undo this everything let me save this one and let's test this out that is correct so we need to copy the select item only let me copy this one oh something is not correct here we have to select item and I'm planning to add select item again oh so the reason is we are getting because the value is same right obviously here we need to change the value as well now it will work as we expected so make it three this one make it four same thing I'm going to change it here as well three and four if I see if I select this one see now we have the proper value let's add one more and five now the over here we added the bed as a placeholder if I save this one refresh the screen once if you see now it's showing B but now you can select anything like this see okay perfect uh same thing I'm going to do for the bathroom as well so bathroom filter right so let's copy this select statement add it here obviously uh if I save this one you will see like this right uh there are two one after another so better you can add make it Flex or instead of flex let's make it grid okay and we'll make grid column two when the screen size is smaller and the way the screen size is medium we'll make G column 4 and this this is how it look obviously we go a gap of uh two uh I think that's little uh congested okay so let's make it three and let me see how it looks three is pretty good or the another option that you can do over here when the screen size is medium we can make it Flex okay and this grid will apply only when the screen size is small smaller okay I don't know whether it will work or not but let me check right now it's look good to me okay so uh here we'll change this to Bath and I think everything will keep as it is see then obviously we'll change this icon to Bath okay and everywhere I'm going to update it so after this one uh one more thing I want to add for the parking so if I here you have the bath here you have the um bedrooms now let's add the same select so I will copy this another select for the parking one here we'll simply change the placeholder to parking and here as well I will change this to um parking icon I don't know whether we have any parking icon let's see in the Lucid icon uh for the parking or maybe we can check for a car so this car front we can use it car front let's let's copy this and paste it so I think uh 4 plus sry 3 plus is fine because we don't have that much parking right usually but now if you have the parking as well and the last but not the least we need to show uh the select for the type of the home okay so we can call it as a home type home type and it has a two options okay so obviously we don't want to show this S2 tag I will remove this S2 tag and here I'm going to add for example let's say uh uh single family home the value will be single family home so this value will match with the what we are storing right the second uh town home or we can say Town town home is fine for now and just to make sure that what we are storing so we are Shing at town space house so let's add town space house and here as well town space house and one more for the condo and save it now if I go here and check this out if you see how beautifully it's get divided we we have bath to select parking to select and the home type okay so cool that's look beautiful now on the change or on the select of that one right we need to pass this information to the listing page okay and again from the listing we need to pass back to the parent one Okay the reason that we need to pass it because inside the listing map view we have this uh query right uh not this one but this handle search click and on the click of that one we need to add the value over here okay so first thing what we are going to do I'm going to add a couple of uh State over here so here we'll say bed uh count comma set bed count is equal to use State and we'll Define uh empty same thing I will copy for the parking and bathroom count so we'll say paath count say bath count and the last is parking count as well okay in I'm keeping zero the reason is right because over here we going to add one more property along with this one which is greater than and equal right so greater than equal what it will do it will take the parameter so in this case we want to add for the column bedroom and then we can pass the bed count same thing we going to do it for the bathroom and we'll pass bathroom count and for parking we'll pass parking count okay and save it but interesting thing about that the question is how can we pass for the type right so let's define the state first so here I will Define and here we will say home type set home type this is little different way so what we are going to do we going to change this query little bit so I will copy uh this line of code until this point and then I'm going to add it here okay and only thing that here I'm going to change I will replace this obviously I don't want a wait and here we'll say uh query let query is equal to this particular query okay and then here we'll just simply pass this query we did not change anything we just replace this uh query and we are passing here everything will be as it is correct now one more thing uh we need to do here we add a condition if home type is available means home type has some value then simply we'll add a query is equal to query dot equal operation okay and here inside the equal operation this is conditional equal that we are going to add right and here we simply add property type I think we can't call it property type but home type is fine and we'll pass the home type as it is okay so simple and so cool right let's save this one and obviously everything is set if I go here and Let me refresh screen if I search something and search it see nothing get changed right now this filter is not yet applied because we did not add a logic to this one but now let's add it so let's go to the filter section and here we have this filter section on this each of the select we have the one property called on value change and this will uh have the uh value call E you can just set um bed count something like this okay uh same thing I'm going to copy this for the other select statements so one for the bathroom one for the here we'll say set bath count then set parking count and the last for the home type and here we'll say set home type obviously this four value we need to pass to the parent one okay so set bath count set bed count set parking count and set home type and save it now as this is a child component as we import this component to the listing over here so here we need to accept it so simply let's do set bet count as a set bed bath count then set bed count is equal to set bed count set parking count as set so I keep this name uh similar okay so that you will not get mistaken and also it's easy to uh access as well right and now all of this value we can pass back to this parent one okay now I know it's little uh we are passing from multiple component you can replace it with the context as well but in this course I'm going to tell you that one that particular kind of uh concept as well okay here we'll say B count we'll say bed count here we'll say uh set parking count and the last is set home type now all this value we pass back back to the uh listing map view component where we have this listing and simply again I will just copy this all of this code and paste it here okay and save it now make sure everything is saved and let's go here let me refresh it let's search the property not this one let's search from the one which I have the no so right now if you see we have this two 3 five bit bedroom uh bed right if I change to three and search it you will see now only property which has the bedroom of three or more than that it will show it okay same if I if I click on this I want bathroom 3 plus and search it now on the board the condition that 3+ and 3+ it will select if I select 2+ still I have only one for parking as well you can select 2+ or 3+ okay right now 2 plus is not there 2+ is there the home type you can select the townhous anything right now townhous is not there the single family is not there I don't know uh condo let me check condo is there or not I think some value is not there okay now one more important thing over here I'm going to add one more option to this uh home type so let's go to the filter section and simply we're going to add one more type called all so if user want to select all this uh value he can select all okay and the value will be all now whenever user select the value as all so here we say value and here I'm going to Simply add a condition if value is equal equal to all then set the home type as a null otherwise set the home type whatever the home type is there okay because all means uh we don't want to go to the particular condition right which we Define over here so we don't want user to go in this condition if the Home tab is empty okay so that's the reason over here only I make it as a null let's save it and go back to our application now if I select the all you will say the all okay so guys uh this is how uh you can add the filter option here um I think it's better to add uh for parking I will add one more property which is 1pl okay and here I will say OnePlus and that's enough so guys uh if you have any question any doubt let me know in the comment section I hope you uh understand how we easily implemented this filter option the think is right we are not just only filtering on the data which we already have we are filtering on the query because on every search operation we are making call the let me show you the reason why if I user select the some data or some information and you click in search function if user click on uh the filter option and then click search there see you got the result right but if you don't have data and you if you're trying to search on that one then you'll get the error so that's the reason is better to make the uh query according to your user selection now coming to the most interesting part of our application is to add this beautiful map on the screen okay so obviously for that one we are using a Google map to uh display it on the application here if you see on the right hand side uh we need to add a map you can even customize this map according to your needs right now if you see on the screen it's a gray color I'm going to tell you at the end of course how can you even update this uh map styling okay so in order to integrate the Google Map inside the react we going to use the one Library called react Google Map API it's very powerful library and the most important part is very easy to use so copy this command in order to integrate in your application and install this particular Library if you scroll down here okay uh there are a couple of steps we need to follow in order to add this Google map right so first thing I will add this container style and the center uh coordinates okay obviously I'm going to replace it but before that let's create a component called uh Google Map section. jsx add a default template and on the right hand side as you know you we can add that particular map section okay so inside the listing map view only we have the map section here I'm going to add Google Map section and save it right now if I go to our project you'll see the Google Map section over here let's go here and let's add that two uh constant one for the container style and another is for the style next thing obviously we'll follow all the documentation which given by this uh Google Map API next we need to add this code so one is for to unload and unload and provide the API key so we add that inside this function then obviously you need to import this all of the statement so I will just copy this and import it and the most important part is to add the Google Map okay so I will copy this Google Map and then we'll paste it over here and then save it now if I go back to our application you will see the map is displaying on the screen right perfect but it's very small so let's uh redefine it u mean uh resize it so for the width over here I'm going to give a width of 100% And for height I'm going to give 80 vertical height and save it and now if you see it's uh fill all the screen obviously if you think the we need to give Gap so inside the listing map view you can you add a gap between these two add a gap of eight maybe so we have beautiful distance okay you um you can uh customize uh this styling okay means if you want to add rounded Corners so just write border radius and we'll say 10 and you will see the Border get Chang hopefully I don't know but yeah it will get Chang uh it need to be a radius and now now yeah if you see it's rounded now okay um this map we need to make sure it's fixed okay only this particular thing need to be scroll and map need to be fixed so to mark it make it as a fixed one right uh let's go to the uh listing map view where we have this D right here I'm going to Define class name we'll make it fix okay and from the right I will we'll keep at the right then hide I will make it full and let's save it and let's look how it looks okay so right now oh it's gone right we need to give some more parameter for example when the screen size is medium we need to give give the width for example let's give width of 350 pixel and the wind screen size is large we give width of 500 pixel okay because we mark it as a fixy now it's work perfectly let's try to give more width uh let's say 650 and let's see how it looks I think that's much better and now if you see the map is constant only the listing is changed if I go to the inspect panel and uh when the screen size is medium see it's changed but I think we need to make more change so here 350 is fine but when the screen size is larger we'll make it as a let's make 450 and when there's Excel size we'll make width of 500 and now I don't know but let make it 650 now if I increase the decrease the size because you need to check every time see now it's perfectly fine okay next thing uh obviously right now uh this is just a simple map right we need uh it central uh centralized depends on this coordinates obviously we don't want that one this is just a default one also we need to provide the API key as we did not provide the API I will remove this lineup code because we don't need that anymore right because we already defined the API um for the particular um address bar right and it taking care of that one as well now the next thing we need to do is uh we need to um whenever us a search right actually the address then we need to bring our map in that into that location we need to centralize into that location right so what we need to do whenever user search on the address uh what we are just pass that coordinates to this Google Map okay and we'll uh centralize it so let's define one thing so let's define uh constant and here we'll say Center comma set Center is equal to your state and inside the at default I will keep this one so we'll Define over here obviously we don't need it this okay and let's save it and if I go to this listing map view uh and inside the listing we are getting the uh not listing but here as well right if you see we have the search address and uh also you can get the coordinates as well from the listing if you see from the coordinates we just consolid for here we'll say set coordinates okay or we can just pass like this as well set coordinates and we'll pass back from here to the listing map view and we'll simply exert it here as a listing site coordinates okay now I will Define that particular State over here coordinates and here we'll say set coordinates now now once the coordinate are set we can pass that coordinates so here we'll say coordinates equal to coordinates to the Google Map section okay so let's go to this Google Map section and here accept it here as a prop okay let me walk uh uh tell you about this again okay so uh as you know that once user search the address we are getting the selected address along with we are getting the coordinate now this coordinates obviously we are using to save uh inside our application as we already doing that right but once user search this one we are fing this coordinate and passing back to this listing map view to the parent component of this listing and from there so if you see from this coordinates obviously we are getting from this listing we are passing again to this Google Map section okay because in Google map section we need that coordinate to centralize uh our map right now once we have received this coordinates uh inside the use effect so let's define the use effect and whenever the coordinates are available I will write the condition and we'll set the center with the coordinates and save it okay now if I go back to our application right now if you see it's not centralized properly oh okay so we have one error that it's saying Google is not not defined let's see the error where it is right now okay let me search with this one so Google is not defined so okay I will do one thing I will remove this on load and from here as well we'll remove it okay just we'll console from here okay console.log nothing else let's save this one and now if you see still we have that error so where else we are using Google so here I just keep this um UJS API loader as it is okay I put it back and provide this API key and as well as uh unload I keep the unload as well even though if you remove it doesn't matter okay and if you go back and now if you see we have that beautiful map but wait if I try to search something see I'm not getting the result right and if I go to the inspect panel go to the console and at the Top If you see Let me refresh this once and we have one error okay so it's saying you included the Google Map JavaScript API multiple times on this page that may cause unexpected error right the question here right we use for the search address and also we use the API key for the Google Map so the question is how can we fix that particular issue right so for that one uh let me undo this one okay because uh let's uncom in this particular line of code and then go to the provider okay where we are rendering this children over here I'm going to add one load script method which is coming from the again Google Map API which we just installed right and over here we going to provide the Google Map API key okay so here from the process EnV Dot and then copy this API key so basically we are providing API key from one place we are passing that apiq one place and then automatically all the autocomplete Google ad place address and the Google Map uh component will automatically use this API key after loading it so we are just loading it from the script also along with that uh I will provide the library okay which is the places for that to complete and then save this one now if I go back to our application so it's saying use context so make sure to that for this provider we change this to use client and okay so is loaded is not defined obviously we remove this method so I will also remove is loaded and now if you see it works even though if I search it I will get this result result okay perfect now if you see as soon I I searched this map also changed to that particular location okay obviously the zoom is too much so let's fix this uh Zoom issue right now if you see uh the by default the zoom it showing obviously 12 okay but we can change to maybe let's say 12 and here as well I think that's all right that's the only thing place where we can change the zoom level and now if I search some different uh area see now if I got the concer it's showing conquer if I search for the charlet it will search for the charl if I search New York it will immediately jump to that location see okay perfect so that's how you can centralize uh the map view depends on your address selection now the next thing we going to do is to add a marker on the screen so depends on the number of listing we are displaying for that particular address uh then that particular uh marker we are show on the screen now in order to display the marker like this right we need to add a marker component so let's go back to our application and inside this Google Map component we going to render the markers okay so obviously uh depends on the number of uh listing we we have that much time we have to display the marker right so we will simply iterate that list of uh sorry the marker component so inside the underscore component folder I'm going to create a new component called marker item. jsx add the default template and then save it now over here right I'm going to display the markers or iterate the markers over here okay so simply we'll uh we need to dis get the uh all the business list first of not business list but all the listing we need to provide to this Google Map section so obviously we'll get it from the listing map view where we already fetching the data right inside the listing so that listing we need to pass to this Google Map section so if there are 10 listing then we will pass all 10 to this Google Map section and then obviously we'll accept it here as a listing now we'll just simply iterate that listing so we say listing do map and here we'll add list comma index or we'll say item comma index that be good and here we're going to add that marker item component okay and to this marker item component I'm going to uh pass the key as a index and then item as item okay let's go to the marker item and here accept accepted as an item not here obviously we we are getting each of the single item for uh every time when we are iterate this Market item component now inside this D I'm going to add a component call Marker F from the react Google Map API okay and here obviously we need to provide some of the value where you want to position this particular marker so we have need to go the position that position we'll get it from the item do coordinates because we already have the coordinates fill correct and then save this one if I go back to our application now right uh obviously we need to search more well for example and search it if you see the default Market games the two extra marker right if I search conquer you'll see I don't know conquer oh let's search it I forgot to search and if you see there one mark marker is showing because only that marker is belong to that one okay perfect so now the we are able to display the markers but you can customize this marker okay you can provide your own icon as well so inside the icon you can provide the URL it means you can provide the external URL or you can use your local um image so inside this public folder I added this pin.png and this is how it looks okay you can get this SS uh from the source code the link is in the description and here I will simply Define pin.png file okay here you can scale this size so let's define the scale uh I'm going to give width of 40 and then height of 40 and then save it if I go back if you see how beautiful it's looking right let's search the address which has a maximum number of uh markers so if you see we have this two marker over here okay if you want if you think that you need to change the size you can change the size as well okay so obviously if you if I go here you'll see this marker as well okay now I will change this size to maybe let's say 60 and save it now it's little bigger it's nice to view as well okay now for this marker you can add an on click method so if I type on click okay and let's console. log and we'll just print that particular item okay whatever the item we are getting if I go to the inspect panel and the console it's clean everything if I click on this one you'll see the item which I click for this one the ID is 16 for this ID is six correct next uh once we have add the marker we added the on click method now the think is right once us click on this marker we can show some kind of uh this particular item means with the image the pricing and all right so user don't need to actually uh check which uh listing is this run right we can show it on the click of that particular listing so for that one we need to add uh one more component inside this one and we can call it as a overlay view okay so it's called overlay View and ins this overlay view you can Define whatever you want to display for this overlay view you have to give the position first okay which position do you want to display and then you also need to give the one more property called map pan name and here you have to give like overview overlay view do overlay Mouse Target okay and then on the position you can write the position which you want on the click of that one you are displaying so what we can do on the click right we will save that one in one state so constant and we'll say ask selected listing comma set selected listing is equal to use State and whenever user click on that marker we'll simply set the selected listing with the item and now whenever the uh selected list listing is available then only we going to show this over view obviously once we have the selected listing we just display the uh we'll just position with the coordinates okay and then inside this one you can Define the data whatever data you want okay for example we'll say sample text and save it if I go back to our application right and if you see nothing is showing on the screen right now but as soon as I click it you will see over here the text called sample text showing so cool right now only thing that now we need to do is to display the similar kind of structure like this see okay but we'll make it our own new because we cannot we can use the existing component as well but it's little bigger and on map we can make it little smaller so we'll say uh marker listing item. jsx here need to be marker not a market so I will change rename this oh my bad Mark and then I will add the default template and then save it now over here I'm going to pass means I will accept the uh listing item so here we'll say only item and then inside this du I will pass Mark listing item and here I will pass item which which is the selected listing and save it now over here uh I will copy the existing code which we use it inside this listing right so if I scroll down here we use the D and all I will copy all of them and I will paste it inside the marker listing item like this okay and which has the dble and everything is there obviously make sure to import all of this component so we have to import map pin which is the icon bed double also is an icon and the bath as well and ruler too and I think that's all obviously we are proving the item as it is so that's also good let's save it and let's test this out now if you see over here we have one item which is quite longer if I click on this one see it's showing that one as two right that's working perfectly fine uh if I zoom little bit because because we click to I don't know but if I click now see we got that item but we have to also make sure that it will remove the existing of previous one so simply now we will give the width and height so for this deal let me bring this down and we can give width of maybe we'll say uh 150 pixel okay so if I go here and also give the similar width to this image as well so 150 pixel okay let's check whether we gotting 150 150 is I think too small let's change to 180 I think that's enough and also I will change the height to 120 okay and that's look good to me Let me refresh this once because this lot of congested We'll add a more for example let's search it okay I zoom this one but now if you see we have that listing if if I click on this one it it's showing me the listing now a couple of things I don't want this padding I will remove this padding also I will remove this border okay uh after this uh we'll add a background be white so now background is white for this du I will add a padding of two okay and uh you can remove this because right now I think two is fine right so I will remove the last one we'll keep bed and bath only to look much better and I think that's enough right also uh we can add the clothes uh tag so if I go here and above this image I will add X icon okay and if I save this one so this is how it looks the X icon right uh instead of adding background white to this one you can add to this background white so yeah and now if I if you see we have this close button so once user close on this one we have to make sure that we'll remove this okay so simply what you can do you can add on click Handler Handler on this one and we'll say uh close Handler and we'll pass this method back okay to this our um map Google map view where we are iterating the markers so over here not here but marker listing item this is item this is the marker item and over here we want it display so close Handler and once user close on this one it means we'll set the selected listing as null and now if I close on this one see it's gone okay but perfect now if I click on this one and this one it show me both the thing because obviously uh user can see and compare any of them at a time right if I close one of them it will close at uh as well so this is how you can add your own marker and obviously uh you will you can also see the details of that particular uh marker now if you think that you want to add a button to view details so that user click on this and go back go to this Details page you can add that one as well so let's go to this marker list item and over here I'm going to add a button and we'll simply say uh view detail uh let's add outside of this de perfect view detail see okay you can make this uh smaller as well so directly you can Define size and is equal to SM which is small SM stand for small and boom now on the click of this view detail we can directly jump on to the new page where we can show the details and same thing we're going to do it as well to this listing if user click on any of this listing we going to jump to the new screen okay so let's uh stop here for this chapter and I hope you understand how beautifully we integrated this marker section where you can see the details of each uh markers information see okay and obviously we customize our marker we added the marker according to our need and we simply position it uh depends on the coordinates so guys if you have any question any doubt let me know in the comment section and if you still did not subscribe to my Channel please do subscribe now we are going to implement the details page for this each of the listing now whenever use click on this any of this listing we're going to navigate uh to the detail screen okay and the main important part obviously we need to create a dynamic route for that one so this will be like view listing slash and the ID of that particular record any of the listing record ID we need to pass okay so this will be the dynamic route and on that one if you see we're going to show the slider image if you uh if that particular listing has multiple images then we going to show the pricing and the share button the address then the next and beautiful part is the key feature you going to show in the specific format the description after that we going to show the map and the who posted this particular listing that users detail as well or agent detail so let's go back to our application and the very first important thing we need to do is to add a new routing uh New Path so inside the route folder I'm going to create a new folder and we can call this as a view listing inside this folder I'm going to create a new file uh sry new folder again and this will be a dynamic so here I will add the view listing and inside that we we provide the ID and then last we need to add page. jsx file add the default template and here we replace with the name view listing and save it now whenever user click on the the listing right so let's go that go to that one so we'll say we'll go to this listing okay where we have this actual listing and over here I'm going to wrap this de inside the link from the next SL link and we provide the H reference I will wrap it this complete de inside this de and here we going give the path called view listing slash and then we need to pass the ID which is item. ID so what we are doing whenever we click on any of this item right we with the help of this link component we are navigating to that view listing page and by providing the ID let's save this one and let's test this out Let me refresh this once and if I click on this one okay if you see it jump to this VI listing sl9 perfect right uh just for this one right I will add the loading. JS file loading. jsx so whenever I our component get Lo from the server it will show the loading uh page in the meantime okay it's not mandatory but it's good to have okay so for the user uh the better user experience purpose so now let's go to this page. jsx file and very first thing we need to do depends on this uh record ID we need to F the uh listing information correct so in order to F the listing information if you remember right we already used that one but let's Define constant get listing details and we'll Define Conant data error is equal to await super base obviously we are refer to super base Dot from here obviously you need to give the table name then uh here we need to give us not select but the condition we need to add the condition okay and what you need so select we'll Define the star obviously but along with that one we also want to fet the listing images I hope the name is correct and then inside that we'll face the URL comma listing ID like this dot we need to provide the equal and obviously we'll need to F depends on the user uh the record ID so we'll get that record ID from the params do ID obviously we need to define the params over here and this is a weight we'll make this as a sync just to make sure the table name is correct listing images that's correct and now here we'll simply Define if data is there we'll Define console do log and data okay let's test this out obviously we need to call this method inside the use effect so we'll just uh Define gate listing detail and we can we can execute only once so I pass the empty array let's save this one and let's go back to our application so right now we got one errors set use we use the use effect right so that's the reason we got the error make this as a client use client and now we are good so go to the sorry uh go to the inspect panel just to make sure that we are are getting the result so inside the console if you see on line page number 18 which is this one we got the listing okay that particular listing see Perfect Right obviously you can add one more condition uh do equal and active as true okay only active uh listing will F now obviously we need to save this one in one state we we'll say listing detail comma set listing detail is equal to use State and simply we'll replace this with the set listing detail and save it now if uh if there is any error we just toast a message we saying error server side error we can say server side error okay and save it so we are pretty good on this one now the next thing and very important important thing if you see the mockup design the we need to show the image slider now with the Shad C and component called caral okay which is very beautiful uh component and which help us to add the slider kind of effect right and it's recently they added this one so we going to use this one so let's import this component first so I will you need to install this component using the npm and once it installed right uh let's copy this import statement but before that uh we'll create a new component folder inside the view listing and inside that I will create a component called slider. jsx and in that one I will import this one and paste this import for Kel and then I will copy this example code and we'll paste it here okay now this slider component I'm going to to add it here and for this slider I'm going to pass uh image list which is which we can get it from the listing detail go to the listing detail dot uh I think listing image listing only image listing just to check I don't know it maybe listing images only okay so this need to be listing images we can verify it let me console this data first over here and then we can just console if you see we have this listing images that is correct now this image list will accept that prop inside the slider over here and save this save this one as well now obviously if the slider is not there if means if if the image list is not there so here we say image list is there obviously it will show the slider if it's not there I'm going to add the some kind of loading okay so simply here uh for this de I'm going to add class name WID to be full height to be uh 200 pixel and then background slate 200 and animate pulse rounded large okay and obviously uh this image list we need to iterate over here let me bring this down and let iterate this image list do map we'll say item comma index like this and inside that we want to show the image or not image but we need to show this Coral item and inside that we want to show the image so image source we provide an item. URL here we give width uh maybe 800 the height will give maybe 300 okay alt let say just image and here now I'm going to give class name okay we'll make rounded to be Excel then object cover and height I will Define here again at 300 pixel okay obviously we don't need this Cal item because we are already iterating the image list now if I go back to our application if you see we have the error and the width is quite bigger so simply we can add some padding so inside the page. jsx this is the parent component here I'm going to add a class name padding x24 but when the screen size is medium We'll add a padding X to 32 when it's large We'll add a padding X to 56 okay and margin y 23 so let's save this one and I think everything's look good so right now if you see still we don't have the result and I don't know what's the issue let's make sure we are getting the image list so I will just console the image list over here and if I go here if you see uh we got image list as empty it means we are not getting the image list from here so we are setting this set listing detail over here okay and once we set okay so this need to be a data zero okay because that's the first element we need to F right now let me refresh this and if you see now we have this list of slider see perfect right now let me give some margin from the top so here we'll say margin top to five I don't know why it's not getting that margin but you can directly give in side the slider margin top to five we'll do that in a moment next thing uh obviously if you see that the width is not properly defined so you can add width to be full over here for this image okay and little bit I will increase the height to 360 little larger see so here change padding y to five and now it's came to down perfect see next thing uh we want to show the details for the to hold this all the details information I'm going to create a new component called details. jsx and inside that we put all the property details now inside the detail we need to import this details component inside the page. jsx file after the slider and save it now to this detail screen I'm going to pass a listing detail as a listing detail and inside the details now here I simply paste this uh details screen UI okay which is quite easy you can access it from the source code and this is how it looks so here I'm going to show the um the pricing the address here we added the share button then we added the key feature for this particular house and the description we show it okay now you can show the map as well so let's add the map over here so here I'm going to add h2 tag and we'll simply say um find on map and we'll add the same styling that what we give for the other heading and here you can also add Google U map section or not Google Map section but I think let me check what is the component name which we give so it's Google Map section only to this Google Map section you can pass the coordinates so that coordinates we can get it from the listing detail dot uh coordinates and for the listing we can pass inside the square bracket and listing details okay let's save this one and let's see whether we are able to see the map or not now if you see if I refresh it right this is how it showed to us and you will see the address as well on the screen see okay so everything as it is with the map on all correct and the last we're going to show the agent information who add this particular listing so that one here we can show it for that one I'm going to create a component called we can call it as a agent detail. jsx add the default template here it will accept the listing detail information and then uh from the not from the page but from the details only because we are adding over here we'll say agent detail and we pass the listing detail as a listing detail and save it now let's go to the agent detail screen and over here I'm going to show image users image source here we'll say listing detail do profile image then we'll give alt as a profile image width let's give 60 uh sorry height will give 60 and we'll make border rounded so rounded corner to be full let's save this one and let's see how it looks on the screen so right now we got one error that uh that particular URL we are coming it's getting from this image clerk.com so this host name we need to add inside the next. config.js the same way we added for the super base right so we'll add this post name save it and then once you save this one make sure to restart your application and then refresh the screen and if you see if I scroll down you'll see the image okay there a profile image who added this um particular uh listing now let's go to the agent detail over here I'm going to add a d uh first thing I'm going to show the name so listing detail do full name and another is for the email not email created by uh field see okay uh let's bring uh let's not bring but let's uh give some styling to this one so class name we'll say text large font bold and for this one I'm going to add a class name we say text of gray color 500 okay and the another uh Buton component we going to add called button we'll say contact or send a message we'll say send message okay if I save this one uh okay so me make sure to import this button component save this one and now if you see we have this one right let's bring this everything in one line so for this do I going to add a class name make it Flex then we'll do gap of five and I will wrap this image and this information in one de okay and here as well I will going to Define class item to be in the center gap of six maybe and let's see how it looks perfect uh here as well I'm going to add item to be in the center and justify between okay also Let's uh let's add some padding and we'll make rounded large We'll add a shadow effect and and some border okay perfect uh let's bring this little bit down so we'll give margin y to six something like this now here obviously we going to write the agent or send message but obviously uh we can write one text over here before this so I will copy this existing S2 tag we'll say contact agent contact agent and save it okay and that's all and if you see we have this beautiful detail screen along with the map and this agent G okay now if you see uh this map right sometimes show uh to press the control button and then it will work right so you can fix that issue as well now for example if I go to this for sale right right now it's showing but sometimes it might show that okay you have to control press the control some how warning so for that one uh it's very easy to fix okay let me open any of this uh listing first and hey see you got this us plus scroll right so in order to remove that one right you can just go to this map section so Google Map section where you implemented the map component and here you can give one property called guesture inside this Google Map only right uh yeah guesture handling is equal to and here we need to say grey okay if I save this one and now you'll not get get that particular warning kind of thing okay guys so that's all for this particular section I hope you understand uh how we beautifully implemented this detail screen okay now on the click of this share you can just copy uh the listing URL okay and then you you can put it in the the clipboard and then you can able to share that one with your friends Al so they have beautiful slider where you can see the key feature the map feature as well and along with that this contact agent section if I go to this for sale you will see the sales uh section as well here you can easily navigate it if I want to search something search something and here you will see uh that particular location along with the listing so right now if you see there is a this listing over here okay and and obviously on the click of that listing you can jump it now over here if you see we have this view detail button but it's not working correctly right so let's add the routing for that one so let's go to this markers item where we added the button inside the marker item list item and here I'm going to Simply wrap it inside the link H reference and here we'll simply add view/ view listing slash and the ID of the listing which is the let me check item. id item. id okay and then save it obviously make sure to wrap it inside this link component save this one and if I go here now if I click on this view detail it will jump to the detail screen uh only thing that I'm going to update here let's go class name with to be full so now if I just I will undo this one okay let's search it again and if I click on this one see we have the button click on this one and it will jump to this uh detail screen until this point we implemented the listing page and a lot of details but currently we Implement for the sale listing type now if what the listing type is of our rent right for that one if I click on the for rent it should go to the SL rint okay with the same UI but the listing will be of type rent okay so let's go back to our application and first thing we need to do is to create a route for the rent so inside the route folder I'm going to create a new route and we can call it as a r inside that I'm going to get p jsx file and then add a default template and here you will say for R and then save it now if you remember inside the page.js okay uh which is the homepage for the sale copy this all of this code paste it here make sure to import listing map view and only thing that you need to change that type here we'll change the type to rent and then save it and that's all right right if I refresh and uh let me refresh the screen and let's go to this/ R and if you see now you will get only property which is of Type R right now we don't have any property so I will add that one but we'll get only that property now obviously on the click of this for R we need uh we need to implement the routing for on the click of for range so I will copy the existing line of code like this paste it here and here we'll just change to rent and slash rent okay and then save it also uh I will add some couple of uh let's let's do one thing in the here if you see we have the sale here I will change this one to rent and this one to rent as well so two type I change so that we will get some data so now if I go to this for rent you'll see the two two record with the Rand and obviously obviously it's not working or not showing but if you search the some let's search for the concer address right and if I click search right let me see whether do we have any listing see here is the we have the listing and this is the same listing which is showing on the screen right obviously you can filter this out all the property all everything will work as expected okay only thing that as I say the typ and which that particular logic we already implemented so you just need to use the existing component pass the correct value and that's all you are ready to go so this is how for sale and for rent both the things are now working now it's time to implement the mile profile section if you see on the screen uh as currently inside our application we use the clerk's user button and this is how we got the the UI right but we need to replace it and we want to add our own drop down with these options okay so first thing we need to do then next thing with the help of Cl profile we going to implement this complete profile section along with that we going to add our own uh option inside the club profile um UI itself okay so we will learn everything first thing let's go back to our application and inside the header we need to replace this user button only with the user image profile icon okay so I will add the image The Source here we'll access user dot image URL okay here I'm going to give width of 35 and height of 35 here we'll say alt tag user profile let's save this one and let's test this out inside our application and this is how it looks right um just we need to add a c to be rounded so it will be in the form of circular so add a class name we put with to be full that's all I don't know why it's not Chang Let me refresh the screen okay so not weird sorry my bad um rounded to be full okay and now you'll see it's full perfectly fine now we need to add a drop down and for that one we are going to shat uh drop down component so it's very easy to use okay if you see this is a button and this is the option that you can show in the dropdown so first thing let's add this particular library inside your application then in order to use it you have to import these statements and let's use the existing uh example code after this image obviously on the click of image we need to trigger it right so I will cop this from here and paste it inside this drop down menu trigger and then here I'm going to add ADD child okay because this is a child of this drop down menu trigger now here I'm going to replace this some of the menu so profile is fine here I'm going to say my listing here I will say log out and I will remove the subscription button now for log out uh you have sign out button from the clerk you can use that one okay if I save this one you you can check this out see log out button if I click on log out it will get log out okay now for the profile screen okay let me bring this down here we need to navigate to the new uh page called user or we can say profile so inside the routes component we can create a new route and we can call it as a user and inside that I'm going to create page. jsx file add the default template and we can call it as a user a user and here as well user save it now here we'll just add a link to that profile screen so link H reference here will navigate to the user that's all and we'll put this text to inside this link now if I refresh it once and if I go to here and click on profile if you see now it's navigate to the/ user now over here we you want to show the user profile and it's quite easy with the clerk okay cler provide the custom user profile functionality as well but if I type user profile see if it's importing from the clerk SL nextjs save this one and here you will see the user profile uh UI so beautiful right you have option called account security also you can customize this completely now for this particular de I'm going to add some styling okay so first thing let's add a class name We'll add a margin vertical to be six on medium screen I'm going to add margin X to 10 and on the large screen I'm going to add padding x232 okay here as well padding only and I'm going to add h2 tag it will say profile add a class name font bold text to Xcel and then save it okay if I go here so this is how it looks um I'm going to give some padding here already we give the padding let's say margin Y2 3 right padding Y2 3 perfect now next thing as I told you right because our profile section is ready okay we don't need to do much because uh the uh clerk is already taking care of this particular thing now if you don't want this kind of Shadow effect because this particular profile look little uh sticky kind of thing right mean we are just uh put some component and add it right we can remove that thing so if I select this particular component right maybe we can select this component and if I try to uh add a shadow box Shadow as a none right you will see that box Shadow is gone okay now the question is how can you update this inside uh styling to this clerk it's very easy right and that also provide inside the uh clerk documentation now obviously you updated you can update this class okay so copy this class then go to the global CSS file and at the bottom you can just paste this class and then we'll add a box sh Shadow so box Shadow to be none okay and then save it now if I refresh the screen you will see we don't have that box Shadow and this page now look complete correct and now uh it's it's look like a it's already existing page of the our application now the next thing as I told you that to add a new Option over here okay after this account security we want new Option called my listing so it's also very easy uh uh inside the user profile okay here we need to provide some children to this component okay and we can here you can do that user button you have to import dot user user profile page okay and then for this profile page you have to provide some value for example the label what will be the label so here I will say my listing okay also you can provide the label icon so you can provide the label icon so I will say um building two icon from the Lucid react and for this one I'm going to you class name height of five width of five and the last thing is URL okay so URL you can mention so I will tell you what does it mean and inside this particular uh component you can show whatever you like or you want to display okay for example I will say my list listing component and then save it now if I go back to our application so right now uh we got this error because we are trying to add the clerk inside the server side let's make this page as a client side so we make it as a client and save it and now if you see we have the third option if I click on this option the text you will see the my listing component because that's what we display over here correct perfect now obviously we will add add a new component to show only users listing or users property so here I'm going to add a component folder first and inside that I'm going to add a component called user listing. jsx add the default template and let's replace this hardcoded text with the user listing okay and save it now go to user listing and here we need to f the listing which belong to that particular user so constant get user listing and with the super base we can call get the data so we'll say constant data comma error is equal to await super base. from and obviously the name is listing the table name you need to do dot um select select and here we need to select the all from the listing as well as we need to select the listing images which we to get the images uh of respective listing right so here we'll say URL comma listing ID then do equal and now here we need to pass the users email which is also B uh on because of uh we need we need to fetch only use uh listing which belong to that user right so we are passing equal created by matches with the user email so let's get the user email so here we get the user dot primary email address. email address perfect and here we are fing all the listing even though it's a um drop or it's a publish a sync make it a syn and here we'll just console the data so console.log data and and then let's call this get user listing inside the use effect whenever this component get load for the first time and make sure the you whenever the users information available then only we will call this method save this one go back to your application inspite the inspect panel inside the console make sure you got the data see perfect next we need to save that all the listing inside one state so here we say listing comma set listing is equal to your state and now here we'll just iterate our listing so I will add A2 tag we will say my listing I will say manage your listing manage your listing last name font bold text to Excel and after this one I'm going to add du tag and inside that we'll iterate the listing okay so if the listing is there we'll iterate the listing for now I'll put and and operator and we'll just simply say listing do map item comma index and over here we'll put that line of code okay so I will copy from the existing one so here we have the listing one right I will copy this complete du or let's yeah only this de paste it here and make sure to import all of this uh import statement for respective component and ruler as well I think that's pretty much and obviously we are passing this information so let's save this one and let's go go to my listing right now nothing is displayed on the screen that's interesting so because we never set the value so we need to set the value over here say data and save it now if I go here obviously it's showing that error might be Get Er and if you see now we have the proper listing okay perfect obviously we want to show uh two listing side by side so for this de I'm going to add class name we'll make grid grid column one when the screen size is extra small and grid column two when the screen size is medium something like this and uh uh for this page right let's try to make we to be full and save it and then uh couple of thing I'm going to add sorry uh so inside this user listing uh above this image I'm going to add S2 tag and it will show whether this um particular listing is in the draft mode or not right so simply I'm going to add a condition if item do active is true then I'm going to say it's published otherwise I will say it is in the drop mode okay and for this CL S2 tag I'm going to add class name background to be purple primary it means then background oh sorry text to be white and I will make this as absolute something like this see also uh I'm going to give a padding X to two let's see how it looks perfect and I want this on the right hand side or you can keep like this as well that's look beautiful let's make text to this small and padding to one okay perfect now you can get to know which one is published and which one is not now one more thing uh here we'll give some gap of three and uh then let's add some padding for this S2 so let's add padding not padding but margin to one and we'll add a rounded large let's see how it looks perfect next thing we want to show the buttons okay so and also we want two buttons one for to edit and one for uh to delete and you can give button of size small like this see okay also if I go to this button component from the shat here you have you will see there are different different variant you can give like destructive outline ghost link or even size as well let's give the restrictive for the delete so here I'm going to add variant is equal to distructive and for the delete and if I go to the listing so right now make sure to add button so button is not Define let's add a button and if you see now we have this beautiful buttons let's bring everything in one line so here I'm going to give D and let's define class name we'll say Flex gap of two and for this edit button I'm going to give class name and we'll say withd full but let's add one more button to view okay so view is also important so we'll save View and for delete I will add the trash icon only something like this okay um for trash that's ready is fine uh for view or let's add View at the first one and we'll add variant as a outline something like this okay now you have option to view option to edit and option to delete as well okay so this is how you can add it if you see right now this image is broken right you can replace this image with a some image placeholder let's do that that so over here if you see we have the we can check with the condition if the item uh listing is present then show the actual URL otherwise show the placeholder so placeholder you can access using placeholder.png because I already added this placeholder uh sorry this a SVG actually SVG file over here okay let's save it and let's test this out see now it place with the placeholder and now it's not look like a broken one now once user click on The View we going to uh redirect it to the view listing so let's go here and add that one so simply let's add a link from the next link H reference here we'll say view listing slash and the ID of that particular one so item do ID okay and then wrap this button inside this link let's save it let's test this out so if I click on this view button see it went to this view Perfect Right same thing we want to do for the edit because we know that for edit we have the uh route right and we can navigate to that route so that is the reason uh I kept the reiting uh route in different uh route I mean we added the edit as a different route right so let's add that one as well so I will copy this link paste it here here uh I will make justifi between so it will be similar way over here I'm going to add edit listing and everything will be similar me we are passing ID and all if I click on edit I don't know where yeah if you see I jump to the edit and all everything is there perfect right and the last the delete uh we need to check whether we will check the confirmation from the user that do you really want to delete and if you say yes then only we will delete now the delete functionality you can try on your own guys before that I want to uh add this class name to link so it will spread correctly see the button will be look beautiful now and I think that's pretty much so guys uh that's all okay so uh as I told you right implement the delete functionality let me know uh whether you can able to implement or not it's very simple on the delete you can show the some kind of dialogue message which we already built right and you can say uh if you say yes then you can make the super base API call where uh you can take a reference of this document to delete the row okay and you can delete from here remember first thing we need to delete the listing images and then you need to delete this listing if you really need a help and need a source code the link is in the description you can access it now we are at the last chapter of this particular course where we are going to deploy our application on a cloud so that your users uh your friends and family can see your project so first thing you need to do once you done with your project we going to push this project to the GitHub and from the GitHub we going to deploy it on the worel so whenever next time you make the change and the commit your changes to the GitHub it will automatically deploy the new update on ourself so let's go to the github.com and if you don't have an account create a new account here we going to create a new repository here we going to say real estate I will make this reporter public for now or let's make it private and then click create repo so once you create this repository uh you need to add this remote origin inside your project so first thing we will initialize the git if you don't have and then add this remote git okay and then we'll simply if I go back we'll simply add the changes then we'll commit the changes we you say uh initial commit you can give any commit message and then once you push the commit right as you are pushing the first time you need to push with this origin main so I will copy this command as well and push it okay now if I go to the repo and refresh this one you will see then just you just push this all of this code perfect right now it's time to go to the wor.com and if you don't have an account create a new account is completely free so you can deploy as many as project you want now I already have some of the project deployed and if you see there are lot of project which already running now over here if you click add new and the project here you can connect the your repository first okay if uh you are using the GitHub or git lab or bit bucket you can have option to connect this repo and you can import that project just now if you see we added this real estate project and we have we got that option then click import you can give the name whatever you want so I will give realistate T gurji now the thing is right we will keep all of this setting as it is but inside the environment variable we need to add our own environment variables so inside inside this env. loal file all these environment variable we need to add so just control do CR a contrl c and then just paste it here and if you see all the envirment variable is get added okay next thing click deploy and then it will start building your application okay and then it will deploy it on the versal now we'll wait to um build this application and to deploy so I will pause the video and if you see our application is live now and obviously the preview is not displaying over here but if I click on it one right if you see it has a own dedicated domain okay and now you can able to see our application as well see so all the listing obviously everything will work as expected if I search it and here you will see that only uh result we are getting from this particular address on the map as well you can able to see the listing even you can have option to uh filter each of these listing as well okay so uh that's all right and uh if you see all of these functional is working as expected uh obviously if you want to access rentable property you need to log in it only for sale is active even if you want to add a new post right you need to log to account and even though if I try to login it here right let's login with the existing account and boom see you can able to log in and you jump to this new listing page because you were requesting that page right so this is how uh you can can able to deploy your application and now you can able to share obviously next time when you commit the changes and push it it will automatically Deploy on worsal okay also if I go to this dashboard of that particular project you have option to add your own custom domain from here also you can add your own environment variables so you you want to update you can update it from here so everything you can handle from this dashboard so that's all for this particular chapter guys I hope you enjoy this particular course we learn a lot of things and we build this beautiful re estate application completely from the scratch as this is a full stack application also we also make sure that this application is a uh responsive okay so depends on the mobile devices it will change the layout see okay guys uh that's all for this video and if you still did not subscribe to my Channel please do subscribe and we'll see you in the next video

Channel: TubeGuruji

Views: 11,414

Keywords: Build & Deploy Full Stack Next.js Real Estate App Using React.js, FullStack Real Estate NextJs, next.js 13 authentication

Id: 2lNjK9IwGlI

Length: 294min 44sec (17684 seconds)

Published: Sat Apr 06 2024