Build and Deploy a Modern Real Estate App | React Website Tutorial

hi there and welcome to a project video where you'll build and deploy a real estate react and next.js application with rental homes and for sale properties advanced property filtering property details page with an image carousel and much more realtor is the best real estate app that you can currently find on youtube in this video you'll learn advanced react best practices such as folder and file structure and hooks next gs best practices static generation and server side rendering you'll also learn how to create a user interface using chakra ui don't worry if you haven't used some of these technologies before the whole point of this video is to teach you how to think for yourself how to learn research and fully understand the tools you're using and most importantly you'll learn how to fetch data from unlimited sources using rapid api essentially you'll become the master of working with apis to support this video and all the real life projects that we do in javascript mastery make sure to leave a like comment and subscribe it shouldn't take more than a few seconds and i really appreciate it just keep watching and i'll teach you how you can build this amazing application in just one video completely for free in the end we'll also deploy the application so that you can share it with your friends put it on your portfolio and get a job before we dive into the project i have one important announcement for you for quite some time now i've been working on something big i'm creating a custom platform where you'll be able to learn by creating even better and more professional projects it'll take a long time to turn this into a reality but i want you to make the most important decisions during the process so click the mailing list link down in the description so that you can stay up to date and choose which projects will be built first big news coming soon with that said let's dive straight into the video [Music] before creating a folder for our project code we must first visit rapid api the link is going to be down in the description the making of this entire application is possible only due to rapid api because we are using one of their apis to fetch all the real estate data this api is just one out of hundreds of thousands of apis available on their api hub in this video you're going to learn how to use most of these endpoints from this api how to get different properties filter them and get property details so to be able to use our api make sure to use the rapid apl link down in the description and then you can click sign in or sign up in this case i'm going to log in since i already have the account you can log in using google github facebook or just your regular email once you're in you'll be redirected to rapids api hub where you'll be able to find hundreds of thousands of apis this was the first step of our video now let's create our application folder and then later on we're going to call these apis straight from our next.js application one more thing i'd like to quickly mention is that the link to the github repository of this entire project is going to be down in the description so if you at any point gets stuck definitely make sure to refer to this github repository here you'll be able to compare your code and see if something's wrong alongside the entire repository down below you can also find a lot of different github gists for specific files and things that i mentioned throughout the video while you're here definitely make sure to leave a star now let's jump right in as we always do let's start off by creating a new empty folder on our desktop in this case i'm going to call it jsm underscore real estate of course instead of jsm you can put your name here once you've created your folder feel free to drag and drop it into your code editor of choice in this case i'm using visual studio code because it provides a nice built-in terminal that you can get to by going to view and then terminal inside of here we can initialize our next.js application by running the command mpx create dash next dash app and then add latest and then put the dot slash afterwards with the space in between of course this is going to initialize a new latest next.js application straight inside of this folder there we go we are using react react dom and next and our application is being initialized as we speak i'm going to pause the video right here and wait for this to finish and i'll be right back the process ran incredibly quickly and we are almost ready to start our application but there is one thing that we first have to do and that is to create one more file inside of our file tree we can do that by right clicking here and clicking new file the file's name is going to be dot babel rc inside of there you can open a pair of curly braces and then use double quotes to say presets and then inside of there with an array it's going to say next forward slash babel also we can set the plugins but for now they're going to be set to an empty array once you create that file you can close it and then we can run our application by running npm run dev if this process wasn't successful for you make sure that you have nodejs installed first you simply have to google node.js download and install it but with that said we are ready to run this application more specifically our application is running on localhost 3000 so we can just press ctrl click and it's going to open right up for us as react.js has their own demo site this is the demo site for next gs of course we won't need any of this so let's go ahead and set up the real file and folder structure that we are going to use for this project there are a few dependencies or packages that we're going to use throughout this project so that might be the best first step we can again go to view in the terminal press ctrl c to stop our application from running and then we can install all of the necessary dependencies we can do that by running npm install and we can start listing them out let's start with the ui kit we're going to use for our components that's going to be add chakra dash ui forward slash react then we're going to use add emotion forward slash react that is a peer dependency of chakra ui and finally add a motion forward slash styled then we're also going to use axios to make api requests as well as the framer dash motion which is another peer dependency we're going to also use milify milify has a lot of utility functions that will help us format large numbers into a human readable format then we're going to have the n progress which is going to be a progress loading bar and then finally react dash horizontal dash scrolling dash menu we're going to use this for our gallery of images and the last one is going to be react dash icons now if you run enter this is going to install and we'll be ready to start creating our file and folder structure i'm again going to pause the video and i'll be right back as soon as our dependencies install and there we go our dependencies have been installed and we can run npm run dev one more time we can close our terminal and we can start focusing on the file and folder structure in our next.js application you're going to notice that we have a special api folder from inside of here you can write real backend code but in this case we're going to focus on the index and the underscore app.js as you can see this might seem familiar this is what we saw at the start this is the demo code but we can immediately delete all of this because we're going to create our new code for our home page so to do that we can first delete the unused packages and we can import a few of them that we're gonna need that's going to be import link from next forward slash link we're gonna also need import image with an uppercase i from next forward slash image this is going to be an optimized version of the basic image component and finally we can import a few components from chakra ui the components we're going to import are going to be flex then we can also get the box the text and the button all of this is coming from add chakra dash ui forward slash react and if you've never used chakra ui don't show worry at all the whole point of this video is to introduce you to chakra ui and all the other technologies that you're yet to see there are a lot of framework front-ends for react things like chakra ui material ui or and design the main thing i want to teach you here is to read the documentation code for each one of them right now you might develop your own project in material ui then on your job you might be asked to do something else and on your other clients project you might need to use something entirely else so the whole goal is to be adaptable to the changes and you can do that by learning how to read the documentation so let's go ahead and visit the chakra ui documentation page i have visited chakra ui.com and in here you can see create accessible react apps with speed simple modular and accessible component library that gives you the building blocks you need to build your react applications so let's go to get started and inside of here you should be able to see all of the features theming layout and everything you need to know to use chakra ui the whole goal of course is to use all of the different components that they offer for example the button that you can see right here or the checkbox the forms the grids so whenever you see me using something from chakra ui that might not make total sense to you at the moment definitely visit the docs go to the search and then search for that for example let's say that we're searching for the input click here and then you'll be greeted with everything you need to know about that specific component with that said let's see if there's something else we have to import right now i don't think there is so let's delete this class name and let's simply create an h1 that says hello world for now if we save that and go back you can see that we have hello world on our home page now let's create a banner component this banner component is going to be the component above our home component and there's something i want to teach you about that we can create a const banner which is going to be a functional component with an instant return whenever you create components in react or next gs you can reuse them and that's the goal so for example if we create this banner right here we can give it a flex container like this using the flex from chakra ui and let's just give it a few more properties and then i'm going to show you what i mean this flex is going to have a flex dash wrap equal to wrap then it's going to have a justify dash content is equal to center and it's also going to have align items equal to center and m is equal to 10. m stands for margin now inside of there let's say that we want to have some sort of a text so let's create a text called purpose because we're going to use that later on this purpose is coming through props into this component every functional component has props but more specifically we can destructure them and get the purpose right here so now you can use this component as many times you want just below by simply saying banner calling it as a self-closing component and then passing the purpose prop let's say the purpose here is for sale like this and then in the bottom one let's duplicate it and simply say for rent now as soon as you save this and if we go back you can see this component being reused two times of course this maybe doesn't make a lot of sense right now because this component is fairly simple but you're gonna see why does it make so much sense later on so now let's actually create the banner component in here we're first going to have an image with a capital i we need to provide it a source and the source is going to be the image url we don't yet have that but we're going to pass it through props later on then we're also going to create a width property right here and that is going to be set to 500 but as a number and also a height property equal to 300. there we go i've got that and finally we also need to provide it an alt prop for screen readers so we can say alt and let's say something like banner now below that we're gonna have a box and box is nothing more than a simple div in chakra ui there we go the most abstract component on top of which other chakra components are built it renders a div by default again if you don't know what something means simply hover over it it's going to give you an explanation or search it in the documentation we're going to give this a p is equal to 5 that's going to be padding 5 and inside of there let's create a text element we can give it a color equal to gray.500 and also font size is going to be equal to small and font weight is going to be equal to medium this text is simply going to render out our purpose now i'm going to duplicate this text two more times our second text isn't going to have a color but the font size is going to be really large 3xl like this and also the font weight is going to be bold inside of here we can render our title 1 like this then we're going to add a break tag right here and then we're going to render our title 2. in the text below we also won't have the caller but we will have the font size equal to large or rather lg and let's also do padding top is equal to three pixels or just three also we can do the same thing for padding bottom is gonna be set to three and for the end instead of the font weight here we will change the color and the color will be gray dot 700 so just a bit darker inside of here we're going to render the tests 1 which is a description finally below this text we're going to have a button and this button is going to have a font size is equal to xl we can also give it a background with bg blue dot 300 and finally color will be set to white inside of there we can render a link tag so right here let's say link and it's going to have an href equal to and right here we'll be able to go to link name and then inside of there we're going to render the button text and this has to be dynamic because we're going to pass it through props so now let's see what properties do we have that we're not using yet that's going to be the title 1 also title 2 we're going to have a description one and later on we're gonna also use a description too so let's simply copy the break tag and paste it right here and also say description two we're gonna get that through props as well we're gonna also need a button text a link name and finally image url now we have everything we need we are ready to call this component two times first time for the for sale and the second time for rent but as you noticed some things are gonna change depending on when we call it so let's paste this out properly and let's start adding some new props for our first banner our purpose is going to be rent a home and then we can also start creating a title our title 1 is going to be rental homes 4 and then our title two is going to be set to everyone i'm missing a one here then we can create a description one which is going to be explore apartments homes and then in description 2 we're simply going to say and more inside of the button text we can say something like explore renting and we're gonna also create a link name which is going to be equal to for slash search question mark purpose is equal to for dash rent and then finally we also have to provide the image url so right here we can say image url is equal to and in here i'm going to provide you with the image that you can use so the link to this image is going to be down in the resources this video you'll be able to find github gists for all the code that's going to be mentioned here as i've mentioned at the start there's going to be a github repository that you can reference to and check if you have any mistakes but there's also going to be a github gist file where you'll be able to find all the files and code that i mentioned you need to copy or follow along throughout this video this image url is just one of them that's going to be it for our banner we can quickly copy this and now paste it for our second banner as well but of course we're going to change some things here first i'm going to change this to buy a home in here in title 1 we can say find comma by and own your and in here we can say dream home then we can say explore apartments villas and homes and more and on button text we can say explore buying the link name is going to be not for rent rather for dash sale and the image url is going to be just a bit different so that we have some diversity so again this is going to be linked below the video there we go finally before seeing this in the browser we have to set up our images we're using an image tag right here with a source and this is an image coming from next.js this is an optimized version of a basic html image so to make this work we have to create just one thing inside of the next.config.js instead of here we can say images comma and then make this equal to an object inside of there we can say domains array and then we simply need to paste a string we can go to index.js and we need to copy the start of this url so let's copy everything until the com and there we go we can delete the https and just leave the bayad production and everything else to the com this is going to be the api for rental properties that we're going to use before seeing this in the browser considering we've changed our next.js config we have to open up our terminal by going to view and then terminal stop it from running by pressing ctrl c and then y and then simply run it again npm run dev whenever you change your package json or config files or environment variables you have to restart your terminal so now we can close this save it and take a look in the browser and we've got just one error saying that we must use height and width properties so in here i just noticed that i've misspelled with so as soon as we fix that we should be able to see this in the browser we have our hello world at the top and then we have our two banners the first one is going to be for rent the home and the second one for buy a home we can see that our buttons are not looking that great so let's go ahead and fix colors on those buttons instead of changing the background color even more let's just go ahead and remove the color and the background color all together because i think the default button looks just fine let's go ahead and save it and take a look in the browser there we go now the button text is more clearly visible with that said let's continue creating our home component we have our two main banners but what else are we going to have here well first of all everything is going to be inside of a box so we can rename this div to a box now just below our first banner we want to start displaying the properties that we're going to fetch from the api so right here we can create a flex container that flex is going to have a flex frap is equal to wrap property and inside of there we want to get the properties we want to map over and then display them here so i'm going to write that here fetch the properties and map over them of course we are not yet fetching anything from the api so that won't be possible for now and then we want to do the same thing below the second banner which is going to be when we fetch the properties for buy a home and here these are going to be the properties for rent the home great so with that said we're just starting with this video and we're already going to start fetching the data from the api so let's go ahead and explore how easily can we fetch a lot of data from rapid api the only thing you have to do is open up the link in the description that's going to lead you to rapid api more specifically to the api called bayout hopefully i pronounced that right that's going to be b-a-y-u-t so once you get here in here you'll see a button that says subscribe that's going to lead you to the pricing page and don't you worry this api is completely free to use for up to 500 requests a month which is going to be more than enough for this video go ahead and subscribe and get back to endpoints inside of here instead of the subscribe button you'll be able to see a test and endpoint button so let's go ahead and click it and as you can see you're gonna get all of the different properties so what we can do now is simply go ahead and copy the headers that's going to contain the rapid api host and also your own api key so let's copy the headers and now we can create a new file inside of our application let's collapse everything we're going to create a new folder in the root of our application and we're going to name it udls this is going to be a folder for utility functions functions that are general and that we're going to use throughout this project so let's create a new file called fetch api dot js inside of here we can import axios from axios and now we can paste our headers right here and simply comment them out for now what we can do just below the import is say const base url is equal to a string of https and then we can simply copy the rapid api host right here now we can create a new function that's going to use for fetching the data from the api by saying export const fetch api is equal to an async arrow function that's going to accept the url inside of there we want to say const we're going to get a response is equal to a weight axios dot get and then in here we're going to pass the url as well as the comma and then options which is a new empty object inside of these options we're simply going to uncomment our headers and paste them right inside of here and remove them from the top in here we're getting a response about all of our properties that we want to fetch the rental and properties for sale so instead of getting the response we can simply get the data by destructuring it and as you can see this base url is not used in this file rather is going to be used in all of the other files so we can simply go ahead and export it great so now let's see how we can fetch this data inside of our index.js going back to our index.js we can go to the top and import the two things we exported that's going to be base url as well as the fetch api that's going to be coming from dot slash utils and then fetch api now you might be wondering where are we going to fetch this data is it going to be instead of the use effect as it is in reactions or is next shares doing something different well let me show you next gs allows you to create a special function just at the bottom of your component by saying export async function get static props you can open the function block and the right inside of here we can do the api calls so let's do the first api call const property for sale that's going to be equal to a weight fetch api again this is the function we created at the top and then we're simply going to pass in the url by saying a template string we're going to paste the base url and then forward slash properties forward slash list question mark location external ids with ids capitalized and s lowercase is equal to 5002 then we can say end purpose is equal to 4 dash sale and we can say end hits per page is equal to 6. now we can duplicate this line and in the bottom line we can just change this to four dash rent great and then in here that's going to be property for rent now let's explore the api documentation a bit to see why do we have these props here as you can see in our documentation we have a properties list query right here a get request and to that we can pass a few required parameters and 5002 is the first required parameter then we also have optional parameters like hits per page page number sort rent frequency and so on and then if we test that endpoint this is going to be the result that we're going to get a list of all the properties either for sale or for rent so now inside of our application how can we actually pass this to our component what we can do is right inside of here we can return an object where we have props inside of the props we're going to have properties for sale is going to be equal to property for sale question mark dot hits we can add a comma duplicate this line and the second line is going to say properties for rent and inside of here we can say property for rent question mark dot hits what next js does is it automatically adds these to the props of our component right at the top so right here we can destructure properties for sale as well as properties for rent there we go now we have the properties and we can map over them just so we can be a hundred percent sure what data are we getting let's first console log these properties there we go and one more important thing is if you go to fetch api you're going to notice that our data right now is declared but is never being used so just at the bottom right here we have to return the data that way we'll be able to console log these and then later on use them in our code now let's go to the browser and check it out there we go as soon as you open up the console you'll notice that we get six apartments or houses for rent and six for sale and these have a lot of data agency data area bats categories completion status cover photo anything that you can think of it's here so now we can actually map over these and then render the property component we can do that right inside of here by saying in curly braces properties for rent and then that's going to be dot map we're going to get one individual property and we want to render a new component called property that's going to be a self-closing component inside of there we're going to pass all of the property data property is equal to property and the key is going to be equal to property dot id now we can copy this line and paste it below by a home the only thing we're going to change is this is going to be properties for sale now as you can notice the property is not defined so that's the component that we have to create next to create our property component we can collapse our pages and create a new folder in the root of our directory let's call it components inside of there let's create a new file or a new page called property dot jsx inside of here we can import the general things things like import link from next forward slash link because we're gonna link to some other pages also import image from next forward slash image then we're going to import a few things from chakra ui we can do that by saying import that's going to be a box flex text and then avatar and these things are coming from add chakra ui forward slash react then we're going to also need a few icons import f a bed and also f a bath without a comma right here and these things are coming from add react dash icons and then forward slash f fa in here we're not going to have add it's just going to be react icons now let's get some different icons as well import bs grid fill and this is coming from react dash icons and then forward slash bs finally we're going to import the go verified icon and this is coming from react dash icons and then forward slash go the last thing we need is that utility function called millify from milify great now we have all that we need and we are ready to start creating our property component so let's say const property is equal to a functional component with an instant return meaning it's going to be just parentheses without curly braces and inside of there that whole property is going to be a link so we're starting off with a link and that link is going to have an href equal to a template string of property forward slash and then external id make sure to have property right here as well and it's also going to have one more prop which is going to be called pass href there we go and now you might be wondering where we're gonna get this external id from and all of the other props for that matter well we're going to immediately get them through props right here by the structuring property remember inside of the property component we're passing the property and we can see that if we go back here and look at property and it has a prop of property that contains all the data that we just previously saw inside of our console log so let's immediately get all that data by saying column and then one more time we're going to destructure all of the individual properties that we're going to use these properties are going to be a cover photo a price then we're going to have rent frequency rooms title bats we're also going to have area agency is verified and also external id these are going to be all the properties that we're going to need so for now let's just simply show the title of our property right here inside of the link we just want to make sure that this works so finally let's simply say export default property and with that said we can go back to our index as you can see our property component is not defined so let's go ahead and scroll to the top and let's import that property we can do that by saying import property and that's coming from dot slash components forward slash property.jsx but you can leave out the jsx and that's going to be it for now let's save it and take a look looks like there's a problem with the go verified import so let's go ahead and check that out in this case we're just supposed to type go right here so now let's save it and take a look we have one more error saying that properties for rent is not defined and that was just a mistake on my end in here i misspelled that right here so let me just properly copy properties for sale right here paste it inside of here and i'm going to do the same thing for properties for rent and we no longer have to console log this let's save it and take a look the last error that we get is that external id is not defined so let's go ahead and check that as well that's going to be inside of the property and if we look into external id i spelled it with a lowercase d here so let's go ahead and fix that and i leave all of these errors in all of my videos because i want to teach you that nobody is perfect all developers make mistake and that's completely normal just keep it going and you're going to become so much better off a developer with that said if you appreciate me for leaving all of these errors in in the description of the video there's going to be a newsletter link you can sign up for that to get more development tips on weekly basis delivered straight to your email great with that said let's test this out and hopefully now it's gonna work there we go below each one of our banners we can see a lot of different titles right here right now they're all kind of next to each other so it seems like one huge sentence but these are all individual properties six of them to be exact so now let's add a few more things besides the title for each one of these properties including the image and everything else and we're immediately going to make this look so much better first let's start by rendering a flex container inside of our link that flex is going to have a property flex dash wrap or rather just flex wrap is equal to wrap then it's going to have a w which is width set to 420 pixels padding is going to be set to 5 and we're going to reset the padding top to be equal to 0. then we're going to call the justify content is equal to flex dash start and finally cursor is equal to pointer as you can see we don't need any css files with chalk for ui you can apply all of your styles right here then we're gonna have a box this box is going to contain an image so let's create that image tag right here it's going to be a self-closing tag and let's provide a source our source is going to be equal to if there is a cover photo right here you can see we are passing it through props then we're going to show the cover photo dot url but if there isn't a cover photo then we're going to show a default image and this default image is going to be inside of our assets so let's create a new folder right here assets and you can find the house image on google or you can find it below this video i'm simply going to paste this house image right here with that said we can simply say import default image from dot slash assets forward slash and then that's going to be images forward slash house dot jpg there we go i just have to put this house inside of the images folder there we go and finally i have to rename this to use a capital d also let's provide the alt tag right here which is going to be house let's just quickly fix this typo right here that's going to be cover and let's also quickly provide the width which is going to be 400 and also the height which is going to be 260 pixels as soon as we do that we can save this and let's check it out in the browser and there we go we have rental homes for everyone and below that we have six rental properties then below that we have buy a home and then we have six homes that we can buy with our money great this is looking great now finally let's add more properties to each one of these images or let's say cards let's turn these into cards below our image box we can create one more box this box is going to have w is equal to full which stands for full width then inside of there we're going to create a flex container so let's say flex it's going to have a padding top is equal to 2 it's also going to have align items is equal to center and it's going to have a justify content is equal to space dash between then we're going to have another flex container inside of this one and it's going to have align items is equal to center inside of there we can create a box and this box is going to have a padding right is equal to 3 color will be equal to green dot 400 and inside of there we can say if is verified then and end we can render the go verified icon which is just a self-closing tag now let's also close this and also below that let's add a text element for the text we can say font weight is going to be equal to bold and font size is going to be equal to large inside of there we can say aed which is the currency for united arab emirates and then finally we can say price the price might not be the total buying price it may also be a rent price so if there is a rent frequency in that case we're gonna render a template string that's going to say forward slash rent frequency like this there we go so now let's close this template string this dynamic block of code as well and let's check this out in the browser there we go this is already looking much better we have the price we can see if the seller is verified and we can see the renting price if we scroll down you can see that this is not being rented this is just the price to actually buy it now to make the price more readable we can put it inside of the millify function so right here millify and then price as you can see now that says 9k monthly which is a lot more readable and in here it says 2.6 million to buy this great property awesome now below this inner flex we're going to create a box right here and inside of that box we're going to render the avatar component it's going to have a size is equal to sm and a source equal to agency question mark dot logo question mark dot url it can also be a self-closing component so we don't need a closing tag below the box and below this flex we're going to have one more flex container this flex container is going to have a align items property equal to center it's going to have a padding equal to 1 also justify dash content equal to space dash between finally it's going to have a width or just w is equal to 250 pixels and color is equal to blue dot 400 inside of there we can show the rooms so just simply say rooms and then we can render the f a bed right here then put one line and then we can say f a bath as an icon and then we can render the number of bats in front of that and finally we can put one more line and say millify in here to render the area in square feet and finally we can show the bs grid fill icon that represents the area one last final thing we have to do below this flex is to create one more text field this text field is going to have a font size is equal to lg and inside of there we're gonna see if the title.length is larger than 30 characters in that case we're going to simply cut it by saying title dot substring from 0 to and we're gonna put that in a template string like this and then we're gonna add three dots else if it's not larger than 30 characters we can simply render the entire title great before checking it out in the browser let's just quickly fix this typo it's supposed to be substring now let's check it out our property component is done and there we go as you can see right here we have our monthly price we have our image and we have the image of the agency that's renting it that image is quite big so we're definitely gonna have to make that smaller let's see what else do we have here and the properties for sale are not showing up in the row so these are some things that we are yet to fix the reason why our chakra ui components are not working as they should is because i still haven't implemented the chakra provider i was going to do that later on once we implement the routing but we definitely need it for our components to take effect so what we can do to fix it is go to underscore app.js and inside of here we have to import something known as chakra provider and that's coming from add chakra ui forward slash react inside of here we can also import a few other important things things like import router from next forward slash router we can also import the head element from next forward slash head and finally we can import the nb progress that's the loading bar that we're gonna use from in progress in here let's make the capital n great and the final thing we're gonna need inside of here is going to be import layout component from dot dot slash components forward slash layout so we can go inside of the components right inside of here and create a layout dot jsx component inside of here we're gonna render our footer our navigation bar and our content in the middle so let's start by importing again head from next forward slash head let's also import a box that box is coming from add chakra ui forward slash react and then inside of here we can say const layout is equal to a functional component and it's simply going to return an empty react fragment like this inside of there we're going to have a head inside of the head we're gonna render a title and that title can say the name of your application in this case i'm simply going to say real estate below the head we can render a box and that box is going to have a max width equal to 1280 pixels and also let's set the margin to be auto finally inside of there we can render the header inside of the header we want to render the navigation bar but we don't have the navbar component so for now i'm simply going to say navbar then we want to have the main content and inside of there we're going to render a react children prop that's coming from props right here don't forget to destructure it the children prop is equal to whatever we pass into the layout component once we call it so if we call the layout like this with h1 test children is going to be equal to h1 test great the last thing we need is going to be a footer again for now we don't have the footer component so let's simply render it like this and finally we can say export default layout now we've created this layout component which we can use inside of our underscore app js inside of here instead of returning this component we can simply return an empty react fragment like this and then inside of there we're going to have a head element that head is going to be empty for now later on we're going to add the styles for the end progress we're going to use and below that we of course have to wrap everything with our chakra provider and there we're going to call our layout inside of the layout we can render the component and simply pass all the page props inside of it this is something that you always do in all of your next.js applications great and also you might be wondering how did i know that we have to wrap everything with the chakra provider well if we go to chakra getting started after we install all of the necessary dependencies the second step is to wrap everything with the chakra provider so always make sure to read the docs and only then start using a package or a dependency so with that said now everything is wrapped the chakra provider and our application should look a lot different remember that we had issues with avatar and so on now those issues should be fixed i reloaded the page and there we go look at that we have our navigation bar at the top of course it's just the text right now but we're gonna implement it really soon we have this crazy looking banner explore renting button and there we go six of the properties that we can start renting right away below that we have our find buy and own your dream home and below that we have our properties that we can buy of course these should be in a row so we are yet to check out what's happening with that most likely just a simple typo so let's quickly fix this issue and then we're gonna start implementing the navigation bar and the footer we are mapping over all of our properties inside of the index.js more specifically right here and as you can notice in here i have the flex container but i'm missing it right here so we have to go ahead and copy this paste it right here and close it there we go now they are in a flex container and they should appear in a row and as you can see even the properties that we can buy now and the properties that we can rent are now all appearing in order that's going to be it for our entire home page it's looking great the next step is going to be to implement a really simple navigation bar and a simple footer at the bottom let's go ahead and do that right away we have a lot of files and folders open so let's simply close them to have a cleaner working environment we can do that by holding ctrl and then pressing w a few times finally let's collapse this let's go into components and let's start creating our navigation bar component we can simply call our component navbar.jsx inside of there we can import something known as a link we've used it a few times so far that's coming from next forward slash link we also need a few chalk for ui components so that's gonna be import menu we're gonna also need menu button we're gonna need a menu list a menu item icon button and then all of the usual ones as flex box and the last one is spacer and these are coming from at chakra dash ui forward slash react below that let's import a few icons that's going to be fc menu fc home and then also fc about and these are coming from react dash icons forward slash and that's going to be fc let's also import a search icon that's going to be search and that's coming from react dash icons forward slash bs and then finally one more fi key is coming from react icons forward slash fi finally we can create our navbar component by saying con snapbar is equal to a functional component with an instant return and at the bottom let's immediately do export default navbar inside of here we're going to have a flex container so let's say flex it's going to have padding or p is equal to 2 border bottom is going to be one pixel like this and we're going to also add a border color is equal to gray dot 100 then inside of that we're going to have a box and that box is going to have a font size is equal to 3xl a color is equal to blue.400 and finally font weight is set to bold inside of there we can have a link and that link is going to have an href equal to just forward slash to point us to the root or the home and it's going to have a padding left is equal to 2. inside of there we can simply give our app a name let's do something like realtor of course you can use any name you prefer then below that we're simply going to have a spacer to leave some space for our next box our next box is going to contain the menu in this case we won't have the separate menu for mobile devices and for desktop devices we're just going to have one menu that we can click and then it's going to open up the entire menu list but a great challenge for you to practice chakra ui a bit would be to implement a separate menu for mobile devices and for desktop devices again in this case let's simply always have a menu button like this that's then going to open up the entire menu list we can say menu button as icon button it's going to have the icon equal to fc menu but this has to be a function like this fc menu a self closing function and we're going to also say variant is equal to outlined and also color is equal to red dot 400 and this is not going to be menu bottom it's going to be menu button great finally let's create our menu list just below our menu list is going to contain a few links our link is going to have an ahref to just forward slash and it's going to have a pass href property and inside of there we're going to have our menu item and that menu item is going to contain an icon in this case that's going to be fc home we have to close it and then it's simply going to say home now we have to duplicate this three more times one two three and the second one is going to point us to the search inside of here we can simply say search and we're going to change the icon to bs search next one is going to go to forward slash search but question mark purpose is equal to for dash sale like this of course we have to properly close it and right here we're going to simply say buy property and we can change the icon to fc about finally for the last one we're going to copy this entire string and we're simply going to say instead of for sale that's going to be for rent we can say rent property and in here we can say fi key and there we go our menu is done finally let's import this component inside of our layout right here we can do that by saying import navbar from dot slash navbar and we can use it right inside of here as a self-closing component let's go ahead and save it and take a look in the browser looks like i have an issue with the import of the icon that's going to be inside of the nav bar i swear i had just bs here for some reason something added the search here so this here was supposed to be just bs right here after we fix that and go back we're gonna get a different kind of error it's saying we're supposed to render something but we got undefined you likely forgot to export your component from its file let's see what that is about we have khan's navbar and we indeed are exporting it in here we're returning our component so that seems fine and inside of the layout we're importing navbar as navbar i've just quickly spotted our issue and that is that the next link is not coming as a named export so in here it is going to be a default export meaning no curly braces as soon as we fix that and go back you can see that our newly created navigation bar is right here realtor and if you click here you can see that we have a nice looking menu with four different choices home search in here it was supposed to be by property and then finally rent property these are going to be the pages that we're going to create right after we're done with the home page so let's go ahead and create a footer we can do that by creating a new component in the components folder called footer.jsx our footer is going to be incredibly simple the only thing we have to import is going to be just one box component so that's going to be box from add chakra ui we can say const footer is equal to a functional component where we instantly return just one box that box is going to have a text align equal to center and it's also going to have a padding equal to 5 color equal to gray dot 600 and border top equal to one pixel and finally border color is going to be equal to gray dot 100. inside of there we can simply say 2021 realtor comma incorporated and finally let's export default our footer component so that now we can go into layout from here we can simply import footer from footer and we can call it right here as a self-closing component let's save it and check it out if we now scroll down you should be able to see that we have this nice but really simple looking footer with that our entire homepage is done and due to the nature of nextgs this is going to be really quick so as soon as we reload the page you're going to notice that everything pops up instantly later on it's going to be a bit slower because we have to load a lot of new properties if you think about it six here along with six at the bottom with all of the high resolution images but we're going to strive to make it as quick as possible the next step we can do is implement the search page search page is technically going to be both the buy property and the rent property because we're always going to go to one search page and then trigger specific filtering properties so let's go ahead and implement the search right away that's going to be the core of our entire application where we can find new properties to start creating our search we're going to create a new functional component more specifically we're going to create a page because a search is going to be a specific page a specific url that we can go to to visit of course the search so let's go ahead and create a new file called search dot js inside of here we can of course import some things and that something is going to be import use state and that's of course coming from react then we're also going to need the import use router from next forward slash router then we can import the image that's coming from that's going to be next forward slash image we also need to import a few things from chakra ui and that's going to be flex also a box a text and then finally the icon from add chakra dash ui forward slash react and the last thing we need is going to be an icon bs filter and that's coming from react dash icons forward slash bs great so now we can create our search functional component by saying cons search is equal to and then we can form our component like this inside of here we're going to have one state property called search filters and of course set search filters based on these filters we're going to of course filter out the properties that we can see that's going to be equal to use state and at the start the search filters are going to be set to false we can also declare our router here by saying const router is equal to use router and then we call it as a hook and then finally we can start returning some jsx so instead of here we're gonna have a box element like this and inside of that box we're gonna have a flex container so right inside of here we can say flex and we're gonna have a lot of properties in this flex container so i'm going to expand it into multiple rows first of all it's going to have a cursor equal to pointer it's also going to have a background equal to gray.100 and now that i think about it since there's going to be a lot of properties and a lot of jsx for our search it might be a good idea to put the browser side by side by the editor that way we'll be able to see our changes live so let's go ahead and drag and drop our editor to the left side of our window and there we go now we can see our live browser side by side by the editor so let's go ahead and simply export this search component export default search let's save it and let's try to go to our navigation bar and go to search and as you can see right now we have just the header and the footer but this is where we're just implementing the content so right here if i say something like text with a capital t like this and we're simply going to say something like search property by filters like this as soon as we save that you'll be able to notice this nice flex we've just created so let's add a few more properties to make it look even better we're going to give it a border bottom equal to 1 pixel i'm going to make the text just a bit smaller so that we can see everything properly we're going to give it a border color equal to gray dot 200 there we go we can also keep it going by setting the padding equal to two that just made it look a bit more like a div then we're going to also give it a font weight equal to black there we go that's really making it darker we can also give it a font size equal to let's do a large and finally justify content is going to be set to center and also align items is going to be set to center great now just next to this text we're also going to apply an icon so we can say icon padding left is going to be 2 width is going to be set to 7 and in here we can say as that's going to be bs filter and we don't need the closing tag we can just automatically close it there we go now this is going to be an expandable div so once we click on this it's going to open all of the other filters so what we can do is provide an on click property right here and say set search filters so inside of here what we want to do is take the prev filters so the previous filters and simply toggle it on and off so right here we can say not prev filters that means that if we are currently filtering something then once we click it we want to stop filtering and vice versa so let's see set search filters i might have a typo somewhere yep so let me copy this there we go now once we expand this you'll see what i mean so just below this flex containers we're going to say if there are search filters we can do this by saying search filters and end then we're going to render the search filters component of course this is the component that we haven't yet created so let's go ahead and do that right now that's going to be inside of the components and that's going to be search filters dot jsx inside of here let's first import everything that's going to be necessary that's going to be use effect as well as the use state that's coming from that's going to be react then below that we're going to import a few things from chakra ui these things are going to be flex we also need a select we need a box a text input spinner icon like this and finally button and this is coming from at chakra ui forward slash react then we're gonna also need router here so i can import use router and that's coming from next forward slash router we also need one icon which is going to be called md cancel and that's coming from react dash icons forward slash md and finally we can import the image tag by saying import image from next forward slash image now we can create our component by saying const search filters is equal to a functional component and right here we can immediately export default search filters for now let's simply return a div that's going to say search filters we just need to be able to know that we're correctly importing this component into our search so what we can do is if you already have this here try pressing ctrl space it should automatically suggest an auto import so let's click here and as you can see it imported it straight for me search filters from dot slash components forward slash search filters if it didn't auto import it for you make sure to do this manually now i'm going to press save and we should be able to see our search filters once we click here there we go so this is what i meant when we click on this large div it's going to hide and show the search filters component of course now is the time that we actually implement the search filters component there are two ways we can go about this the first way is to actually show the properties first and then to later on implement the search filters i think that makes just a bit more sense because we need to know what we're filtering so we're gonna leave this here for now and we'll keep implementing the search page we can do that by adding one more text here that text is going to have a font size equal to 2xl and it's also going to have a padding equal to 4 and font weight equal to bold inside of here we can simply say properties and now here's the key thing why did we have to import the router well because router contains the url so if we go to rent properties then that's going to be contained in the url and if you go to buy properties that's also going to be contained in the url let me show you what i mean if we go to our menu and buy property this is going to be search purpose for sale so we can get to that value by saying router dot query dot purpose purpose because we have that here as a query parameter and as you can see properties for sale now below this text we're going to create a flex container right here it's going to have a flex wrap equal to wrap and then inside of there we want to loop over all of our properties and that looks like this that's going to be an empty array that map in here we get an individual property and for each property we simply render a property component like this property we need to pass in the property as a prop and then finally we also need to pass the key which is equal to property dot id so what we're doing here is we're mapping over all of our properties which we are yet to fetch and then displaying a property component we have already created for each one of these properties as you can see property is not defined so let's try control click it and unfortunately it doesn't suggest an auto import but we can simply duplicate this line and just say property let's make sure we imported this correctly inside of our components we definitely do have a property component so this is going to be it now one more thing we can do is say if properties dot length again we don't have access to properties right now so i'm simply going to put that as an empty array is triple equal to zero meaning if there are no properties in that case we can simply render a new flex container like this and it's going to have a justify content equal to center align items equal to center flex direction is going to be set to column margin top is going to be set to 5 and margin bottom it's going to be set to 5. great inside of there we want to show an image so we can say a self-closing image tag it's going to have an alt simply say no result and the source is also going to say no result this no result is just going to be an image inside of our assets folder so as you did before go to your assets folder and then simply copy and paste the image no result svg from the bottom of this video straight to your assets folder once you do that we can import it right at the top we can do it right here by saying import no result and that's going to be from dot slash assets forward slash images no result dot and that's going to be svg great let's save it and there we go this guy is staring at a blank screen so there is absolutely nothing there and just below that we can render a text property where the font size is equal to 2xl and also margin top is equal to three there we can simply say no results found there we go so this is going to happen if there are no results but now for the real question where are we going to get our properties let's first replace this with properties right here and we're going to get them through props right here properties but the question is how are we going to populate the prompts well remember what we did before if we go to our index you can see that we populated the value through get static props so we're going to do something similar in this case as well so we can go ahead and copy this entire git static props go to our search and then simply paste them right here get static props is always going to be the same function name in all pages and in here we don't have to get separate properties for sale and properties for rent so i can simply delete these and we need to filter them so to filter all these properties we'll have to create a lot of different variables variables that we want to filter them by so that's going to look like this const purpose is equal to query dot purpose and we're getting the query right through here that's coming through our url as soon as we code this out that's going to make so much more sense as you can see purpose is one of the queries at the top later on once we filter something we're also going to have and purpose is going to be for sale oh we already have that right here but for example square feet is going to be set to 50 and then we can also get that right here so we also have to provide a default value for something so let's say that the default for purpose is going to be for rent like that then let's say that we want to see the rent frequency so rent frequency is going to be equal to query dot rent frequency or by default that's going to be set to yearly now we have to repeat this procedure for every single one of the props again just below this video there's going to be a github gist where you'll be able to find the get static props for the search page and you'll be able to simply copy and paste it right here so let me show you what we have the purpose is going to be query.purpose and for rent is the default yearly is the default for rent frequency minimum price 0 maximum price 8 million minimum rooms 0 bats minimum 0 sort price descending area max 3500 and then we have location external ids and category external ids and finally we're taking all of these properties and we're passing them one by one to our query api request great finally we're getting back the data from that and now we can actually send it through props by saying props properties is going to be equal to data question mark dot hits so we are filtering everything we're sending data through properties that data is going to arrive through here and then we'll be able to use it right here and map over it right now we have an error so let's simply go back to our homepage now we can open up our menu and go to let's say buy property there we go we have canon three properties of undefined that's going to be reading purpose that means that our query is undefined so let's see what that is about we're getting our query through here get static props and i've made a small mistake in this case this is not going to be get static props rather it's going to be get server side props nextgs offers a few of these great let's call them utility functions you call these below your components and they completely change the way that component is rendered so as you can see right here on their documentation page they've explained that next.js has two forms of pre-rendering static generation and server-side rendering so therefore we get these three unique nexujs functions that we can call to fetch data for pre-rendering before we called the get static props which is used for static generation which means that the data is being fetched at build time that's great because the build happens before any user visits the page once users visit the page they will immediately get the data fetched at build time on the other hand though there's the get server side props for server-side rendering which means that we're going to fetch data on each request you can read more about all these functions right here and how do we call them but in this case we're going to use not get static props but rather get server side props that's going to allow us to get the query and to actually dynamically change the data once the user changes the filters so let's go back and let's reload the page in this case the only thing we're missing is the fetch api so if you press ctrl space and click here that's automatically going to import it right here let's reload the page one more time we're missing the base url as well so let's get the base url as well and as soon as we get that take a look at that properties for sale and we get a list of all of our grade properties that's looking great but of course we cannot yet filter them and let's see these are now for sale but what if i go to the menu bar and type rent property that just switched the url to purpose for rent and therefore we can see the rent frequency 1 million a year there we go so this is already looking a lot better great of course it's still not looking for this specific device size but this is a weird one definitely not a tablet not a laptop and not a phone but if i extend this just a bit you'll see that as we increase the size we can see more properties per row and damn do these properties in united arab emirates look great we can extend it even further and then we get 3 per row great so we're listing the properties for rent and if we go here we're also listing the properties for sale this is looking great of course we cannot yet click on them but we're going to implement that really soon the main thing we need to focus on right now is to implement the search filters that's the whole point of this entire application because right now we can only see a few properties not a lot maybe 20 or more but if we were to go for the search filters you would be able to filter the properties to match your exact needs so let's focus on implementing the search filters component right away to implement the search filters we can collapse our browser just a bit and we're going to go to our search filters component we already started our work here now we have to finish it we can start off by creating a new use state by saying filters and set filters and that's going to be equal to use state and it's going to be set to an empty object at the start because we don't have any filters at the start now that we have that let's implement the jsx so that we can actually choose our filters inside of here we're going to create a flex container that flex is going to have a background equal to gray.100 it's also going to have a padding of four justify content is going to be equal to center and also flex wrap is going to be set to wrap if we save that you're going to notice that our new container appeared right here but right now it is empty so what we can do is we actually need to set up our filters and we can do that inside of the utility functions so right here inside of utils we're going to create a new file called filter data dot js and this is going to be a huge file of just raw data basic raw data and nothing more this file is going to be down in the description in a github gist and as you can see there isn't any logic here it's mainly just data that we can filter for example we can choose between buy and rent and they're going to have these values and also a placeholder then we'll be able to choose a rent frequency items the prices also filter from lowest to highest and so on everything is here formed as pure data and nothing more so now that we have this filter data we can go back inside of our search filters and we can actually import it right here we can do that by saying import that's going to be filter data as well as the get filter values and this is coming from dot slash utils forward slash filter data now instead of using our empty object at the start we can immediately set our state to be equal to the filter data we're importing and now inside of our jsx we can actually loop through these filters so what we can do is say filters dot map and then for each filter we're going to show a specific handler like a select element so for each filter render out a box that box is going to have a key equal to filter dot query name and then inside of there we can render the select element so right here we're going to have a select and our select is going to have an on change property like this on change we're going to get the event and we want to call a function called search property like this this is the function that we haven't created yet but we can do that right away more specifically let's call it search properties plural because we're going to search multiple properties so that's going to be const search properties is equal to a basic function or an arrow function and through there we're going to be passing our filter values like this so what do we specifically have to pass in there well let's put it like this i'm going to spread this into multiple rows so that we can see it better and inside of the search property we want to pass in an object in square brackets we're going to say filter dot query name so that means that we're only working on a specific filter at the moment we're going to have a lot of different select elements but we're only working with one that we're on right now for example that can be the price or it can be the purpose of our purchase or renting then we're gonna say column and then e dot target dot value so we're only sending that specific value and nothing more then we're also going to add a placeholder here and that's going to be equal to filter dot placeholder and we're also going to provide the width is equal to fit dash content and also the padding is equal to 2. i've noticed that i've typed filter data here so it has to be filter with an r at the end as soon as we do that we can see all of our select elements with different predefined values right now we cannot see those predefined values we can see just the placeholder and the actual query name so now let's go ahead and render out all of the filter items we can do that by opening a new dynamic block inside of the filter and saying filter question mark dot items question mark dot and that's going to be map so we're mapping over all of the items and for each item we'll be rendering an option we need a lot of options in each one of our select elements our option is going to have a value equal to item.value like this and also it's going to have a key equal to item dot value finally inside of there we can render the item dot name let me space this out properly so you can see it better we have our select element inside of the select we're mapping over the specific items or options we need to render for each specific select that way right now if i click on one of these you'll be able to notice that we have a lot of predefined values great finally these actually have to change the state so once we pass the value we have to update the state right here and we'll do that by updating the url that way when you set up all of your properties like this you'll be able to update the url copy it and then send it to a person that way they'll immediately get all of the search properties the same way you did we can do that by saying const path is equal to router dot path name then we can get the query from the router by saying const query in curly braces is equal to router finally we can say values is equal to get filter values and then we provide the filter values right in we need to loop over each one of these values by saying values dot for each item in there we're going to set the query item.name is equal to item dot value so in here we're basically just updating the query and finally we want to use the router dot push and we want to set the path name to be equal to path and then query is equal to query now if we save that we should be able to see that we can reload the page currently the purpose for sale is right here but we can add a few more let's select daily let's select ten thousand dollars and our filters are slowly starting to be applied and as you can see they are added to the url we can also go for max area there we go and maybe also the number of rooms let's do four now i would want to challenge you we've implemented all of the filters right here for purpose rate frequency minimum and maximum price and so on but we can also implement search by location that's going to allow you to search for all of the locations of all of the properties that are currently available so the code is already finished on my github repository what you can do is pause this video right now and try to think about how would you implement the search by location i can give you a hint we're gonna have a button and once you click that button an input is going to show up on that input you'll be able to browse through all of these properties the main question is how are you going to know what to search for and the answer is to go to rapid api the specific api we're using and then there's going to be the autocomplete that way as soon as you type something it's always going to autofill it you'll be able to select a location where there are properties and then you'll be able to list all of the available properties this is not an easy task but if you're up for a challenge definitely make sure to give it a shot it's completely okay if you cannot do it on your own again the finished code including the location search is going to be in the github repository down below with that said for now we are absolutely satisfied with what we have so far we have phenomenal filters for both buy and rent properties and we can go ahead and check out our homepage as well our homepage should now be able to redirect us to the explorer renting as well as the explore buying let's go ahead and try it out as soon as we go to explore buying it's going to redirect us to search purpose for sale and if we go back to the home page and then click the button explore renting it's going to go to the search purpose for rent and as you can see these properties definitely do change we can also change those right here from our menu bar and we can go ahead and click search which is just going to point us to the forward slash search there you can manually change all these filters for example let's do buy as you can see that implemented the properties for sale and we can start choosing the daily frequency for our payment there we go that's going to be more of a rent thing and then we can go ahead and choose the minimum price the rooms and everything else great this part is now fully implemented now for the main star of this application that is once we actually click one of these properties right now we would get an error but we have to point to the details page of that specific property so let's go ahead and do that right away to create a property page let's close all of our files and folders and let's collapse them so what we can do is go into pages and now we're going to create a new folder we're going to name that folder property and that's for a reason in next.js we have something known as file-based routing therefore this search component or page we created right here is going to be loaded when we go to forward slash search as you can see right here the same situation is with a folder property that's going to render when we go to forward slash property but now we need to have something dynamic meaning we can create a new file use square brackets and type id.js now this page is going to be rendered whenever we go to forward slash property and then forward slash any kind of id like 123 or anything else so let's go ahead and create this component we can start with importing a few things from chakra ui things like box flex spacer as well and finally the text from add chakra ui forward slash i think i've missed the avatar so we're going to use the avatar as well and then we can import a few icons we can import fa bed we can import fa path and i think we already imported all of these in our property component so as a matter of fact let's go to components property scroll to the top and let's import all of these imports we've had here fa bad bath bs grid go verified and millify i'm going to copy them go to our underscore id and simply paste them here we're going to also need the fetch api that we're using inside of the index.js so let's go ahead and copy the base url and fetch api that's going to be the utility functions we've created and that's going to be coming from dot slash and then one more time dot dot slash utils fetch api great finally we can say const that's going to be property details which is going to be a basic functional component like this and then inside of there we can instantly return something so we don't need to use curly braces we can simply use parentheses we're going to return a box and that box is going to have a max width which is equal to 1000 pixels it's gonna have a margin of auto and also padding is going to be set to four and inside of this box we have to actually start rendering out the property details data so the question is how are we going to get to all of these property details and the answer is we're going to use get server side props so one more time we can say export async function get server side props there we're going to get the params which is coming from the url and then we want to get the id of those parameters finally we can call this function block we can say const data is equal to a weight fetch api we can pass in the base url properties and then we won't go to forward slash list it's going to be forward slash detail question mark external id both i and d capitalized and we need to pass in the id this is going to be how we're going to fetch all of the property details finally we can return we need to populate the props and we're going to have the property details be equal to data this is how we're populating the props and as you already know now we are getting the access to property details straight here inside of our props but there's going to be a lot of properties that we need to use for example propertydetails.price then there's going to be propertydetails.rooms like this there's gonna be property details dot paths and so on so we don't want to keep repeating ourselves for that reason we're simply going to immediately destructure all of the properties at the top let's start with price then we can get the rent frequency rooms title bats area agency is verified description we can also get the type purpose furnishing status amenities and finally photos now we have all of the properties and we can freely use them inside of our property details of course let's make sure to export default property details great so what we can first render would be the photos so let's see if there are photos so photos and and in that case we can render out the image scroll bar and that is going to be our self-closing component which we're going to pass in the data in which is going to be photos of course we haven't yet created this component so let's go ahead and do that right away inside of the components folder that's going to be image scroll bar dot jsx inside of there we can import use context that's going to be coming from react we can also import image from next forward slash image let's also import the box icon and flex we use this quite a lot and these are coming from chakra ui forward slash react let's also import the scroll menu and also visibility context these are coming from react horizontal scrolling menu and finally let's import two icons that's going to be fa arrow alt circle left and we want to take the same one but it's going to be circle right great now we have all of our imports and we can start using the scroll menu we can start by saying const and then we can create our component that's going to be image scroll bar that's of course an arrow function and we can instantly return a scroll menu like this our scroll menu is going to have the left arrow component like this and that's going to be a component that we're going to create and it's also going to contain the right arrow which is going to be equal to the right arrow component that we are yet to create it's also going to have a style is equal to overflow which is going to be set to hidden great so now you might be wondering where are we getting the left and the right arrow from well we're going to create them right here we can say const left arrow is going to be equal to a functional component there we can say const scroll previous keep in mind we're destructing this inside of the curly braces is equal to use context and we're going to pass in the visibility context again this is just how we're using the react horizontal scrolling menu whenever you're wondering how to use something definitely make sure to read the documentation so this is going to be for scroll previous and we're going to render out or return a flex that flex is going to have a justify content is equal to center align items is equal to center and margin right is equal to one there we're going to render out the icon icon is going to be a self-closing component it's going to have an as property as fa arrow circle left it's also going to have an on click property right here so we can say on click it's equal to and then we can call the scroll previous we can call it like this but if you have just a function that simply calls itself you can omit the last part and then also remove the starting part just on click scroll previous then we can have the font size is equal to 2xl and finally cursor is going to be set to pointer and that's going to be it for now so this is our left arrow and we can duplicate this entire thing to create our right arrow for the right arrow the only thing we'll have to do is change the scroll previous to scroll next and then also say right right here great of course we cannot see anything in the browser just yet but we're soon to be finished with the image scroll bar and then we'll be able to see it but of course let's loop over our images we're passing the images as data through our props and right here we can see data.map that's going to be one specific image and for each image we want to show a box like this that box is going to have a width of 910 pixels it's going to have the item id equal to item.id overflow is going to be set to hidden and finally it's going to have the padding equal to 1 and inside of there we have to render out that next.js image like this it's going to have a placeholder equal to blur it's going to have a blur data url equal to item.url it's going to have the source src equal to item.url and finally it's going to have the width equal to 1000 height equal to 500 like this and then we have to provide different sizes for different devices let me collapse this into multiple rows like this there we go i'm going to put all of the properties in their own row we're also missing the alt tag which is going to be let's simply say property and looks like something else is wrong missing the key property so let's also add the key which is equal to item dot id great so in here whenever we're referring to the item that's actually going to be image so let's simply rename this to item great the thing i wanted to do is add the sizes property to this image and then there you can see max dash width is 500 pixels close it and then we can set the size of that image to 100 pixels furthermore we can also say max like this max dash width is going to be set to something like 1023 pixels or 24 and then in that case our image is going to be 400 pixels and finally comma for everything else it's going to be a thousand pixels this is going to make our image be the right size on all kinds of devices and that's going to be it for our image scroll bar finally we can simply say export default and that's going to be image scroll bar great we've now created the component and we need to use it right here so if you press ctrl space it's immediately going to import it great now let's see if the property details page actually works let's try clicking on one of these properties let's do this one it actually loads property undefined so let's see what that is about why are we getting undefined right here for that we have to go into the property component right here and check this external id we have it here as well external id and if i'm not mistaken that's with a capital d right here so if we change this with a capital d right here and here go back to the search and then select one of these special properties let's go for example here now we actually get to one specific property with the right id but something seems to be wrong with the image which is okay that's the step in the right direction so in this case it's mentioning the image has placeholder blur property but is missing the blur data url so let's see what that is about this url should be written in all uppercase so the only thing that this does is as the image is loading it shows the blurred version of that image as you were able to see right now that way we can see something as the image is loading and not just the empty screen great this seems to be working great we can see our first image but our arrows don't seem to be working right now let's see what that is about i'll open up the inspect element close the mobile view and i'll try to inspect these arrows there we go this is our arrow and i'll try to find it right here that's just the div right there that seems all right to me and we're calling the scroll next and scroll previous it looks like that due to the nature of how the image scroll bar package works we actually need to have a callback function right here so i'm going to add the callback function and the function call both on the scroll previous and scroll next let's save it and let's reload the page as soon as we do that we will be able to click the next arrow and browse through all of that images and as i browse through the new images you can see how it slowly blurs out and then we can see it great this is looking good so now we have more images out of every single property that we want so let's go to home once we're here let's select a property that we seem to like let's do with this one and now we can actually see all of the images for that specific property but of course this is just the image scrollbar component we have a lot more things to do inside of our id for a specific individual property the images are done now let's make use of all the other props that are getting passed into it just below the photos we're gonna have a box this box is going to have a width or w is set to full and padding is equal to 6. inside of there we're gonna have a flex container like this that flex is going to have a padding top is set to 2 and align items is set to center inside of there we're going to have one more box and that box is going to have a padding right is set to 3 and color is going to be green dot 400. inside of there we can simply say if is verified or is verified and and in that case we're going to show the goal verified icon and there we go you can see this check mark appear right here below that we're going to have a text element this text is going to have a font weight set to bold and font size is equal to large inside of there we can render out the price but now that i think about it we already use most of these things inside of our property component so let's go here inside of our property and let's try to find the thing we're looking for that's going to be the price right here the go verified icon we also have the box the spacer the rooms let's simply take all of these and then render them right where we have them so i'm going to take this flex another flex and the text and i'm going to copy them and paste them right here instead of this flex as soon as i do that you can notice that we have the verified the price the number of beds pads square footage and we have the title right here but in this case we can always show the entire title so i can simply say title like this there we go now let's tidy this up a bit i'm going to fix the indentation right here so that's going to be flex and we have to fix the indentation for everything else right here flex is ending box is starting the avatar is here and we have another flex container ending here and all of these have to be indented one or two steps back there we go great so now we have the title and let's also render the description both title and the description are going to be in a box of their own so we can pull this title up and that box is going to have a margin top set to 2 there we can have the font size lg we can also give the margin bottom to our title of 2 and font weight is going to be set to bold there we go and now below that we can render out our description so i'm going to create one more text that text is going to have a line height is set to 2 and color is set to gray dot 600 inside of there we can render out our description there we go and here is our big description we unfortunately cannot edit a lot about this there are bullet points as you can see here but they are just getting listed as they are because this is just a piece of irregular text we cannot style this in any way now let's indent these texts properly inside of this box and just below the box that contains our title and our description we can go ahead and create a new flex container like this that flex is going to have a flex wrap set to wrap it's going to have a text transform right here set to uppercase and it's going to have a justify content set to space between great inside of there we're going to have one more flex container this one is going to have a justify content is set to also space between it's going to have a width or w set to 400 pixels also border bottom is going to be one pixel and border color is going to be gray dot 100 and padding is going to be set to 3. right now our flex is empty so let's add a text inside of there our text is going to say type and below that we're going to have one more text that's going to have the font weight equal to bold and in here we're going to render the type of our property just by dynamically saying type now if i reload it you can see type is equal to property there we go as you can see type is equal to property now we can take this flex container and duplicate it one more time this time it's going to say purpose and purpose is going to be just dynamically rendered purpose there we go type is property and purpose is for rent great now finally we can dynamically say is there a furnishing status if there is then we're going to render one more of these flexes like this flex and we're simply going to say furnishing status and that's going to be equal to furnishing status there we go this property is fully furnished now below this flex we're gonna create one more box and inside of here we're gonna list all of the amenities that one specific property offers so we can open a dynamic block of code and say amenities dot length meaning if amenities exist in that case render a text that's gonna say amenities and we can make that text for example font size is equal to 2xl and font weight is set to black we can also give it a margin top set to 5. great so now you can see amenities right here and we have to actually list them so let's create a flex container it's going to have a flex wrap property set to wrap and then inside of there we can go here say amenities and then dot map now for each item we simply want to instantly return something and now this is going to be a bit tricky each one of our amenities has these sub amenities for that specific category so we can say item dot amenities dot map and if you're not sure what amenities means it's like any kind of extra features that come with the house like a pool two baths the garden anything extra that comes with the house so in here we want to get a specific amenity and we want to instantly return something the only thing we're going to return for each amenity is going to be a text element that text is going to have a key equal to amenity dot text now let's scroll down so i can show you how do these amenities look like and this here is supposed to be amenity and inside of the text we're simply going to render amenity dot text there we go furnished electricity backup centrally air conditioned double glazed window and so on but of course these don't look good right now so what we have to do is apply some properties to our text i'm going to spread this out in multiple rows and let's start by simply adding the font weight is set to bold then we can also set the color to be equal to blue dot 400 then i'm going to add the font size is equal to l let's add a bit of padding equal to 2 and let's finally add the background is equal to gray dot 200. finally let's add margin is equal to 1 like this and let's also add the border radius is set to five and now we have these little how shall they call them cards with specific amenities in them balcony or terrace reception gym swimming pool great so now we have all of the amenities and with that we are completely finished with the property details page we have this nice image scroll bar where we can see all of the different images of that specific property you can also see how they're slowly loading as we scroll over them like this great then we have the is verified or not the monthly price number of rooms bats square footage the title the description some more information about the property and finally all of the amenities this is looking great now let's try to check the details for some more properties i'm going to go to home let's select this one let's say there we go the image loaded we can go and see all of the other images as they are loading the monthly price the title everything else is in here phenomenal the thing you might notice is that if i click home it is going to take some time but there will be no loading indication we don't know that anything is happening so what we're going to do just now is implement loading to implement the loading we can close these files and go to the underscore app.js page inside of here we're going to implement the loading more specifically just at the top of our component we're going to say in progress that's the component we imported before dot configure we're going to pass in an object and say show spinner is going to be set to false now that we've set the spinner to false we can say router dot events dot on and on route change start in here we simply want to call a callback function and call the endprogress dot start so we're starting the loading as soon as we start changing the page and this is something that's built into next with the next router we have different events that we can track and then we can call specific parts of the code on that event so we can simply copy this paste it below and say on route change complete then we can call the n progress dot done and this here is going to be in progress with a capital p great the last thing we have to do to make this work is copy and paste the link inside of our head this link is going to be again in the description down with the entire code base you can just go to underscore app.js and then find this link here i'm even going to include it in a separate gist so you can simply copy and paste it as soon as you do that our in progress is going to work we can reload the page and from now on whenever you re-navigate we're gonna have a loading bar at the top so let me press explore renting and there we go that nice loading bar pops up at the top and disappears as soon as we load the page same thing is gonna happen once we go into one specific property there we go it's loading up and we are there awesome with loading bars everything definitely seems a bit quicker because the user has that instant response that something is happening and now finally before we can see our project deploy and live on the web in its full glory there's just one more thing we have to do i noticed that there is a small inconsistency or a bug you could say with our filtering functionality so i definitely want to make sure to fix that before we go any further if we for example go to rooms and select the 3 as the minimum number of rooms you can notice that all of the other attributes get here as empty at the start as well and the room's mean indeed is three but now if i go for minimum price let's say with 10 000 you're going to notice that again we're going to have all the values minimum price is 10 000 but take a look at the minimum number of rooms it isn't set so that value got cleared so we definitely have to fix that first of all we're gonna fix the issue where all of the attributes come up here and the second of all we're gonna fix the issue that this allows us from selecting multiple parameters at once so to do that let's go to our search filter and the only thing we have to do is add two lines of code well one to be more specific we can say if here and say if item that value so we are checking if there is a specific item right here that we want to add to our query we're not adding all of them only the ones there is the value four and we're going to say filter values question mark dot and then item dot name so with this we definitely make sure that there is a value in the value that we're trying to set i just cleared our url and we're back on search i'll try to add the minimum number of rooms let's say five there we go luxurious five bedroom unit there we go and now let's change the property type to something like villus as you can notice room minimum is 5 and category external id is 3 and there we go we can indeed see villas with more than 5 rooms we can now add another parameter for example max price let's go with 700 000 and there we go this parameter is applied but none of the others are great with that we've fixed that issue now the last step of our process is to actually deploy this project on the web this is a next.js application and it is a bit slow if we click right here you're going to notice this does take some time but as soon as we deploy it it's going to be lightning fast so let's go ahead and do that to deploy our next.js application we're going to use versailles versacell usually works wonderfully with next.js application because vercell actually owns nextgs so they've made the process incredibly simple the only thing you have to do to deploy our app is go to versailles.com and then click start deploying in here you'll be able to continue with your github and right here you should be able to find your git repository this is not the one we're talking about because i still haven't deployed the project we've been working on so i'm going to show you how to do that from scratch let's go to view and then terminal let's stop it from running by pressing ctrl c and then y we can clear the console now we have to go to github and create a new repository on github make sure to go to the top right and click new repository there type the name of your project i'm going to say jsm underscore real estate and i'm simply going to put it as public and create repository then we can simply follow along the commands i'll press git init then we're going to do git add dot which is going to add everything to our github repository then we can copy this command git commit dash m first commit finally we can branch to the main branch we can do git remote add origin for this specific repository and finally git push u origin master with that our code is going to be pushed to our newly created repository now we can go here and as you can see jsm real estate just now vercell immediately recognized it finally we're going to click import we can choose the name for our project the root directory and simply click deploy this process is going to take about a minute and then we'll be right back and there we go congratulations we can click right here and finally click visit to open up our project i'm going to expand this and in its full glory we can see all of the rental homes and also properties that we can buy let's go ahead and check out explore buying there we go it loaded quickly we can play with some filters here and we can also check out the property details for one specific property it loaded incredibly quickly and we are ready to explore the images and potentially buy this property that's great this one is definitely looking good let's go back and let's try to do some more filtering to see if everything really works let's go for properties for sale let's try checking for the property type of something like penthouses and there we go looks like there are just two but that's enough for us let's go to villas there are more villas here they loaded quickly and everything is looking great and i need to mention as soon as you go back to something like if i go back to search now search is going to load up incredibly quickly because next.js caches everything all the images so if i click home here take a look at this incredibly quickly didn't even load so our application is now fully done to create this application we use chakra ui but we wouldn't be able to create any of this without the data we've been fetching all the data that you can see on our page has been fetched from rapid api they offer hundreds of thousands of interesting apis that you can work with from flight data sms's translations city data real estate you name it they have it in this case we use the united arab emirates real estate api to get property lists property details and even autocomplete now that you know how to use this one definitely make sure to browse their marketplace and try a few apis on your own again the link is going to be down in the description thank you so much for watching and i'll see you in the next one

Channel: JavaScript Mastery

Views: 92,780

Keywords: javascript, javascript mastery, js mastery, master javascript, reactjs, react js, next js, rapid api javascript, react app, react application, learn react js, learn next js, next js project, next js app, react real estate app, react real life project, chakra ui react, chakra ui, next js 12, react real estate website, build a react website, build a react app

Id: y47gYvXchXM

Length: 130min 24sec (7824 seconds)

Published: Fri Nov 26 2021