MERN Stack Project: Build a Modern Real Estate Marketplace with react MERN (jwt, redux toolkit)

welcome to the full stack mirn real estate project course in this course you will develop and deploy a robust man stack web application with Advanced authentication and search functionality I will guide you in creating a mernstack real estate application similar to industry-leading platforms like realtor or other Real Estate websites our Focus will be on using the latest versions of react mongodb node and express the project starts with the installation of reactant Tailwind CSS then we will dive into using the most recent version of react rotor domp to create routes and dynamic Pages then we will work on building authentication functionalities the application's authentication will include both email and password authentication through the use of Json web tokens along with Google oauth integration for better State Management we will use Redux toolkit to make the management of global States easier to ensure a secure your user experience specific Pages such as the user profile page will be protected on both client and backend sites the profile page will offer users the ability to update their information including their username email and password moreover users can modify their profile images you will learn complete crud operations including creation reading updating and deletion all used by the mongodb database each user will have the ability to create new property listings giving them the flexibility to apply discounted prices and upload up to six images furthermore users will be able to adjust the number of images associated with their listings even after upload the platform lets the users manage their listings effortlessly through their profiles facilitating editing and updates with ease each listing page will feature an image slider and convenient contact options for potential tenants or or buyers one of the most exciting aspects of this project is the inclusion of an advanced search functionality this feature enables users to search by title limit search results and apply sorting options through a modern sidebar we will use Cutting Edge search query techniques when working with the mongodb database finally we will use the render platform to deploy our fully functional mirnstack real estate application for free this will enable you to share your Creation with others or include it in your portfolio the prerequisites for this course include a basic understanding of JavaScript and reacts if you are excited as I am to build this app then let's get started you can find the final version in this address it state that hunterjsprojects.com as you can see we have a home page here that it has a title and also a button to explore more once we click on this button we are redirected to the listing result page as you can see we see the nine listings and also we have a show more button when we click on it we see the rest of the listings you can also Click on each listing and explore each of them we have an image slider at the top and also we have the title description the number of bits path parking spot and furnish and also we can contact the landlord and ask about this listing inside the home page we also have an image slider we can see the recent places with offers recent places for rent and recent places for sale and also we have the ability to create and new listings for example here if I click on my profile image first thing first we can actually create an account here so if I sign out we can see that we can sign up a new user we have the ability to sign up with username email and password and also we can sign up with Google for example if I click on Google continue with Google here I can choose one of my Gmail accounts for example this one and then we can go to the profile here we have the ability to change the image of the user for example I choose one of the images from my computer as you can see we are uploading it and once it is uploaded we can see the image and also we can update it inside the database as well and also we can change the username email and password and we click on update to update it so as you can see it is updated inside the database and if we refresh the page event we see still the current image and also we have the ability to create a new listing so when we click on it we have the ability to create a new listing with the name description address we can choose the type of the listing like sale and rent we can add the parking spot furnish and we can make it an offer and also we can specify the number of bits and bathroom and also we can upload an image individually here using these input so let me create a new listing for example I just call it new listing I'm gonna just copy this one and use it for description and address we can create added parking spot let's create an offer with two bedrooms and three bathrooms four bathrooms for example for the regular price I choose thousand dollar per month and for the discounted I use 900 we can upload images for example we can choose up to six images for example I choose three images here and when we click on upload this is going to upload it to the storage and also you can see the preview of the images here you can delete the one that you don't like for example by clicking on this one and then you can click on create listing once you create it you're gonna be redirected to the page related to that listing as you can see this page has a share link button and also it has an image slider also we have the ability to edit this listing so we can go back to the profile see our listings by clicking on show listings and here we see all the listing that is created by this user for example I can update this listing by clicking on edit also we can delete them as well so we click on edit here we see the all the information in inside the form and also we can change it easily you can add an image for example let me add this image so when we upload we can add it here and you can keep the previous one and you can change the other things for example address and Etc we can click on edit listing and this is going to edit that listing and add the image that we have added also we have the ability to search here for example if I search for modern and I press enter you can see that all the listings that includes the modern in their title and also we can sort this result here by the price high to low low to high latest and oldest and we can just see the offers we can just see the places with parking so we have the ability to update the search result here inside this sidebar in the next section we're going to start creating our project by installing react using beat and also we're going to install Tailwind CSS for styling our project so see you in the next section all right in this section we're going to install reactius and Telvin CSS and we're going to create our first template as you can see I have put the final version with the address a state that 100.jsprojects.com for our reference and the first step we need to do is to install react.js using Veet but first we need to create a folder so I'm going to create a folder here in my desktop so I'm going to rename this one to the name of our project I just call it man estate and then we can just open the visual studio code so visual studio code when you open it it's just the welcome page and doesn't have any default folder but if you drag this folder inside Visual Studio code this is going to make the this folder main State as the default folder of the visual studio code we can close the wilcom tab again and then we can just go to the menu The View and then we just click on Terminal to open the terminal or you can use control backstick to open the terminal so as you can see now this is just this folder main estate so we're going to create the client side inside another folder called client so we're going to install it the react.s using veed by this command npm create Veet at latest because we want to install the latest version and then we want to add the name of the folder that we want the react to be installed in so for example we just say client and once we click on enter this is going to ask us which framework we want to install which is react in our case then we need to choose the typescript or JavaScript I'm going to choose JavaScript and then swc which is the faster version and it's going it's going to load faster and as you can see the folder is created and inside the folder we have all the files and folders we needed for react including the SRC folder which has the app.jsx file and also we have a public folder which all the public asset goes inside we also have a package.json file which includes some basic dependencies for installing react like react and react Dom in order to install them and also this Dev dependencies we need to just run npm install so we just need to go inside the folder so inside this folder client which is a CD client so now we are inside the client folder you always have to check this one and then we just say npm install or npn I and if the npn doesn't work for you it means that you don't have node installed in your computer you need to go to Google search for node.js and install it install the latest version and to be able to use npn or git so the installation process is happening now we can just go and install a Tailwind CSS so here I'm inside Google I'm going to search till vent but we can just add Veet at the end so we're gonna install Tailwind using feed so here we see the install Tailwind CSS with reads and you have to check this tab using react because we are using react and then we have few steps here six steps we have done the first step which is installing reactors using Veet then the next step is to install Tailwind CSS the first Common line is going to install telvis CSS post CSS and auto prefixer and then this command is going to initialize a tailwind.config.js file and also post css.config.js files which we need to change later on in the next steps so I'm going to copy the first one the first command and then we can just go back to visual studio code and paste it here as you can see the installation is completed and then we need to install the next part which this one which is going to initialize the config files and as you can see once we do the this part we get two extra files post CSS that config.js and tailwind.config.js so in the third step we need to configure this file tell them that config.js so I'm gonna copy this one and then we go back to visual studio code we can just go to telvin.config.js and we just delete everything and paste the new code so this is basically is going to check the index.html file the this file and also all the files with these extensions inside this folder SRC folder and any classes you add in detail with CSS class you add is going to be detected and then the CSS equivalent of that is going to be created so this is for this reason in the four fourth step we need to replace everything inside the index.css with these three lines of codes which is going to apply the base classes of Tailwind CSS so I'm going to copy this and then we go to index.css I'm gonna delete everything and place these three lines of code so and then that is already done so the last the they said you just run your terminal NP on run Dev and then you can just use Kelvin CSS by adding its classes so okay we have done with the television series part let's clean up the our project first before running it so we don't need this app.css file because we are using Tailwind CSS so we can delete this part file inside the public folder we can delete this vid.spc inside the assets we can delete this react.svg and then inside the app.jsx we can actually delete everything and replace it with a react functional component that we can create by you just typing RFC but we in order to see that suggestion the RFC suggestion you need to install a package install an extension if you open the extension here you need to have this extension es7 react redox react native Snippets so you just search the name of this extension here and then install it you just need to install it and then you get this suggestion as I get the other extension I have is auto rename tag which is going to change the closing tag based on the changes in the opening tag for example here I change this div to H1 so the closing tag is h12 and then we're gonna have a console ninja this is free too because and then you can use it for console logging in inside the visually Studio code for example if your Castle log here something you get the answer here instead of the checking your browser then I have two optional extension GitHub toe pilot and GitHub copilot chat geared up copilot suggests you coding some quotes suggestion while you're coding so this is going to make your coding speed faster but you need to pay I think 10 per month for that and GitHub for pilot chat is not available yet I got it for testing and maybe later it's going to be available this is similar to chat GPT and you can ask question about your code and get suggestion as well prettier is going to uh well when you save your file for example here if I just like this one and then I save the file you can see I get the auto format by this extension print here and also we have Tailwind CSS intellisense which is going to suggest you some classes of Tailwind CSS for example to call it palette or something for example here if I add a class for example ticks and if I if you don't see the suggestion use Ctrl space and then you get the suggestion like that for example color red and these suggestion is all from this television CSS intellisense you can get all the color suggestion like this so that was for the extension let's run this application we can run it simply let's clear this wall first we can simply run it using npn run div and your server is going to run inside this URL local both 5173 you can change this port number if you wish to you need to go to your package.json and change the host but if you want to just run it here and you just keep the command or control in Windows and click on it and this is going to open your application inside the browser as you can see we got the app and if you want to test your Tailwind CSS for example here I change the text red 500 you can see now that the app is the color of the app is changed to Red so if this is working for you it means that you have installed television CSS correctly otherwise you just go back and do all these steps again to get the same result so that was it for the installation of react and telling CSS and creating our first template The Next Step as always I do is to add the project to the get to a GitHub repository so the reason I do that because we need this GitHub repository later to deploy our application and also I'm gonna commit each section inside this GitHub repository and you can compare your code in that section with my code inside the GitHub repository and the GitHub repository is going to be available for you as well in order to add it you can just stop the terminal using Ctrl C and then here you just write down get init to initialize the GitHub repository then we're gonna add all the files inside our application using git add all or get add Dot and then we're gonna have git commit to create a message for that we just take it commit Dash m this Dash in and then you just put your message inside a double code and this is just say install react.js and Tillman CSS and create this first template so once you have written your message you can just press enter and this is going to create the command now we can go to get out and create our GitHub repository just go to your GitHub you just search here GitHub and then in the search results we can just click on github.com make sure that you're signed in like me here and then it's totally free and you can just use it so just make sure that you sign in and then you just click on this plus icon and just click on new repository you just create a name for your repository I'm just gonna call it myrn Dash estate and it's available for me and then create a description for that for example I just say real estate app using remote and till then C assist you just can keep it public so everybody can see your GitHub repository or you can make it private and once you choose your decision you just click on create Repository so this is going to tell you which commands you need to edit we have done the initialization part so we just go ahead in the next part and then here as you can see first we're going to add this origin with this address then we're going to create a branch and also we're going to push our code to this main branch so I'm going to copy the first code first and paste it here you're going to copy the second one and finally the last one which is going to upload our code so once you see the upload is completed here here inside the GitHub you can refresh the page you can see all your code is added inside this GitHub repository with this address so you can have it you can have access to this one as well because I kept it public and also I'm gonna add the final version here for you you can check so I'm going to add it now I'm going to copy this code this URL and then paste it here okay so you can come and check the application before uh creating it all right so that was it for installation of reactions and television CSS and creating our first template also we have created the GitHub repository in the next section we're going to create the pages and routes of our application as you can see we have different pages like home page we have search page we have about page profile and Etc so see in the next section for creating the pages and route all right in the last section we have completed installing react.js and television CSS and we have created our first template in this section we're going to create the pages and routes so we need to go to visual studio code and we go to the Explorer section and inside the SRC folder I'm going to create another folder here I'm going to call this folder pages and inside this one I'm going to create the pages we need for example we need an about page so we just say about.jsx and here we can use RFC to create a react functional component which is going to return only a div saying about and then let's create the other Pages for example sign in dot jsx I'm just going to create it very fast and Here sign out Dot j6 the next one is profile Dot j6 and what else we need for now I think first we need to just create the authentication so I'm just going to create these Pages like home.j6 okay that's enough for now and we need to add these Pages inside the app.jsx but before doing that we need to install a package called react router Dom which enables us to create these routes inside the application so here let me clear this terminal I'm going to install and make sure you're inside the client side and then we just say MP install react router dump and we press enter and then we go to app.36 we need to import browser router from react rather down also we need to import routes as well as route so here we're gonna cover everything with the browser router like this let's delete this class name we don't need it now and then this app and and also we need to cover everything with the routes like this let me close the route so I need to okay oh what's happening all right so now everything is covered with the browser router and Route and then we're gonna create each route for example for the home page we have we have to import this home and react functional component so in order to import it you can just simply use Ctrl space and get this suggestion import but we need to keep this file open inside the visual studio code to get this suggestion and then the path for this one is forward slash so the home page is in the forward slash and then we're gonna have let me copy this one four more types using alt shift Arrow done or down arrow and then here this one should be sign in sign dashed in so this is the path name and then here we're going to say sign in as well so we need to import it at the top as you can see signing is imported as well so let me close this and then the next one would be signed up oh I create a sign out actually it's sign up so I need to change this to sign up and should be capital also inside the file let's change this one to sign up okay so inside the app.j6 we need to import that sign up and the next one is about page so this one is going to be about they have imported that one as well and then finally we're gonna have for the so we have about home profile so we need to add the profile okay so now if we test our application if first we need to run it we just say npm brand div and then we just go to our website as you can see inside the home page we get home because we have rendered the home component and if you go to other Pages like for example forward slash profile we get profile we have this sign in also we have sign off and finally I think we have created about page okay everything is working so we have added the routes and created our necessary pages that we need to create for the authentication so let's add this one to the GitHub so as I mentioned in the last section I'm gonna add a new command for each each section inside our GitHub repository so we don't need to write it down here inside the terminal we can just open the source control we can add everything all the files that we have changed by just pressing in this plus icon which is going to add all of them and then we can create a message here at the top for example we just say create pages and Route and then we can just comment or we can just click on this arrow button and then click on Commit and push at the same time so when we do that and then if we go to our GitHub repository now we refresh the page we see that now we have two commits and the last one is create pages and routes and if you click on it we can see that changes we have so that was it for creating the pages and routes in the next section we're going to work on the header section we're going to create the header section as you can see from the final version so see in the next section all right in the last section we have completed creating the pages of our website and also we have created the routes using react router Dom in this section we're going to work on the header section of the project if you look at the final version you can see that the header of the website is available in all pages like home about and signing pages so it's in everywhere so we need to make a mechanism to keep this header in all pages and also the header has a logo a search bar and the menu on the right side and if we check the responsiveness of the website in the mobile size we can see that the we don't see the other moment about in the mobile size but in the bigger screen this CDs to menu and then the ticks are different sizes so we need to work on the responsiveness as well so let's go to a Visual Studio code let's close everything and inside the SRC folder we're going to create another folder called components and we want to add the components like header and Etc in this set in this folder so first I want to add the header components I just say header.j6 for now I just use RFC to create a react functional component and then for adding this header is to all pages what we need to do is to go to app.jsx and outside this route so these are all pages and inside this browser router here we're going to add the header component so I'm going to just import the header as you can see we are importing it at the top and now uh let's see what's the error here okay I I have to close this header so now if we check the our website the final version we can see that the header is in all pages for example this is about page if we go to home page we see the header at the top so we have the header in all pages let's bring this one to the right side so we can see the changes in real time let's close this Explorer section and let's go to header.jsx and it starts creating the header component so what we need to add here I just want to firstly make this one header so this is going to be good for SEO purposes if you just change the text to something meaningful me so here inside this header we're going to have two three sections we're going to have the logo on the left side and then we're gonna have the search and then we're gonna have a menu on the right side so here so let me just added menu other H1 tag here and inside the H1 tag we're going to have two span one for the one name second and then we have another one for the states so I want to have a different color for the this one and that one and then we're going to style them so for the first one I just change the text color to be this leads 500 and for this one I just change the color to be a slate 700 okay and then we're gonna it's uh install both of them I want to change the text size so the class name here I want to make it firstly bolt both of the letters and then we can just use text as small to make it small in the mobile size actually we have a zoom here if we remove the zoom you can see they are very small and then we in the bigger size we want to have a large size like we just said text x large so this is for the full size so after mobile so we just say mobile this one and after the mobile size we have this one and then we're gonna have we will bring them next to each other and also we want to set the flex to wrap so the reason I'm doing that because in the mobile is size if you check it here inspect and choose the mobile so we can see that there are actually next to each other and then when we add the search bar and the menu this is going to be a little bit big so we want to bring them on top of each other after that so I'm gonna add the I have added this Flex wrap for this reason so let's continue for this part so after this header we're going to add the form for our includes the search bar so just I want to add a form and we don't need any action for that but inside this we're going to have an input so we're going to have an input with the type of text and also we're going to have a placeholder search so we can add more like this one and then we can just style it so let's start it ourselves let's close this one we don't get an error okay as you can see we have this search bar here the first things I want to do is actually bring them next to each other here at first I want to make this header with the background color of a slate I can say 200 now we can see the changes and also we want to add a shadow effect of medium on the bottom like this and then what I want to do I want to make them bring them in say in the center so in order to do that we cannot do it like this we need to add an extra div here and bring everything inside this div and then here I wanna first thing first I want to bring them next to each other just using blacks and then we can just add a space between them we just say justify between to add a space between the elements but now we have two elements so the search one went on the right side and then the logo is on the left side but if we have more items like three items the search is going to be in the center and then we want to bring them vertically Central Center there using onto item Center and also we want to add a maximum width of 6ixl which is 1152 pixels so this is going to actually add a space around them but as you can see it's not uh they are not on the in the center so for bringing them to the center we just add AMEX Auto which is margin X Auto so now you can see we have equally size on the right and left side and also we want to add some padding so we push them a little bit inside here we just add a padding of three I just want to use the very simple Kelvin CSS classes so we just can focus on the react part of the project but you can work more on your project make them more beautiful they are is exactly like CSS so you have all the flexibility and you can add whatever you want here as well but let's just focus on our application more so inside the input we want to have a class name as well here I just want to remove the background color so just say background transparent the reason I'm doing it we want because I want to make this form to have a different color so this form I want to make this one with the background color a slate 100 so in this way I can add this uh icon the search icon inside as well so here so we added this background color in the form and also I want to make the heading of three so we add some space and also I want to add a rounded corner like around the large so you can see a little bit of the round corner and let's add the icon to the the place I want to get the icon is a package called the react icons so we need to install a package called react icons and then we can use all their icons here so it's very simple you just need to I want to open another terminal but you have to be inside the client side and here we're going to install a package called react Dash icons and when you install this what we want to have here is to import this search icon so I want to import here at the top we don't need to import the react so we can delete it so the name of the icon is f a search you just say FS search and this is coming from react Dash icons forward slash fa and if a it stands for font awesome so we're gonna have the icon from the font awesome website but using this package so after this input we I'm going to add this uh I want to add this uh icon it's very easy to do that you just need to add this icon component here we just say FS search and then we just close it like this and also I have added the color slate 500 or you can just choose 600 like this and then we need to bring them next to each other so we know already how to do it we just need to change the display to flex and then we want to Center them vertically as well so we just use item Center so what happens uh items centered sorry okay now they are centered so what else we can add here to have a better styling I think everything is done when we click on this search input I want to remove this outline because it makes it ugly so here I'm going to add this Focus if there is a focus I want to remove the outline we just say outline none like this now we don't have the outline so and then we can just set the width of this in a different sizes in the mobile and the bigger screen sizes so here I'm just say set the width to be 24 and the mobile size is smaller because we want to have the menu too and then in the small size and above you want to set the width to be 64. so we're going to have a bigger search bar in the bigger screen all right so that's very easy to do the responsiveness in Telvin CSS you just need to write down the mobile first and then you just say after mobile to this one or if you want to more be more specific you can just say for tablet as well for example just say medium above to the other one so there you can do for all the sizes but I think I feel this is the best way to just focus on the mobile and the bigger screens so everything else will be easy to do so after here after this form we're going to have it our menu which is an unordered list and inside this list we're going to have the first list is which is going to be we're going to have home and ever we just say home and then we're gonna have another one a two more about and sign in okay and the the things we want to do here is to bring them next to each other so I'm going to add another class name here we just say flex and we want to add some space between them we just say Gap uh we can just say Gap four and as you can see it's just a little bit squeeze uh just we want to remove this home and above in the a small size so in the small size we just say make this home hidden sorry we need to add the class name first we just say hidden so we don't see it now but in the small size and above we want to make this one in line so in the bigger size we can see the home and then we can do the same things for the about as well let me add the hover effect as two so we can just the first I want to add the text color as slate 700 and then we can just say if there is a hover effect if we hover over it just change add it underline so now we when we hover over it oh we don't see the underline underline I missed the r here okay now we see the underlying and then we can do the same things for the other about and sign in I'm just gonna paste this same code here okay now all of them are working but when we click on them when we click on them we want to go to their specific page for example if I click on about I want to go to forward slash above so there is a simple solution for that we can easily import link from react router Dom and Link is going to bring us from one page to another without refreshing the page so this is very helpful here for example in this uh H1 tag I wanna we can wrap this one with the link tag and then the the two attributes should be forward slash and then we want to close the link tag here so now if you click on here we go to home page so if I if I'm in the about page if I click here I go to the home page so let's do the same thing for uh and also I want to keep this sign in uh and then I don't want to make it needed so I'm going to remove this hidden part for the sign in so we can see the sign in only in the Mobile screen size so the next step we need to do is to add this link to other things as well like this phone I want to add the link let's get help from the GitHub copilot to do it faster so here we're going to have the link to the about page and also the last one is going to be the to the sign in page so sign in and then close here so let's test all of them so this one goes to sign in about goes to about and then home goes to the home page so it's working fine so for adding the functionality of the search we need to create our website first we need to add our listings and everything and then we can add this searching functionality for now we're going to keep the UI and then later we're going to add this search functionality when we have the content in our website so that was it for the header section in the next section we're going to work on the backend part of the project because we need to create the sign in and sign up pages and we need to firstly create the backend and the API of these routes and then we can just create a client size and interact the between the client and the backend that time so firstly let's add this one to the GitHub so we here we have this changes so we can adjust the what you do here you just add the plus icon and add everything all the changes and then here we just create a message we just say create header component all right so and then we just click on Commit and push all right that was it for this section in the next section we're going to work on the backend side so see in the next section all right in the last section we have completed the header part of the project in this section we're going to work on the backhand side and we start creating the back end part of the project and create first I want we want to create This Server we want to run the server so we can just go to visual studio code and here we can open the Explorer section here we just create a separate folder with the name API and then we need to initialize a package.json file here but we need to do it in the root of our project not inside the API folder because actually when we deploy our website the the render platform is going to check the root of our website and consider both of the backend and the front end so the back end the package that Json should be inside the root so here we go back by just saying CD dot dot and make sure you are inside the root with this folder and then we just initialize a package that Json file using npm in it Dash Y and we press enter and then as you can see inside this package.json we already have the name of our projects which is created based on the folder we have then we have the version description is empty and the main file here is index.js so we have to create a file called index.js and these are the scripts that we're going to modify soon but now we just want to create this file inside the API API folder and then here we just say index.js and here we need to first thing first we want to install Express here we just say empty install let me clear this so you can see it better at the top and here we just say enter install Express so we need to use Express framework to easily create our backend and apis and once we install it we can just import Express from Express and using Express we can create an application which is a cons app equals to express and the app gives us a lot of uh like methods to use the first one we want to use is to listen a port number we just say app to that listen you want to listen to if check so listen to Port 3000 and then we want to return we just say server is running on Port 3000. so this is going to listen to this port number and then we're gonna uh in this callback function we're gonna say console log service running up for 3000 and it can be any port number it can be four thousand five thousand it doesn't matter and here we can run our server we just use node we just have to run this file which is inside this folder API we just say API post slash index.js so let's see what's error we are getting uh as we are using import here we need to change the type from uh as you can see it's saying that the type module is required for using this kind of import so we need to go to this package.json file and here after this main we can just add type this is Json so we need to put it inside the double code and then this one can be module here so the default one is common JS so in order to import packages if you don't want to use type module you need to use require instead of import so now if you run again we can see that it's it is showing service running on Port 3000. but if I do some changes here for example if I add an exclamation font here we see that it is still showing service running about 30 000 without exclamation mark so actually you need to restart the server each time you do some changes which is very time consuming and annoying so we can fix this one using a package called node mod so I'm going to stop this server using Ctrl C and I'm going to install this package which is simply installed node mod and once we install it we can just say nodemon API post slash index.js but the best practice is actually add a script for that so we can just go to package.json here and we have a test script here but we can just add more things we can just delete this one I want to add a script called div so for npn run Dev I want to run note month API forward slash index.js and then each time I use npn start I want to use node API over slash the reason I have added this star is when we want to deploy the application to render we need to add this npn and start because the render is going it needs to run our backend with using node and you don't need to actually install the node mod in the dependency you can install it in the dev dependency in the development defenses so you could add just that div at the end and install it there because we don't use this node mod in the production okay so if I want to run now node mod API for slash index yes we just need to write down npn run div so this is going to run the node mod as you can see the server is running on Port 3000 and then if I do some changes here for example if I remove these exclamation marks you can see the service is run is restarting automatically using node mask so we don't need to worry about restarting the server anymore so that was it for creating and starting the back end so now let's add this one to the guitar I just noticed that I have created the GitHub inside the client folder but we had to actually make it inside the root folder so we can use it for both folders you can fix that one by just going to your client's folder and then use this code mv.bit dot dot forward slash this is going to move your GitHub repository to a folder to your root folder the one for the back actually so now as you can see we can we are actually our get is detecting all the files that we have installed inside the API and the root folder which is not good we want to ignore these files we don't want to just upload these node modules files we can fix that one by just moving the kit ignore file from the client side to the root section you just move this one and bring it outside you can see that now we have only 70 changes and let's see if there is a module here no there is no module and also because we have moved the file the source section from the client side it's just showing that you're deleted and updated that's not important but the important things is there's no module files to be uploaded and also we are considering the API folder too so let's see we have this let me close that so the changes we have here the package log client are here we have yeah we have this one index.js inside the API folder so we can just now you can see now we have two data repository here actually the one we want to add is this mirror estate okay now here I want to create a message you just say create and run this server and let's add everything and then we just commit and push okay this is uh this one fixed our we can just uh ignore this client we just work on the main gear State gate and then we just check our GitHub repository now if you refresh the page we see that we have a last command create and run the server they just show inside the API folder index.js we have created this file index.js file and also the package that Json from the client from the backend everything moved to here but from the next section we don't have any problem actually adding our GitHub repository so see the changes so this is the header section and this is the create and run the server all right so that was it for creating and running the server in the next section we're going to connect our database to our server we want to install a package called Mongoose and then we're gonna use Mongoose to connect to our database which in our case is TV so see in the next section all right in the last section we have created our server and we have run the server on Port 3000 in this section we're going to connect our application to the database and the database we're going to use is mongodb and we need to install a package called Mongoose to be able to easily interact with the database create models and Etc so here inside the terminal now let's create another terminal one for the front end and one for the back end so the front end is a client here we just say npm run div We Run The Client side and also the for the backend we just need to say npm run them also run Dev as well to run the node mod so the server is running on Port 3000 and what we can do uh I wanna open another terminal but this terminal should be in the root of our project because we want to install in the back end so here I'm going to install a package called mongoose and then we need to import Mongoose at the top here we just say import mongoose from Mongoose and then we want to use a method from Mongoose called connect so we just say start connect but here we want to have our application string so we need to get this application string from the mongodb website so we need to go to the Chrome I'm gonna search for mongodb and in the search result we just go to mongodb.com and here we need to if you don't have an account make sure to create an account it's free you can just click here start free and then you just fill the fill up the form and or create it with your Google I already have an account so I'm going to just click on sign in and here I'm gonna connect with my mongodb Apple account with my Google account and then once you are inside your mongodb you can see your previous projects like this one my previous project and otherwise if you wanted to create a new project you just click on this arrow and then you just click on new project you can just name your project for example I just name it myrn estate and just split click on next and here we don't want to add anyone else so we just click on create project so once we create our project we need to create our database so as you can see we can create our deployments or you can just go to here database and then build a database here so we just click on build a database they ask you which type of service we need we can just choose the free one it doesn't matter you can just test your application and later on if you have a successful application with a lot of traffic you can just change it anytime but choose the free one for now you can choose which provider you need we can just use the AWS and choose this region you can choose your the region near your place or the near the place that most of your customer will be I just use the America and then you just name it name this cluster for example I just say man a state and then just click on create here once we do that they ask you for the username password and just choose the IP address so it's just a simple form you need to fill I just use second or username and passwords a hand so I can remember that and then you can just choose This Cloud environment Advance because later we want to deploy it so we need to add different things and then after that you just need to specify the IP address so the IP address of your computer can be added here for example add my current IP address and which is added already here for me but if you want to have access to your application form everywhere you just choose zero zero zero so for your if you want to change your computer or you think that you're gonna go somewhere else working on your computer and your IP will be different so you add this zero zero zero but later you can change this one and remove that one and add your the IP address of your server that we're gonna deploy so here we're gonna add this and then finally we just click on finish and close and as you can see congratulations setting up your access rules we just go and overview so your our application is created we just need to connect to it we just click on connect here if you click on connect they give you several options but we just want the uh the URI of this so as we as we just need to get this code you just click on driver and then come here and copy this code so you just click here to copy it and then you just need to go to your Visual Studio code and paste it here once you do that you get connected to the database but you need to specify the password because the password is just the board password Here my password was Sahan so I just adds a hand so if you don't get an error here it means that you are connected and also you can choose a name for your cluster here to add after the forward slash for example I just say learn a state and then if you want to share your application with others if you want to do that if you want to put your application in places like GitHub and share it with other people so you you cannot do put it like this your code here because everybody else can see your password and use it so the best practice is to hide it using an environmental variable so here we can just create a new file called dot EnV and here we're going to create a variable called or anything any name would be acceptable and then we can just cut this one and paste it here all right so and then if you want to use it here you just need to say process dot EnV dot okay so this is going to call that variable but inside the GitHub people see only this word process.nv that because this dot EnV is going to be ignored when you're uploading it and then uh as you can see we are getting an error actually here the reason we are getting an error because by default you cannot use an environmental variable inside a packet you need to install another package to be able to do that so we're gonna install another package here called dot EnV so you just say npn install dot EnV and we need to import it at the top import and then we need to initialize it using dot EMV dot config like this so if we check now we can see that we are not getting an error here that's a good sign but we don't know actually we are connected or not so we need to have some feedback to be able to to detect that we are connected or not so we need we can just say if the connection is successful then for example console log connected to DB and then we just say otherwise catch the an error if there is an error catch the error and console log the error like this so let's see if we are we need to close the parenthesis here okay and then we need to remove these parts okay so now we can see that inside the terminal we are getting the board connected to the mongodb so it means it's working all right so and if you for example and have an error for example if the my password is wrong I add an X here and then if you save this file again you can see after we get an error here and we see the error here which is bad authentication okay so that's the feedback we can get and we know what is the error so we can just fix my password so now we should see connected to DB correctly all right so that was it for connecting to database in the next section we're going to work on creating the model but first let's add this one to the Gear top so if you check here you can see that inside the source control we are actually we are having the dot EMV so we are actually we can detect we can upload the dot in V to the GitHub now which is not good actually because people can see our password what we need to do is to go to this dot ignore file and add the dot EMV here as well we just say you just say that EMV at the end and this is going to ignore this dot EMV file so we we just ignore that one so now which is ready we can just Place press on this plus icon and then we just create a message for our permit for example I just say connect to database all right so and then we can just we just say connect to database and then we can just say commit and push so if you now check our GitHub repository and refresh the page you can see that the last command is connect to database and we see the changes here we have modified the get ignore file and also inside the index.js we have just installed after the installation of the dot EMV and Dot Mongoose we have imported both of them and also we have connected to our mongodb using Mongoose here alright that was it for connecting to database in the next section we're going to create our first model for our database which is for users because we need to create a model which sets some conditions set some rules about the data that can be added to the database for us so see in the next section all right in the last section we have connected to the database in this section we're going to work on creating models using Mongoose so we need to create some model for the user so in this case we're going to have some rules and requirement so the person who is interacting with the database should follow these rules and create the variables and data based on these rules so what what we need to do is to go to Explorer section and inside the API folder we need to create another folder called models and then inside this or we just say models and then inside this folder we're going to create a file called we can just call it user.js or for more specific naming we can just say user dot model.js this is exactly like user.js but you can make it like this so when you're working with different files later when you have many files you can you're not going to be confused by the file naming so here inside this file we're going to import Mongoose from mongoose and using Mongoose we're gonna first create the rules as I mentioned we have to create the rules and they call it a schema so we're going to create the a constant called user schema and we're going to use a method inside Mongoose called a schema we should say new Mongoose that is schema and then here we need to specify different rules for example for username so we're going to have username email and password so for the username we're gonna set the type to be a string and then we set it to be required so what I mean by type string so any other types like numbers or Boolean are not allowed to be added for the username so you're gonna get an error if you do it so this is going to protect our database from a different type of inputs so and then this is going to be required so no user can be added to the database without having username so you're gonna get an error for this one as well and also we can just make this one unique so we set the unique to true so it means that no one can have this the username similar to others so everybody should have a different username so before adding the username to the database mongodb is going to check if the same username exists or not otherwise if there is a user with the same username they're gonna send us an error so they they want anyone to add the same username so that is for the username for the email and password would be similar so I'm gonna copy this one using alt shift done Arrow two times so the use username and then we have email so the email should be with the type of string it should be required and also unique and for the password uh it's it is required and the type is the string but it can be the same for example two users can have the same password so we're gonna remove that unique troop and also so that was this for this one we're gonna close this and also we want to add something called timestamp true which is going to tell the mongodb to record two important extra information one is the time of uh up there once one is the time time of creation of the user and also the other one is the time of update of the user so later when we want to for example sort this information we can use these two extra information to be able to easily sort them by time and latest so here we're gonna add the timestamp true which is going to automatically add these two extra information for us so after creating this schema we're going to create the model so we're going to create a constant with the name of user and then here we're going to use a method inside the Mongoose called model and here we're gonna have we're gonna set first to the name of the model which is user and this one should be uppercase and singular but mongodb is going to automatically create add the S when we have more than one user we're going to be users okay so we don't need to write down users this is going to be automatically added by mongodb and then we're going to pass our user schema that we have created here and finally we just exported as a default so we just export default user to be able to use this model anywhere else in our application so later we need to use this model so we're going to import it easily okay so that was it for creating the model let's add this one to the GitHub repository so we're gonna set a name for it for example I just call it create user model and then we can just add this file that we we have created and also click on Commit and push so this is going to add this one to our GitHub repository and if you check our GitHub repository and we go back here and inside the commits and if you refresh the page we see the new uh get that is added and as you can see we just created a file called user.model.js inside a folder called models we have imported Mongoose from Mongoose and then first we have created the user schema which includes the different rules for username email and password and we have used the set a schema to create this schema based on this user schema you we have created the model using sort model we set the name to user and this is um this must be singular and and also we have exported as a default so we can use it anywhere else in our application so that was it for creating the model in the next section we're going to create the first API route and we're going to create a test API graph so see in the next section all right in the last section we have created the user model in this section we're going to create our first API route so let me show you an example for an API route first so inside the Explorer section in the index.js file if you go down here we want to create a API route for example or just say app.get we're going to create an API route to the forward slash now for example so we create we just say forward slash and then we just say requested response request is the data that we get from the client side for example this browser when we send a data this is from request so this is request response is the data will be sent back from the server side so we have server we have clients so we want to interact between these two using these two requests and response so request is from the browser client and responses from the server and then we're going to create if we can just send anything to the client for example if you just say response.send hello word for example so let me test this one okay so we're gonna create this API route and the the way we test it is to go to here we just say and this is a forward slash okay so let me change this one to test so we're gonna just say test but if you go now to forward slash test we don't get anything because the URL here is 51 73 all right but the one in the server is three thousand so we need to change this one to three thousand as you can see now we test it we see the and we get the hello world but uh because we don't want to do it each time we want to create a proxy so each time we request from this URL we wanted if the route is related to the API we want to go to that specific section so uh for now we just leave it like this one with with the test like 3000 we're gonna create the API route but when we click create our client side and we want to interact with the backend uh instead of just using this 3000 all the time and change it we're going to create the proxy but for now I just want to show you how to create the API route so if we go to the test we get this hello world we can it can be anything else you can send back a Json a file an object anything for example here we can just say response.json and instead of this hello world we can send back an object for example we just say message hello word like this so if you know test again you can see we get an object with a message hello world so anything we can send to the client but this is not the best practice actually for creating API routes because we can we cannot create all the sign in sign up everything here inside the index.js so this is going to be a long file if you do it so what is the best practice the best practice is to create a separate folder for API routes and also the these functions that we have for example inside the API we're going to create another folder called routes okay and here we're gonna create our first round for example just for the user we create a route it's just a route user.rout.js and here we can just first import Express from Express we're going to use express to create the route so here we just say hey create a constant called router and using express.r router we can create our router and just pay attention the route this router is with the uppercase R so Express that router with uppercase R and now we can just create our test API round for example we just say router.get the reason we are getting get requests because we just want to get the information we don't want to send any information if you want to send to the database you need to use put request or post request okay so get is just getting the information and then say forward slash test request.response and then we just create we can just response with this Json saying hello world so now we want to use this route inside the index.js so all the routes should be defined inside the index status so here instead of that get we just say dot use and then here we just say anytime someone goes to the forward slash API and forward slash user use that route that we have created so we need to export this one as a default here so we can use it here and then we need to import it here at the top so we just say import and because we want to use different router like we want to create user router we want to create authentication router later we want to use the listing router so we cannot just call it router so this is going to be confusing so we just say user router we import it as a user router but as we are exporting as a default we can change its name we don't need to say just router we can just change its name but the address must be the same address so use a router from forward slash routes which is here post slash user.rout.js so they're gonna detect oh this one has a default export so we changed its name to user router and then here we're gonna call that user router so now if we test our application so instead of test we have to go API for slash user post slash test and we get the same Json so each time you go API user okay this is the route we want to check and then we check all the routes the path name inside the user router which is here and the first one is test so API user test and we get this message and the other things we need to consider is even you putting the logic like this is not the best practice we need to put this logic even inside a separate folder so we're going to create another folder inside the API and this folder is going to be controllers because they call these Logics and functions controllers and inside the controller we're going to have our user controller we just say user Dot controller.js and we're gonna just bring this function here we just export export a function called a function test for example and then this is going to just return the same Json here and then we can use this function inside this API R so instead of this we're going to delete it and then we just call that test which is coming from forward slash controllers for slash user controller and don't forget to add the dot JS here at the end otherwise you're gonna get an error so now uh we can test the same things if you refresh the page we get the same Json but this Json is coming from this controller so let's test it again for example I just change this one to a API route please work okay so each time you want to test our API we just go to overslash user forward slash postlash API Pro slash user Pro slash test and if you go to this route we get this message Api route is working so we are sure that our our API is working all right so that was it for creating our test API route in the next section we're going to create this sign up API route so we're gonna go our application in a so we can use our application and sign up the users before doing that we just need to add this one to the GitHub repository real quick with a message of create a test API wrapped and then we can just commit and push so now we go check we can see if we go inside the commits and check our recent commands we see the last one is create a test API route and you can see that we have created a controller file inside the controllers folder and this file just created a function called test which is returning a Json saying API route is working and then we have added this function here inside the user.rout.js here and here we have used Express to create a router using the express.writer method and we have created our first router which is router.kit with the get method we just say each time we go to the forward slash test you call this function and we have exported as a default and we have imported here this one and at the top we just call it user router and then we just use after use to create the API route so each time we go to full slash API post slash user we're going to call this router which is going to call the function test here all right so that was it for creating the test API route in the next section we're going to create the a sign up API route so see you in the next section all right in the last section we have created our test API route in this section we're going to work on creating this sign up API wrap so what we want to do is to get the information like username email and password from the our client side which is this browser and then we're gonna change the password hash the password and save it inside the database so what we need to do here is to create this sign up API route first but as the authentication is very important we're not going to create that one inside the user we're going to create a separate file and for the authentication so we're going to create this is the user route we're going to create another route so here in this route first we create a new route called user dot no sorry route authentication or auth dot route dot Js and here we're going to create that one similarly we just import Express from Express and then we're just going to create our router using express.rowter with uppercase R so that's exactly the same for the creating that part here instead of having a get request we're going to have a post request and this is going to be to post slash sign up and we're going to create a function for that so we're going to create the function inside a file inside the controller so we're going to separate the functions so here we just say auth.controller.js and here we're going to export a constant called sign up and this sign up is going to have the request and response so let me just write it like this so this is going to be with the request and response and then let me close this and then we add this one to here to auth.rout.js we just say sign up and then we need to import it so we import it at top but don't forget to add this dot JS to prevent any possible errors and then what we want to get as I mentioned we want to get the information from the browser and this is coming from the body what they call a body request that body is the information we get from the browser right so let me first show you what we get from the requested body you just console log now request.body so we have created this function we have added it inside the router let's export it as a default here and then inside the index.js we need to import it at the top so here we're going to import off router from routes forward slash off Dot route.js and then we're going to create that API route which is the same things like app that use post slash API but instead of user we're going to have off and then we're going to call that file which is off router so we have created them now we want to see this request.body but in the browser as we don't have now any form we cannot send any data so what we need to do is to use a an API test software there are plenty of softwares that we we can use like Postman like insomnia and Etc but for the sake of this project I'm going to use insomnia this is my favorite API route test because it has a very beautiful user interface and it's very simple to use so here inside the Google we're gonna search for insomnia and if you search insomnia you're going to get all about the sleeping disorder you just add API tests at the end and this is the website we are looking for insomnia.rest and if you click on this one you can just get it for free we can just click on get started for free and they have a free version that gives us everything we need so we don't need to actually pay for it so we just get it downloaded you can download it for your operating system mine is Mac OS but if you have a windows they're gonna suggest you to download it for Windows so I have already downloaded and installed it in my machine so I'm gonna open it so once you open it this is my previous projects if you wanted to get the same things you just go to the home page here just click on home icon and if you're inside the home you just click on create just click on Create and request collection and here you just name your request collection for example for this project I'm just gonna say man estate and just click on create so here you can just add your API routes so we want to separate because we're going to have different routes like for listing for user for authentication so we're gonna separate them using a folder so here we're gonna create a new folder just click on plus icon new folder and here we go I just want to separate the authentication I just say auth and inside the folder when you just hover over the folder click on this arrow and just say HTTP request and you can just change your request Name by double clicking on it or okay you cannot change it like this you can just click on rename and the first one is sign up and this is a post request so you change the gate to post and you need to specify the address of your API which is in our case it's localhost double clone 3000 and then the API route address was API for slash auth if you remember this inside the index.js we have API forward slash auth and then inside the off.rout.js we have forward slash sign up so here we just add the Post Live sign up now we can add the body section as I mentioned before we couldn't do it inside the browser but here we can add the information we want to send inside the body by just adding a Json here we just say Json Json the variable should be inside a double code for example we want to add username the username we just say I just say for example test we want to send email so test at gmail.com and then we're gonna send the password so the password I just use the hand here that's fine and if you click on send now we should trigger that console log request.body and then we should see it inside the terminal so I'm gonna click on send here nothing happens but inside the terminal we get undefined so we are not getting the information we are getting undefined the reason we are getting undefined is by default we are not allowed to send any Json to the server we need to allow the Json as the input so we need to go to index.js here after the app we create the app we're gonna just say app that use and we just say express.json this is going to allow Json as the input of the server so if you try again now inside the insomnia we send the information the same information and we go back to visual studio code we can see we again getting the Json here we get the username test email test gmail.com and password sahab but actually this is not what we want to do we don't want to just show it and console log it we want to save this one inside the database so what we do here I want to destructure what we have inside the request.body so I want to just get all the information we need we just create a constant and this is going to we're going to get the username email and password from the request.body so we can use this information and save it inside the database the reason I'm doing it because we need to actually change the password later we cannot save it as it is then we're going to save it inside the database using we just say create new user and we're going to use the model that we have created remember we have created a model here user.model.js we use that model to save these three informations so we just say new user username email and password we get this information and also we need to import this user model we're just gonna use that Contour space and import it at the top but don't forget to add the dot JS because mostly automatically vs code doesn't add the dot JS in the back end it makes an error if you don't do it after creating the new user we can just save it we just say new user.save and this is going to save it inside the database but this saving takes time for example a few seconds depending on your internet speed this is going to take a different time so in order to prevent an error we just use a weight so the the code is going to stay in this line until this operation finished and then we go to the next line but if we use a weight you need to change this function from synchronous to asynchronous like this so this is going to save it inside a database what we want to do next is to create a response first I want to make a status of 201 which means something is created and then we're going to have a Json but I'm gonna just give a message you a user created successfully okay we can just say user created successfully Let's test this one in our insomnia so insomnia we have already this information so let's send this one now now we are getting a server return nothing so let's see what we did here that caused that error so uh so this is connected and we see what error we got here our user validation failed password is required so the password uh this is password this one is password password that is correct but what about our model the user dot model pass a password Here I made the typo so you just have to check everywhere to be sure that everything is correct all right so now if we test again we get user created successfully that's a good sign but we have to check our database if we see that this one is added or not I have to go again inside my mongodb account so you just go to mongodb.com and sign in because if you already sign up just choose my Google account to go inside the account and once you're inside you have to go and check the same project name so make sure this project name is correct Man dash is state for myself and then you can just click on database here on the left and then we already connected we want to check the inside the data so we click on browse collection and if you see that we have created the users this automatically is with the S but if you remember inside the model we just write down user okay so that's the first thing we need to check users and then the first user is added with the name username test email test gmail.com and passwords I have but here we have a problem actually the problem is this password is actually safe as it is so we don't want to save the password like this because if somebody hacked the database and find the information of our user they're gonna see all their password and also if you have an admin they can have access to our database they can see it as well so this is not the best practice the best practice is to Hash the password to encrypt the password there are there are plenty of ways to do the encryption there are some packages the package I want to use is decrypt.bcrypt.js so here inside the back end make sure you are in the root folder main estate and then here we just install the package called B Crypt Js so once you install it we just need to go to our auth.controller.js and here we're going to import that bcrypt Js from bcrypt.js and after getting the password from the body we're going to Hash the password so we just say const hashed password is going to be equal to because we can just use this one bcrypt Js Dot hash sync a hash sync it means it waits for the hash so we don't need to use a weight here this already is using a rate itself we're gonna pass the password and also we're gonna pass something called salt number which is the run the number of rounds for creating the salt salt is just the hash number or variable which is going to be combined with our password and make it encrypted so in this way we have a hash password now instead of the password we want to pass this hash password so if we try again inside the insomnia we cannot actually save the same one because we get an error so I'm going to change its name to test two and then we're gonna send this one user is created successfully so if you check again if for refreshing this one you don't need to refresh the page you just need to click on this man I State and this one again and this is going to automatically refresh it for you so the new one is Test 2 with the email test2 gmail.com but the password is hashed so now we have successfully stored the data but what if we get an error for example if I want to add the same username and email we should get an error because as I mentioned before in the model in in the model user.model.js we said that username and email must be unique so if we try to save the same send the same information we should get an error but we don't get an error here we don't see the error we only see the error inside the server we get an error here showing us duplicate key and it says that the username has a duplicate key so the name must be different but we don't want to see the error here inside the console we want to send back the error to the user and based on that error we're going to send an error to show the error to the user so here inside the off that controller instead of just saving it we're gonna put this one inside a try and catch a statement so we just use the try and catch a statement we put this await and respond inside a try and if an error happened we want to send an error we just say response that is status for example status 500 which means an error happened inside the server and we're gonna send back this error for example we can just send back this error and see it inside the insomnia let's test it again so if you send now we get and we get the 500 internal server error and what we want to see we are not getting the correct response actually let's see response that Json dot error so let's just return the arrow.message okay so let's test again okay now we are getting the message duplicate key for the username all right so that was successful too we could track the error and send it back to the user in the next section we're going to actually handle this error in a different way we're going to add a middleware and a function to handle the error but for now I just want to show you how we can just send back an error but this is not the proper way to do it the best practice is to have a function and a middleware for handling the error so for now we just add this one to GitHub which is create sign up API route we can just commit and push and if it gets to go back here if you go to our database and check the new commands inside the GitHub repository we see that the last one is create sign up API route so that was it for creating this sign up API route in the next section we're going to create the mid a middleware for handling the error so see you in the next section all right in the last section we have completed uh the sign up API route in this section we're going to add a middleware and a function to handle the errors as you can see each time we have to create a try not to catch a statement and response our error so it's going to be repetitive in our project if we have too many API routes so what we can do is to create a middleware firstly inside the index.js so inside the API folder we go to index.js and here at the end we just create the API route sorry the middleware so we just say app.use and this is going to take four things we're going to have the error request error is the error that is coming from the input of this middleware which is the error that we send to the middleware request is the date from the browser or client and response the it's our response from the server to client side and also next we use next to go to the next middleware and then here let's uh open this so let me fix this one real quick Okay so so what we can get here we want to create a cast constant and we call it a status code and they say this course we want to add is the status code that we get from the input of this middleware so whatever the error that status code is we get or if there is no status code in the error we're going to say just use 500 which is the internal server error and also we want to make the message as well we just create another constant or message and if there is a message we just say error.message Get it otherwise just say internal server error so in this case if there is no status code or there is no message we don't get an error later because we have an alternative message and a status quo and finally we're gonna return a response with the same status code here this status code we get and create and also with some other messages we can just return the message what I wanted to do mostly is to add a success false error or you just pass this message we don't need to do extra things and also I want to pass the status quo we we don't need to say a status code equals to status code both is actually correct but after es6 if the variable and the key has the same name we can just remove one of them and also we just close this I think we don't need this parenthesis and I think we closed this uh this is for this one so we need to close this one and then this parenthesis here okay now it's okay so how we use this is a middleware so we just have this middleware in order to use that inside the auth.controller.js instead of just writing this one we can just get the next here to use the middleware we just here we just say next and then we pass this arrow that we catch inside the try and catch a statement so if you try now to get an error for example remember I just try to get an error using the same username and email I got this error if I try again this time we get a more comprehensive error which has the success false is status code of 500 and the message is this one so actually this error handling is coming from our middleware and there are some situations that there is no error in the system but we want to throw an error for example the password the person is putting is not long enough so it's not an error but we can just create an error for that so we need to create a function to handle these kind of Errors so here inside the API folder I'm gonna create another folder called utils and then inside this folder I want to create a file called error.js so what we need to do for this error.js to to create a function so we just export a function called error Handler for example and this error Handler so this header Handler is write down the name so this is going to take two things we want to have the we want to give this function the status code and the message ourself so this is going to be a manual it's satisfold and message it's not the real error so we just say a status code and message and once we give it we can just create an error here we can just say create a constant for the error and we use the JavaScript error Constructor to create an error for example just say new error like this and then we create the message we just say error dot status code for example Arrow dot status code is equal to this status code which we are getting manually from the input of the function and then also arrow.message which is going to be the same message we get from the error and also at the end we want to throw the error or we can just return the error okay so now we have created this function and the way we can use it is to go to auth.controller.js and here for example I want to use it here for example imagine that there is no error and we want to create an error so instead of this error I can use that error Handler function we need to import it at the top error Handler from utility.js and we pass the status code and the message I just want to create a different status quo for example 550 and then we just create a message error uh error from the function so we know that this is the error that we created okay so now if we try to get an error inside insomnia this time okay we are getting I think an error here so let's check okay so I think I didn't close the parenthesis here okay that's fine let's try again so this time we get an error but with the status quo of 550 and the message error from the function so this error is actually is created by us so completely manual error but actually an error happens and the server send an error to the client side so we don't need it actually now I can just revert this one to our previous one because here we actually have the error we don't need to do it but later in our project in some cases we need to handle the error so we're gonna use this custom function so all right so that was it for creating a middleware and a function let's add this one to the GitHub so we just have change it inside created the change inside these three files and the message for this one is going to be create a middleware and a function to handle possible errors and then you can just commit and push to GitHub so let's see what we have done we can refresh the page here so here we see the create a middleware and a function to handle possible errors so what we did first is to create a middleware inside index.js we have created this middleware we just said app.use and we got these four inputs for the arrow request response and next we have created a status code by getting the status code from this error and if there is no a status code we just say use 500 status code for the message we did the same thing but we just said use this message instead and then we have it returned this status code and the message and also we have added this success false for extra information so we have used this middleware by passing the next here and using this next we pass this error so we could handle the error using the middleware and also we have created a custom error Handler by creating a function called error Handler we gave manually the inputs a status code and message and also we throw an error using the error Constructor and also we just set the status code and message and finally we return an error so that was it for creating a middleware and a function to handle errors in the next section we're going to create the UI of the sign up page so see in the next section all right in the last section we have handled the errors using a middleware and a custom function in this section we're going to create the UI of the sign up page if you look at the final version and we go to sign up page here you can see we just have three inputs and the sign up button and also here we have have an account sign in for the Google button I'm gonna create it later when we want to add the oauth Google oauth authentication but for now we just create these three inputs and this button and here and also this title so you have to go to your our website and go to forward slash sign up and also I want to make it Zoom a little bit so you can see it better so I'll bring it to the right side and also in here our Visual Studio code I want to bring it to the left side so and then we just need to go to client SRC pages and sign up.j6 so we have a zoom here I can remove the zoom so you don't you get the same I think it's big enough so first we first think we need to do is to create and add an H1 tag saying sign up and then we want to just create a class name for that we want to add some a styling Port we just say text 3 x large we want to make it bigger and also we want to bring it to the center using text Center and what we need to do next is to add a font semi bold to make it a little bit thicker and also we want to add some space to the top and bottom using margin y 7 for example so that's it for the H1 tag then we want to add a form so that form we don't need action for this form and inside the form we're going to have three inputs the first input is going to be it with the type of text and with the place folder of saying username like this you can see it here it doesn't have any style yet I just want to give it a border uh sorry uh in the class name we need to add a border so a thin border and what we want to do more is to add a padding of trees to add a space around it and also I want to make the rounded large so we have a rounded corner so that's it for this one and also we want to add an ID for that so we want to know which input is changing when later we want to add some for example handle change and unchanged event listener so for him for this one we just say username and that's it for the input the other inputs are very similar so I'm going to copy them copy this input using alt shift done Arrow two times and what we want to do is to add the change its name for example this one to email the ID is email the type is email as well for this one the type is password the placeholder is password and the ID is password as well okay so now they are next to each other first so I can bring them on top of each other by adding a flex to this board and change the flex direction to column so this one is bringing them on top of each other so what I want to do next is to add some a space between them so we just say Gap or to add a space between them like this and then what we want to do later if you look at the final version you see that we have a background color here so that's why it's different we can easily add this background colors to everything by just going to index.css file inside the here inside the SRC folder index.css we can add a CSS and add for the body I want to add the background color we just choose a background color like I choose a RGB color for the red I choose two four one for the green I choose two four five and this one two four one so this is going to give us a green color and this color is applied in all pages for example in signing page we have the same color and then what we want to do we can just close this and then here inside the signup.jsx I want to add some padding around them but I want to add this padding to everything to all the places we have so here inside this class name I want to add the padding of three and also I want to make it Max with the maximum width of large so in the big screen we don't get bigger than um large but this is in the not this is not in the center in order to bring it to the center we just say MX photo so now it's in the center so that was it for creating the inputs after that we're gonna have the button so after the input I wanna add a button saying sign up so let's install this button this style I want to use is just to add a background color a slate 700 let's change the text color to be white and after that we want to add the padding of three to add some space around it let's make it rounded large as well so we make a rounded corner and we just make it uppercase so all the letters are uppercase and what else we need to do is to for example add a hover effect if someone hover over the button I want to just change its opacity to 95 so when we hover over it you see a little bit get lighter and also if this is disabled I want to change its opacity to 80 I just choose 80. so now it's okay but if we later add disabled here we see this is disabled okay so let's remove the disable for now so that was it for the button and also we want to add that text here have an account sign in so we can do that one outside the form so here outside the form I'm going to add a div and inside the div I want to add a paragraph saying have an account with the question mark and then we want to say just go to the sign in page but I want to create a link for that so when we click on it we go to the signing page so I'm gonna add this link but this link we need to import it at the top we need to import link from react rather Dom and then this link is going to uh forward slash sorry it's four slash sign in and inside the link we're gonna have an expand saying sign in so let's style them for the sign in I want to change its back color to text blue for example 700 and I want to bring them next to each other so I change the direction to the display to flex and also let's add some space between them by just saying gap2 and finally I want to add some margin at the top of 5 to add some space on the top so that was it for creating our sign up page UI so let's add this one to the GitHub so we just say create a com create or we just say complete complete sign up page U UI and we can commit and push it to GitHub we don't need to review that it's very simple because it's just a styling but in the next section we're going to add functionality to this page so when we add the username email and password as the input we want to track the changes firstly using an unchanged event listener and then we want to submit it and add it to the database when we click on sign up button so see in the next section for completing the sign up page all right in the last section we have completed the sign up page UI in this section we're going to add functionality to this page and connect it to the database so we want to add an unchanged events listener to the inputs so for each of them I want to add an unchanged event listener so after the class name or ID I just want to put the Dual cursor by keeping the alt so we keep the alt and then choose so you can type simultaneously and then we just add an unchanged event listener which is going to call a function called handle change and we need to create this function here at the top before the return so we're just going to call it handle change and also this one is going to take an event so we want to track the changes and this one let me close this we don't get an error so we want to save the values of that so what we need to do is to create a piece of the state to keep track of the all the changes and I'm gonna call that one form data support data and we want to keep it an empty object from the beginning so this is going to be a an object and also we want to change this object using this function set form data and we need to import user state so I'm going to use Ctrl space to get the suggestion and import it at the top so what we want to do here is to set this form data like this this set form data we want to change the form data what we want to do is to we want to keep the previous information so whatever for example we have written username we want to keep the information and then add the email so we don't want to lose track of that so we want to keep it by spread using the spread operator and keep the form data whatever it is here and then we want to add the new changes because if we have the ID here username email and password we can decide we can understand which one is changing so we just say e.target.id so whatever is changing set that one to its value so we set it like that so now if we just console log from data and we open the console we just inspect here open this one and then go to the console we can see first let me clear this if you change for example username I just say Sahand so you can see the username is Sahan now and then once we write down the email we're gonna keep the username because we a spread operator we use the spread operator for form data so here I just say Sahan as you can see the email is there email gmail.com for example and we can just write down the password too here so we keep we have all the information here storing in this piece of estate called form data so after that we want to submit this one submit the form so what we do is to add a form add it on on submit event listener inside the form which is going to call a function called on submit and we can create the function here too so we just want to put it here we create this function handle submit which is getting the event and also we want to use the E dot e prevent default to prevent refreshing the page when we submit the form so here when we click on submit as you can see we don't see the changes here we there is no refresh but if we don't have this one when we click on submit this is going to refresh the page so in react we want to prevent refreshing the page so we first we do this one we're gonna keep the we do we don't want to refresh the page and then we want to submit the form what we do is to use the fetch method to request for our API route so if you remember our API right address is localhost 30004 slash API for slash off forward slash sign up but we don't want to add this address all the time so for example if I wanted to the fetch for example create get the response and then we just await for the fetch we don't want to write down HTTP localhost 3000 each time I just want to write down forward slash API forward slash auth forward slash sign off okay so in this case we we are requesting actually to localhost 5000. if you remember our client side is in 5000 173 port number so how we fix that one we need to actually create a proxy so each time we don't write down here anything we're gonna request for the 3000 instead so let me close this so we don't get an error and we need to pass the form data here and as we are using a weight we need to change this function to asynchronous so now we shouldn't get an error but let's create the proxy so we can request to the correct address so we can just go to Explorer section and we go to vid.config.js here inside the Define config I want to add the server This Server is going to have a proxy and a proxy we just say each time you have a request to forward slash API you just go to add this one at the beginning http localhost 3000. and then or we can just be more specific because this is not as secure we can just say we want to add this one as a Target we just say Target is equal to http this one and also we want to say set the secure to false and then we want to close this also close that one and this so we have created a server and a proxy we just say each time the address starts and includes the postlash API like the one we are doing for the sign up it has the forward slash API each time you see forward slash API add the localhost 3000 at the beginning so this is going to request to the correct place so once we do this fetch request we want to get the response also we what we want to do is to we don't want to just send the form data we want to stringify it we want to just change it to a string because otherwise it's not secure to do that so what we want to do here first thing first I want to change the method so I'm going to add an object here we just say Port method is post and we want to add a header with saying content type Json because it's a Json type and also we want to send the body by stringifying the form data so we see we just say send from the body of the browser and send this information from data and a stringify it as well so this is a correct way to do the request and then what we want to do next is to change and convert it the response we get to Json so we can use it and see it here so let's console log now console log data we'll see what we get so let's say just create another we just say user one user one at g.com and anything is fine we just write down a password and once we click on sign up we should get this data as you can see we got this user created successfully if you remember we have a response with just a message user created successfully so that was successful and if you checked out our database let me sign in in the mongodb so inside the mongodb we should see inside the database and we go to the browse the collection we should see the new uh user one user one and user1g.com and this is the hash password so everything is working nice from the client side so what we want to do is to handle the error and also we want to handle the loading effect because when it's loading we want to disable this button and also we want to show some loading effect for example we changed its text so what we need to do is to add two more piece of Estates one for the error we set it to be null at the beginning and then we're gonna have another one for the loading we set it to be false so what we do before request here before this request I want to set the loading to true and after the request is finished we want to test if the data we are getting has an error or the success is false if you remember inside the off dot controller and sorry inside the index.js here in the back end in the back end we have let me find it index.js we just say if there is an error set the success to false so we can use that one we just say if data dot success is false we want to set the error to the message we get from that and also we want to set the loading to false and then we want to return otherwise we want to set the loading to false here because the loading is completed so and then what we want to do is to add another paragraph here to handle the error and also for the loading for the loading for example in the button I want to add the disable so each time we have loading true we want to make it disabled also we want to change its text when we have a loading we want to say loading otherwise we want to say sign up so if the loading is true we just say loading otherwise we just say sign up so each time we click we see loading and then we see now error happens because we didn't put any input but once the error happens we want to set the loading to false we set the loading to false zero as well let's refresh and test again okay now after the error happens we want to set the loading to false so let me let me bring this one up here okay I think this one is not working let's say see what we get inside the data at here before the error so we have form data let's remove this form data okay let's see what we can do to fix this one so this is the error that actually is not defined from the back end what we can do is to to put a try and catch a statement here two to get the possible error happens in the front end so we just add the try and catch a statement we set everything to the try and inside the cache also we want to set the loading to false and set the error to this arrow.message so let's try again now I see now we are handling the error here too so we don't see the error and then once we what we want to do is to show the error as a message at the bottom here so here at the bottom we just write down if there is an error we just create a paragraph showing the error so let's see okay now we see that we get the error here so let's try it to get a different error for example I have already created the user one let's create the same name we just add Gmail whatever it is but we have this same username so if I click and let's see what's so let me copy this so let's create first this one oh we are getting an error here for no reason we just check the the back end is not working okay not Mount crashed let me increase the size here you can see it better so not one decrypted Js yeah actually there is no error here so that was for the previous error let's try again to create so I want to create with the same username so if you just click on sign up you can see we get an error duplicate key and the key we are using this one is here and also if we change the username for example user 2 and sign up now the E the email is a duplicate key so we need to change the email and once we do that actually the it's working and we sign up the new user let me check so the last one is user two it's working but we want to clear the error if everything is fine so if everything is all right so after there is no error or something like that here also we want to set the error to null because everything is fine so let's test again so it just use for example user tree if you do sign up we see the error is gone and instead of the error I want to just show them user is created successfully or I want to bring them to the signing page I want to navigate them to the signing page so what we can do is to actually create a let's delete this one first we want to use the from the react rather down we want to use a package for we want to use something called use navigate so I want to import that one too use navigate and use navigate we want to initialize it here we just say const navigate equals to use navigate and if everything is all right here and the error is clear we want to just navigate to the sign in page like this so let's try again so we are in the sign up page we just wanna for example use another user for example user two sorry user3 we already created usage and if it's click on sign up and if we have already used this one this is a three so user four and everything is good now we went to this sign in page actually and so everything is done for this part so that was it for creating and adding functionality to the sign up page let's add this one to GitHub I just want to just add these two files and we just create a message you just say complete sign up page functionality and we can just commit and push to GitHub and if you check it inside the GitHub and refresh the page so as you can see the most important part is to add the proxy inside the vid.config.js like this and also we we just have added the on change event listener we handle the change here at the top by just keeping it inside a state called form data and then we have submitted inside a try and catch a statement and first we just get the response by fetching the data to this URL and then if if there is an error we set the error if there is no error we're gonna stop the loading effect and navigate to the signing page so that was it for this part in the next section we're gonna create this sign in API route so we wanna just sign in the user and authenticate them so see you in the next section all right in the last section we have completed this sign up page functionality in this section we're going to firstly click create the signing API route and then we're gonna complete its page so for creating the API route if you remember in the sign up section inside the API and inside the route and also throughout.js we have created the router.posts for sign up so we want to do the same things for sign in so first thing first we need to create the function for that inside the off.controller.js so here I want to create a function called sign up sign in and this is actually the same like a asynchronous and it has request response and next because we want to use the middle word here so I'm gonna accept them so we have these things and also let's close this one too we don't get an error and then what we want to do here is to get the data from the request.body so what we want to get is email and password so we just say const email and password and we want to authenticate the user using their email and password you can do it with the username and password as well it doesn't matter so you can do it the same way and also we want to add a try and catch a statement and here we want to catch the error using the middleware that we have created inside the index.js file this middleware so we're going to handle the error here and what we want to do with this email and password is firstly we want to check if this email is existed or not you want to check the is there is email like this if the email is correct then we want to check the password so first you want to check the email so here I want to just say valid user to check the email the way we we check the email inside the Mongoose is to use a method called find one and we need to add a weight here because we need it takes time to check the email inside the database and we want to use a method called find one and in we want to use our model that we have created here user.model.js which is exporting this user so you want to use that model and then we just search inside that inside the user cluster by using find one and I think we want to search is the email so we want to search for this email we we can say the email equals equal email but actually because both key and the value has the same name we can delete one of them after EX es6 so after checking the email we need to see if the email is not correct so if the email it doesn't return an email so it's false we want to return something we want to return an error but how we will return an error because we have created the custom error you tell that is error.js we can handle the error here so we use this middleware we have created next and then we're going to pass that error that we have created with the name error Handler so we just say error Handler and then we need to import it at the top here from the uterus forward slash arrow.js and then what we want to add is 404 and we just say user not file so first we check the email if the email does not exist we want to just return an error otherwise we want to check the password so the way do we do it because the password Here we are getting from the body is just the normal password and the password inside the main database is a hash password so we need to compare it with decrypted JS method one of the big group that JS methods called compare sync so we just say valid password we use the decrypt.js package and we use its method called compare sync and we compare this password that we get from here with the one inside the database which is coming from this user that we get the valid user.pass for and also we want to say if the password is not correct we want to return an error using our middleware and also the error Handler and we just we can just say 401 run credentials or invalid password it's it's better don't say invalid password because the people are gonna be sure that they have the password and correct so they're gonna check it few times so they are sure about their email so what we do is we just say run credential so they don't know that the wrong one is email or password okay wrong credential I think should write down Prudential and this is correct drawn credentials here too we can just say run credentials too but for Simplicity I'll just leave it like that because we want to test what is wrong with the input and password and return the error as we wish so if we are sure that both the email and password is correct we need to authenticate the user the way we do the authentication is to add a cookie inside the browser and we need to create a hash token that includes the email of the user or the ID of the user and then we save this token inside the browser cookie so each time you want to do the user want to do something for example change its email password or something crucial so we need to check their authenticated or not we can use that cookie to do that but We're Not Gonna Save the data as it is we're gonna hash that data as well so the best package for doing that is JWT or Json web token and we can use this package to create the token we create that hashed value of the users so inside the back end make sure you're in the root directory let me clear this so you have to be in the root directory and then you just install this package Json web token all together so once you install it you can just import it at the top like this we just say import JWT from Json web token so once you do that we can just create the token here so here we just create a token which is a cons token and then we use the method from jw2 which is PSI and we want to add some information that is unique for the user it can be email username or ID but as the id id is the best practice for doing that because by checking the ID if someone can find the ID they don't know exactly the information of the person like the email or password so it's better this is the ID that is automatically saved inside the mongodb so if you check the mongodb and you can see each of the users has an ID and the variable is underline ID and it's completely unique for everyone so based on this ID we can later authenticate the user and this is unique for our database so if this user signing in another website get different ID so this ID is completely unique for that person so let me come back here so we're going to use that ID so we just say ID equals to this valid user that we get dot underline ID and also we want to add some secret key and this secret key is unique for our application it can be any random number or or letters and this is going to make our token completely unique for our application so it is this is similar to the salt in creating the password so this is going to be mixed with the ID of the user and the this ID is going to be completely hashed and based on our secret key not someone else so this is completely and makes our application secure but we wanna we don't want to share this secret key with others so we want to save it inside an environmental variable so we can just use it later for when we are uploading our application to GitHub nobody can see that so we just say process.env the JWT underlying Secret I'm gonna add this one to the environmental variable here so here I just say JWT underline secret and this is going to be equal to anything it can be anything like a a random letter or number so you can just choose something like that but later you have to add this one to your uh when you deploy it you need to add it to the platform you are deploying your application like reversal or a render okay so this can be anything random but it's you have to remember this and also you need to upload it as an environmental variable to your server so we have this token now after creating the token we want to save this token as the cookie so the way we do that is to use dot res dot cookie we pass this the name for that it can be anything token or access token I would like to call it access token and then access underline token and then we're going to pass this token here so we just save this token inside the cookie and then we want to add other information for example we just want to add some options here like HTTP only true which means no other third-party applications can have access to our cookie so this is going to make our cookies safer and then we want to add some Max expiry date for that we can just say expires and then we can just say we can just create a time from now if as you can see new date which is today plus some time in the future so for this is based on second so this is the one minute this is one hour when you connect it and this is 24 hours so this is thousand days it should be like that so we can do that but if you don't want to do like a limit your cookie we can just get rid of this and make it just like that so this is going to be a session so now we have the cookie inside the browser so and also we want to return some other things like a status 200 and also we want to return uh this valid user so we just say valid user so let's test this one inside insomnia so we go to insomnia and we already have created this sign up we can just duplicate this one to save time and we just change its name to sign in and we don't need the username for that we can just delete it and what we want to do is we need to just change its address to sign in and also we need to add this function to the user sorry auth.rout.js here so I'm going to duplicate this one too change this one to sign in and we want to import that sign in function too at the top uh I think that's enough this is going to work let's check that index.js so here we have the authentication then we have here the sign in so this is going to call this function which is sign in so here we just say forward slash API R4 slash sign in this is a post method and we're going to pass the email and password so let's try this if you click on send we can see we got the user and with the response 200 because the email and password was correct and then we have a cookie inside side we have a cookie with the name access token which includes the user ID but it is hashed so we don't know what it what this is because it's created using this jwc secret key so we don't know what it is so nobody can understand it but we can use later this one by decoding this one and get the user ID but the problem here is we got the password of the person back we don't want to see the password of the user even it is Hash we don't want to send it to the user it is not okay as it's not the best practice so we need to remove this password before sending back the user so here when we are sending back the valid user we want to remove the password first so what we do here we can just restructure the password and the rest we can do it here we can just say we want to destructure the password and the other user information but as we are using the password here at the top as a constant we can we cannot use the password the name as password we can just change it and change its name to pass for example and then we get the rest so we separate the password and the rest of the information so we can just call this on rest for example and then this is going to be equal to valid user but if you do it like valid user let me show you the error first and then here we need to just say rest so we don't want to return the valid user we want to return this rest all the things except the password so if you try now again as you can see we are still getting this password because we don't we we should restructure this one underline doc instead of the valid user so we need to just add this underline doc at the end so if you try again this time we just got the username email and we didn't get the password so and also we got the cookie so the problem is solved so we are not worried about the password to be leaked to the user so that was it for creating this sign in API route let's add this one to the GitHub repository so we add everything and then we create a message called create sign in API route and we can just commit and push to GitHub what we want to do here we want to go to our repository we refresh the page now we see the last command is create signing API route and I just want to explain you again so inside of that route.js we have created a new router with a post method which is going to be for sign in and we're just going to call this sign in function which we are going to create inside the outputcontroller.js here first thing first we destructure the email and password and then we we test the email first we just say if the email exists get the email otherwise if the email is not available just return an error with the status code of 404 and with the message user not found and if the value user exists we want to check the password if the password is correct we want to return true otherwise we want to return false and then the way we do that is to use the decrypt.js package and its method called compare sync and if the password is not valid we're going to return an error with the with this one we did with the status quo of 401 and the message run credential and if everything is alright we're gonna sign a token using JWT package which we need to install and then we're going to pass something unique about the user which is a ID and also we pass the jwlt secret key here and based on this token we're gonna save this token inside the cookie using res dot cookie we just say access token for the name of the cookie we pass the token and also we set this option to make our cookies safer and we're gonna return the rest it which means that we're gonna separate the password and the rest of the information from the valid user and then we're gonna return the rest and also we have used the try and catch a statement to Cache the error and send the error to the user using our middleware alright that was it for creating the sign in API route in the next section we're going to complete the sign in page functionality so see in the next section all right in the last section we have completed the sign in API route in this section we're going to work on the functionality and create the UI and connect it to the database and we're going to have interactivity between the front end and the back end the page is very similar actually to the sign up page so we can get help from the our previously built sign up page so let me bring this one to the right side and we have our Visual Studio code on the left side we can just go to the client section we go to sign up page and we can just copy everything and we come back to this sign in page and we paste all of that so once we do that and we refresh the page we see the sign up page in the sign in url we can modify this one real quick so let me close this one and then just change change the function name to sign in and then we're going to have this featuring instead of sign up we just have to fetch from sign in what else we need to do we need to navigate to the home page when the sign in is completed okay and then the title is going to be sign in you should see the change here we don't need the username we can just delete this input the first input we just have the email and password the button is going to say sign in instead of sign up and then we just say instead of saying have an account we just say don't have an account and don't forget it don't do add the apostrophe here because it's going to make problem in the production here we just say don't have an account without apostrophe and here this text is going to be sign up and then this is going to redirect the person to the sign up page I think everything is fine now you should try now let's create an account I just create an account with this email for example user 3 at gmail.com let's use the same email for the username and password and sign up the user so now we are redirected to the sign in page we can just test this one if it works it's going to be redirected to the home page and then what we need to see is the cookie inside our browser we need to go to the application and here inside the cookie we can see we have a cookie with the name access token which is a session and then with the domain localhost the value is this one which is which includes the ID of the user and if you refresh the page you still see this cookie here all right so everything is working perfectly let's try to get an error for example I just change this email to 33 let's click on login we get an error user not found so let's test it with the wrong password you can see we get the wrong credentials so everything is working as we expected so that was it for creating actually completing the sign in page functionality as we have copied everything from the sign up page everything was very easy and simple let's add this one to the GitHub so we just add this and then we create a message complete sign in page functionality and we can commit and push so in the next section we're going to work on adding the Redux toolkit so we want to when we sign in and we have the user back so as you can see from the ins inspect when we put the correct email and password and we go to the network and if you click on sign in as you can see we get a response with the user ID username email so we want to keep this information and use it in places like the header the profile page and different ways so instead of using a local estate we're going to have a global State using redox toolkit so in this way we can have access to this user information everywhere like the one in the final version the final version when you sign in we see the user in the profile the information of the user and the profile and also in the in the header and the profile together so in instead of passing the data in different components and Pages we're gonna save this information in the Redux using redox toolkit so see in the next section for adding redox toolkit to our application all right in the last section we have completed the signing page of our application in this section we're going to add the redox toolkit so we can have access to the user data in different places in our application so let's go to Google and search for redox toolkit and in the search results you need to go to redox Dash toolkit.js.org and in this website we can just click on get started and we go to Quick Start if we scroll down a little bit you can see in order to use this one we need to install two packages redox JS forward slash toolkit and with react redox so let's copy this one and we go back to visual studio code and we need to install it in the client side not in the back end so we need to just let me clear this terminal and I want to go inside the client side and then I want to paste this code that I have copied and after the installation we need to create this store so we need to create a file called estor.js and add this configuration to the application so inside our application in the SRC folder I'm going to create another folder called redox and then inside this folder I'm going to create a file called store.js and here we're gonna just create this store I'm gonna copy this one and paste it here which is going to configure a store which we don't have a reducer yet we need to create the reducer and what else I want to add is to get the serializable check false so we need to add this one otherwise we're gonna get an error later so I'm going to add a middleware here so this middleware so let me press tab to accept this so we get a middleware like this and get us give us the default middleware and then we're gonna set the serial serializable check to false in this way we're not gonna get an error or not serializing our uh variables here so just be sure to add this one to prevent any error in your browser after creating this store the next step is to provide the Redux store to react what we need to do is to cover our application with this store using a provider here so what we need to do is to go to main.jsx and here we need to import two things to be able to add this one to our application so the first one is the store that we have created which is coming from forward slash uh it's it's inside the redox folder and then we have a store.js so we have to go inside the folder because the main.jsx is inside the SRC and then we want to go inside this redox folder and then install.js so we have the store and also we want to add the provider so we're gonna add the import the provider from Redux toolkit react redox and then we want to cover everything we just need we can just delete this react strike mode and then we just add the provider and then we pass the store and we just say store equals to store so that was the next step the next one is to create the redox State slice which in our case is user slice and the example provided by the website they create a slice for counter but we want to create that for the user so we need to create inside a Redux folder we're going to create another folder called user and then here we're going to create the user a slice.js and here we're gonna import create a slice method from Redux js4 slash toolkit and using this one the first step is actually to create an initial state for us because we want to have the initial essay like loading false and error false and then after that we want to add everything else if you remember for example in signin.jsx we have two things like error and loading and the error at the beginning was null and loading was false so here is similar so we need to create the initial State we just create a constant called initial State and if we first we set the current user now and then when this sign in is successful we want to set that one to the a user that we get from the database so set the current user to null error to null and loading to false this is the initial State then using this one we can create the user slice we just say cons user slice equal to create a slice the first step is to set a name for that we just set this name to user and then we pass the initial stage after that we're going to create the functions which here we call reducers the first function we want to create is sign in success or sign it as sorry sign in let's start we get the state here and we set the loading to true so that's the first step a state the loading is true similar to the one we did here in the sign in page here before the start is here set the loading to true and then we fetch the data after the fetching the data we're gonna set the loading to false and we want to set the navigate the user and also to get the data here so we're doing the same things but we wanted to make this one Global the status is global not local I mean after that we're going to have signing success this one is going to gives us two things like estate and action action is the data we get from the date when we receive the data from the database we want to we get that data we set it to here and here we just say first we just say a state that current user to action.payload so this is the data we get and also we set the loading to false and also set the error to null because maybe we had an error for the previous attempt so this time we want to set the error to no after that we're going to have the sign in Failure so sign in Failure we get a star estate action we set the error to pay action.payload and also we state that loading to false so these are all reducers okay and then what we want to do is to export these functions as the action and also we want to export this user reducer so here we're going to export a constant and we're generous for the signing the start signing success signing failure and this is coming from userslides.actions so we can use this functionally in other places like signing.jsx and then also we want to export the user reducer as a default and then we can get it from this user slice that reduce so now we have added this one the user slice in the next step when we create this slides we want to add this a slice to our store remember our store was empty now we want to add it to there so we need to go to store.jsa store.js and here the inside the reducer we want to add the depth reducer we just we can just say user equals to user reducer and we need to import it at the top so we need to import it from this URL for slash user forward slash user slice and here if you remember we exported as a default so we can change its name here to user reducer so what else we need to do in The Next Step so now everything is finished so we can use the these things for example we can use the we can dispatch these functions that we have so we want to use it inside this sign-in.jsx so inside the sign in.jsx first you need to import these uh use dispatch from react without because using this Hulk we can dispatch the function that we have so here I'm going to initialize it first we just say const dispatch use dispatch and also we need to import all the functions that we have created which includes if you remember here we have created sign in a star signing success and failure so I'm gonna copy one of them put it here and this is coming from the redox user let me correctly put that one so what we want to add here is to first thing first we want to import it from the correct position which is redox forward slash user forward slash user slice and also we need to import sign in success and sign in failure so here instead of setting the loading to true in the first step we can just dispatch sign in a stock and also we can just when an error happened instead of setting the error to this one and loading we don't need to do both of them we can just just dispatch sign in failure and we pass this data the message which is data Dot message and here at the end instead of setting both of the loading and error which changes dispatch success and pass the data that we have and what else we need to do is to here when there is an error we can just dispatch signing failure and we pass this error.message so everything is okay here and instead of having two hooks here error and loading we can import the error and loading we just create a constant called loading and we just destructured the loading and error and using use selector hook we can import these two and this is coming from the our Global State and the state name was user if you remember inside the user slice the name was user here and also we need to import use selector from react redox so I think everything is ready to be tested so inside the sign in page in order to test it we can you can install a Chrome extension called Redux dev2 I don't know I have it or not and you have it here and if you inspect you just go to redox and you can just bring this one to the right side let me bring it out just okay so we bring it to the right side so we can see the changes so I'm gonna just sign it firstly correctly if you remember we had the email user3 gmail.com that's the correct username and we had the same password and if everything is okay we're going to be redirected and we want to see this one the first thing first the user the initial state was null error is not and also loading is false and if you click on sign in you can see now we had the sign in the start first and then signing success and when designing success happened the current user is the the user that we have like the with the email and username error is known and loading is false okay and also we can use this one anywhere else in our application anywhere in like a header and everything else so let's try to get an error for example I create a wrong email like 33 so we got the message user not found and here the current user is still the current user is the previous user because we don't want to lose the previous one and the we have an error we have an error user not found and loading is false so it everything is working let's add a wrong password so you see the changes here because you can see even the changes you can have the reply of your changes here so here before this part the loading loading was false the loading became true and then the error became wrong credentials and it could do it with the correct password we can see that the error became known and loading is false and also the current user is here as well so that was it for creating the adding the redox toolkit in our application let's add this one to the GitHub first so I'm gonna add everything and then create a message called add redox toolkit and we can commit and push so in the in the next section actually we want to fix a problem here I'm going to show you what's the problem here so now the current user is this one but if I refresh the page we can see that the current user is null so actually this is just uh once uh like a before refreshing is working but if you refresh the page you're going to lose the data we don't want to be like that because each time the user refresh the page they need to sign in again so that's a bit annoying and so in order to fix that we need to ins store this data in places like the local storage of the browser so we don't need it to do it ourselves there is a package called redox persist that which is going to help us to be able to add this information in the local store so in the next section we're going to work on adding the redox persist to our application so see you in the next all right in the last section we have completed adding redox toolkit in to our application in this section we're going to work on adding redox process which helps us to store the user data inside the local storage so what we need to do is to add firstly the redox percents by installing it you just say npm install redox Dash persist and once you install it you need to go to let me show you let me close this one so we need to go to estore.js and here instead of having the user reducer we're going to combine the reducers first and then we're gonna persist this reducer using persist reducer function so here I want to create the combined reducer or we can call it root reducer so root reducer is going to be equal to combine reducer method which is coming from the Redux js4 slash toolkit as you can see from the top and then here we're gonna add the reducers we have but for now we just have the user reducer but later if you want to add more reducers you can add it here as well we just say user reducer once we have the roots reducer we can just create the persisted reducer we just say persisted reducer equals to the persist reducer method which is coming we need to import it actually we need to import persist reduce it from redox persist and then here we need to add two things first is the process gate we need to import persist gate as well uh actually we need to create it we don't need to import it so we just say persist gate or sorry persist config that is for next section so persist config and then we're going to pass this root reducer but we need to create this persist config the persis config is setting the name of the key in the local storage the version and the store the storage so we're gonna have a key for example we can name the key root we're going to pass the storage and also we want to set the version for example 2-1 and we can just close this and storage is coming from the we need to import storage as well which is coming from Redux process for slash lip or slash as storage so now that we have created this persisted reducer we can instead of just passing here the user reducer we can just delete this and add the persisted reduce so what we did here we just add the processor reducer and also we need to export something called persistor so we need to export a constant called persistor and this processor is going to make the store persist so and then we need to import the store versus a store as well which is coming from redox persist and we need to import it at the top so we have exported the persistor and also where we have create we have added the persisted reducer to the store now we need to go to main.jsx and we wrap everything with this persistor so the way we do that is to you can just come here and then we just say persist gate we need to cover it with persist gate which is coming from redox process for slash integration for slash react and we need to pass loading null and processor where which has which we have created here persistor so we need to import as persistor from forward slash redox store.js and once we do that we can just close this persist gate so now it's time to test our application with the persisted uh reducer and also with the redox persist so now we have if you refresh now our page you can see the user is the current user is still available because it's stored in this storage so let me delete this one and I want to show you where is it is located so this is if you go to application and you go to local storage and go to our URL you can see we have a key of root because as we defined here in the store the key of root and also we have all the information of the current user inside the local storage and if we delete this one for example and now we go to redox toolkit and we will refresh the page we can see the the user became null so the storage actually was helping us to keep the current user let me sign in again gmail.com and with the same password I'm going to copy this so once we sign in we can see that the current user is available here and if we refresh the page we can see that the user is still there and we go to the application we can see the user is saved inside the local storage and you can see the information here and this is not actually a crucial information and then because we are not storing any password or anything like that and this is related to the current user so it's not someone else information all right that was it for adding the Redux versus let's add this one to the GitHub repository here you can just say add redox persist and we can commit and push so that was it for creating this part in the next section we're gonna add so if you sign out here let me refresh the this page we want to add this continue with Google button in both the signing and sign up pages and we we want to be able to continue with Google we want to see this pop-up window and choose one of our Gmail account to be signed in and we get the information as well including the image of the user so see in the next section for adding the oauth component all right in the last section we have added the redox process in our application in this section we're going to add the Google oauth functionality if you look at the final version you can see inside the sign in and sign up page we have a button called continue with Google and if we click on it this is going to pop up a window which is going to ask us to choose one of our Gmail accounts for example if I choose this one we can see that we are redirected to the home page and also inside the header we have an avatar of that user we get the image and other things from the Google account and also you can see the data from the user here so we want to add this button first so let me bring this one to the right side and here we bring this one to the left side to see the everything in real time what we want to do is inside the components I want to create another component called or jsx and then here we can use RFC to create a react functional component and we want to add this one to both sign in and sign up pages so I can click on signing so where the place I want to add this button is after this sign in button so I want to add the oauth here so we just say o path we can Auto Import it by clicking on this and then we can just close it so once we do that we can see the oauth inside the sign in page we can do the same thing for this sign up page so we go to sign up page and after the button I want to add this oauth I'm gonna import it as well so if you test the sign up page as well we can see the oauth here so now we can focus on the oauth.j6 component so what we need to do here is to change the state to a button once we do the button the all off is going to be in the center and let's add some style to it for example I want to change the background color to red and then 700 we can just change the text to White we can add a padding to it padding 3 and we can make it rounded in the corner we just say rounded large and we can just make it uppercase so on the text I want to change the text to continue with Google also when we hover over it I want to change its opacity to 95 like this so that's it for the styling and also when this sub when we click on this button this is going to submit this form as well because it is inside the form if you look at the sign in the j6 the this component is inside the form so in order to prevent the submission we can just change the type of this button to submit and so it's it is submit by default we want to change it to button so when you change the button this is not gonna submit the form and after that we're gonna have an on click event listener which is going to call a function called handle Google click so let's create this function at the top so we're going to create a function called handle Google click which is in synchronous because we need to wait for the Google to respond to us we need to use a synchronous function and then we use a try and catch a statement let's close this one first so we don't get an error error I don't want to show any error to the user for the Google authentication I just console log it we can just console log could not sign in with Google and then we can pass this error here so we have handled the try and catch a statement now the the next step is to connect our we need to go to the Google console and create our Google authentication account so we need to go to Google and search for Firebase Google and in the search results we can click on firebase.google.com so here it's free to create an account and if you have an account this is going to open it here so I'm going to choose the Gmail account that's my Firebase is associated with so make sure you're connected to the proper Gmail account and after that click on go to console here you can click on ADD project and make a name for your project for example I just call it myrn estate and you can click on continue you need to remove the Google analytics you can add it later to your project and then here we click on create project so as you can see the our project is ready and then we can click here on continue so once you are inside this page you can just click on web because you want to create a web application so you click on web and create a nickname for your project I just can call it the same one main estate and you just click here on register app so after that we need to install Firebase and add this SDK to our project so we can just go to our project let me open this so you need to install it in the client side and then you just say npn install fire base so once you do that you can just come back here and just copy this code your API key and Etc and then you just need to paste it in a file inside the SRC folder you can create a file called firebase.js and you can paste the code here so you have the code here this is just initializing your app passing your API key and also exporting a creating an app by initializing this application we just need to export this constant to be to be able to use it in other places in our application and also we need to hide this API key so to make our application more secure if you want to share it with others in public places like GitHub you need to do it but we have an environmental variable outside in the root directory for the client side you need to make it inside the clients or another file so here we create another file called dot EnV inside the client folder and then here we just because we are using beat you not you need to write down read at the beginning and then underline and then you just say fire face underline for example API underline key and then you just go to firebase.js JS and then you can just cut this using command X and then we paste it here so the way we use it inside the wheat is to just say import and we just need to say import that meta dot EnV that's wheat and then the name of our variable which we have created here with underline Firebase underline API key and then we just add the comma here so now we are ready to use our application so we go back to the here and then we just click on continue to console once you're here you just need to click on disk authentication or here inside the build you can click on authentication and you can just click here to get it started with Authentication and then here you can just choose the provider you need in our case we need to use Google so we click on Google we click on enable and then here we just choose a name for our project I just call it a state f you can just choose your Gmail account here and then click on Save so once you do that and this is ready as you can see it is enabled you can use Google authentication in your project so we can go back to oauth.jsx and here inside the try we can just create a constant first we create the provider we just say provider new and then we just say Google Google off provider you need to call this and also we need to import it at the top so we just say import Google of Provider from Firebase forward slash off so after getting the Google off provider here we need to get the off as well so we just say const off equals to get off and get off is actually you need to import it to which is coming from Firebase forward slash off as well and we need to pass the app here if you remember now inside the firebase.js we have exported here the application that includes all the information for our Firebase config so we need to pass this one here so the Firebase is going to recognize which application is creating the request so we just say up and then we're gonna import it here at the top so once we have both of the provider and off we're gonna create a pop-up request Quest we need to create this sign up with pop-up so this one is going to gives us the results from Google and as you can see we we need to wait because it takes time to the pop-up comes and then we're gonna pass this off and the provider so let me console log first the result so let's try our application let's go to Chrome and here we click on first we refresh the page and then we click on continue with Google so nothing is happening now let's check the console for possible errors could not sign in with Google sign in with pop-up is not defined so we need to actually import the signing with pop-up as well I forgot to do it after that I'm going to click on continue with Google this is going to show us the pop-up window so two things I have to mention here one is you need to have at least two Gmail accounts to see this window otherwise if you only have one Gmail account if you choose a an account next time Google is going to remember that and doesn't show you this pop-up window anymore so so some people think they are getting an error but actually they only have one Gmail account so make sure to add at least two Gmail accounts so you always see this pop-up window the next things I have to mention is this error class origin opener policy error this is not the error for our application this is a error for Firebase and it is only happening inside the Google Chrome and other bro in other browsers you don't see this error and this is not for us and also maybe they're gonna fix it in the next version of Firebase so don't worry about this error as well so once you choose one of your Gmail account you should get the result from Google so we click on this account for example when we do it we get the information and there are a lot of information but the things we need is inside this user so we open the user here we see the display name the name is coming from Google email and also we get the photo URL here so this URL if we copy this URL and paste it inside a new tab so we need to remove these quotes and then if we press enter you get the email you get the image so so three important information we need to get is the display name which is which we need to create the username we need the email and also we need the photo URL okay and then we can send this data to the backend to create the app create the user so we got we have the results here instead of console logging I want to send the necessary information to the backend so we're going to create a response and we're gonna create a fetch request to forward slash API over slash off over slash Google I want to call it Google that endpoint and then we want to pass the information the information and first we need to set the method to be post for example the headers we want to set the content type to application Json and after that we want to send the data the data I want to send is three things I want to send the name which is the display name so resolve.user.display name then we want I want to send the email which is the result.user.email and then I want to pass the photo URL I just want to call this one for example photo and then this is going to be result that user.photo URL so we want to send these three information and also we haven't created this endpoint yet so first we create the front end and then we can just go to backend and create this endpoint because we cannot test the endpoint with the insomnia for Google we're gonna create it in front end first so once we get the result we can actually first we first thing first we're gonna convert it to Json and save it inside data and then we can as you remember inside the sign in after the request after the response we created a dispatch of failure and success I don't want to do the failure I just want to do this success one so we're gonna do the same things here I want to first thing first we need to actually import use dispatch from react router that's actually it's coming yeah it's coming from react redox we need to initialize it here and we need to on also import sign in success from redox forward slash user post slash user as slice so when they get the information here we wanna dispatch signing success and we pass this data so this is for front end so we have completed the front-end section so what we want to do next is to create the back end so for the back end we need to go to the API folder we go to routes first off.rowout.js we're going to create the Google route so it's going to be a post request and then the endpoint is going to be whole slash Google and then we just need to create a function inside the controllers auth.controllers.js for the Google one so we're going to export a constant called Google and this is a synchronous request we get the request response and next so first thing first we I'm just gonna close this one so we don't get an error and then here we try we use try and catch and insert the error we just use the next Arrow to send the error and then inside a try first we want to check if the user existed or not if the user exists we need to sign in the user otherwise we need to create the user so first we first we need to check if the user exists on us so we just say cons user equals to await and we use the user model that we have created and we're gonna search for this one using find one method and we're going to pass the email and if you remember we are passing the email inside the front end as well so we have the email so I think I I closed the unnecessary things so inside the here I'm gonna pass the email which is coming from request.body dot email and if the in if the user exists if this one is true we want to register the user otherwise we want to create a new user so for registering the user if you remember we just need to create a token and then save this token inside the cookie so what we can do here as you can see from the suggestion we create a token using jwt.sign we pass something unique which is the ID of the user we are getting from here and then we pass the jw2 secret key then we want to separate the password so we don't want to save the password we don't want to send the password so we're going to separate the password and the rest and which is inside the user.underline doc and then we want to create a response with and we're going to save the cookie with the name access token and we pass this token that we have created here and we set the HTTP only to make it more secure we send back the status of 200 and also we send back the user data which is we are getting here rest so this is for the first part if the user exists we just want to authenticate the user and make a signing the user otherwise we want to create the user but if you remember inside the model user.model.js the password is actually required but for signing up with Google we don't actually get any password from Google so if we do that if we're signing the user we get an error because the password is required so we need to actually create a password we need to generate a password like a random password and later if the user wants they can update their password themselves so first we need to create the password so here I'm just going to create a constant called generated password and then we can just use this method math.random we create a random number and then we're gonna convert this number to string and based on 36 36 means numbers from 0 to 9 and also letters from A to Z so this is going to be a random letter and numbers together and also we want to get the last eight digits so this is going to be like this so we're gonna create a random number and letters and because it has a zero and Dot we want to just get the last eight digits okay and then if you want to make like a 16 digits you can just add another one next to it so we just say the same thing so this is going to be a 16 character password which is very secure once we do that we need to actually hash the password because we don't want to just store the password as it is inside the database so we need to Hash the password we can use bcrypt.js.hash sync method to Hash this password which is generated password with 10 round of salt for creating the uh combining with the password and once we do that we can save the part save the user so we just say new user and we used our model that we have created so we have we're gonna save the username email and password first username is for example I get my username is like this for example a video so username actually should be connected not separated so in order to convert this one to the username we need to firstly make them lowercase and then connect them together and also I want to add some random numbers and letters at the end so to make them to make it unique so in order to convert this one to this we can use this method I'm going to show you now so we get the name first thing first we want to split the name so we split it by this space we just say it's plated and then we're gonna join them together without a space and then we want to make them lowercase so we just said two lower case okay and also we want to add some random number and letters at the end so we can just do the same thing so we can just copy this one just the eight digits we can add at the end or we can just say four digits it's enough so actually this plus should be here okay so now we converted the name to username with the random letter and numbers at the end we pass the email and also the password and also we need to pass the photo URL so what I want to add we just put a name here for example I just say you can say Avatar or anything something like that uh yeah we can call it Avatar and this is coming from here Arthur j6 the name was photo so this one should be the request.body.photo and also inside the model we don't have the photo here we don't have this Avatar so we need to add the Avatar here otherwise we get an error so the type is a string and also I want to add a default value for that so if the user doesn't have any image we want to have a an image for that for adding the default one you can just upload an image yourself to your database but because we don't have the data the that ability now you can just for now we just search for a profile image on the internet and just get one of these images for example this one we can just right click and get the copy image address and we can pass the address here so we need to close this and add a comma here okay so we have the Avatar now so let's test our application now let's complete this one first so we have just created a new user we need to save this new user using new user.save and then we want to create a token like before we just create a token using JWT DOT sign we pass something unique about this new user which is a its ID we passed the JWT secret key we separate the password and the rest and also we want to create a response with a cookie and with the name access token we pass this token that we have created with the HTTP only true to make it secure and also we have a status of 200 and we send back this Json so exactly what we did here so you could copy it easily so this is for the backend so we have completed the back end part we have save it so I think now it's time to test our front end so let's open the console so we are aware of so these are the actually uh band we were building we got these arrows that's not important let's refresh the page and then we just click on continue with Google and we just choose one of our accounts for example I choose this one but we are getting an error could not sign in with Google okay oh I I forgot to add this function from the controller inside the route so I'm going to add this throughout Google and import it at the top so let's try again okay we are not getting an error let's check the network and let's clean this one and request again okay so we get a 200 response status and also in the response we get the information of the user including the the username which is randomly created at the end we got the email and also the Avatar is the Google uh address so the Avatar of the user we are adding it here so that was actually successful for us so what we want to do here actually so when we do that we want to add this uh to the so what happened here actually we didn't have the user here yet because we haven't updated the header section yeah but we have the information and also if you check the redox now the current user is the user from Google so we have the username we have the email and also we have the Avatar so we have all the information necessary to add to complete the now the header section to get the image and also the profile section so and also when we the sign in is successful I want to navigate the user to the home page as well so we can add this one easily to inside all of the jsx after if the you everything is successful and we dispatch the user we can navigate the user to the home page so we can just import use navigate from react router down we need to initialize it here with just the const navigate equals to use navigate and then when everything is fine we can just navigate to the home page over slash so let's try again we just click on continue with Google and just choose this account this time so now we are redirected to the home page and there was no problem all right so that was it for creating the Google functionality let's add this on to the GitHub so we have the reference so as you can see so everything is secure and there's not that EMV here because we already have the dot ignore for the dot EMV that we have added this section inside the client so we can add everything to GitHub by clicking on this plus icon and then I just want to create a message we just say create and add all of components and we just click on Commit and push so in the next section we're going to update the header section and show the the user that is signing the Avatar of the user in this here and then once we click it we can see the profile page and also we want to make the profile page private so if the person is not signed in they are not allowed to see the profile page so see in the next section for this part of the all right in the last section we have completed the oauth Google functionality in this section we're going to add the user information inside the header of the project so if you look at the final version you can see that when you sign in with the Google account you see the Avatar of the user in the header and also inside the profile page and also this profile page is kind of protected for example if you sign out here and if you try to go to profile page for example forward slash profile we are redirected again to the signing page and the profile page is protected but if you sign in again we should see that we can have access to the profile page we can go to the forward slash profile so we want to do the same things in our project so we can go back to visual studio code so what we want to do is to go to header component let's let me close everything so we go to client folder we go to components and we choose header.jsx and then here we have this sign in at the end of the unordered list so we want to create a condition show this sign in if a person is not authenticated and show the Avatar of the user if the person is authenticated so we need to actually first thing first we need to import use a selector which is coming from react redox and then we can just initialize the user we can get the user here or the current user we have the current user so we can get the current user and which is we can use the use selector and we just choose the state user because the name of our estate is user if you remember we have saved the name user for the user slice so we have the current user and then we want to check here we create a condition we just say if the current user exists we want to show an image otherwise we want to see this Li here so I'm going to cut this one and put it here and also we want to cover the current user with the link here so I'm gonna put this link inside this condition so let me complete it first so we don't get an error so here we just add an image and then so this condition and this one should be outside sorry okay now for the source if you remember we have saved the name of the image inside the current user Avatar in the last section so we have the Avatar full alternative we just say profile and now if we check our website we see here the word profile I think the image is not showing so let me check the Redux now so the current user actually has the Avatar so let me check Avatar or Avatar a writer Avatar okay so now we see the image of the user let's bring this one to the right side so we can style it real quick so we add a class name to the image I want to make it rounded so we just say rounded pool and then let's make it a smaller we just say hit set the height to B7 and then width to the 7 as well and also we wanna set the cover we want to set the object to cover so to keep the aspect ratio of the image if you have a different aspect ratio and also when we click on this image I don't want to go to the sign in page I want to go to the profile page so I'm going to change this one to profile so this one brings us to the profile but if the person is not authenticated we want to protect this profile actually page so the way we can do that is to create a component here we call it private routes dot j6 you can just create a react functional component for now and then we want to cover our if inside the app.j6 we want to cover this profile with this private route so we create another route and then for the PA actually we don't need path for this one but the elements we want to use is this private route we have the the component that we have created and then we want to cover this route with that route so this is not a self-closing this one should be uh like that and then we want to close it like this so each time so now we see the private route instead of profile actually so inside the private route we want to create a condition so here as well we want to import the current user so we want to use that use selector to do that we just use selector which is coming from react redox and then we want to get the current user with just the current user equals to this and then here instead of just saying private route I want to say if the current user there is a current user show the children show these ones so show this profile page so in order to show the children we can use a hook called an outlet or the component called outlet they call it a component so we just say out let which is coming from react rather down so we're gonna if there is a current user we want to show the outlet otherwise we want to see the uh what we want to see here is to see the uh we want to navigate the user to the sign-in page so we want to import navigate here as well so navigate is a component too so the difference between the use navigate and navigate is use navigate is a hook but navigate is a component so we can use it as a component here we just say navigate and then we want to navigate the user to the sign in page like this so as you can see now we are inside the profile page but if the person is not authenticated for example if I go to inspect and then I go to the application and inside the local storage if I delete the user so if I refresh the page we shouldn't see we shouldn't have any user because the now the current user is null so if we now try to go to the profile page we are redirected again to the signing page because this page the profile page is authenticated but if you sign in again for example if I sign in with a different person we see the person in the app in the header and also if you click on it we go to the profile page and it's not for Tech we have access to the profile page because the person is authenticated and then if we sign out again we cannot go to this page so that was it for creating the updating the header section let's add this one to the GitHub so this one is update the header and make the profile page private and then we can just commit and push it to the GitHub and in the next section what we want to do is to complete the profile page UI so we want to create it similar to the final version so we want to have a title we want to have the profile image and also we have the ability to we have to add this kind of form to let the user to update their profile so see in the next section all right in the last section we have updated the header component and also we made the profile page private in this section we're going to complete the profile page UI so we bring the website on the right side and then the visual the studio code on the left side so we go to the profile the j6 and here what I want to do is to add firstly I want to add an H1 tag same profile but I want to bring them to the center so I add a class name here first thing first we want to increase the size of the text to 3 XL and then let's make the font semi-bold and then we can just bring it to the center using text Center and finally we can add some margin at the top and bottom using margin y7 and then what else I want to do is to add a form and if you look at the final version we have a form with three inputs and an image here so so we can put the image inside the form and have a gap between these image and the buttons and also the inputs so we can easily style them if you put them inside the form so after this H1 tag I want to add a form but we don't need any action for that and inside the form I want to add the image and the source of the image is going to be the same as we did for the header component so here we need to import use selector and this is coming from react redox after importing use selector we can get the current user and the source would be parent user dot if you remember it was Avatar Avatar so we can see the image now for the alternative we just say profile and we can just install it a little bit we can just make it fully rounded by saying rounded full we can set the height to for example 24 and width to 24. in order to keep the aspect ratio we can add the object cover also we can add it when we hover over it we don't see any pointing and we can just change the cursor to be pointer to add that effect and also we want to bring it to the center part before bring it to the center we need to add change the the display to flex in the form and also we make the flex Direction color after that we can here add the self Center to bring it to the center so for the text or the H1 tag we use text Center but for the image we use self-center to bring it to the center okay and also we can add some margin at the top of two so we add more space here after the image we're gonna have the inputs so we have the first input which is having the type of text and also we we can add a placeholder of for example saying username and then we can add a border for that so reporter should be inside the class name so let's add a border and then we can add a padding of three so I think that's enough for this section or we can just add a rounded large two to keep the consistency between the forms in our website so what we I want to do I want to add some space around it so you see inside this div we can add a padding of three so we add this heading to everything inside our application and also we can set the maximum width to be large so inside in the largest screen we limit the size of the input to be large and also we can bring it to the center using MX Auto like this and after that we're going to add more inputs so we can just copy this input two more times using alt shift and we're done and then we can just change the second one so I forgot actually to add the ID here so we need to add the ID here as well and then copy it so it will be easier so the ID for this one is going to be is username we need this ID later to actually Target these inputs and get the information from there so we can just copy them now and then we can just use Ctrl D to select both of these and then we change them to for example email the type here would be email as well and then finally we're gonna have the last one is which is password so we use Ctrl D to choose both of them and then we just say password and then we can add a space between them by simply going to the form and then we just add gap4 so that's it for the input so let's add the button to here so we create a button saying update and then let's add some styling to it we change the back background to a slate 700 and we can change the text color to white we can create a rounded corner by just saying around the large we add a padding of three and we can make it uppercase and then we can have a offer hover effect of opacity of 95 and when it's disabled we want to make it with the opacity of 80 percent so now we have the hover effect and everything else so after that after this button and the button is okay now we want to add this delete account and sign out I want to create this button later when we want to create the listing page and also this show listing later so we'll just focus on this delete account and sign out for now so outside the form we want to have a div and inside the div we're going to have a span saying delete account and then this delete accounts I think account has 2C and then here we add a class name we just make it with the text of red for example 700 and then we can set the cursor to be pointer so when we hover over it we see a pointing hand and also we can copy this one and add our sign out button sign out I'll sign up yeah I think we just keep it lowercase it's more beautiful and then we can bring them next to each other using flex and then we can add a space between them using justify between and we can add a margin at the top of five to bring it a little bit down so that was it for creating the profile page UI let's add this one to the GitHub so here we just say complete profile page UI and then we can just add this file and also commit and push to gear top so that was it for this section in the next section we're going to complete the image upload functionality so we want to add an image output functionality so we can change this image and also we want to connect this application to Firebase storage to be able to add our files to that platform so see in the next section all right in the last section we have completed the profile page UI in this section we're going to add the image upload functionality if you look at the final version if when we click on the image we can see that we see a pop-up window asking us to choose the image for example I can choose this image from my desktop and once you choose it this is going to upload the image automatically to the database and shows you image uploaded successfully and shows you the image here and once you click on update you can see it inside the header as well so let's bring our website here the first thing and this the first step is to add an input with the type of a file here so before the image I want to add an input with a type of file so as you can see we we have this one when we click on it we can choose a file but actually I don't want to see this input I want to click on the image and choose a file so in order to do that we can add simply and add a reference to this input so we can use use ref from react to do that so we just say import use ref from react and then we can just create a reference for example I call it file ref and we set the initial value to be null and once we do that we can just go to this input and refer to that reference so we just say ref and then here we just choose the file ref and then now if if you want to click on this using this image we need to go to the image to this image and add an on click event listener and then here so we create a callback function and then here we're gonna just say file ref dot click or dot current dot click which is safety and then we need to call this click so if you do that and now if we click on this image we're gonna open the we're gonna click on action in this input so they're connected together and also I want to remove this one I don't want to see this input so we can just create make it hidden we just say hidden and what else I want to do is to only accept images so we just say accept so over here we just say image and then forward slash as star so in this case this is going to accept only images so when you click on it uh let's see so only we can accept the images nothing else so if I go somewhere else we cannot choose them but actually as you can see the format is image files but you can choose the all files here and x and choose all files in Windows you can do it too so in order to protect our database we need to add some rules inside the Firebase so now it's time to create our Firebase storage and make it ready so we can connect it to our client side so we go to the Firebase if you remember we created the authentication now we want to add this storage so we go to a storage here and we click on get started here we choose the production mode because we want to add our rules but as you can see the default rules are not allowing reading or writing so we can just change the rules later so let's click on next and then here you choose the location of your storage can be anywhere near you and then because click on done so everything is ready now as you can see we can upload a file here for example I choose the same image I can upload it to the Firebase but we want to actually upload it from our website not from here the first thing is the first step is to add rules here so the default rules are actually not allowing everyone to read and write but we want to change this one so everybody can read it so let me Zoom this a little bit so we're gonna allow read but we're gonna allow rights only for people so we're gonna add a condition we just say if request dot resource and also this is not JavaScript so and uh this we can just say size less than two megabytes for example we just we can just say 2 multiplied to 2024 which is one kilobyte and again 1024 which is another one kilobyte so this is totally two two megabytes and also we want to add request dot resource dot content type this one I wanted to be matches so this should be plural to all images so we just say image forward slash dot start and if you click on publish so this rule is going to be applied to your application but actually it takes a few minutes to be applied so if you see an error just wait you another few minutes to allow these rules to be applied to your application and as you don't have access to my Firebase so I wanna just copy these rules and put it inside the visual studio code somewhere so later you can have access to it inside the GitHub repository we just say let me create okay Firebase is storage and then let me paste this one here and also we can just comment this one okay so you can have access to this one if you want to copy it from the GitHub repository so now we can have access and upload our file so in before doing that we need to actually add a piece of state that saved the file so here we just create a piece of State we call it file and the initial value for this one we call we just set it to be undefined because we don't have any file yet and then now inside this input we want to add an unchanged event listener which is going to get the event and then set this file set the change this file to e dot Target dot files and as we are uploading only one file we need to get the first one if someone choose the view file so we just say 0 here in this case we're going to any changes happen we can see it inside this file so if you now cancel out the file here and also we need to import this user State at the top so once we do that we can just go to our application Let me refresh the page and if you choose let me open the console first you go to console if you choose an image we can see the file name and the file so we want to use this one actually to upload this file to our Firebase so we can now add a use effect react hook to see the changes if there is a file we want to actually upload it so what we need to do here is to import firstly use effect and then here at the bottom you can just say use effect and if there is a an image there is a file we want to call a function for example handle file upload and then let's close this and also we want to add some condition we want to say if there is a file called this function and then we want to create this function here so first we create it so we don't get an error and let me see the error first I don't think we have an error set because this is we are building at the same time we see the errors so once we and also we want to pass this file so we want to pass this file and get it here so we get the file here as the input and also now we can do the stuff for example I can create a storage and the storage is going to be equal to get the storage and let's get this storage and get the storage is actually coming from uh we don't get a suggestion here we can import it from Firebase so we're gonna import get storage from Firebase forward slash storage and also we want to pass the app if you remember we have created an App inside the firebase.js here and exported the app So based on this one the Firebase is going to recognize us and knows which storage we want us to store the file so we created storage by get storage and after that we're gonna create a storage reference before doing that we want to set the file name so we just say file name and this is going to we can just select file.name but as we if we someone uploads two times one file so this is going to create the same file with two names that we cannot upload we get an error actually so in order to prevent that we want to make this one unique so we add the current date for here so we just say new dates dot get time so this is going to get the current type of time of the computer your computer and add it to this file name so you're gonna have always a unique file name so after the file name we're going to create a storage reference which is showing that which place to save the storage but actually I don't want to create any folder to it so I just set the file name so I'm going to remove these things and then we have this storage and also we have this file name and also we need to import ref from fibers forward slash storage after this we're going to create the upload task so we're gonna say this one is a method upload bytes resumable from Firebase forward slash storage because we want to actually see the percentage of the upload so we're gonna use this upload test which is going to get this storage riff and the file that we got from the input after doing that we can just use this upload task to get the actually the percentage and also the error and Etc so after that we're gonna say upload pass.on we want to actually track the changes like this estate change so we need to add a state change and then here let me close this first and then here we're gonna get few things for example we get this snapshot which is a piece of information from each estate change and then we can just record the progress which is the percentage of upload by just saying a snapshot that by by its transport for example from 2 megabyte already 10 kilobytes pass so this is that one by its transmit and over the total bytes which is for example 2 megabytes and then you need to multiply to 100 to get the percentage because that is something between 0 and 1 and also for now let's console log the upload is progress done let me show you here so let's open the console let's clear this and then we upload an image the image should be a little bit big so you can see the percentage if you choose a very small image like less than one megabyte you don't see the percentage so so you just choose an image between one and two megabytes when you choose that okay we are getting an error app is not defined so we need to import this app from Firebase that's the file that we have created that file partbase.js so let's try again so as you can see upload is zero percent all the way to 100 so it's this is working actually but I don't want to show a console log I want to show it here to the user so what I want to do is to add a piece of State here and for the piece of State we just say percentage or image or file percentage a set file percentage and the initial value would be zero but here instead of console login we want to set that file to this progress but this progress actually if you remember the value was like with with decimals so we want to make it rounded here as well so we can use math dot round to round this progress so now if we console log the file percentage and if we paste it again if you open the inspect Let me refresh the page and if you choose the image we can see okay what happened so the percentage was okay child path that split I think something happened I have uh maybe added something that unnecessary things I think it's okay so let's check our code again this is file percentage and set file percentage okay here we just said sit file it should be set file percentage okay so now if we try again yeah we see that we are getting the rounded percentage from zero to hundred percent all right so that was it for this one and also we can get the error here as well so after this a snapshot so this one is here okay after this one we're gonna get the error as well let me have to close this one and then I want to get the error we just say error and then we can just create another piece of State for handling the error so we just say cons file error or file upload error and then we just set the initial value to null or we can just set it to true and false we just say false and then we can just here we can just set the file upload Arrow to true so if an error happens we want to see it as well so finally after the error we want to get the file so we want to just create a callback function here and then we just use a method called git download URL and then we need to hit download URL and then we want to actually get this upload test that is snapshot.rev the file and then in if it if the upload is successful we want to get the download URL and then we want to set the download URL to a file to inform data because uh here let me complete it so here you can see so we're gonna have the image and also we want to have the ability to upload update the username email and password so we want to create a form data so that that con includes all these things so let me just delete this console log and also here we want to create another piece of State called form data and then the initial value would be an empty string sorry an empty object and also here we want to set that form data we want to actually get the previous form data for example any changes here like username and email we want to keep the track of changes of that and also we want to set the Avatar to download URL so which is we are getting from here so let's see I think we put some extra parenthesis here so here we close this one okay we need to actually I think we need to close the parenthesis here so this is this parenthesis and also we have here so this function we have okay we actually we we need to actually change this one to parenthesis and then here we change this one to a parenthesis now actually that was okay this here but I think this one we we can just directly return it because we don't need to do these things and then we can just delete this as well and then this one is for here and then we don't need this I think now it's fine okay let's see let me close this so you can see the error set file upload error to true so this one has a problem I think we missed a parenthesis here this one should be these parenthesis is missing here right here okay now it's working so let's see again the file I'm going to show you the file in full size okay so we have a file called handle file upload which is going to have these things and then once we create the upload task we're going to set the upper test.on and this one is going to track the changes and gives us this snapshot first which is we are going to use to create the progress set the percentage and then we get the error and finally we get the download URL so now uh we should check the we need to console log the form data to understand if it's working or not okay so let me open this inspect it we go to console we refresh the page first the form data is an empty object but if you upload an image after the percentage is completed we should see the change here that's still empty so let's console log the error and other things so we know that it's working or not so uh so let's console log file percentage and also we want to console log the file upload error all right so let's try it again so now the percentage is working and finally is uploaded and there's no error but we don't get the file URL here so it should be a problem here so we get it I think get download URL we didn't import it actually at the top here oh we have imported it that's fine what is this one so I'm going to delete this so upload by its reasonable ref and get download URL so for get download URL or protested snapshot.rev and then we want to get the download URL and we set it to form data we get the previous form data and set the avatar download URL so form data set phone data user State and here we don't get the change here after that when it's 100 percent so we need to add the console log here maybe oh yeah we we just created this file but we didn't do any export for this one so we don't get that one I think I find the error here so actually everything here should be inside upload task and we put this error everything outside actually so these parenthesis is for this one so this parenthesis should be outside here uh no outside okay let me check so and then we have a comma here and also comma here and we move this one so everything now is inside upload task so if you check now we can see even when we upload an image we can see that after the hundred percent we get the Avatar here the Avatar image and then if we just copy this one and then go to inside another Tab and paste it so let's see okay now we are getting there just the I think we didn't completely copy it so we need to go here actually copy it here paste it here and then we remove the port and if we press enter we see the image here so we have the URL now and the URL is actually saved inside the form data and then later we want to add other information like username email and password and once we click on update we want to update it inside the database now we want to show the percentage here to the user under this profile picture so let's go back to visual studio code and here instead of console logging I want to delete this console log and then after that after this image we want to have a paragraph and inside the paragraph We want to add a condition so we just say if there is an error so file upload error we want to see let's open this and then so if there is an error we want to just create a Spam here it's so in this spam we want to say error image upload and then we want to just install this one real quick for example I want to just set the text to be red 700. so if the error happens we want to see this one and then if the image percentage happened so we want to add another question mark we just say if the image percentage or file I think it was file percentage let me check so we have file pairs so let me copy this so if the file purse is more than 0 and less than 100 let me accept this one more than 0 and file percentage is less than 100 we want to see another expand but with the color green 700 and then here we want to say we create a back deck here we just say uploading and actually make this one a slate so it is this is going to be black uploading percentage and then if this is the if the file is storage if the file percentage actually if the file percentage is equal to 100 we want to show another spam with the color green this time and then we just say successfully uploaded or image successfully and then otherwise we just want to show an empty string so nothing at basically and then let's see so in order to fix this error we can just add a parenthesis here and then here and here as well I'm sorry not yeah it should be here okay now and this empty string and then we close it that is fine I think we don't need this parenthesis here oh this one should be a clone yeah not this one here so if this one is happening and then so first we create the condition and then and then add the old one here and then if there is this condition this one happened and then we add the ore here okay we don't need to parenthesis here actually and here and then okay now everything is working now so if the there is an error we're gonna show the error image upload with the text red if the file percentage is more than zero or less than 100 and less than 100 we're gonna say uploading ball percentage otherwise if the file percentage is equal to 100 we want to set it saying image successfully uploaded with the text green and finally if there's no condition we just say empty string let's test this one so it's already working image successfully uploaded from the previous image so let's upload another time so uploading percentage and image successfully uploaded and if I choose a wrong image for example if I choose this mp4 file by just saying all files and then I choose this MP4 so this is going to upload it but finally we're gonna get an error from Firebase so okay we got the error here error image upload so so we have to set the actually the successfully this one shows only 100 but you need to add a condition here if there is no error we have to see that one but actually this is going to happen uh each time so 100 that's fine it just shows one second and then it's gonna fix it so we don't need to worry about that also we want to bring this one to the center so here I just want to add some styling to it we just say text a small and also I want to bring it to the center just say self Center like this so let's create this image upload uh more specific for example here I want to add another thing you just say image must be less than two megabytes okay and then also when we upload the image I want to see the new image here so when we upload it like this and we want to see the new image here so the preview the image so what I want to do here inside the image I want to create a condition if a form data dot Avatar exist I want to show that one otherwise I want to see this current user.avatar so let's try it again so when we upload it I think after a few seconds we're gonna see this new image so that was it for image uploading functionality let's add this one to the GitHub so here we want to add this file and create a message for that I just want to say complete image upload functionality and we can just commit and push it to GitHub all right so that was it for image upload functionality in the next section we're going to create the user update user API route so we can create it in the back end and update the user there so see you in the next all right in the last section we have completed the image upload functionality in this section we're going to work on creating the user API route the update user API wrap so we need to go to visual studio code and we go to the API folder we can just go to routes and to user.rout.js remember we have created a test API route now it's time to create the update API route so here we just say router dot post and then we want to add that URL which is forward slash update and endpoints we need to add the ID as well because we need to know which user you want to update so we add the ID and then we want to just call it function called update user inside the controller folder so we need to import this one from the user.controller.js so we need to just create it here so after that we're gonna export another function called update user which is going to have a request response and next to handle the errors and just we just close it for now and then we can just import it here by using Contour space so we just created the function but for updating the user it's not like signing up or signing in we have an extra secure checking what we need to check is to check if the person is authenticated or not so when we sign in the user we create a token inside the cookie and now we can use that token to verify the user so we know which user we are updating so if we are updating a wrong user and we are not authenticated we should get an error and so we're gonna create another function called verify token and then before going to update the user we want to check the person to be verified or not so let's inside the utils remember we had arrow.js we can create another file called verify user.js and then here we're gonna export a function we just call it verify user or verify token and this is going to take their request response and next as well let's close this and then here we want to check first the token we want to get the token from the cookie but in order to get any data from the cookie we need to install another package we need to install another package in the back end called cookie parcel so inside you need to go to the roots directory because we are working for the back end so we need to go back here using CD dot dot and then here we're going to install that package which is Cookie parcel so once you just install it you just press enter to install it and then you need to initialize this package you need to go to index.js and at the top we're going to import the cookie parcel so we need to import it at the top so we just say cookie parcel like this from cookie parcel and then after we have created our app.use somewhere here you can just add that one you just see app that use cookie parcel now you can get the information from the cookie so here inside the verify token we just say const token equals to request that cookie.token but actually it's not token if you remember inside the cookie we have put the name of the token access token not just only token so we need to just change its name to access token to be able to use it it was access on the line token so once we get the token we can verify it first we wanna just say if there is a no token we want to just create an error if you remember we have just we can just do it like that we can just say return uh we we can use the middleware that we have created using this next and then we can use that arrow.js we have created a function called handle uh error Handler we can use this function and then we just pass the for example we just say 401 a status code and we just say unauthorize or you are not authorized something like that and then after that if there is a token we want to check if the token is correct or not we just say JWT we can use JWT we need to import it at the top so we're gonna import JWT from Json web token and then here we just say JWT dot verify and then we're gonna verify this token that we get from here we need to pass the JWT secret key which is inside the process that EMV dot uh which is just check okay we just save it with this name jwc underline secret and then this is going to gives us two things like error and also we can get the user as well so once we get these two information first we can check if there is an error we can return a new error for example with a status code of 403 and then we can just say forbidden or token is not valid you can just say pop it in that's fine and then if there is no error we want to send this user to the next things for example if you remember after this verify token so we need to actually import it here verify token from this function after that we want to update the user so we want to send it to the next next function so here inside the verify user so we want to send the information so we want to send it inside the request so we just say request that user is equal to this user that we are getting from the cookie so we get the user data and then send it from this section so actually it's not a user data it's just an ID we have saved the ID of the user but we just call it user and then we're going to use this ID to verify the user and then when we just record this one we're gonna go to the next which is here next update user so first we check if we reach to this point and everything is okay we're gonna save the user to the request and then go to the next section which is update user and also we need to close this so we don't get an error so I think it's ready now to work on the user dot controller section so here inside the user.controller.js we're going to check if the we get a request remember inside the verify token we have the requested user which is this user so if this requests that user dot ID is not equal is not too equal to the ID we get from here this ID which is actually we can get it from requests.pramps.id because that's a parameter of the endpoint so here we just say if this one is not equal to this request that params that ID and then we can return an error uh with the a status quo of for example 401 and then we just say you are not you are not authenticated or you you can only now you should say you can only update your own account so if otherwise if the user is correct we wanna just update the user so we just create a try and catch it statement first and then here we're gonna cache the error we just say next and then we pass this error to handle the error and then here first thing first if there is a if the user is trying to change its password we need to Hash the password so we just say if there is a request that body dot password then we wanna what we want to do is to encrypt the password we just and then we just request Authority the password is equal to remember decrypt dot decrypt.js.hash sync but we need to import the decrypt.js as well we just say import decrypt.js from decrypt.js and then here we just say decrypt.s dot uh I think hash sync you can use hash sync and then we can just pass this request the password and then the number of salt the number of rounds for the salt here so this is going to be a hash password and then after that we're gonna update the user we just say cons update okay the user we create a constant is equal to a weight and we want to use the model that we have created so we're going to import the model as well for the user and then we want to use a method called find by ID and update to update the user so this is going to take few things first things first we want to pass the ID so we want to know which user we want to update you just say request it's inside the params so we just say request.pramps.id okay and then we want to pass the data but we as some datas are available and some datas are not available for example the user might change its image username but doesn't want to change its email and password so it's not always the data is completed so we need to actually use a method called set to do it so set is going to check if the data is is being changed it's going to change otherwise it's going to ignore that data so let me show you what I mean by that so here we're going to use the set method so some people actually use this set and then just send they request that body that is wrong because uh people can send another information that is not in the form for example in this form we don't have is admin but in insomnia for example if you want to update the user you can add the East admin true so the person can make himself add me by just sending their body so you need to specify all of them to not be able to get an error or a person can hack your database because admin has more Authority than they can do more things so they can change themselves to admin so as you can see it's very common and even the GitHub co-pilot is suggesting me request that body but that is actually a mistake so here we just say they can have a username they can update their username they can update their email that's fine they can update their password and also they can update their image which is Avatar okay so we're gonna have these things and then as we are using a weight we need to change this one to asynchronous so now we have just set everything here the the another things we need to add here after set and after here we need to add something called new true so new true is going to actually return and save this updated user for the with the new information not the previous one otherwise if you don't add this one you're gonna get the previous information for your response so when you add the new now after that we can firstly first we want to separate the password and the rest so we can do that by just separating the password and others or rest and then we can return with the response with the status of for example 200 and then we're gonna return a Json we can just send back the all the this rests like this so now our API route is ready to be tested so what we can do we can test a bit insomnia so in insomnia if you remember we have created a off folder so we can create another folder for a user and then inside this folder I'm going to create a new request let's call this request let's change this name to update user and then this is going to be a post request and then the URL is going to be local if you wait a little bit they're going to suggest you your previous one this is going to be from forward slash API forward slash user and then update and also we need to if you remember we need to pass the ID of the user so we need to sign in first for example this user I'm gonna sign in with this user okay this thing they couldn't connect to the server let's check maybe there is an error okay we have an error here so let's check so cannot find the module user that model okay I think we didn't add the JS yet okay that's fine and now it's working let's try again so let's sign in as you can see I'm getting the data so I need to just copy this ID to be able to update this user so I go to the update user and add this ID at the end and then inside the body I'm gonna send a Json for example inside the Json I'm gonna update the username for example I just say uh and then if this exists we're gonna get an error otherwise we're gonna it's going to be okay okay so the username is now second okay uh and then the status quo is 200 we can update anything you can just update only email for example email is going to be sand at gmail.com so when you send you see the email is updated so everything else is the same let's try to get an error for example I just uh change this ID for example I changed one to two and we send we are getting an error server return nothing let's see the error here our error Handler is not defined so actually we didn't import this error Handler okay so this one should fix the problem and let's try again okay now we are getting an error with the status code of 401 and saying you can only update your own account so the error is actually working as well so if I return this one to one this one should work okay if it is working fine okay that was it for of the creating the updates user API let's add this one to the GitHub so we add all the files and create a message and create user update API and we can just commit and push to GitHub or we just say API route here or create update user API or user updated API it doesn't matter it can be the same API okay we can commit and push to GitHub in the next section we're going to actually connect the front end and the backend so we're gonna add the event listener for these inputs we are going to complete the front end and we're gonna connect it to the API and really we can update the user from the this section from the from the client side so see in the next section all right in the last section we have created the update user API route in this section we're going to complete the update user functionality so let's uh go to our Visual Studio code we go to client side and then here we go to pages and profile.jsx let's bring it to the left side we can just close this one for now and bring this one to the right side if the things I forgot to do here is to show the username the current user which is authenticated we see the image but we don't see the username and email so it's very simple to do that you can just go to the input and just add a default value and this is going to be we can get it from the current user for example that username as you can see now it's appeared uh okay and then for the email we can do the same thing product user.emap and then we want to add an unchanged event listener so we do some changes here we want to save it to the this piece of State called form data so we want we need to add it to the all the inputs so I'm going to use the alt to use the like a dual cursor in the input I'm going to add the unchanged event listener to all of them and then this is going to call a function called handle change and then we need to create this function at the top before the return which is a const handle change and then we can simply set the form data let's see what's the error now okay so the error says form data is not defined so where is it okay so let me complete this one first so we set the form data we get the previous form data whatever we have and then we just say e.target.id and it's equal to either targeted value So based on the ID of the input we're gonna extract the changes and put it inside the form data so what is this error for and then so which lines 70 ah okay so here because we don't uh we are not authorized or we have the form data here at the top so we can just protect this one maybe form data is not defined but actually I defined it at the top oh what is this one how it happened here I guess I think it auto correct just created some mess here uh sorry about that I don't know what happened why this one is changed so now if you refresh this page we don't see an error and then if we console log the form data if you console log the form data and then we see it here and then if if you do some changes for example I choose if I want to change only the username for example I delete this one you see that only the username is changed and if you actually for example if I upload an image and then the image is going to be added to this form data as well so the form data is going to have the username and also the image so whatever change we want to do now we have inside the form data but if you don't want to change our password that's fine we don't need to add it but if we add it here we can see that the also the password is going to be changed as well so we have the Avatar password and the username so all the changes is going to be tracked so we have the form data now we want to actually now send the form data to the backend to be able to update the user so let's delete this console log for now and then we want to add inside the form we want to add an unsubmit event listener and which is going to call a function called handle subit and now we want to add this function here we just say cons handle submit and first we want to actually prevent the default behavior of the submission which is refreshing the page by using e dot prevent.to prevent default and then what we want to do here is to use for example first we want to use a try and catch a statement and then inside the error we want to dispatch an error if you remember we were using dispatch in signing pages but in the profile we don't have any uh reducers so we need to go to [Music] redox folder let me close this we go to redox folder we go to user user slice and here we're gonna add three more uh reducers for our update user so this is going to be for example update user as start we track the loading effect which is going to set the loading to true and then we're going to have the update user success which is going to have a state and action and then the current user is going to be action.payload which we get from the backend as a response and also we set the loading to false and also we set the error to node if we have an error previously we're going to set it to no and finally we're gonna create the failure which is going to have the state and action and a state that error is going to be action.payload and also we want to set the loading to false as well so we can use these three we need to export them first so we're going to export the updates user failure update user success and update user stock so once we export them we can use them inside the profile.jsx so I'm going to close this and then here at the top I want to import it so I'm going to import these three update user and Etc we just say update user stock which is coming from the redox user user slice and then we're gonna have the update user success and also update user failure so once we we have these things and also we need to dispatch them so we need to actually import another package another hook called use dispatch from react redox so I'm going to import that one too so just say import use dispatch from react redox and then we're going to initialize it always you need to initialize use dispatch just say dispatch equals to use dispatch and then now inside the error we can just dispatch the failure we just say dispatch user update user failure and then we want to pass this error so actually we need to pass the message I'm not sure about that but let me check this in the signing but we did all right we we have just passed the arrow.message so we just passed the error. message and instead of no the error is going to be the error we get from the this error so and then inside the try we can do the request first thing first we want to dispatch the user a start so the loading effect is going to start and then we're gonna create a response we use a weight a fetch method and the endpoint is going to be API for slash user both slash update and also if you remember we had an ID we need to pass the ID to so we can just use the backtick here and then we just add the ID here at the end so we just say forward slash a dollar sign and we just passed the current user that underline the ID so we have this one the current user and the ID is available there as well so this current user actually we got from using use selector so this is the from the react every docs every docs toolkit we got this one so once we have this one we're gonna first thing first we wanna say that the method is going to be post method and then we're gonna pass the header content type to be Json because we are sending a Json and then we're gonna send the body and the body is going to be the form data if you remember there we just save everything inside the form data so we can just send the form data so let's close this one so we don't get an error and also if we use a weight we need to change this to asynchronous okay and then after that we're gonna check first we want to get the data by converting it to using the Json and then we just say if the data the success is false we're going to dispatch the user failure we're going to pass this data that's not data the message let me check in the sign in yes it's stated that message okay so data that message is going to be our error message and we're going to return so we're not going to go to the next line and then if everything is okay we're gonna dispatch the user success and then we're gonna pass this data okay now uh I think it's time to test our application for example I want to change this one to for example I change the N to this number let's click on update and if you refresh the page you can see that actually it is updated in the database and also we can test it in the network we can do it again for example I changed it to 333 and if you do the request you can see we get the response with the new username let's test the changing the email for example I just add a number one here I click update we got another response with a different email let's change the password for example I choose some thing here oh actually the password is you can see the password so the type is not correct here so in the profile the type for the password it should be password Here I forgot to change this one password okay so you shouldn't see the password and then when we click on update we can see that now we got the same result because we don't have the password but actually the response was okay if you check here if it's okay uh so that was successful and also let's change the image for example I change it to this image and then once we do update we can see the new image and if you refresh the page you should see this image and also in the Avatar here inside the header we see the new image so that is working as well the other things I want to add is the loading effect so when we click on update I want to make it disable and also show loading similar to the one we did for the signing page so here uh if you remember we got the current user we can get the loading as well loading and error and then inside the button inside the this button we're gonna instead of saying just update I want to create a condition if the loading is true we want to see loading otherwise we want to see updates so now if you click we can see the loading and also we want to make it disabled so you can just say disabled and we pass this loading so when it's loading this is going to be disabled so we cannot click on it so that was it for the button we want to see the error as well so we want to add some message at the end here inside the span after this div we want to see the error so we're gonna have a paragraph uh we wanna if there is an error if there is an error we want to see the error that I think we just want to see the error because it's already a message and if there is no error we want to just ignore we just say empty string and then we just add a class name for that we just make the text to be read 700 for example and then we can add a just merging top of five folder so let's try to get an error how what we can do to get an error here for example if I remove the cookie we should get an error so we go to application and inside a cookie if you delete this cookie we should get an error because we are not authorized so let's try to update as you can see oh we are still getting error handle it's not defined why actually I've fixed this error maybe the error is still there let me uh let me sign out first again by deleting the local storage and let's sign in again with my one of my Gmail accounts for example this one and here uh let's first update something we can see that the username is updated now if try to delete the cookie and then we get we click on update okay that seems like a there's something wrong with the API still so inside the controller user.jsx our error Handler is imported at the top so so let's write in insomnia let's sign in again with the user so this user the email is changed to sand okay and then we can use this ID to update the user so let's update its username okay it's working and then if we don't have the cookie uh so let's create an error here for example I change this number to 3 Ascent so the error functionality is working actually here that's fine inside the here let's change this inside the client side in the profile uh let's for example I I just add a number at the end of the ID so we have an wrong ID here and then let's sign in again let's sign in again and then what we do here is to try to update because the ID is wrong we should get an error okay the error here is fine we just get you can only update your own account but when we don't have a cookie we should get a different error actually okay now I understand where we made a mistake okay sorry about that so inside the API inside the utils and to verify a user here I didn't import the error Handler okay now understand so error Handler from arrow.js that's fine so now let's try again to delete the cookie where's the cookie here let's refresh the page okay we delete this cookie now and then we try again to update okay now this time we are getting the correct unauthorized error okay it's good we fixed that one so and then uh what else we can do here and also if the update is successful I want to get the message update a user is updated successfully as well so what we can do here inside the profile we can add another piece of the state we just say update success and then we set this one first to be and we can just say false but we can just set it to be and I think you can use it forces okay and then once everything is correct and after the dispatch we're gonna set the update successor true and then at the end here we're gonna create another paragraph like this you want to make it green and then if the update success is true we're gonna say user is updated successfully otherwise is going to be an empty a string Let's test this one so now if we try to update something for example but actually we didn't fix that problem here I have just added this number in unsubmit uh this number we're gonna fix this first and then also we don't have the user because I deleted the uh I deleted the cookie so we're gonna go to application again I want to delete the user because we don't have sign out functionality I'm using it like that so we need to delete this user and then we can just sign in again okay now let's update for example another number when I click on update now we get our user is updated successfully so that was it for this part so now we can actually add this one to the GitHub so we have created the updated three files and then this message for this one is going to be complete update user functionality and then we can just commit and push so in in the next section we're going to add the delete user functionality so if you look at the final version we have the delete accounts when we click on it we're gonna sign out and also delete the user inside the database so see in the next section all right in the last section we have completed the update user functionality in this section we're going to add the delete user functionality the first things we need to do is to create the delete user API route so we need to go to visual studio code and we go to the API folder we go to routes and we want to create this route inside the user.rout.js and we can just copy this one and this is going to be delete and also this is a delete method so we just change this one to delete and also this one should be delete user let's create this function inside the controller so we just go to user.controller.js and we click create this function delete user let's close this and then we can add it here we need to import it at the top okay so inside this we're gonna first thing first you want to check because we want to check the token first so and then we just want to say if the requests that user.id is not equal to request.preams that ID so params is here this is the param and then this user ID we are getting from the verify user here from the jwc so if this one happens we want to return an error using our middleware and a function we just said you can only delete your own account okay and otherwise we want to create a try and catch a statement and we just create the error here and then inside the try we want to delete the user so there is a method we just use our model and then we use a method called find by ID and delete and then we're going to use the parameters to delete that user and finally we want to just response with this status of 200 and then with the Json we can just create a message here user has been deleted we can test this one first inside insomnia so here inside the user I'm going to add or we can duplicate this one and this is going to be delete user and this is going to be delete as well we don't need to send anything actually and then we just can send so cannot post here so we're getting an error because it's not recognizing this URL user delete let me check so that is the user and this is a delete delete and then the ID so API user delete so that is correct and then let's see we are getting so there's no error here okay so actually we have to change this post to delete as well so let's try again so you can see I just put I don't know what's the this ID you just say you can only delete your own account so we need to sign in first with the one account for example this account and then we can just get the grab this ID and then we delete the other account so I'm going to paste the ID here so if you try again you can see the user has been deleted and then if you try again to sign in we should get an error because this user not found because we have deleted it already from the database so we have created this API route now we need to go to the client side inside the profile dot jsx inside the pages and then we want to add an on click event listener to this s-span same delete account you just use this on click and then we just call a function called handle delete user and then we need to create it at the top so handle delete user and then first first let's close this and then we use and try and catch a statement and inside the error we want to dispatch the error so we need to create actually the reducers so we go to redox user user slice and then here I'm going to add that delete user let's just say start and then we're going to add the success which is making the current user to null so that's the only difference and there is no action for the delete success and finally we're gonna have the delete failure which is going to set the error to action.taylor and then we're going to add these three here delete user delete success and delete the start so we can just now dispatch you delete user so I'm gonna we have to import that so let's just say delete user failure so we import it at the top let me see okay it's imported here and then we want to pass that message just say arrow that message and inside a try first we want to dispatch the start which is a delete user start you need to import it and then we want to create the request we create the response a weight and then the forward slash API for slash user for slash delete and also we need to pass the ID of the user like this the method is delete and we don't need to actually set any header or anything like that or form data and then we get the response if the response the data the success is false we're going to dispatch the delete user failure and pass this message and return and then otherwise we want to dispatch the success this flash user truly delete user failure sorry success delete user success finish imported and pass this data so let's see what's this error okay I need to close this here so we should try it now and also I wanna before to try I want to add the uh okay so here we need to add some message or instead of message because this is going to log out the user actually we don't need to see a message because the person is going to be redirected to the signing page but for the error we just set the error this delete user failure and also we are showing this error 2 here actually so we don't need to do anything for the error so now let's try it again let's refresh the page and if I click on delete account you can see we have redirected to the signing page because the person is log out now let's see this one in action in the network so let's sign in again with someone like this so we go here refresh the page we clean this one and then if I click on delete we get this user has been deleted and with the status code of 200 so and also if you check the application you can see that the current user is now inside the local storage and let's see the cookie okay we still have the cookie for the user we can delete the cookie as well and we can do that one by going to let's go to the API controller user.controller after this one we can just delete the cookie as well so here after the Json we can just say clear cookie and then the cookie we want to clear is access underline token actually even we don't delete clear the cookie it's still that cookie is not valid because that user is deleted and if they make a new account they get a new ID so that cookie is actually not valid but you can delete it by this method too so let's try again so we can sign in with Google we choose this account let me clear this by refreshing it so now we have a token let's delete the account and I will refresh the page okay we still have the cookie access token access on the line okay let's see if you're getting some error here cannot set the header after the they are sent to the client uh okay so I think this response we need to make it separate let's delete the cookie first we just create a response here let's try again so we have this cookie let's try to delete the account okay now the cookie is clear so actually you have to make it before they're sending back the Json so that's a rule here it said you cannot send a header after the response so first you need to clear the cookie and then create the response okay so that was it for the delete user functionality let's add it to the GitHub so and then we just create a message add delete user functionality and we can commit and push together so in the next section we're going to work on the sign out button you're gonna sign up the user it's very similar to the delete account so see in the next section all right in the last section we have completed the delete account functionality in this section we're going to add the sign out user functionality so it's very simple to the previous one we just need to go to the first we want to create the back end so we go to the API we go in this time we go we want to create it in the authentication so we create a new route in the auth.rout.js so I'm going to add another router and as we are not sending any data we can just create a get request and this can be you just call it sign out and then we want to call the function called sign out so let's create this function inside auth.controller.js so here we're going to export a function called sign out and then we're going to import it here okay it's very simple to do that actually we just need to clear the cookie that's it so we just say we're going to add a try and catch a statement and then show the error if an error happened and inside a trial you can just say response we just say clear cookie we clear the axis underlined okay and then we can just create a response which is the user has been logged out like this and then we can just go to the front end to the client side again if you go to the pages profile.jsx and then this time we want to add the on click events listener to the sign out button we just call it handle sign out and then we can just click create this function at the top so and this is very very simple as well you just need to we can just add a try and catch a statement and this one should be a way to because we need to wait for the response and then we add a try and catch a statement and here we just we can just console log or we can just uh yeah we can just create a dispatch and error 2. so let me fix this one this one is not correct uh this one should be a sync okay inside the try we're gonna just say await or you say cons response equals to a weight we're gonna create a request to API for slash off forward slash sign out and we're not going to send anything or the method is get so we don't need to mention the method get so default is get request and also we can convert the response to Json and say if the data is data the success is false we're gonna just return now but we want to create this sign out Redux as well the reducer so this is exactly the same you can just copy this one and then change this to logout of sign out so this is exactly the same and then we can just export it so inside the profile.j6 the first we want to start we just say sign out yes let me see what okay sign out user as start let me copy this so sign out video start we're gonna dispatch this one but we need to import it at the top and also close this and if there is a it's not successful we're gonna dispatch delete user failure and we pass the message and also we want to do the same things in the try and catch as well and if everything is okay we're gonna dispatch the success and so everything would be similar so let's try this so let me sign in again let me open the console let's refresh the page if you sign in with a user and then we're gonna sign out so when we click on sign up we are redirected to this sign-in page so it will be a log out successfully and if we check the application we could refresh the page you see there is no cookie now so the cookie is cleared as well you can also check the network to be sure so let's sign in again with another account okay let's refresh the page let's clear this and if you click on sign out now you can see uh with in the response we just get the user has been logged out all right that's it for this one let's add this one to the GitHub so I'll just create a message you just say add sign out functionality and we can connect to push in the next section we're gonna work on the create listing section so we're going to work on the API of the creating a new listing and also the UI of the create listing and also we want to connect them together in the following sections so see you in the next section all right in the last section we have completed the sign out user functionality in this section we're going to work on assorting creating the listing API route so we want to create a new listing in our application so if you look at the final version as you can see we have a button here inside the profile so when we click on it we can just be redirected to a new page and here we can create our listing but before creating the client side we want to create the backend for our project we want to create the API routes for the create a listing so let's go to visual studio code and the first thing first we need to go to index.js inside the API folder and here we want to add a new route let me copy this and the new one is going to be listing and this is going to be listing router so we need to create this route in our application and then import it at the top so we go to routes folder we create a new route we call it listing Dot route.js and here we need to import Express so we import the express from Express and using this Express we're going to create a router and the router is going to be equal to express that router with uppercase R and then here we just say router and the first one we want to do is to create a route a listing so this is going to be a post request and then we just say if we the request is four slash create we want to create it and once we do that we want to call a function called create so this or we can just create listing and this one is going to be we need to create it inside the controller folder so we just go to controller and then create a new file we call it listing dot controller .js and then here we're going to create our function so the first function is going to be called create listing and this is going to be synchronous because you need to wait for the response from the mongodb and then we're going to use the next to middleware we're going to use our middleware to handle the errors so here first we close this and then we just can use try and catch a statement and in the catch we're going to use our middleware to handle the error we just say next error and here inside a try we're gonna first thing first I wanna add this function here inside the route before I forget so I'm going to import it here at the top and this one should be listing that's controller.js and also inside the index.js I need to import that router so here I want to import the listing router from four slash routes for Slash listing.rout.js so listing router and I think we already imported so listing router listing router it's all correct if we get an error later we're gonna fix it and we need to add a comma here for create a listing and also we want to check if the person is authenticated or not so the person cannot create any new listing if they are not authenticated so we're going to use our verify token function from our file utils verify user.js we have created a function to verify the token of the user so we need to verify the token and then create the listing and let's continue this inside the try we're gonna create the listing we just say listing and we just say a weight we want to now we need to create a model for the listing so similar to the one we did for the user we need to create a model for the listing as well and add the rules for that in our application so let's go to models and here so let me delete or let me complete this one so we don't get an error so we just use the listing and then and we're going to use a method called create inside the listing and we need to pass this request.body which is the information we get from the browser and now it's time to create this listing and inside the models we're going to create a new model called listing.model.js inside the model we need to first thing first we need to import Mongoose from Mongoose and then we want to create the listing schema so we just say listening schema and this is going to be equal to new mongoose.schema and then what we want to add actually some rules we want to add the first one so this is an object of rules and then first we want to have a name for our listing so for the name I just want to keep it simple just to type is going to be string and then we want to make it required after that we want to have the description so the type is going to be a string and then required as well then we want to have the address which is going to be the same a string and then required after that we have the we have two prices regular and the discounted price so we just say regular price and the type for that one is going to be number and then also this is going to be required after that we want to have a discount price or discounted price it's it's the same and then here the type would be number and required after the discounted price we're gonna have the number of bedrooms or bathrooms so we just see a bathroom for example we just say bathrooms type would be number and required and then we have we're going to have bedrooms so after the bedroom we're gonna check if it's furnished or not so we're gonna say furnish and the type is going to be Boolean it can be true or false and it is required and then we wanna say if it has a parking or not we just say parking and then it can be true or false and required so after the parking we're going to set the time so the type of the place it can be a rent or sale so the type is going to be string and require and then we want to add the is it offer or not we just say if it's offer and it can be this one should be the type of Boolean and also it should be required after the offer we're gonna have the image URL so we're gonna just save the images inside the database the URL of them so we just say image URLs and this is going to be an array because it has more than one image and then required as well and also we want to know which user created this listing so we want to add the user data so we just say user ref here and then the type for this one we just set it to be a string and required so this is going to be a string and then required and that's it so these are for our listing and then we want to save the time of the creation and update so we're going to add uh timestamps true to save these two datas and then after creating this schema we're going to create the model which is a cons listing so we call the model listing we use the Mongoose that model to create the model and then we just set the name of the uh this one to listing but this one should be like a singular and uppercase and here we're gonna pass the listing a schema that we have created here at the top so after that we're going to export it as a default so we can use it in other places in our application for example now we have created this one we can import it here inside the controller and don't forget to add the JS in the back end so because we don't get an error so after the creation of the listing we're gonna return this listing we just return with a response of 201 which means something is created and then we can just send back this listing we can just pass this listing okay so that's it we're gonna create the listing and send it back to the user let's try to test it inside insomnia and if you have a problem we can fix it that time so we're going to create a new folder inside insania and this folder is going to be called listing so the process is you can see it's very similar so if you have learned the previous part definitely you can create the new parts because it's completely similar and then here we're going to create a new request HTTP request you're gonna set the name of this request to create a listing and this is going to be a post request let's create the address so localhost 3000 so I'm gonna just change the it off to listing to because it's in the API for slash listing forward slash create and then we're gonna pass the data so the data we want to add it includes the name and for example I just say test and then if you remember we had the description [Music] this one we just hit test as well then we're gonna have the address I'll just say this so let me copy this one so we're gonna do the others quickly so name address description after description uh we have address then we're gonna have the regular price and this is going to be a number for example we just said 500 and then we can just copy this paste it here this is going to be the discount price after that we're gonna have the number of bathrooms so this is going to be bathroom we just say five bathrooms the next one is going to be bedroom actually it's bathrooms and bedrooms and then we're going to have the furnished which is a Boolean so it can be true or false so we just save true and then we're gonna have parking as they are required we need to add them all of them otherwise you can just ignore some of them and then we're gonna have the type we just set it to be for example rent after that we're gonna have the offer we set this one to true and then we're gonna have the image urls so let me check if we use it correctly so image URLs yeah that's fine and then we're gonna have the user ref at the end so this one has is an array and then each array we just have a URL for example something like that okay and then we're gonna have the user ref so who created this so don't forget this code because this is a Json you need to add the code here and then this is going to be a string so it can be any digits and numbers so let's try and test it so we click on send okay server is not running this which error we are getting let me check so okay the error is here import listing router from uh listing that throughout the Js the requested module does not provide an export name default okay so the model the router the listing the route we need to export this router so export default router so this is going to fix it okay now our server is running so let's try again okay now you can see that we got the 201 which means something is created and then the listing is here so we have the name description of everything and this is an array and also we have the time of creation and update because we have added the timestamp true we got this information and also the unique ID is created for the listing as well okay that was it for creating the listing create listing API route let's add this one to the GitHub okay and then we just create a message create listing or you just create listing API route and we can commit and push to get up so that was it for creation the API route in the next section we're going to work on the UI part of the projects we're going to create this UI and then after that in the following sections we're gonna add the functionality for example the upload image and create the listing functionality so see in the next section all right in the last section we have created the create listing API route in this section we're going to create the UI of this page the create listing page and if you look at the final version we can see that inside the profile page we have a button saying create listing and when we click on it we are redirected to this page with the title create a listing and URL create Dash listing and here we can have all our inputs like name description address the check box the check mark inputs and also the number of bedrooms regular price and Etc and also we have the ability to upload image and we have two columns here but in the small screen we have one column so we're going to make this one responsive as well so let's start by creating a button inside the profile page so let's sign in with an account inside the final version and then we go to profile page let me bring this one to the right side and then here we go to profile.j6 inside a client SRC pages and profile.j6 so here we're gonna have a button after this update button so here we have this button actually we don't need to create a button because we just want to go to a different page so we can use the link tag from react rather Dom so we just use the link and this link we need to import it at the top so we're gonna import link from react rather down like this and then we go back and this is going to be going to forward slash create listing so inside this link we're going to say create listing and then we're gonna have some styling so we're gonna have a class name so we can see the click this thing here and then we're gonna change the background color to be green 700 and then we want to make the text to be white we can bring it we can just add a padding of three and also we want to make it rounded large and then we want to make it uppercase and for bring it in in the in the center we can use text Center and for the hover effect I just want to add the opacity 95. so that's it for creating this button so now we have the hover effect and also when we click on it we go to forward slash create listing but actually we didn't create this page yet so we need to go to visual studio code we go to pages and here we're gonna add this page so we just call it create listing dot j6 we can use RFC to create a react functional component and then we need to add this one to the app.jsx but this is a private actually page so we don't want a person who is not authenticated to see this create a listing page so we're going to add it inside the private route like the one we did for the profile page so I'm gonna copy this one and then this is going to be create Dash listing so the path for that one is going to be this and then the element is going to be create listing from here from the pages folder so we're gonna import it at the top as well so now you can see inside this create listing we get this create listing so now we're going to focus on the create listing page so let me close everywhere and then we just go to create listing page I'm going to close this Explorer section so we have more space here and this step is going to be main I want to make it SEO Brandy so so I'm gonna change this to Main and then here after the main we're gonna have the H1 saying create a listing and then here we're gonna install this real quick so the text is going to be 3 XL so we make it bigger we set the font to be semi-bold and also we want to create it and we're gonna we're gonna bring it to the center using text Center and also we want to add a margin in the y-axis of seven so that's it for creating the hit header of this page The Heading of the page after that we're gonna have a form and we don't have any action for this form we're going to have a on submit later so inside the form we're gonna have if you remember I said we're gonna have uh two columns and for the mobile size we want to bring the columns on top of each other but in the bigger screen we want to just bring them next to each other so for this form before starting we're just gonna change the flex display to flex and then we're gonna say make the flex color and the mo in the mobile size so they're going to be on top of each other and then in the after the mobile size after the small size we just change the flex to row and then inside this form we're gonna have a div for the inputs for these inputs input one sorry not this page this one name description and address so we're gonna put them inside a div because we want to just add some uh like a bit bring them on top of each other and also we want to make them a full size so inside the the phone we're gonna have a div the first input is going to be the name so the type is going to be text let's add a placeholder so we can see it so the place of order is going to be name and then let's add some styling like we I want to add some border and then let's add some padding of three and then we want to make it rounded large okay so we're gonna have an ID for this one as well so we're gonna have an ID of name so we're going to track the changes later using this ID and also we want to have the maximum length so maximum amount of character you can type is going to be 62. and then minimum length is going to be for example 10. also we want to make this one required so beef without having a name we are not allowed to submit the form so we're going to see it make it required so that's it for now later we're gonna add it on yeah unchanged event listener but just let me copy this one two more times using alt shift done Arrow so the next one is going to be a text area and then the placeholder is going to be description the type is text also we have the same styling and then we're gonna have the idea of description I think I made a mistake here description so minimum and maximum we don't need it for the description that's fine we can just remove that one and this is going to be required and finally we're going to have for the address so the placeholder is going to be address the name is going to be address and then we're gonna set and we don't need to set actually mean minimum and maximum that's fine too this is optional you can just modify it later just for Simplicity I want to keep everything simple but you can make it better styling on and anything like that so we're gonna bring them on top of each other we just say flex and we change the flex direction to column so after that we're gonna have a space between them we just say Gap four so I have some space between there and then we're gonna have uh that is fine for this one so actually this this div is going to have not only these inputs I want to add these things too so we're going to have this this is the div on the left so that now we are styling so we have to have name description address and then these check marks and also the number of bits path and the prices and then we're gonna have another div on the right side okay so and also when you make this one uh so this is going to be Flex one because we want to these columns to have the same length we have to specify the amount of flex we just say Flex one so we're going to give Flex one to this one and then we're gonna have Flex one to the other div as well so now we're gonna because we don't have the other div we see it like that but in the small screen is okay and also we want to add some padding for the whole pick whole size or sorry whole site this page so we're gonna have a class name for the main one we want to set the padding of three so we're gonna have a space and also we want to set the maximum width to be 4 XL so in the bigger size we're gonna limit it to this one but what I want to do is to bring it to the center using NX Auto so now it's in the center okay so let's continue for this part so we have just added this three inputs now we're gonna have this uh check marks or we check box we can call it so all these chicks box is going to be inside a div but inside this div because we want to bring it here so we're gonna have another div and this one is going to have some inputs as well so we're gonna have a DF here for all of them and also we're gonna have a div for each of them because we want to have the check mark and also the name so another div for that one so this is going to be an input with the type of check box let's check it here so we're going to have the checkbox here and also and let's style this one real quick so this is going to be an i it has an ID of sale because we want to say it's sale or rent so it it's going to have an ID of sale we're gonna later we're gonna track the its changes and also we want to add a class name of we want to set the width to be five so we're going to make it bigger a little bit okay so this input is completed and then we want to have the 1s fan here saying sale and this is span and we want to bring them we want to add a space between them so I want to bring them to the next to each other we just add a flex here and then we just add a gap of two so once we add the flex you can see it's got this width 5 is going to work here so now we have this cell here so let me Zoom this one a little bit you can see it better or I think it's big enough for saying that's enough and then we're gonna have other ones like for the rent and parking and Etc so we're gonna have rent parking spot furnish and offer so I'm gonna copy this one this div few more times and let me see how many we have so one two three four so we need to copy it four more times so one let me check this one two three four so this is going to be rent ID is going to be rent the next one is going to be parking parking spot or I think yeah parking spot the next one is going to be furnished and offer so the ID is going to be just parking and then here we're gonna have so after the parking we're going to have this uh so let's open this one so I'm gonna check it here so furnished after furnished the furnish the ID is going to be furnished and then finally we're gonna have the upper the ID is going to be offer as well so we have created like them and then we want to bring them next to each other so the div that is covering all of them we want to make it flex and then after creating the flex we can just add a space between them we just say a gap for example six and then we're gonna have Flex rep so if this screen is smaller we're gonna bring this some of them in the next line so only four can be a state here so we're gonna have like that so this is exactly like the final version so after this the check boxes we're going to have this inputs as you can see we have a div one is the input with the type of number and also where one is the span just saying the title it's so it's very simple similar so outside this div that is covering all the check boxes we're gonna have another div that is going to cover this things so we're gonna have another div and inside the div so we're going to have another div that is covering each of them like okay so the first one is going to be an input of number the ID is going to be bedroom bedrooms we set the minimum to be one and maximum for example a bit a house with the 10 bedrooms okay and then we want to make it required so after that we're going to have a span here or we can just add a span or a paragraph it doesn't matter we just create a span saying or let's create a paragraph We just zip it so now we should see something here like that so let's add some styling so for the class name for the input we're gonna have padding of three and then we're gonna have uh what we can add here is we're gonna add a border and then we set the Border color to be gray 300 and then we want to make it rounded large so this is going to be like that and then we want to bring them next to each other so we just add a flex here and then we bring we just bring them vertically as like aligned with each other we just say item Center and then we can have have a space between them by Gap two so now we can just copy this one two more times for The Path and the prices and also if we have an offer we're gonna have a discounted price too so we're gonna consider that one as well so it I'm gonna copy this one two more times sorry three more times to be able to do that so let me choose this again and then so one two three so the next one is going to be bath and then so baths minimum maximum is fine the ID is going to be bathrooms type is going to be a number and then we're gonna have the next one which is regular price so the ID is going to be regular price and then here the last one is going to be discount price or discounted price the ID is going to be discount price also we have this dollar per month if we are doing the rent if we do sell we don't see that one so we're gonna make it condition later but let me add this dollar per month first so instead of just putting the paragraph here I want to put it inside a div and then inside this div we're going to have this uh regular price and also we're gonna have another spam saying dollar per month in a parenthesis you just say dollar per month so let's see we are getting okay and then we're gonna install this expand and this is going to be with the text of X as small so let's add this one to the other one as well so we're gonna copy this we add a div here we bring them inside and then I'm gonna paste that a Spam here too so let's uh see our um so this is working as well so we're gonna install this one a little bit so we need to align them so we added Flex Flex column to bring them on top of each other and also we want to make it item Center so we're gonna they're gonna be centered like this so we're gonna copy this class name and add it to the other one here so that's it for here we're gonna bring them next to each other all of them so I'm gonna choose this and then make it Flex we can use the same trick here we can use flex wrap when we have a bigger things like we can just save Flex wrap so when we have a we don't have a space we're gonna be like that and then also we want to add a gap of six so we're gonna have a space between them so this is going to be like that and then in the bigger size we're gonna see it like this so that is actually nice after creating the left column we're going to start with the right column which includes this image input and also the button so if you remember we had a div that is covering everything on the left side so I'm gonna close this one so we can have focus on the other div so this step first thing first we want to add a flex here Flex column because the the contents are on top of each other and then we're gonna have the flex one so equal a space for the this there and this step left and right and then you're gonna have a paragraph this paragraph is going to say images equal and then so after that we're gonna this is gonna this is going to have uh we want to make it font semi-bold and then and also we're gonna have a span like this final version let me bring the final version so they have images and then we have a span saying the first image will be the cover and Max 6. so inside this paragraph after the images we're gonna have that another span saying their first image will be the cover Max 6. and then we're going to install this Span in a different way we just add font normal okay and then we're gonna set the color to be text Gray for example 7 700 or 600 and then we can add a margin left of two for example to add a space here so that was it for this section and then we're gonna have another div which is going to include this uh input and also a button saying upload so we're going to have a div and inside the div we're going to have the an input with the type of file and then the ID is going to be images then this one is going to accept only images so we just say image post slash star and then we want to accept multiple images so it's going to be more than one up to six and then let's uh and after this input we're going to have a button saying submit on upload so let's start this button so let's see it now in the final version we have it here so for the input we're going to have a class name and this is going to be padding three and then we're gonna have border we set the Border color to be Gray it's 300 and we make it rounded and then we're gonna have width of food so we're gonna make it full size for for the button we're going to have a class name of padding tree and then we're gonna have text green 700 you're gonna make you bring a border for that so the Border color is going to be green too so we just say border green and then we set it to be 700. the same color and what else we need to add here is to make it rounded and also we make it uppercase when we hover over it we want to make a Shadow effect and we set the shadow to be large I also when we disable it we want to set the opacity to be 80 percent so you can see now when we hover over we see a shadow effect and now it's time to bring them next to each other so in this step if you want to set set it to be blacks and also we want to add a gap between them of four so also inside this div that is covering everything we're gonna have a pf2 we want to have a gap of four okay there are still two connected to each other here and there so what we need to do is to actually to go to the top div that is covering everything and then we're gonna fix so the the form that is covering everything I want to just add a gap here too so we just say Gap four okay so now we have enough space and it's nice in the bigger size they are next to each other you can see we can choose the images here file our image and then we have this button and finally we want to add the the other button the create listing button so we're gonna have a button inside this form but at the end so at the end of the form we're going to have a button and we just say and this is going to be update list or create list so let's install this real quick so we have the button at the here so let's let's add a class name to it this is going to be with the padding of three we are going to have a background color of slate 700 we're gonna have a text of white so and then we want to make it rounded large and then after that we're going to have to make it uppercase uh when we hover over it we want to create the opacity of 95 and also when we disable it we want to have the opacity of a okay so now as you can see the they are like this I think we didn't actually this button should be inside this div not outside so when we bring it one more uh line up inside this div this is going to be under there okay now it's okay so let's see it it is exactly a similar to the final version so that's okay I think that's good enough and then so let's add this one to the GitHub so this is going to be complete create listing page UI and we can comment and push so in the next section we're going to work on this upload functionality so we have to be able to upload any image up to six and we're gonna handle all the errors related to it for example we want to limit it to six images and also we want to see the images after upload under this input so see in the next section all right in the last section we have completed the create listing page UI in this section we're going to work on the upload image functionality so the first things we need to do is to add the an unchanged event listener so when when we choose some the files here we're gonna set them inside a piece of state and store this files so we go to visual studio code and we just need to go to that input to the type of file and here we're going to add an event unchanged event listener and then we just get the event here and then we want to sit if we want to create a piece of State first at the top so here I want to create a p sub state so sorry now it should be here and then we just say files and the initial value would be an empty bracket because we need to have different images because this is a multiple image so we're gonna set the files to the images we have here which is coming from e.target dot files so now we have the files let's console log the files we check so let's I think we didn't import the use estate okay now if I open the console if you choose some files for example I think I have some files here for example I choose three images as you can see we get here three files and then here we see the three files they have saved inside this piece of State okay so that was the first step now we want to store these files inside the our storage send platform which is Firebase so we need to have a on clink event listener to this button so when we click on it we want to submit these files that we stored and this is going to call a function called handle image socket so we need to create a function here at the top so let's delete this console log and then we create this function with the name handle and it submit this is going to be actually we don't need it to be asynchronous because we need to call another function inside that so here first we want to prevent the default Behavior actually it's inside a form if you remember there is another form and this is inside there and if because it's inside a form I just want to change its uh type to be a button so I we don't want to submit the this form we don't want to submit the overall four we just want to upload these images so I'm gonna remove the type to be button so now let's go back to the function so we don't need this actually to prevent default one actually because we're not inside the form and we are not submitting it and then what we want to do next is to create a condition we just say if the file size is more than is the file length is more than zero first we want to be sure that if there is a file and then after that we're gonna upload that because otherwise we're gonna have uh more than zero and also we want to actually do this one be less than seven because we want to set the maximum amount of images to 6. then what we want to do is we want to create a promises here promise okay so what I mean by promise because we are going to upload not only not only one image we want to upload more than one image so we're gonna actually uh we're gonna have more than one asynchronous Behavior so we need to wait for all of them so one by one images should be uploaded to the storage and then we're gonna get them here so first so we're going to return a promise more than one promise so we're going to set it as an empty bracket and then based on the length of the files we want to call a function and do it for example we just say four if we want to create a for Loop which is going to start from zero and then this is going to be less than the number of files and then we're going to increment it one by one you just say I plus plus and then what we want to do we just say promises that push we want to add the new promise to this empty bracket and then here we want to call a function which is going to be for example we can call it a store image and then we're gonna upload the first this I file so because we're going to have for example three files and this is going to be 0 1 and 2 the index so after that let's close this actually so actually we we need to create this function so this function is actually is going to be a synchronous so we just say cons a store image which is asynchronous because we need to wait for the response from the storage and we're gonna pass this one if each file because here we're gonna create a full load a for Loop and this is going to start from 0 1 2 depending on the number of files and then once each for each file we want to send the file and store it the rest is going to be similar to the one we did for the upload user functionality so here we're just gonna upload it so we're gonna close it and then so this is going to return we want to get the information here so we're gonna return a new promise because we need to wait and this is going to gives us results which means the uh we get the information back or reject for getting an error and also so we want to close this and then here we're gonna do the same things we did for the uploading the images for example we want to create the storage which is going to be create a storage and then we need to pass the app which is from the firebase.js file we need to import get storage too so we're gonna import here to storage from 5x4 slash storage and also we need to import app from Firebase JS file and then once we create this storage we need to create the file name which is going to be equal to this file that name and also we want to make it unique so we just say new date and then we get the time just say get time the other plus here but this is a unique name and then we're going to create the a storage ref which is going to be cons a storage shift equals to ref which is coming from Firebase four slash storage we're gonna pass the storage that we have created and also the file name after that we're going to create the upload task so this is going to be equal to if you remember we were using upload bytes resumable from Firebase storage I'm gonna pass the storage riff and fire now we're gonna get that upload task that's on we do want to track the percentages actually so we don't want to do that part we did before but here we're gonna pass the a stage change so let's close this one so we don't get an error later so this is going to give us a snapshot for storing the actually the progress but we don't need to actually add it here because we are not getting the progress okay because it's not only one file it's more than one file you can do it for yourself and make the your application more nice but I feel this is already a great application and if you look at the final version you can see that if you choose the images and then upload them so we see the loading effect there and also you see all the images after that so the progress is not needed because we are adding a loading effect to the button okay so let's continue so we're gonna skip to the progress checking the progress we just want to check the get the error if there is an error we wanna what we want to do is to reject with the error because we have reject the Gap resolve and after that if there is no error we want to get the URL so here we're gonna have we're gonna use the get URL method so here we just say get download URL which is coming from Firebase forward slash is storage and then this is going to take the uploadtest.snapshot.rev and then this is going to give us a download URL and then here we just want to resolve we return this URL okay so let's close this parenthesis too I think it's fine now so we get the download URL now so all the download URLs are going to be stored in these promises now we want to save this download URLs inside a p sub State and as we have more than one piece of State more than one variable inside of our application like name description and Etc we want to create a form data so here I'm going to create a constant we just call it form data so this is going to be a huge stick hit react hook and then we need to add some initial values for that so for the images image URLs we just create image URLs and then the initial value would be an empty bracket or an empty array so here after that after the pushing out everything in the promise as we are waiting for the response so after this four which is we have to we just say promise dot all because we need to wait for all of them actually and then this is going to wait for everything like a we have all of them all the files inside the promises which we we got it from the store image and then we get the URL for each of them and then we want to set the form data keep the previous information like the username email password sorry username name description and other things about the listing and also we want to save the image URLs which is going to be each of this URL actually we get all of them and because this promise finally brings us all the information so we need to test it and see it in practice otherwise it's very hard to understand but I want to wait until we are able to do it and then I don't want to add replace everything I want to keep the previous images inside the form data and then I want to add the new one that is added so here uh we keep the previous form data and then we just say image URLs equals to form data and then you just say form data what happens form data and then image URLs and then we want to add the new URLs to the previous one and we are using a con concat method to add the new one to the previous one so it's a kind of array and then we add a new member to that array so finally let's close this one and make it so here we need to close this parenthesis I think it's ready to be tested so I'm gonna console log the form data so let's go to our application so let's refresh the page as you can see now we just have image URLs but an empty because this initial value is an empty array so let's choose some images for example choose two images and then once we click on upload okay we are getting an error uh this is asynchronous all right so it turns out that we need to actually add that snapshot even we don't want to add the prompts so here we just get the progress and then we just console log the progress and then we close this one so without this one actually it doesn't work I thought it's gonna work but it's fine so let's try again and then we just choose two images and then if you click on upload as you can see the first image is uploaded and the second one too and also our form data now we have image URLs with two array and we have two images here which is operated Firebase so we can just copy this one and then paste it here and see the images here so that's working actually but we want to see the loading effect and if an error happens we want to see the error as well so we're going to create a new piece of State here at the top and then we just call it image image upload error and then this is going to be we consider to be null at the beginning or we can just set it to be false and then make the message later and then we're gonna have after we get all the premises here we got the URL at the end we want to get the error you can catch the error so after after this image actually you're gonna set the error image Arrow to false because if there is an error previously we want to remove that error and then we want to here to Cache the error and then we set the image error to true or we want to set the image we can just create a message here instead we can just say image upload failed and then we can just say uh two megabytes Max per image so we can just write down this error we need to close this also if someone uploaded more than choose more than six images here so this one should be file files that lands and also we want to add that form data we just say form data dot image urls.length together should be less than and if this one doesn't happen we want to warn them as well so we just say otherwise we have to say set the image upload you can only upload six images per listing we create this error okay so now we should test if we we can handle the error so let's delete this and also we want to show the error here so I forgot to do it so after the button and also outside is there we're gonna create a paragraph and we just say if there is an error or the the file the piece of state was image if there is a op image upload error then show that error image upload error and then also you can make that a red color so we just say text red for example 700 let's see for example I don't choose any file and then upload we should get an error okay we are seeing the error outside so I think I put it in the wrong place okay this is outside this step I mean the div after this here before the button okay so you can see that we are getting an error you can only upload six images per list per listing and let's make this one smaller just a text as small so and also if I choose more than six images so this is a I think eight files if I click on upload you can see we are getting an error you can only upload six images per list these two and nothing is uploaded let's delete so we Let's test it again because the error was there before I want to be sure that it's working okay now we are getting that error so let's test again for example I just choose the three images and then I upload so it's uploading and then the error is gone okay now we have the three images so we want to show these images here so the person knows that it is already uploaded or not so after this error after this error we're gonna have say if a form data dot image URLs is more than zero then we want to show we want to map through it so we just say form data dot image urls.map we get each URL and then we're going to create an image tag with this URL and then alternative is going to be a listing image so this is kind of a styling we get let's see if it's working or not I'm gonna change the app styling in a minute so we're gonna upload them and then we see the upload here the images but I don't want to see it like this I want to see the image actually the name uh there and also I want to create a button to be able to delete the image so here instead of this image I wanna add first thing first I want to add let's add it here and inside the div we're going to have the image this source is going to be the URL we get so the alternative is going to be listing image and then we're gonna have a style for that we set the width to be 20 Heights sorry 20 height to be 20 and then we want to change the object to be contained so we're going to keep the step aspect ratio and also we want to make it rounded large and then after this image we're going to have a button which is going to say delete okay I think that is enough you don't need to add the name of this one and also for this div let's bring this one to the left side so we can see the changes so let's style this real quick so we want to bring them next to each other so here we should say Flex and then we want to use justify between to add a space between them and then we can use padding to read to add some padding around there and also I want to add some border for this and then we can just use item Center to align them centrally and then for the button we can just say heading 3 we want to make the text to be red 700 and also I want to make it rounded large uppercase we have a hover effect of opacity 95 so I think that's enough for this or we can increase this hover back to for example 75 okay that's better I think that's enough to see the image we don't need to see the image name and Let's test it again so if we refresh this page we shouldn't see any image and then if you try to upload for example two images and then we see two images and also if I want if I try to add for example now five images I'm not able to do it because we already have two images inside the form data so as you can see we are getting an error you can only upload six images per listing now we can add the functionality of deleting if I click delete I want to delete this one from the form data so when we click on this button the delete button so first I want to actually type change its type to button and also we want to add an on click event listener which is going to uh just we just say handle remove image and then we want to pass the index of the image so and how we get the index we can get the index in this map so we get the URL and also we can get the index and also we need a key for this one because we are using map you need always to have a key so we add a key and the key is going to be that URL which is unique so we just we just need to create this function the delete function I'm going to add it at the end I'll just say handle remove image we get the index as the input actually we don't need any event here and then once we get the input we want to set the form data and then let's close this first what we want to do we want to first thing first I want to keep everything inside first and then I want to just filter it what I want to do I want to remove the one that has this index so the filter method is going to gives us the URLs again but we want to just keep the URLs that does not match this index so we want to remove them like this and also if we we don't need to keep the URL here we can just add underline because we don't we are not adding that so we're just focusing on I if we are changing the URL we need to add it but we don't need it we just add underline which means never okay so now let's try again I upload three images it seems like we are getting an error okay let's try again I'll just upload two images okay it's working and then we should see the images now okay seems like it's deleting itself without even I click on the button so let's check again so under delete button uh okay I think we you just need to add here we we need to create a callback function because otherwise gonna call this function even without clicking so let's try again I choose two images upload them okay now we see the images I want to delete for example this one I just click on delete and this is deleted so only we have one image now if I want to add another image another two image for example this is going to be added at the end like this you can delete for example this one so it's working fine but we don't have any loading effects so we are not we don't know that actually it's uploading or not so we're gonna add another piece of the state at the end at the top let's delete this and okay I'm gonna create another piece of State for loading effect we just say upload and we just we can call it uploading and this is going to be false and then what we want to do we want to add it to the button this button which is going to say upload and here we just say when it's uploading just say uploading and otherwise just say upload and then we want to disable it as well when while it's uploading okay now let's try it again so if I choose three images and I click on open and then I click upload oh I didn't add this set or loading through so we need to go to this function that is uploading here so here at the promise when we just create the is before the creating This Promise here at the top we can set the loading through uploading to true and also we want to set the an arrow to false two so even if we have an error previously we can remove that and also when the an error happened we want to set the loading to false too and also we wanna here too there is an error we want to set the loading to false also here we don't need to do it actually we need to wait everything if there is an error in one image it's fine we want to keep continue but if there is a an error for all the images we want to set it so we set it loading uploading to false here as well so let's try it again so I'm gonna upload two more images so we see the uploading effect and then this is disabled okay now we have all images but still we are seeing the uploading we need to when the uploading is done we need to create this font to false so oh okay here render uploading is completed we need to say set loading false but for each image I don't want to set the loading to false this is the way uh we don't need to do the loading to false okay we can leave it here as well I'm not sure about that but it's actually we can test it later so let me choose two images upload okay now we don't have a loading effect so let's try to get an error for example I choose a video to upload a video and also an image together so when we upload okay we get an error for this one but okay so it seems like when when we do two files uploaded even one file is has a broken and we get an error so that's fine so uh so that's it for the image upload functionality in the next section we're going to work on getting all these form datas added to the form data and submit finally the all information in the database so let's add this one to the GitHub as well so this message would be complete uh upload listing images functionality so we can commit and push to get up so see you in the next section for completing this page and completely create listing page so see you in the next section all right in the last section we have completed the image upload functionality for the listings in this section we're going to complete the form data we want to get the information and submit it to our database so let's go back to visual studio code and here in the top first we want to complete the form data we just have the image URLs we want to add the other inputs as well we want to create the initial value for example for the name I want to set it to be a string for the description as well and then we have the address for the sale I want to set the initial value to uh not sale we don't have sale actually we have type prototype the initial value must be rent and a bedroom it's just one bedroom bathroom we have regular price we set it to be zero discount price to be zero and then we want to have that offer and we set it to be false by default we set the parking to be false and also furnish to be false as well and I think that's it for the our variables now we need to actually add the event listener to each input like the name description address and Etc so I want to create a function here at the bottom before the return I'm going to create a function I'm going to call the function handle change and then this is going to be equal to here and then let's close this I just want to create the function so we don't get an error after creating the function we want to add this function for each input for example for this let's open this dip so we can see all the inputs for example for the name we change if we add an on change event listener which is going to call that handle change function and also we want to set the value to be the form data.name so now if you check our application the name is an empty string but if the initial value let's delete this first if the initial value was for example sand we should we could see the sand so we want to change its value of everywhere and then now we cannot change the value of this one because the value is set but we want to change it using that unchanged event listener so let's bring this one back to that empty string and we keep continue completing our inputs so we have the idea of name we have the value of form data.name and also we have unchanged event listener which is calling this function but it takes area we do the same things on change and also we set the value to form data.description and also we have for the address let's edit we can do it for a sale and rent but this is a little bit different let me show you what I mean by that so here we just add the unchange event listener which is going to call the handle change function but we want to say this one must be checked must be checked if if the type a form data that type is equal to cell or a sale Okay so if inside our form data the type is cell we're gonna check this one so what I mean by check is when we click on it it's gonna check it okay but now I cannot check this one because the form data the initial value is rent so for the rent we do the same thing so let me bring this one down and then we're going to add an unchanged event listener and then we set the check to form data the type equals to rent now if you check our website we can see the rent is already checked because the initial value is rent so for the parking we add an unchanged event listener and also we want to check it if the form data that parking is true for the furnish it's similar so handle which we're gonna check check mark that if the form data that furnish is true what the offer is exactly the same so we just do the unchange and if it's offer is true we're gonna check this one so now we have done with these inputs the next input is the bedrooms so this one is going to be similar the on change and also the value is going to be form data dot bedrooms so now if you check our website you can see the bedroom the is one because the initial value was one and also we're gonna have the for the bathroom so the value is form data.bathrooms the next one is regular price so we're gonna have an on change here and also we're going to have the value which is form data that regular price which the initial value is zero now so set it to be zero we need to change actually its minimum and maximum price so the minimum for the regular price we set it to be for example 50 dollars and the maximum we just make it uh for example one million dollar something like that okay so and also if we set the minimum to 50 we can change the initial value to 50. that is fine too so both of the regular and discount I just put it 50 for the main uh initial value so here we should see 50. okay so what is the next input so here after the regular price we have the discount price so we have unchanged and also the value is going to be form data that discount price and then for the images is fine we don't need to do any initial value but for the and also be attracting the changes in image so energy is completely independent and also after the image I think it's fine we already we have completed everything so now we have name description address the check boxes and also the number of bedrooms and bathroom and regular price and discounted price so what else we want to do and now we want to track the changes we want to complete this unchanged event uh this function but we're gonna have some condition because we have different types of inputs here some inputs are booleans some people some inputs are values some people's some inputs are numbers and some of them are ticks so we need to create some condition we just say if e dot Target Target dot ID is equal to sale or is equal to rent so there's so the type uh you know the the inputs we have for the type it has a sale or rent so if this one happened any of them we do we set the form data we keep the previous information and then we just set the type and what is the type so type can be sorry the type variable we have as an input it can be sale or rent so for example if I now test our application when I click on sale and rent we're gonna change this one so if you check the console Let me refresh the page and also we need to console log the form data I can yeah we already have the console log perform data so if we change the cell we have to see that now type is sale and if you click on rent the type is rent okay so that was for the first part so we have done for the first part let's go back to our unchanged handle change function so after this condition we want to create another condition we just say if either Target is equal to parking so we're gonna because the parkings are true or false furnish is true or false and offers true or false so we're gonna do the that one so we're gonna say if the either Target is parking furnish or offer we want to set the deform data keep the previous information inside the form data and then we want to set the e.target.id which can be parking furnish or offer to be equal to e the target the check so either targeted check can be true or false so in this case parking is going to be true or false furnish or offer so we're gonna track these three options and then we're gonna close this as well so let's test that one too so let me clear this for the parking spot when I click it now we should see the parking is true when we uncheck it now the parking is false we can do it for burnish so furnish now is true and offer we can see the offer is true so we are tracking now the checks boxes are finished so the only difference was because we had three check boxes with true and false values so we did it like that and these two were not true and false they add the value so we need to track it in a different way after that we're gonna cover all everything else so instead of doing this one we just say bedroom bathroom and regular we just say if e dot Target DOT type so the type of this either Target can be number or text or text area we just say if it's number if this one is number or if it's text or this one is text area we wanna set the form data keep the previous information and we set the e.target.id which can be for example name or description or a text area we're going to set it to either Target of value the value of that and the reason we are adding the bracket here is we just want the name of this either Target that I did so this one instead of if we don't do the bracket this one is going to be for example a name like this but when you do the add the bracket this one instead of this one is going to be name okay so the reason we are adding bracket is to get the variable instead of the value okay so let's test now let's clear this and then I just want to change the name for example I just say Sahan actually the name doesn't make sense you should just say title but it's fine the listing the so the name is Sahan okay so description we can add something here and you can see the description and also the address so and then when we clear we see that everything is the initial value so we are tracking everything uh let's see the regular price so the regular price is okay 65 and this one we just change it to 500 for example 505 okay everything is working and as you can see there's sometimes this one shows as a string and sometimes is a number okay so this is going to make a conflict in our actually the mongodb is going to automatically get the information for us as the number so we are not worried about that one but if you want to fix that one uh you can add more like a condition and convert the number to the converted string to number for the inputs now that we have all the information inside the form data we can submit the form form to the our database so what we can do is to add an unsubmit event listener to this form and then we're going to call a function called handle submit and then we're gonna create the function here at the top we just say handle submit first we just set the E the target eat the E dot prevent default so we're gonna prevent refreshing the page and then we're gonna have uh we're gonna request for the database to add these form data so after here we're gonna have a try and catch a statement and in inside the error we're gonna create a piece of State for tracking the errors so let me create create this one so this is going to be and we just call it error and we set the initial value to false and also we want to add some loading effect as well so we just want to have loading and also we can just change its name to make it more specific for example we can just save error oh it's fine error and loading so we're gonna know that meaning here so let's go back to the function so before here we're gonna set the error to set the error to error.message and also we set the loading to false and inside the try we're gonna create first we want to set the loading to true and then set the arrow to false so we're gonna remove the previous error and then we want to create the information we want to get the response we used the fetch method we just say API for slash listing forward slash create and then we're gonna first we're gonna set the method to post we set the headers to content type application Json and then we want to send the body which is Json the screen a stringify form data so we're going to send the form data like this and also if we are using a weight we should use a synchronous function and then after that we're gonna convert this one to Json our response and then we set the loading to false and also if the data that's success is equal to false as success is true sorry if it's false if you want to make an error we just set the error to data Dot message so everything I think is fine and also we want to show this error and loading effect as well so put a button for the main button instead of saying create listing all the time you just say low if it's loading we just say creating and then otherwise we just say create listing okay and then if there is an error we want to show it here so if there is an error we want to create a paragraph and show the error here with the text 700 red and also the small value so let's try this so we have the form data we need to if we now submit the form we get an error because we need to fill the name description and address so here we just say new listing and let me copy this one for description and address so we're gonna have a parking furnish let me just test this or we cannot change the discount price okay what's up it doesn't go more than 10. so the uh we didn't change the discount price minimum and maximum so the minimum is going to be 50 and the maximum is going to be 1 million dollars okay or make it 10 million because there are a lot of homes more than 4 million okay that makes more sense so that this current value should be less than the regular value and then we need to upload an image so let's upload them first so let's click on create listing so we're getting an error use ref is required so actually when we are sending we need to send the user ref2 because we want to know which person is creating that so we need to come back to the function uh here instead of sending only form data I want to send the form data and also I want to send the user ref which is going to be equal to that current user we have and then we want to get this ID of the current user which is underline ID let's see if we have the current user at the top okay we don't have it current user so we need to bring the use selector first selector which is coming from react redox oh sorry this one should be import and then we're gonna initialize it here we just get the current date the current user which is we can get it from the user state so okay so we sent the data where is the handle submit okay so users ref we have the user riff now let's try again okay let me just leave it like that you just upload an image so we just create a listing so it's creating now and if we check the network we can see that we got the listing back from the database so they are stored in the database so that's a good sign so we did a good job but there are some problem here we need to tackle for example if the we have an offer we should see the discount price and also the the value of the discount price must be less than the regular price so it cannot be more than that otherwise we have a negative discount and what else we need to do for example if there is no image we don't want to create listings so we're going to make an error for that one as well so we can fix that one easily for example in other things is when we have a sale we don't want to see that dollar per month as well so everything we need to create some condition so one by one we can tackle them for example if there is no image we don't want to submit the form so here we want to create a condition we just say if the form data that image URLs the length of it is less than one we're gonna return an error we want it to return and also we want to set an error two so we set the error to you must upload at least one image so let's try again so now if we refresh the page we just put the name so because these are mandatory and then if you click on create listing you see if we get an error you must upload at least one image so that's one thing we we tackled the problem another one is if the uh form data dot regular price so if the regular price I if the regular price is less than discounted price we're going to return an error same discount price must be lower than regular price and also if I mentioned so this one sometimes is a string sometimes is number so in order to prevent any error here we can convert them to number by just adding a plus at the beginning of them so what is this error I think we have imported something unnecessary let's see the error okay ah okay we didn't close the parenthesis here okay so let's try now I'm gonna paste this one and I want to choose the regular price 50 and 51 and then discounted price to 50. also we need to upload at least one image okay now we try okay what happened okay it's it's still working regular price ah actually regular price should be less than that so 52 for discounted price and now we should get an error okay discount price must be lower than regular price okay this is working too so what else we need to do we want to create a condition for the as for the if there is an offer we don't want to see that discount price if there is no offer so we have the regular price here for a discounted price which starts from here to here we need to create a condition we just say if warm data sorry form I it doesn't allow me to accept so form data if there is a form data if it's true we want to see that one so we're going to accept this one and then bring everything inside that one okay until here so if this one is true we want to see that they should be inside the parenthesis too okay so now if I click on offer I should see the discounted price otherwise we shouldn't see it let's see if we make an error here okay let me fix this let me upload this one first okay this is created but as you can see we are actually sending the regular discounted price as well inside the database but that is actually okay because the discounted price is required as well but we just need when we are showing that this uh their listing we wanna if there is no offer we don't want to show any discount price so that that's time we're going to fix that problem so that is fine too and then uh I want to set the discount price to zero for the minimum and maximum so this is going to makes more sense if there is nothing there so discounts price is going to be zero and also we wanna set the initial value so let me search for Discount so here I'm going to set the minimum to zero okay so in this case if we submit the form without discount price we're gonna see discount price zero and also if you add an offer you see the discount price is zero as well so it's fine so what else we need to do and I think when we are seeing the loading effect I want to disable this button too I forgot to do it so inside the button you can add the disabled and this is going to when it's loading this is going to disable the button and also if also the uh when we are uploading the image we want to disable this button too so if you remember for the image the loading was what was the name of it yeah image upload error or image up so uploading and also uploading so I'm gonna say if loading is true or uh for uploading is true we want to make it disabled so now if we click something here and then upload we should see that this button is disabled too until the upload is completed so this is going to actually protect uh just on necessary clicks the last things I want to do is to when everything is completed when the listing is created I want to redirect the person to that listing page if you remember each listing is going to have an ID So based on this ID we want to create a page for the listing and then we want to redirect the person to that page so we want to go to we want to import the use navigate so we're gonna import use navigate from react router Dom you can initialize it somewhere here and then after everything is okay everything is created after here if everything is successful we wanna navigate the user to over slash we need to create a backtick actually forward slash listing forward slash if you remember we get the data back and data includes the ID of the user and we just have to say data dot lists let me check to be sure so here we have this data back and this one has an ID okay so we should be data that's underline ID but we need to test it I'm not sure about that okay so let's create something I just write down something here to get an error and then the regular price just 51 let's upload an image and then when we click on upload we're gonna upload the image and after that we're gonna let me clear this we're gonna create the listing and then we are redirected to over slash listing and the ID of the listing which starts from 65 and then if you check here we can see the ID of this is 65. so that is correct we're going to create this page later when uh com we complete the profile page so we have completed the create listing page functionality we have created some listing so let's add this one to the GitHub so this is going to be complete create listing page functionalities and then we just commit and push so see you in the next section for the next functionality of the website all right in the last section we have completed the create a listing page functionalities in this section we're going to work on the show listing if you look at the final version and we go to the profile we can see we have a button saying show listings and we're going to click on it we see the listings of the user so first thing first in this section we're going to create the API route for this endpoint so we can get the information and then in the next section we're going to complete this functionality so let's go back to visual studio code and we need to create the API route this is related to the user so we go to the API folder routes and then user.rout.js and here we're going to create a new router we just say router.get this is a get request we just want to get the information and then we just save forward slash listings so we get all the listings and then we're going to pass the ID of the user so we just say ID and then we want only the verified people who are authenticated to be able to get the listing of a specific person and then we want to just call it for example get user listing so we need to actually import it at the top we haven't created but we can import it now and then we're gonna create it after this so we're going to go to the controllers and then user.controller.js and here you can create the function so we export a function called get user listing which is asynchronous because we need to wait for the data it gets the request and response and also next for handling the errors so what we do here is to we can add a try and catch a statement now first thing first we want to check if the person is trying to get is the real person is the person who is the owner of that for example if someone is authenticated must only get his own listing they cannot get the listing of other people so we're gonna check if the request that user.id which we get from the cookie we get the JW from the jwc is equal to the request that params that ID which we get from here this parameter if these are equal then we want to return the data otherwise we want to send an error so here we just say return an error using the next that we have and also the error Handler we set the status code to 401 and also we create a message you can only view your own listings so let's see what's uh we need to close in that parenthesis too and here we're gonna create another try and catch a statement in the cache we're gonna just use our middleware to handle the error and inside the trial we're gonna get the listings just say listings which is going to be equal to a weight we use our model the listing model we need to import it at the top so we just open this file here and now if we use control space we get the suggestion to import it at the top and then we want to use a method called find and we just say find the listing that has the user riff of this request parameters this ID so just fine the only the listing that has this user riff and also if you uh we get the listings and also we can create a response with the status of 200 and then we're going to return these listings so that was it for uh creating this function Let's test this one by insomnia so inside the listing we're gonna or inside a user we create a request which is a get request and then the address is going to be localhost 3000 for the user and then we're gonna say listings I think it was a listing uh we check again it's so forward slash listings with the S so we just say listings and then we need to pass the ID of the person who is authenticated so we need to authenticate with one person for example I sign in so where is the Json here I bring it down so we can see so I'm gonna sign in with this user okay user not found we need to I just let's assign we sign up with this user I wanna I think I updated somewhere update user or maybe we delete that user so we're gonna sign up with a new user for example test2 gmail.com with this password let me copy this one and let's make it test three because uh maybe we have this two let's send okay user is created successfully let's copy this email and let's sign in okay we got the information and also we need to create some listing for the with this user so I'm gonna just create a new listing with this like a name test and description Etc so let's send it so we create one this one let's create another one too S2 okay so this person now has two listings now we can just paste the ID of the user and get all these listings so we go here we paste the link and we just do the request okay uh it's telling me that you can only view your only thing it didn't recognize this person so let's just check again so we have sign in with this user let's sign in again so this is the ID of the user and then when we create a new listing the user ref oh user ref is something random we need to create the listing with that user ref with this the person's user ref okay so I create again two more listings so now we can try to get the listings we are still getting the same error let's check again our routes so we have created this route listings and then we pass this ID we verify the token so we get the request that user.id and then we call this function which we have created here oh okay I made a mistake here this one should be equal if this person is equal so the ID is equals we should do this one otherwise we should get to that so sorry about that I didn't see that one sometimes the auto suggestion you have to check it double time so let's try again now we get the listings so as you can see it's an array and it has one and two listings so we have two listings created by this user so we are getting there all right so that was it for creating the API route for the listing so let's add this one to the GitHub so the message for this one is going to be create get user listings API brow so we're gonna commit and push so in the next section we are going to use this API route and complete our show listings functionality inside the profile page so see in the next section all right in the last section we have completed the show listings API route for the user in this section we're going to show it inside the client side and connect this one to the back end connect the client to the backend and get the information of the user so as you can see now we have created in the final version we have a button when we click on it we see the our listing so what we want to do is to add let me bring this one to the right side we want to add a button here and let's bring this one to the left side so we go to profile.jsx inside the client side inside the sources folder we go to pages and profile.j6 and then we want to add this one after this message the success message so here we're going to create a button which is going to say show listings and then let's just style it a little real quick we just say pick screen okay fix screen 700 and then we're gonna have the we set the width to be full so this is going to be in the center and then we're gonna add an on click event listener so which is going to call a function called handle for example show listings okay and then we're going to create this function at the top just before the return I'm gonna create this function and this is a synchronous because we need to do some requests and then what we want to do here it's very simple actually we just create a try and a cache statement for the error we just if you remember we add some error showing here we can create the error for this one as well it's very similar so we just say we add an error here before or we didn't have any error so we just create a constant called show listings error and then we set it to be false at the beginning and then here we just do we set this show listing error to true and then uh here at the after this show listing we can create a paragraph we create a paragraph and then if there is an error we just want to say error showing listings otherwise and it would be an empty string and let's see now we are not getting an error but I think it's okay now it should be nice and then after that after handling the error we can just we don't need any actually loading effect or something like that we can just say we can add the loading effect but you can do it with for your practice just for Simplicity I'm gonna escape the loading effect it's very similar to the one we did before so we're gonna switch to the forward slash API forward slash user post Slash listings and then we want to pass the ID of the user which is we can get from current user.underline ID and then we create the data by converting it to the Json and then if the data success is false we're going to return a return and also we want to set the arrow to True again and then also before the request we want to set the error to false so you're gonna clean the previous error so this is going to gives us the data let's check so let's open the inspect we go to network we refresh the page we claim the screen and if you click on show screen show listings as you can see we got the all the listings of this user okay so that's working nice so now we want to show these listings under this button so it's very simple as well so under this error we want to create a condition we want to create a condition if we say if the listing exists and also the lens is more than zero we wanna Show the listings so if the there is no current user here oh we actually we didn't save this listing that we got so let's we save them in a piece of state so at the top we're gonna create another piece of State we just say user for example listings okay and then set the user listing and and this is going to be an empty object and an empty array okay so and then we want to set these user listings after we got the data if everything is okay let's do it here so if everything is okay we want to set the user listing to data now we have this user listings after this paragraph We want to say if the user listings lens is more than zero first we want to check if it actually existed or not so we just said user listings and laser listings is more than zero then we want to show the listings so we want to say here we want to create a actually we don't need the parenthesis here because I want to map through the user listing it's just a user listings dot map and this is going to give us each listing and then we're gonna return a div so let me close this first here so we're gonna have one two three parenthesis so you need to close the another parenthesis I think it's fine now so we're gonna have a div so inside the div we're going to return if you look at the final version let me show you the final version we're gonna have the image of the user this is the div this container actually this is the depth of the one listing and then we have the image we have the name of the listing or title of the listing but what I mean by name is the title and then we're gonna have two buttons delete and edit so we're gonna add them here so let's first see why we are getting an error the first is fix the error so we get a listing here and then we return this one okay I think yeah we don't need in this part that's fine so inside is there we're going to first thing first we want to add actually a key for this date because we are using map we should use a key the key is going to be listing dot underline ID and then inside this tip we're going to have as I mentioned we're going to have the image and Etc so here we're going to have an image first and uh actually let's put everything inside the link so when we click on the image we're gonna go to that listing so we create a link tag and this is going to go to the forward slash if you remember we have created the listing in this URL so the listing that under underline ID is the ID and also this one is going to be listing and then instead of the title we're gonna have an image the source is going to be the first image of that listing which is listing dot image urls and then we want to be at the only show the first image as the cover the alternative is going to be listing image or listing cover and then let me see that we are getting anything here so we are getting an error let me check so the error is const is not defined so I made a mistake somewhere so line 30 in profile.j6 line 30 okay here I made a mistake here advanced and then I get it this parenthesis is wrong too we need to remove the parenthesis okay this one should be fine so let's refresh the page now we are not getting an error so let's click on show listings so okay now we are getting the image of the here so let's bring this one to the right side we're going to style the image so I'm gonna add a class name here and then what we want to do for the image we're going to set the height to be 16. we want to set the width to be for example and we can set it to be 18 as well 16 as well we set the object to keep the aspect ratio of the image and also look we want to contain the image inside that place and also we want to make it rounded large okay is it it's not working a lot around it large is not working let me see here okay we don't need to add actually around the large that's fine and then after the image we're going to have the title of the page the name of the page the listing so we're going to have the another link that is going to go to the same place and then we just add we can add a we can add a paragraph or we just don't need to add anything actually here let's close this link tag and then okay let's accept this and see the listing.net so we see the new listing that's fine and then we want to bring them next to each other so in this the div that is covering everything we want to change its we want to at first we want to add a border and then we want to set the we make it rounded large also we want to make a padding of three and we want to bring them next to each other so we use flex and then we can use justify between to add a space between them and finally we can just add item Center to align them in the center vertically like this okay that is fine and then here for the image I want to add some styling here too for example I want to make the font to be semi-bold and also I want to make it to you know I want to cover it from here to the end okay so this is going if you want to do that we can just change the flex to one GC Flex one and then we're gonna have after that we're going to have a hover effect when we hover over it I want to add the underline so when we hover over it we see the underlying and also I want to truncate it truncate means when the title is too long it's going to show dot dot dot at the end so we're gonna test it later so after this link which is showing the name we're gonna have the two buttons delete and edit so we're gonna have a div here and then inside the tip we're going to have two buttons so this Flex one is actually is now working I think we need to add this Flex one to this link so let me delete this one and add it to this link okay now it's working actually let's add all these classes to the link and then we add the flex one we can we don't need to have any classes here for the paragraph so after that we have another div and this is going and this space actually we can just add this space very simple by adding some uh Gap here so inside this there we're going to have some gap of four for example so that is fine and then for this one we're going to have the two button so the first button is going to say delete and then let's style it real quick so for the delete button and we just want to make the text red I want to keep it simple so red 700 and also let's make it uppercase and let's copy this one so we're gonna have another button for edit so let's see yeah we just change this one to edit and then the color is going to be green for the edit and then we're going to have we're going to bring them on top of each other we just say Flex Flex column okay and then we can just I think we can use item Center to Center then they already centered but maybe some places we get and also we see that we are actually connected to each other at these steps so what I want to do I want to show something like this one I wanna have a title your listings and then here under it we're gonna have another div that is covering everything and then we're gonna make a gap between them so we can easily do that by covering this user listing with a div so I'm going to close this one let me okay and we cannot close this but we can close that one so here we can cover this one with a div let's bring this one inside oh okay you just have to cut this and put it at the end and then we need to add another bracket for the user okay so in this tip at the top I want to add an H1 tag saying your listings and then I'm going to bring them to the center we just say text enter you're gonna add some space at the top and bottom using margin Y and then we can just make it bigger because it takes two three Excel or two XL would be fine I think that is too big so let's I think two Excel it should be okay and then we can change the font weights to be semi-bold okay and now in this div we can change the flex Flex to flex column and then we can space add a space between them by just saying Gap port for example and if you add a get four I think we don't need this margin y we just say margin top so that's fine all right you can you can just remove it oh okay why is your top seven that's fine so we have now the listings here in the next section we're going to work on the delete functionality for this one and so first we add this one to the GitHub we just say complete and we just say add show listing or we just say complete that should be better complete your user listings functionality okay you just commit and push so see in the next section for adding the delete listing of the user all right in the last section we have completed showing the listings of the user in this section we're going to add the delete functionality so when we click on the delete button we want to delete the listing so if you look at the final version I'm gonna restart the page so we can click on show listing actually I don't want to delete these listings let's create quickly one listings so I just want to write down something here to for description and address I just make the regular price upload an image real quick and then we can click on create listing we create a listing and if you go again to the profile page it show the listing we see the listing here at the bottom actually you can sort it with with the latest one I'm going to show you how to sort in the search section so you can learn it there but for now just for Simplicity we leave it like this and then if you click here on delete we're gonna delete it both from here and also the database so I'm going to refresh the page and you see that the listing is completely gone so what we want to do here in our application we want to add an event listener to this delete which is going to request from the API route so first we need to create the API round for the delete functionality so we can go go to API we just go to routes listing and then we're gonna here we're gonna create a listing about this time we want to create the delete functionality just a router dot delete and then we're gonna delete uh you we're gonna say forward slash delete and also we want to pass the ID also we want to verify the user if it's authenticated and also the owner of this listing and then we're going to call a function called delete listing let me add this one at the top and also we need to go to listing.controller.js and here we're going to create that function delete listing so this is going to take take it like this request respond and next and this is asynchronous and here first we want to check if the listing exists or not so we just say cons listing and we just want to check if for from our listing model we use fun find by ID and and we just request we use the parameters in the route and where was it here so this ID to find that listing if the listing does not exist we want to return an error we just say if there is no listing we just say 404 listing not file but if the listing exists we want to check if the user is the owner of the listing so we're gonna check if the requested ID that the person who is authenticated is equal if it's not equal to listing that user ref we just need to convert it to a string the user ref I don't think we need to convert it because it is already a string uh let's delete it if you get an error we're going to fix that one so and then we're going to return an error for one you can only delete your own listing but if everything is okay we want to use then try and catch a statement first we want to handle the error here by saying next error and then inside a try we just want to delete the user we just say await listing dot find by ID and delete and then we're going to pass the ID of the listing so now we have created this API route we can firstly test it with a insomnia so inside the listing I'm going to add another request actually this one we need to rename it so I forgot to rename this one this is going to be hit user listings and here we're going to create a request we first rename it before we forget so here we just say delete a user's a listing we just say delete a listing and then this is going to be a delete request and then the address is going to be listing forward slash delete and then we need to pass the ID of the listing so I wanna just get this see the listing of this user which is here I wanna get this ID for example I want to delete this on test two so let's copy this one and then paste it here and also when we do this wait we want to response with the we just response with a status of 200 and then we're gonna pass we're gonna return the listing has been deleted okay now let's try it so if you press on send we can see that we are getting the listing has been deleted and then if we try to get again the listings of this same user we can see that the test 2 is deleted okay so it's working the API route is working now with it's time to create the client-side section so in this client side inside the profile.j6 we have created these two buttons the delete and the edit here I'm gonna just add an on click events listener which is going to call a function called handle listing delete and then we can just click we need to actually pass the ID of this listing so we can create it like a callback function like this and then we're going to pass the ID of this listing which is inside this and remember we got this listing from the map so we just say listing dot underline IP we're gonna pass this ID and then we're gonna get it inside the function that we're gonna create here so we're going to create a function called handle listing delete and we got the listing ID as the input and in this function what we want to do here is to first thing first you can just add a try and catch for the error I don't want to add the any just to spend time to do the error you can do it's very similar you can just create an error for that and then show it under it but for now I just want to console log the error that message if there is an error otherwise we want to just get the response we just want to have a response we just say await picture request forward slash API forward slash listing and then delete and then we pass the ID of this listing which we are getting as the input of this function and then for the method is going to be delete and then we can convert it to Json and if the data is success is false we're gonna console log it and return otherwise uh we can we're going to see that see it because we want to actually uh update the listing uh piece of State remember we have created a p sub State here called user listings we want to update this one so what we do here after the delete if the delete is successful we're gonna set the user listing we're gonna get the previous data and then filter out the the one with the ID of this listing ID so so we're gonna filter out we want to get everything except the one with the idea of this ID so we're gonna delete and update it okay so let's try it so here inside the profile I'm gonna refresh the page click on show listing we get the listings and if you click here you can see that the list is updated and the listing is gone and if you refresh the page again we can see that the listing is actually removed from the database as well we can just check it double check it inside the network so let's delete this one or this one as you can see we get listing has been deleted and also okay so if you refresh the page you still can see only two listings so that was it for adding the delete user functionality let's add this one to the GitHub so we create a message just say complete user listing or just say complete delete user listing functionality we can commit and push in the next section we're going to work on the edit functionality so we want to if you can look at the final version if you press on edit we're going to be redirected to the edit listing page with the ID of that listing and also we get all the information like the title description address and Etc so we can update the information and click on edit listing and update it so in the next section first thing first we want to work on the API router of this and then we're gonna complete the functionality so see in the next section all right in the last section we have completed the delete functionality for the user listings in this section we're going to work on the edit functionality first we need to create the API route for that and then we're going to connect it to the client side so let's go back to visual studio code and here we go let's close everything first so we can do everything from scratch so we can go to API first we go to routes and listing.round.js we're gonna add another router for editing which is going to be a post request so this is going to be exactly like this we're going to go to the forward slash update and we're going to pass the params of ID we're going to verify the token so we know that the person is authenticated or not and then we're going to call a function called update listing we can add it here inside the controllers but now we need to go to the controllers folder to create that so we go to listing.controller.js and then here we're gonna create that edit update listing so we just say update listing this is going to be synchronous with request response and next let's close this the first things we need to do is to check if the listing exists or not so we just say listing is going to be equal to a weight we use the listing model we use the find by ID method and we're going to pass that params that we get and once we are we need to just create a condition we just say if there is no listing then return an error with the status code of 404 and we just say listing not found and then we want to check if the listing belongs to that person so if you just say request.user.id which we get from the JWT from the cookie and if it's not equal to listing that user ref we're gonna return and error saying with the status code of 401 and then we just say you can only update your own listing otherwise we want to update their listing so we're going to add a try and catch a statement here we're gonna just handle the error using our middleware and inside a try we just want to say await or we just create a constant first because we need to return it as well we just say update it listing is going to be equal to a weight we use the listing model that we have created and then we're going to use a method called find by ID and update and after that we're gonna pass firstly the ID so we're going to pass the ID and then we want to we want to say the request updated with the requested body whatever we sent from the requested body and then we're going to return the new true because we want to get the new updated listing but if you don't do that one you're gonna get the previous one not updated one in the return and then so here I think this parenthesis is not necessary and then we can just response with a status of 200 which is okay response and then we're gonna send back the updated listing so let's test this one using the insomnia so we're going to create inside the listing folder we're going to create a new request and then we can just rename it to update listing and then this is going to be a post request the address is going to be localhost 3000 forward slash API for slash listing and this is going to be let me check what I added so inside the listing the route I have added the update okay so this one should be update and then we need to pass the ID of that so we need to actually sign in again for example with this person I'm gonna sign in and then we want to see if the person have any listing for example get user listings we can pass the ID of the user we get here so we need to copy this ID we go to get user listing paste it here and then we send we get all the listings of that user and then we want to update for example this listing so I'm just gonna copy this and then we want to just go to the update listing and paste it here let's uh just try to get an error for example I just add a number at the end three and then we send we can see the servers return nothing let's see check we are having an error actually here okay let's check the error okay let's go to listing.controller we see that there's nothing to import here so that's not an error for that so let's go from the beginning of the error it's a long error let's see what what we get okay even we cannot reach the beginning up there let's uh save the file again okay now it's actually working uh probably I didn't save it correctly or if you try again maybe the error is from this one so let's send again okay this is causing an error because but if we do it like this we should actually return an error so we didn't actually let's check the try and catch again so first we check the listing if this there's no listing we're gonna return the error okay so let's actually make this one delete this C and then add that okay I found actually the error that's error Handler is not uh came in so it's not so we need to import the inner Handler so that was a problem I thought that is already imported so let's try again so now it's a wrong uh actually ID so if you do it we just see listing not found we get an error with this message but if you do the correct one for example from the listing I just copied it again and then we want to update this one for example inside the body Json I just want to change for example its name you just say name I just say updated and then when we send as you can see everything is the same as before but the name is updated we can update everything like image we can update all the things and also you can see the user ref is here and already checked and there's no error so that one is okay too so and if you do again get the listing of the user you can see this is actually updated in the database so that was it for creating the API round for editing of the listing let's add this one to the GitHub and we're gonna continue to do other we're gonna connect this API route to the client side in the next section so here we're gonna say create update listing API route you can commit and push so see you in the next section for adding this API route to our client side all right in the last section we have completed the edit listing API route in this section we're going to work on the client side and connect the client side to this API route so if you look at the final version and we go to the profile page and then we go to show listings and we click on edit look at this title this name in Enchanted Cottage and this is going to show us this listing with the same title and description and everything and also the image so we can update the image we can update all these data so as the edit a listing page and also the create listing is exactly the same the UI we can just copy that one and then we just need to get the initial value and change them here so we can go to visual studio code and then we can just go to the client side Pages inside the SRC so here we can create a new page and we call it update listing.j6 and then we can use RFC to create a react functional component and also we need to add it to the app.j6 so here as this is the protected page 2 so we need to edit just below this create listing and then we just call it update listing and this should be update listing as well we need to import it at the top tip so we have imported it here so if you go back to our website and then we just go to uh let's actually add this on click so when we click on this one we're gonna be redirected to this page so we can go to profile.jsx let me close the backend side so we don't need it now so we if we go to the edit button after the here we can just add a link tag around it and we're gonna close the link tag here so we we need to import it at the top let's see if we have link here okay we already have the link so what we want to do is to just add the address to it so we're going to go to update Dash listing for Slash the ID of the listing so now if we try again in our website for example this listing new listing when we click on edit we go to update Dash listing forward slash the IP of this ID of this listing but actually we cannot see the text that we have created update listing so let's see what we so this is create listing oh what happened here also create this thing and update listing is just saying update listing and this inside the app.j6 so the address is update Dash listing and then we're gonna call that update listing so this is update Dash listing let's just go to this one okay now we can see the update listing but we need to get the parameter at the end here this this one so how we get this ID and we can fetch the data so first thing first let me just copy everything from the create listing and put it inside there update listing so we should see this page now like the this one let's say I'll edit some necessary parts for example the title we have is update a listing so let's bring this one to the left side so we can see the changes update a listing and also here the button should say update listing okay that's the only change we need to do now we want to fetch the listing data based on that parameters that we see there and the reason we are getting an error when we put the data for example if I go to profile and then when just show the listing and then we click on edit we go to update listing and then the ID of the user but we are not seeing the update listing page so what we need to do is actually to go to app.jsx and we just say this is not only this URL we need to add the ID as well we just add the for example we just say listing ID like this so if you refresh now you can see now we are still seeing this page even though we have this ID at the end so now we want to actually fetch the listing based on this ID and then show the listing information and fill this form ourselves so we can just go to the update listing here and then we need to add a use effect react hook so once the page is loaded we want to actually get the information so after here we are console logging the form data actually we don't need it to do that one we can just here add a use effect react hook we need to import it from react so we click here and we want to check we want to call a function so we want to because this is a synchronous Behavior we cannot actually create the asynchronous inside the use effect we get an error so we need to actually create a asynchronous function here and then call it inside so we just say cons and then we want to create a function and then we just call it fetch page listing and this is asynchronous and then once we have this function we can call the function here so this way we can have a synchronous behavior and also we want to have that ID inside the browser inside the URL of the browser in order to get that we can use a method from react router Dom a whole called use params and then we need to initialize it for example here under the navigate I just initialize the params we just say param or prems equals to use params and then if you want to get it for example so for example inside this use effect for example I just put it inside this function I just say const and use a listing ID okay this is going to be equal to params dot listing ID because what we did here inside the app.jsx we call it listing ID so now let's console log and check it so let's close this one so we don't hit confused here we just say cancel log listing ID so now if I open the console here let's refresh the page each time you come to the page we can get the ID which is inside the URL so we have the ID now and based on this ID we want to pitch the information about this listing so we need to create another API route for this creating a listing that is very simple actually we need to just go to API folder we just go to routes listing and then here I just want to create a gate request and then we just based on the ID we want to get the information of the listing actually we don't need to we just say uh yeah we just can say get or get listing well it's okay we just say get and then we pass the ID we don't need to verify the user because later we want to use this API route to get the information of a listing so what I mean by that is for example inside the final version we have we get the listing here and also we get the listing publicly as well so each person can get a listings information that so this is not a secure things so we don't need to verify the user to get the listing so here is fine we don't need to verify the user and then this is going to be get listing and then we need to import it at the top and then we can create it inside the controller listing that controller and at the end I just say export con State listing and then we can just add some uh try and catch a statement we catch the error using our middleware and then inside a try we want to just get the listing we just see a listing equals to listing that find by ID but based on the parameter the ID that we sent here we're gonna get it and then we're gonna return so if there is no listing we're gonna just say listing that file otherwise we just want to response with the status of 200 and we just say Json and we return the listing so we can test this one inside insomnia as well for example in the listing we can add a new HTTP request with the name get listing and then this is a get request and then we just go to localhost 2000 API listing and this is going to be get and then forward slash we want to just get the IP and if we just if you remember we get the all the listing of the user we can just get this one this ID we go to get listing and as we don't need any authentication each time we do we get it so we get the information like this okay and now we wanted to inside the update listing here we want to fetch it so instead of console logging the ID we want to create a response with the await with the fetch method which is going to be equal to API for slash listing and then the ID of the listing that we get here from the URL of the page and we can just convert it to Json and then if you remember we have here a form data okay we have the form data but it has initial value and we want to change the uh change it and we just say data we spread all the data there actually we don't need to spread it we just change everything we just say set form data we just say data that's it and if the response has an error we just say if data that success is false we can just actually console log the error because we don't want to create a message for the app we just console log data that message and return so let's see our website now let's refresh the page so we're getting an error not found so let's check the network we see the response so I'm going to clean it when we refresh the page this response actually is coming uh okay this address is not far so let me check so the route uh the address is uh forward slash get actually we need to add the postlash gear 2. so here inside the update this is for slash API over slash this info get and then we'd add this on so as you can see now the information is updated inside the listing so each time we refresh you can see the data we are getting and also this is the request I think it's this one and then we get all the information of the user so now you can update the listing so what we want to do here is to instead of create a listing now we want to click here and then we use the API route we created for the update of the listing instead of creation so we need to actually modify this page so instead of uh here we should go to handle yeah handle submit so here we are we are requesting to the forward slash API for slash listing forward slash create but we want to actually update it so this create if you remember inside the listing dot route this one should be update so we have used the create this one is update and also we need to pass the ID of that listing as well so here this one should be update and we need to add the ID so we need to create a backtick here and then here we're gonna create a variable and then this is going to be the ID of that that we are getting from params Remember The Prem the URL of the widgets and then so we don't have it here we just say params dot listing ID so let's try now so everything else would be similar and also we're gonna navigate again to the listing for slash that ID so now for example I change this one to listing updated we don't want to change anything else we just click on update listing okay now we're getting an error so let's open the inspect and check the error so we just say response this server responds with the profile are not found the listing not found let's try again I want to go back to the profile page refresh the page and then I just go to this listing click on edit and then here let's up check this change this one to update and click here so we're getting the same error let's go to network so we we are not getting any response actually so it seems like that okay I didn't add the forward slash here so here we should add a forward slash okay that was the problem let's try again I'm going to refresh the page and then here I'll just say update it let's click on update and we check the console if we get an error okay there's no error and then we are redirected to this page and this error is not a problem because we haven't created this page yet so we're gonna fix it later so let's check the profile and now if you check on the listings you can see that this listing is updated inside the database as well so let's try to edit this one and then for example I add another image two images for example okay updating and we have three more images let's change its name to for example updated two and then we change this range to sale furnished offer we're gonna have an offer for this from regular price is going to be 7 out of 90 and this one 500 and then we just change the bedrooms so I wanted to see that everything is working perfect so and then if you click on create listing okay this one the minimum is 10 character so I'm going to add this one like this okay it's created and then if you go to profile show listing we can see that this updated and if we edit it again we should see the data new data that we have update so this everything is working fine so and that was it for create and update a listing page so let's add this one to the GitHub for our reference so let's add everything and then we just say complete what we want to call for example we just say complete update listing functionality complete update listing functionality that's fine and then we can just commit and push so we have done with the actually the profile page now so we have done with all the parts of the profile page we can create we can update we can delete so what we want to do now is if we want we want to create these Pages related to that a specific page we want to have this a slider at the top and then we're gonna design it like this so see in the next section for this part of the project all right in the last section we have completed the update a listing functionality in this section we're going to work on the listing page so if you remember when we updated we're gonna go to that listing page here first thing first we need to create this page so we just need to go to visual studio code and let's close everything we go to client side SRC pages and then here we're gonna click create a new page and we call it listing.jsx we can use RFC to create a react functional component and then inside the app.j6 we need to add this page and this page is not private so we can just put it outside this private route and then let's copy this one first so this is going to be listing for slash listing and this one is going to be listing and then we need to import it at the top and then also we need to add the ID so forward slash listing ID because based on this ID we want to fetch the data so now if you go to the website we can see the listing here so the page is actually is created so what we want to do is to like the final version we want to get the listings information and based on the images we want to create an image slider using a package called swiper and then we want to have this share button then we click on it we're going to copy the link of this page so and then for example I can paste it like Bitcoin release so we can copy the link and we're gonna have the title with the price we're gonna have the address we're gonna get this icons from the react icons package we're gonna show if it's sale or rent or it has an offer or not and then we're gonna have the description and finally the number of bits per parking spot and Etc so the first thing we need to do is to get the information of this listing so I'll bring it to the right side and this one to the left side let's go to the listing that jss page and here we're gonna have a use effect react hook so we need to import it from react at the top we can delete this one actually we don't need it and then what we want to do is to create a function here I forgot to add another parenthesis here actually so what we want to do is is to create a asynchronous function we're going to fetch the listing data we can call it page listing and this is asynchronous and then we need to call this function so and then we can just we can create a response because we have already created this get listing here the API route so we can use that one we can just create a response which is going to be equal to a weight page forward slash API for slash listing forward slash get and then we're gonna pass the ID so we're going to create the backtick here so we can have a some variable so I'm going to create a variable and then this is going to be the listing ID which we need to get using the Rams use params Hook from react rather dumb oh sorry this one should be import that's fine I'm getting a wrong suggestion from react router done we need to initialize it not like this Rams equals to use params and then here this one is going to be params dot listing ID as we defined here in app.jsx listing ID okay after this request because this is a get request we don't need to work on it more and then we're going to convert it to Json and if the data the success is false we want to return and otherwise we want to get the data and then I want to create a piece of State called listing listing and then the initial value for this one is going to be no so let's see okay I made a mistake here so listing and then once we are successful we want to set the listing to data and also we can add some loading effect as well loading an error we can just add this one easily we just set the loading to pause or we've just set the loading to True at the beginning and when the information is completely gone we can set the loading to pause and also we want to have the error and this is going to be false so before fetching the data here what we can do is to add it try and catch a statement and we can just put everything we did here inside a try and inside the cache we want to set the error to true and here too we want to set the error to true and also before fetching the data I want to set the loading to true as well and when the error happens I want to set the loading to false and here as well we're gonna set the loading too fast so now when we come to this page let's see what we get I want to see the data so let's inside here we just show the data.name for example so if there is a sorry if not data there we set the where is it they set the listing to data so we just say listing dot name if there is a listing otherwise we get an error here so if there is a listing show the listing that name but let's see what error we are getting I think I forgot to import use of state two so I fixed that one okay now we are getting the name here updated 245. so we change this return to Main and then inside the main so as you can see here we made it like this name you can add the loading effect and other things I just want to firstly create the loading effect so here inside the main I'm gonna say if there is a loading we just say loading like this and then let's style this we set it and we bring it to the center text Center we add some margin at the top margin in the y-axis up like this and then we can create like a make it bigger to excel okay that's enough loading and if there is an error but why is it showing only loading here so we set the loading to false here also also when we get the data we need to set the loading to false as well here so let me fix this one and refresh the page okay loading pulse loading false let's set the initial value to false as well so we set the loading to True when we are fetching the data and then when the fetching is not successful we set it to pause and also here we set the loading to false as well here we set the loading to false so let's console log the loading we see the problem so console log loading and then here we're gonna inspect and go to console if we refresh the page we can see okay it's it's going from True to false all the time because this use effect we didn't add any dependency here so we just want to say run this one only one time or each time the prams that listing ID change you just change it so now if we refresh the page okay you know I fix this one okay now it's false so first is true and then it's false okay now we see the loading you can add some other things for example the spinner or other things we just for Simplicity I just said loading but you can replace this paragraph with a spinner for example so you see the spinner but because this page is very fast to be loaded we can we don't we barely see this loading even and then if there is an error we want to see the error as well we just say error and let me just say something went wrong uh for example how we get an error for example if I just if the ID doesn't exist for example I just add some random letter at the end okay you see something went wrong so and then for you can for example you can just add a link here to go back to the home page or something like that but you can do it yourself I just want to keep it simple like this okay it's still we are getting an error here so we need to set the error to false if the everything is okay you just say set loading set errors set error to false and okay it should be fine now so this is for the loading effect and error what if we have the listing so we want to show the listing here so what I want to do is I want to show the image at the top so we just say if there is a listing also you can add more conditions for example if there is a listing and there's no for example loading and there's no error so you can add more conditions like this so you should be more specific and then so this this is going to prevent any possible error and then here we want us for now for example I want to just add an H1 tag showing the listing .net you see that name here so this is a logic you just say if there is listing but there is no loading or error like this we see the listing that name otherwise you get an error because if there is no listing you'll get an error here so now let's install a package called swiper so we can just add a swipe for our images so I prefer our image so here we need to install inside the client side so we need to let me clear this so you can see it better so we're gonna install a package called swiper and then once you install it you can import these things from the top so make sure they follow these things correctly because if you make them a different for example just be careful of the capital or the lower case so this one should be uppercase sorry the beta capital S swiper swiper a slide run swipe for slash react and then we're gonna import uh swiper core swiper form swiper and also we want to import because we want to add a navigation between different images so we're gonna import navigation from swiper forward slash module modules with the S and also we need to import its CSS we just say import swiper forward slash swiper Dash bundle dot CSS so actually this is wrong actually let me fix this one this is not like this we just say sorry purple slash bundle okay bundle that's it so let me check again if you don't make any problem here okay let's fly swiper swiper slide swiper core navigation and this CSS bundle and then we need to initialize one of its packages which is uh let me see so here inside before the the listing we just need to initialize this wiper code cipraco and then we just say use navigation because you want to use the navigation you need to add this one as well okay let's see we are getting an error somewhere okay okay seems like we are getting an error let me see so could not resolve react swipe before slash swiper Dash react now the problem is actually I haven't in they didn't install the swiper in the client so I said you have to do it but actually I I install it in the backend okay so we just clear this we go to the client side and then I just install it swiper and then now if you refresh the page Let's see we have that swiper okay we have swiper in the front end and then here let's save it let's see the error yeah the server responded with the status of five or four let's go to the other Pages you see that we are getting an error here let's remove this one first and refresh the page okay the error is for the swiper uh we are getting the data correctly but I don't know why that swiper is making a problem here okay none existing module it's like it didn't install it properly again so this is a client I have installed let's clear this and let's check this package.json file so we have actually swiper version 10.2 well I think because I have installed it in the backend as well so maybe it's making a problem and let's delete this one from the back end and then I just go to the back end and then I install all of them again so if you check now and refresh the page you can see there's no error so let's go back to our listing.j6 so everything is actually was corrected the problem was I have installed swiper inside the back end instead of client so if you didn't make that mistake it's again it's fine for you too so here instead of showing just the name I want to add this swiper so I'm going to delete this one or we just delete this actually H1 tag so here instead of H1 let me just add a parenthesis here and then we're gonna have this swiper we can add an empty fragment actually so let's add that one because I want to put everything inside this actually it's already there because the color is different you can see it so we have an empty fragment and inside the empty fragment we need to add the firstly we want to add the swiper so we want to cover everything with swiper and then as we want to use the navigation we need to add the navigation here we just say navigation we don't need to say true we close this and then inside this swiper we're gonna Loop through our images we just say listing dot image image URLs if you remember image was stored here and then we're gonna map through it so this one is this is going to gives us each URL we just get the URL here and again we want to return we can return directly so I'm going to add the parenthesis here and then here I just add this swiper slide let's close this circle slide and this one should be here at the top and then inside the swiper first we want to add a key because this is a map we need to add a key and the key is going to be URL as well because this is unique we are getting an error here let's let's change this to empty fragment to div so it seems like a okay this seems like there is something missing here okay I think we didn't close this uh here we didn't close this listing so swiper is here where is the swipers closing tag okay we don't have it here so we swiper you close it here okay now it's working so inside the swiper slide we're gonna add another div and inside the div we're gonna have to pass these things so here inside there we're going to have a class name we just set the height to be 500 pixels and also we need to add some s a style here to be able to see the images the style is going to be inside another curly braces because we want to add CSS here so we just say background and the background is going to be that the URL that we are getting so we're gonna have a back deck here and then we just say URL and then this URL is going to include this URL that we are getting so here we should add a a variable with the name URL okay and then we're gonna add other things like we want to make it Center and also we want to make it uh no repeats okay let's see why we are not able to see it yet okay this one the map is going to gives us this URL okay now now we are seeing it so this is a we get the URL and then here we just say swiper slide and then we're gonna have a div and we set the height and also the style is going to be the background with this URL that we are getting from the map and we show it here so we see it like this and if you want to see it in a full size we can just add another things here like a background size background size and then we set it to be cover so background size okay we need to add a comma here okay no it's okay now you can see it this is full size and because we don't have two images for this listing we see only one Let's uh go and add more images for example for this one um for this one we have three images let's go to the page and then now we have a slider here we can click and go to the next images so this is coming by the adding the navigation so that's it for the adding the swiper let's add this one to the GitHub because I don't want to make the this section too long so here we want to add this one we just say add image a slider to the listing page and we can just commit and push it to GitHub so in the next section we're going to continue and complete this page so see you in the next section so after the this takes white we can just bring it to the center using text Center and then we can add some padding for example padding one and then we can make it rounded using rounded medium for example I think that's it and for the other one is going to be very similar but we need to add a condition in other conditions just completely show it or don't show it so we just create one condition here we just say if listing dot offer is true then show this so which is going to be a paragraph and inside the paragraph we're gonna just write down dollar and then we just say not like this we want to say dollar yeah we just say if the listing and we just want to convert the listing we just say listing that we want to converted to numbers so listing that regular price minus listing that discount price so because this is not an offer we don't see it let's change this one to offer so here I'm going to change the this one to offer so as you can see this is 790 let's make it 780 so 10 discount so as you can see we see ten dollar now and then let's start this once similar to the one in the top so I can just copy this style here and paste it here but here I want to change its background color to be green instead of red okay and then we want to bring them next to each other by changing its display to flex and then we want to add a space between them by just adding gap for example or I think that is fine in the big screen is fine too okay so that's it for the styling of that so after this div what we want to add is the we want to add the description so we added a paragraph here and inside the paragraph We want to say listing dot description so we should see the description here let's add more text to the description for example I can copy this text and then I just edit this one so we have a more description so we can style it better so before the description just showing the description we want to say description with the capital D and if you want to add some Dash here okay we can see it like that and what I want to do is to make this description and bold so instead of doing this one we can add a span here we just say span and inside the span I want to add this description and then we can style this S Pen we just change its font to be for example we set it to be semi-bold and then we set the text to be black because I want to change the description in a lighter color so we change this descriptions color to Black okay this one and then we can add another space here too and we should add it like that okay so it's fine description and then we want to style the paragraph We just want to add takes a slate for example 800 which is a kind of lighter color and I see a problem here because we don't have the padding so this paragraph actually should be inside this this step so this is the div at the top we have another div that has some limits so it should be inside the this step okay so now we have this padding as well so we don't have weird styling so after this paragraph We want to add a UL unordered list and inside the honor the unordered list we want to have different things like we want to have this number of bits path parking and furnish so the first one the is going to be folks we just added the bedroom so we need to add some icon so here we add a an icon here we just say if a bit which is coming from react Dash icons let's close this we should see it here this bit icon so I just want to change its style to make it larger we just say text LG and then after that we want to have a condition we just say if the listing dot bedrooms are the lengths of that for example the number of that is more than one then we want to just show the listing bedroom and then say bedrooms or beds like this we want to say listing the bedrooms and then we just say bits and then otherwise we just want to say bit or we can just say one bit because it's it can be plural or singular so now we have two bits and if we modify this one two one bit you can see it's show it's showing one bit instead of two two bits so and then also we want to bring them next to each other we just want to CL add a class name here with the display flex and then we want to use item Center to bring them to the center vertically you can add a space between them by just saying gap for example a gap just we have one is enough I think one bit and the other things we need to add I think that's fine and then we can add y to space no wrap so when we have a bigger screen I don't want this one bed shows like one and bits go under there so we just say y to space no wrap the other things I want to do is I want to change the text color to be green 900 and then we set the font to be semi Bold and the size of the text to be as small so it's going to be like this actually we can add these three to the this honor ordered list to be able to apply it to all the lists so we can just add it here so we don't need to add them separately so we still see the color is red and every X color is green and text is a small so let's add one more for the bathrooms so we just copy copy it one more time and this icon is going to be path we need to import it at the top as you can see it's a where it's still showing a bit so we just change this one to path and then this one is going to be we can just change this one by Ctrl D and then we just say bathrooms so it's two bathrooms I feel they are not aligned this one are not aligned all right so I think this icon is bigger so we can just bring them next to each other by by adding Flex to this UL and then we want to add a space between there so we can just use item Center first to align them vertically and also if you want to add a space between them we just say Gap four in the mobile size and the in the bigger size after the mobile I want to change the Gap to be 6. so like this and then in the bigger screen we have more space so let's see the final version we have I think that's okay that's the same things we are doing here okay so after this we're going to have the parking and other things so for the parking let's actually copy this one one more two more times so one for the parking so the conditions here's are different and also the icon is different so the icon is going to be for the parking fa parking we need to import it and then here the condition is listing if listing.parking is true we want to see that we want to say if the listing so if it's true we want to say parking or we want to say no parking or we just say parking spot and no Park so no parking for this one and then for the last one is going to be the furnished so we just say fa chair and then we need to import it and the condition for this one is going to be similar we just say if listing that furnish is true we want to say finish otherwise we want to say unfurnished so this is finished and we have no part two no parking two baths and one bath in the bigger screen we have it like this I think in the final version we don't have too much space after the [Music] yeah I think the spaces are a little bit more here let's see so in the div at the top that is covering all of them here I added margin Y and GAP six I can change this one to Gap four and then after the you just remove the margin here okay so okay it looks better yeah I think it's fine okay the other things I want to check it's it's in the real mobile size for example if you inspect it and then make it mobile we should we can see a little bit of problem here because this furnish is went outside and made this screen a little bit bigger so we can fix this one by adding inside this on order list after the flex I want to change the flex to flex wrap so Flex wrap means if you have a if they cannot stay in this screen they go to the next line like this so it's working in the mobile size as well okay I think that was it for this section in the next section we're going to work on this contact landlord so if this listing is not yours you should see a button here saying contact lens when you click on it let's see let's refresh the page first as this is the free version I have put it inside the render so if you see it like this is just moving because render for the free version if there is no traffic for the website this is going to make it sleep so it takes time to be awake but it's fine if you use their paid version you don't see this delay but this is not always when you have enough traffic you don't see the actually this delay so now it's refreshed now if you click on this contact icon you see uh contact this person the name and for the this title and then we can just write down the message and then send a message and this is going to open your default email software and the message is going to be there and also you're gonna have the other information the email of the person as well so in the next section we're going to work on this section so in the sending message to the owner so let's add this one to the GitHub so here we just add all of them I have just modified the create listing and update listing and and this is going to be complete uh listing page so we can just commit and push to GitHub so that was it for this section in the next section we're going to work on the contact landlord part so see in the next section all right in the last section we have completed our page until here in this section we're going to do the contact Lan rule as you can see from the final version we have a button saying contact landlord when we click on it this is going to first thing first the mess the button is going to be disappeared we're gonna have a different button saying send message and then we'll have to get the information of the user like its username and then the we get the title from here and then we write down the message when we write down a message for example just say hello then we click on send message a window is going to pop up which is your default email the email address of the person who is created this listing is going to be built in the two section and also subject is going to be the name and the title of the listing and also your message is going to be here so it's ready to send and we click Send this this is going to send a message so we want to first thing first we want to add the button and then we want to add some conditions so if the person is not authenticated shouldn't be allowed to see the button and also if you are if this person is already created this one cannot see this listing as well so I'm going to create the conditions first so let's go back to listing.jsx and after that div here should be this one okay this one has the a Max width 4XL I think we need to put it inside this one otherwise the button is going to be bigger so let me add a button so let's bring this one to the left side so you can see the changes here so we're going to have a button saying contact landlord landlord okay see it here let's style it so I'm gonna just apply a simple styling like a background a slate 700 let's change the text to be white and then we're gonna have a rounded Corner let me make it uppercase then we hover over it we want to change its opacity to 95 percent okay it's like this and then we're gonna have a padding of three so we're gonna have it like this and then we have the hover back so everything is uh looking okay so we want to add the condition now so we want to add a condition we just say if there is a current user so if you remember we have the current user from the react redox and only if there is a current user and if the person is the owner so we have the listing here so let's see at the top we have this listing if there is a listing and then if the listing that user ref is not equal so we wanna other people then the owner of the listings here so if you this one is equal to one current user that underline ID and then we want to see the button so here we're gonna bring up this button okay so let's see what error we are getting let's refresh the page okay current user is not defined so we need to bring the inside the current user so we can use the use selector here I can import use selector from react redox and then inside here I'm gonna get the current user using that use selector and this is going to be a state that user okay so now we are not getting an error Let me refresh the page one more time so for this true and false we can just remove the console lock here okay this one I can remove this console log so left so now we are not getting anything here so now we see the contact landlord actually we shouldn't be able to see it let me see I think we are the owner of this so the listing that user ref is not equal to current user.underline ID and then we want to see it let me check let's let's try to another listing for example I go to this person's profile and then I just click on show listings let's try the other one this one are you still seeing this contact lender so let me console log this current and let me console log this listing that user left and also the current user that underline ID so we go to the top here after this current user let's add a console log for the current user that user sorry that's underline ID and also we want to cancel log listing dot user ref so let's see the console okay the first one is undefined actually so what is the what was the first one current user.underline ID so this current user is not working but if there is no current user we cannot see when the button too so let me console log the current user itself not the ID okay it's showing me current user okay we have current user but the underline ID is undefined so let's try it again and then we find the reason okay okay I got the I got it private this one actually should be the structure like this because otherwise this is just the uh user not current user and then now we try so now we see both the current user.underline ID and the other one so they are equal so now we shouldn't see the button okay so let me delete this console log and then here so we have the current user and it shouldn't be equal so what I want what we can do is to create a logo I'm gonna copy this URL put it here and then I'm gonna sign out and sign in with another person so I should be able to contact that person so I'm gonna sign in within my another Gmail and then here I'm gonna paste this link so here I should be able to see this contact landlord so because I'm signing with another person okay so it's working and then what we want to do when we click on this button we want to activate a p sub State called Contact landlord and then we remove this button and we want to show other things so I want to add a piece of State here at the top and we call it contacts let's just call it contact for example and we set it to be false at the beginning and then when we click on this button so we can add it on click events listener and then we're gonna have a callback function we want to set that contact so we want to set it to be true okay and then we want to add a condition here so we just say if this one is true don't show this button so we're gonna say and not contact so if this one is true this is going to be false so we cannot see the pattern so now we see the button when we click on it the button is going to be disappeared but instead of the button we want to see something else we want to say if there is a button and then if the the contact is true to show something else we just say contact oh we need to add a condition here if there is a contact show so I want to make a component for the contact so we just say contact component let's close this and then we need to create this component so we go to the Explorer section inside the components in the SRC folder I'm going to create another component called contact.j6 and and then we can use RFC to create a react functional component so and then we can import it here we just use counter space to import it so when I click this on this contact I should see the contact that we have here so inside this I want to add some some f actually first we need to send this listing information as a prop so here I want to say send the listing and then this is going to be equal to that piece of state that we have listing okay and then we want to get it in as the input of this contact we can just get a like a prop and then the structure it but we can destructure it directly we get the listing so here instead so what I want to do actually I wanna actually get the information of the user this landlord so we need to create a API route for fetching the information of a user a public user but for doing that you need to be authenticated so you need to have a current user as well so we're going to protect that API route as well so let's go to API let me close this one and then we go to the first we create the route user.rout.js and we just create a get request we just say router dot get and then we want to create a request we can just say we don't need any address we just say search for this ID and the person should be verified so we need to add the verify token they need to be authenticated so let's see not this one verify token so it's already imported a verify token also we want to we just say get user and then we need to import it from the controller so we need to create it first but we just import it now so we don't forget to import that I can close this user that route and then we go to controllers and user that controller.js and here at the end I want to create that API route and then the name is going to be get user and then we're gonna have the request response and next for handling the errors let me close this and then it's very simple what we do is just to get the user so we just say const user is going to be equal to a weight user and then we're going to search for the user based on the parameters that we provided for the API endpoint and then if the user is not existed like this we want to return an error using our error Handler with just say user not file otherwise we want to bring back the user but we don't want to bring back the password so we're going to separate the password but we should call it something else because we have used it somewhere we just call it pass and then we separate it with the rest which is inside the user.underline doc and then we can return this rest so this is like this and then also we can add a try and catch a statement as well to handle any other possible errors so we can put everything inside try and in the cache we're going to use our next to handle the error okay so everything is okay we have created this API route for get the user so now inside the contact.j6 we can use that API route to get the information so what we do here is to create firstly a piece of State called landlord and then this is going to be null at the beginning and also we need to import use a state let me delete this and then we want to fill this information so we have the landlord we just use effect and then we just run it one time based on this uh we just add the listing that user ref if this one changed we want to run this one but it's this is going to be run one time when the contact is the component is called or shown in the page and then we want to fetch this landlord this is going to be a synchronous we can use try and catch we get the response if you remember we had over slash API forward slash just the listing that user ref so I'm going to add a dollar sign here listing that user ref so what we want to do here we just want to because it's a get request you need we don't need to add anything and then we get the data by getting converting it to Json and then we set the landlord to this data which is the user information and then we can just close the try and catch a statement for the we just we can just console log the error or we can just we can just create a message and show it too but it's very simple to do that I just want to for Simplicity console log the error but you can just add another piece of State called for the error and then show it to user under the button that error for example user not found or something like that but if there is no user and if the person is not authenticated they are not even able to see the button to reach this point so actually we don't need to be that one would be useless even adding that okay so and then we're gonna close this function and then we want to call the function so this is going to get the landlord's information now we want to show it here so let's remove this there and then here I want to have if the landlord if there is a landlord we want to show these things otherwise we don't want to see any of these things so what we want to see here let's add a div here and then inside the div we're going to have a paragraph and inside the paragraph We just say contact and then we want the persons we want to con username we want to show the username so we add a span here and then here we just say landlord dot username so we get the land role by fetching the data and then we show their username so if I click now on the contact we are not seeing anything yet let me see let me see if there is an error here let's let's refresh the page so if we click on contact landlord okay they said not found it means that the URL we have provided is not correct so actually uh this one it should be API for slash user forward slash ID because uh in the back end in the index.js we just say four slash AP Apple slash user and then inside the user.rout.js we just said the ID so that should be correct so let's refresh the page and try again okay now it's working we just say contact this person is the username okay so it's working now let's bring this one to the right side and then what we want to do is to after this is spent we want to say four and then we want to add another span saying their listing that name so we have the listing as the input we just say listing.name and then we want to make it lowercase so we just say two lower case so let's try again when we click on contact landlord we just say contact this person for new listing updated which is this title and if it's capitalized we want to make it lowercase so that is fine but we can just some add some simple styling for that so we can just for this S Pen for example this username we want to add we want to make it bold so we just say font semi both and then for this one too we can make it semi-bold so I'm gonna copy this and add it to this expand okay so it sounds good and then we want to have this message takes area so after this one we're gonna have and it takes area so with name we just say message the ID is going to be message for the columns and we don't need any columns but for the rows we just say two row to make it a smaller and then the value for this one so we need to actually create another piece of State called message the initial value would be an empty string and then here we just say value and this is going to be that message piece of State and then we want to have an unchanged event listener which is going to call an unchanged function so we can create a function here at the top which is going to sit the message to e.target dot value so we're going to save the changes inside the message so let's see okay so we can now do changes here so let's add some styling to this text to be able to see it properly so if you don't have any text we want to have a placeholder we just say placeholder we just say enter your message here and then for The Styling uh let's add a class name I want to set the width to be full first to make it a full and then we want to add the Border and then we added some padding of three and then we want to make it rounded large so I think it's fine and then we can add some space here by just making this one Plex Flex column there I want them to be on top of each other and also let's add some gap between them they just say gap2 so after this text area we want to have another button or instead of the button we want to add a link because I want to activate that email so we add a link which is coming from react rather down we're going to close this and inside the link I want to just say send message and then order two is going to be like this if you want to add a back tick this is going to be mail 2 this is going to activate your mail system in the in the windows and then this is going to send it with the email of the landlord the subject of the email is going to be regarding listing.name and then for the body we want to send this message so GitHub proviolet is getting smarter than spotted as I like it here okay and then we want to style it a little bit so we want to add some class name we want to add a background a slate 700 you want to make it takes white and what else we can just make it bring it to the center using text Center and then let's add some padding of three we want to make it uppercase rounded large and when we hover over it we want to have opacity of 95 so this is happening when you actually when you write down more code to get a profile is not only using the code from the internet they use your code as well so they understand your styling of the code and the the more you reach to the end of the project the better suggestion you get okay so now I think it's ready to be tested we just say hello I am sending a message regarding your listing and then we can click on send message so this is going to pop up this one to this email subject is going to be regarding new listing updated and then this is our message it's ready to be seen and then this is the email of the owner of this listing that's it for creating the landlord button contact landlord button so let's add this one to the GitHub so here I'm going to add all of them as you can see we have created the API route and also we have created a new component called Contact so here the message is going to be add contact landlord landlord functionality to the listing page okay and also we can commit and push to GitHub so that was a tool for creating this page so in the next section we're going to work on the search functionality so we want to add the API route for the search actually this is the most difficult part of the project I I highly recommend you just pay more attention to this part so we're gonna have a create a an API route for the search functionality we want to add we want to be able to create like the imagination we want to add some condition for the search and Etc so see in the next section for adding the search functionality to our project all right in the last section we have completed the contact landlord functionality in this section we're going to work on the search functionality and first we want to create the API route of search and then after that we're gonna create the page so let's go to visual studio code and the first things we need to add is the API route so we I'm going to close all the tabs so we're going to focus on only the backhand side so we go to API first we go to route listing.rout.js and then here we're going to add that router this is not a protected because everybody can search even with without authentication so this is going to be forward slash for example git and then get listings because we want to get more than one listing and then we don't need to pass any ID because we want to get more than one so I'm going to add this one to the controller imported here and then we're gonna create it in the controller listing.controller.js so here at the end we're gonna create export a function called get listings this is going to be synchronous and let's close this so the first things we need to add is to add a try and catch a statement for possible errors we just say next we use our middleware to handle the error and then we what we want to do here we want to create the request but we want to search inside the listing but before that we want to get something like limits we want to limit the page for example because we want to make a pagination uh we want to add the limits we want to have a start index because we want to know which page we are in and also if we want to get the offer furnish parking type and Etc let me show you in the final version what I might mean by that so if you search something for example I search for this board modern just pay attention to this URL so we're going to be inside the forward slash search and then the search term is modern which we are getting from here and the default one is both for the rent and sale and then and the sort is less latest so we can have a source for the price high to low low to high and also the oldest and then we can just search for rent sale offer so when we click on for example offer and click on search you can see that we get only the place for the offer with the offer for example this one has a discount 10 discount okay so and so and the URL when I click on offer you can see that the offer here is true and then once we click on search you're gonna accept these things too for example we just say parking false sort by created add order by descending so we have to create this URL and based on this URL we can have the information and then we can just search and also if you have more than one for example if I remove this offer if I remove this search term and search we're gonna have nine uh listings and then also we have a show more button here so this is the if you click on show more so this is going to show the next one okay so so we should have the ability to do the all these things by just one API route so we want to create only one API route to be able to do all these things so now so what we want to add here for example we want to have a limit so the limit is going to be we have to parse actually the integer we're going to have integer and what is this requested query so everything that is coming from here uh not not here sorry the if you have a request inside our API request that URL for example in insomnia we can add the limit and other things for example we can have a query and if there is no query we want to set it to be 9 for example so inside insomnia let's make a search request for example in listing I want to add a new request and then this request is going to have the name for example we can call it search and then this is going to be get request for forward slash API for for slash listing for slash get and then we want to add the query so what I mean by queries here for example for the query we just write so here we add a question mark for example we just said limit to for example 2 okay that this is going to be request that will read that limit and this is going to be 2. so we want to say if there is a limit use it parse it and make a number otherwise use nine because the one is limited to 9 and then what else we want to do here we want to have a start index we just say cons start index and also this is going to be from request that query that is start ingest index and if there is no index we want to set it to be zero and also for the offer and other things we can do to for example we want to create a variable we call it offer and if this one is equal to request.query.offer okay but offer can be true or false or it can be undefined because if we don't send if you don't write down the offer is going to be on the file and we can't make it false we can make it true or we can make it undefined so we want to check this one we just say if if the offer is equal to undefined or the offer is false so if the offer is false or undefined for example in the final version here this is by default is false for example if I search offer is false but if you click on this model if you go for example in the home page and click on Modern we don't have even the offer so the offer is undefined but if you search from here we can see that offer is false so in both cases we want to set the offer we want to search inside the our database based on this because should we just say if it's false or undefined search we should add a dollar sign and then we just say in search inside the database both true and false so it can be false and true because we are not defined the offer we are not defined the offer we want both of them we want the listing which can be offered or not because we are not defining anything we don't say it false because the user comes to our website he wants to see every listing by default but if you choose the offer he just wants to see the only the offers so if there is no offer selected we need to search both of the offers and not offers so this is the logic and similar things happens for the rent as well or finish or we we need to add all of them like this for example for the furnish so first we just say request that query we get it from the query and if the furnish is is equal to undefined or it is false we just want to search inside the furnish both the true and false so that is exactly the same and also we can do it for parking so we just select parking and we want to get it from the query and this is going to be exactly the same so if the parking is undefined or false we want to search both the true and false and the next things we want to add is the type so just say type we get it from the query and then we just say if the type is undefined or type is all because all what does it mean with all for example here we have rent and sell together if this one is selected which is the selected by default or there is no type on the query so the query is undefined or this one is selected which is all in this case we want to set the type to be we want to search both the red and sale so this should be sale and rent so you it should be now getting the concept so we should consider both things the undefined and all and here undefined and false so this is the default behavior of a search so if there is no type or the type is all search both the sale and type so after that we want to get the search term so the search term we get it from the query as well so we just say search term and this is going to be equal to request.query.search term and we want to get this sort as well we just say sort for it as sort and also here we want to add other things we just say if there is no search just an empty string so search for nothing a specific and then for the sort we just create a constant called sort and this is going to be from the query or is going to be created at because we want to sort it by latest and then we're going to have the order so sort created at descending so this is the default Behavior we're going to have created add and descending if there is no sort or order after the order so everything is done now we got all the queries we needed now we want to get the listings so we just say const listings we're gonna await and use our listing model we're gonna say find so here just I want to keep it simple and so we just say search on the title you can add a description as well but for Simplicity I want to add the title and then we want to say search for the search term rejects means if they have a for example some title let me show you here for example we have a title rejects means search for for example when I say modern you search here here all of them rejects rejects is a building a search function functionality for mongodb and for example if I search for d e this is going to find this one as well so it's not only limited to the word it can be some part of the world so we're gonna search for Rejects and also we want to add another option which is I which this one means don't care about the lowercase and uppercase for example This Modern is uppercase it has a capital N but when we search for modern lowercase we're gonna get that one as well so this is this so search inside the name search for the offer furnished parking search for the type so everything is ready now and also we want to sort it as well so we're going to add dot sort so we're gonna sort it if you remember we want to sort it based on the created ads so we want to sort it based on this created and so sort and order so we just say whatever sort is for example create it at descending it can be a price and descending or ascending so it can be sorted for different things because we have added latest price high to low and low to high and you can add it for many things for example number of bedrooms so a number of bedrooms from high to low or something like that you can add it yourself it is exactly the same and also after this sort we want to limit this one too we just want to limit it to limit and we have to find the limit at the top here and also we want to escape the start index if the starting guess is zero they're going to start from the beginning but if it's one this is going to skip the first nine for us because the we want to limit it to 9 by default so I want to add this one too so this is going to create the listing for us get the listing now we want to return this one to the user we just say return or we can just yeah return response 200 and then we're gonna bring back this listing we can test this one in our insomnia so so I just want to get limited to two Let's test this one we get an empty array so let's see if they have any uh so this one is actually API for slash I think this one should be listings let me check so inside the index.js now it's listing that's correct and then the API route is get so this is going to call this function so let's remove this limit and then we try again maybe we have okay we only we are receiving an empty object so we should have some listing here because we have created before some listing we are I think we still have if you look at our final version and we refresh the page there's no listing okay let's okay maybe I delete it so let's let's log out and sign in with uh okay that person doesn't have any listing but this person has one listing I think so if I check here we have two listings actually and I think I find a problem here so actually this undefined shouldn't be a string this one is undefined like this so I made a mistake here I just accepted a bit of Copilot so and then so let's try now we click on send okay now we are getting all the listings that we have created before for example here I have test three we have updated or something like that let's search and we see that we get there so we're gonna send the search term for example we just say test and then we click on send we get the test tree and also test two test test okay so it's working the search is working and then I want to limit some other things for example this one is furnished and this one is furnished so all of them are finished so I want to limit something that is unique so parking is true okay yeah let's test the limits for example here you need to add and and then we just say limit for example so the first one is question mark the second one must be it's from the second one you should say and and then we just limited to two for example when we click on send we just get one and two and then we want to get the uh latest one or the the higher the price because the prices are exactly the same here so we cannot do it but it's working uh and then if it's there is a problem in the real client side I'm gonna fix it so you just need to add for example more query it can be offered through for example so this one uh offer is true so now you are searching both the offer true and offer false but you can just add for example offer false okay after first actually searched for both of the offer and false and true too based on our logic I want to just limit it somewhere but they are exactly the same but it's okay later we're gonna make more I'm gonna make more listings and then we're gonna test this one in the client side as well so that was it for our uh search API route so we have just got the queries like limit start index offer finish type Search terms sort and Order and then based on them we're gonna search inside all our listings we're gonna limit them skip the index we want and also we want to order them like this and then we're gonna return this listing so that was it for creating the listing API route sorry search API around so we're going to add this one to the GitHub so we just say here create search API route so we can just commit and push to GitHub so see in the next section for the client side of the search API route all right in the last section we have completed the search API route in this section we're going to work on the client side so the first things we need to do is to when you write down something in the header and we click enter or we press enter or we click on this icon we want to search that term and change the url like the one in the final version for example here if I search for example modern and I press enter we can see that we have the modern here and also in the search Tab and also if I change here in the URL for example I change it to mod instead if I press enter you can see inside the search here inside the search box we see the mod so we're gonna be able to get this search term from the URL and also you have to be able to change the url inside so here for example if I change it to Modern one for example if I click here you can see the search term is changed already okay so you have to be interactive two sides you can search change this one from URL or change URL from this one so okay so here we go to the header let's close everything and then we go to a client-side components inside the SRC and then we go to header.jsx so the first things I want to do inside this input I want to add and unchanged event listener before doing that we need to add a piece of State for keeping this search form so we just say search here or search term and then the initial value would be an empty string so and then we want to track the changes inside this input so first we set the value to search term and then we want to change this search term by just adding an unchanged events listener and then we set the search name to e.target.value so now everything is ready so once we submit this form we want to create that one for example first thing first we want to we can change this uh icon to a button so we just say button so we want to submit the form with this button as this form as well so we bring this one to this button so when we click on this icon we want to submit the form two and what else we want to do is when we submit the form by enter which is we can use this up unsubmit event listener and then we want to call a function called handle submit so once we add it we add this one we can create the function at the top here we can create a function and then we can close it and also we want to prevent the default behavior of the form by just saying e that prevent default so we don't refresh the page and also as I mentioned before we want to get the URL inside the Searcher let me show you what I mean by that so here we search we have search term okay and then but if you want to add for example other things for example if I want to add the offer true and then we search we see that we have more than Search terms we have other things as well we have type all we have parking so when I change this one for example to mod and search we want to keep this the previous queries we want to keep this one we don't want to delete them so in order to get this information we can use a method in react a building actually JavaScript Constructor called URL search params so we can get the the URL data be just a URL params and this is going to be equal to new URL search params and what you want to get is this we want to add this from window.location dot search and then once we have all the information we want to change its search term because we want to change the search term to this search term so we just a URL perhaps whatever we have previously we want to set this search term to the search term we are submitting there that we are changing inside and then once we want to do we want to navigate the user to this URL so once what we want to do here first we want to get all the URL at this search query so the search query and then we want to convert this URL preamps and the new one to the string because some of them is numbers some of them are other things we want to convert it to a string first and then I want to navigate in order to navigate we can use use navigate from react rather down you just use navigate we import it and then we initialize it here and then we want to use this navigate we just say navigate to forward slash search and then with all these search queries that we have okay so now if we test our application it's not working let's see the error uh probably I didn't import you as a state okay I import you the state and then we try okay it's working now so let's search for example for something like mod and I press enter so this search as you can see the we have forward slash search and then we have search term mod and let's change this to for example modern inside the URL as you can see we don't see it here the reason we don't see it here because we don't have a use effect to each time the this term changes to be able to change this one so we need to actually add a use effect react hook here so use effect so we just import use effect from react and then what we want to do if we want to get the URL preamps from the URL so cons URL perhaps we can use the URL search params Constructor we can get it from window that location that search and then we want to get this search term we want to get it this time last time we set it I mean we add it this time we want to get that so we just say URL params. or we just first let's let's make a constant we just say search term or URL search term or search them from URL we can call it because I want to be make it more specific because we have already that you do that variable we just url.get and then we get the search term and then what we want to do if there is a search term from URL we want to set the search term to that one and then also we want to add it like this if the so let's actually we don't need the window here if the location that search changes we want to search and we wanna actually update our search term now we can see the modem here inside this one let's change this one to for example uh whatever you just say s we see the S here and if you change here for example to sand this is a hand here so it's interactive and also if we have other queries for example if I add something else for example offer equals to true we still have this hand if I change the search term to S we have S here and also we are keeping this offer true and also if I change it to Modern here for example we keep the offer true here so that is working actually so what else I want to do I want to create this search page because we don't have this page yet but let's do it for the next section so let's add this one together because it's going to be a long video if you don't do it so we just call this one update header search form or we can just say complete header search form functionality and then we can commit and push to GitHub so in the next section we're going to create this search page and then we're gonna make it like the one in the final version we want to have it two sides in the left we want to have the the conditions and another button and then in the right side on the right side we can see the result so see in the next section all right in the last section we have completed the header search bar functionality we could achieve changing the URL based on this uh search bar in this section we're going to work on the creating the search page and also we want to have the UI of the page first because it's gonna be a long video so I want to separate it first we create the UI and then we want to add the unchange event listeners we track the changes here and also after that we want to show the results so let's go back to visual studio code and then we bring the website to the right side so we can just first we want to create a page so we go to the pages and then we create a page called search.jsx and then we can use the RFC to create a react functional component and then inside the app.j6 we want to add that page so this is very simple we don't have any like ID or something we are passing this is just uh we create a route and then we just save with the path forward slash search and then we want to call this one a search which is coming from forward slash page forward slash search and then now we can see in the page we see the search which is coming from search.jsx so it's time to create this one as I mentioned before the it has two parts the search side information and also the listing results site and in the mobile size we see them on top of each other and also in the after the mobile so we see them next to each other after the tablet size and above so what I want to do here let's start so here we're gonna have a div and inside this div we're gonna have one div for the left side and one there for the right side so I'm gonna just create a div here and then we're gonna have another div for the right side so in the left side we're gonna have a form we don't need an action for that for the right side we're gonna have an H1 tag just saying results listing results for example we can just add that one we just say listing results and then we add a comma here so we see it here on the top and in the inside this form we're gonna have different things for example we want to have if you remember here in the final version we have a search term we have pipe rent sale and offer it can be offer amenities and sort for example for this search term let's bring in make them inside a div because I want to have a div for having these both things and then we want to have a label and then we have the input so we want to have a div and then inside this div we want to have a label and this label is going to be we don't need actually HTT HTML form for that but this is going to say search turn you can say it like this let's see okay we have search term after this label we're going to have an input with a type of text and then this is going to have an ID of search term and then this is going to have a placeholder saying search and then we're gonna have any style for that we just add a class name I want to add a border for that we could make it simple like the previous inputs we make a long rounded large and then we can add a padding of three for that and then we want to make the width to be full so now for styling this for the div that is covering both these two we want to make this make them Flex so they come next to each other but I don't want this label to be on top of each other like search term so here we can add a class name too we make the white space no wrap we choose this one and then for the flex we're gonna have a flex items centered to align them vertically items Center and then we're gonna add some gap between them we just say Gap two so that's it and then also we can see they are just connected to the wall so that's not good we want to add some padding for the parent as well so what we do here uh for the div that is covering this one we can just add a padding of seven so we push them a little bit inside and then we want to add a board and bottom so we just say border B for Border bottom and then we just say body bottom two because we want to have a border between these two when they are in the small size but in the biggest screen I want to make the border on the right side so I'm just say after the small size add the border on the right side also make it two that's the thickness of the Border okay so and also we what we want to do is to arrange them next to each other when they are in the bigger size so this one actually should be medium because I wanted the tablet size to have a order two and then here we want to make the class name we want to bring them next to each other when they are in the tablet size and above but they should be on top of each other in the small screen but in the medium size and above I want to make the flex direction to be row so they are next to each other so now now they are on top of each other and then when we go more than medium you see they are next to each other but this border I want it to be until here so what we want to do is to add and minimum height for the medium size and above I want to make the minimum height to be a screen size so this is going to expand this border up to the end okay and also in the small screen you see it's working okay what else we want to add is I want to make I don't want to make them half half in the screen actually now you can see it's actually this size but if you add more things this is going to take more space so let's see first we try and then we check if there is no problem it would be fine and then what else we want to add after the this form the after this div we want to have another div for handling the type so I want to add another div so let's close this div and this div is going to have a label which is going to say type and then after this type we're gonna see all these inputs like we want to have the all input range sale and offer so here we're gonna have it there and inside there in this step we're gonna have an input with the type of check box and then we don't have a name for this one and then the ID is going to be all the first one is going to be all because it's going to be rent and sell together and then we want to have so we can just add a class name to increase the height to be five but we cannot see it now we need to actually install the parent first so what we want to do here I want to add the span here first I want to add a span saying rent and sale like this and then here inside the top one I want to make it Flex so once you make it Flex you see that the checkbox get this size the width and then I want to add a gap between them which is a gap two so we add some space and also we want to bring this next to each other too so we add a class name here we make it Flex and also we want to add some a space between them we just say Gap two but if we have more items like one two three four in the small screen I want to bring the next one here at the bottom so in order to do that we can just change the flex to flex wrap and also we make the item Center to centralize everything vertically so so now we added the type rent and sale as you can see they have just connected these two so in the in this form we want to add some style too so we just in the form we can just click make it Flex Flex column so they have to be on top of each other and also we want to add some space between them with just a gap for example I just choose gap eight so you see this space now so that was it for this checkbox for the all and then we have the rent and sale so we can use this one to create other things for example for rent we can just copy this div and then we just copy it two more times or three more times uh the the next one is going to be with the idea of rent and this is going to be rent this one is going to be sale the idea of sale and then here we should say sale or sell you can write down different way but it's okay the same meaning and then the last one is going to be offer so the ID is going to be offer and then we want to have this span same offer so we're gonna use this ID to later we're going to track the changes but for now everything is okay so now after this div that is covering all these types we want to have the next things which is amenities which is very similar actually we can just copy this one copy this type until this type we can copy it one more time so instead of type we should say amenities so here we just want to say amenities okay and then the first label is going to be parking so the ID is going to be parking and then we want to have this this one saying parking or parking lot okay after that we're gonna have that furnished so the ID is going to be furnished and here we're going to say furnished okay and then we want to delete the rest let me see if we have added anything else okay parking and finish that's it we can delete the last two okay so that's it for the amenities after that we want to add this uh final version we're going to add this sort and this selector so we're gonna add a select and then we want to add some options like these options so here after this step I'm gonna add another div and inside this tip we're going to have a label and then this one is going to be for sort we just write down a sort here and then inside the label we're going to have a select we just say select and then for the select we're gonna have an ID but as you remember we have sort and order in order to understand both of them we just say sort and underline order because we wanna and then later we wanna separate them and get the information from them so inside this select so let's add the options for example the first option the value value we don't add now later we want to add the value but for now I want to just add the price high to low for the text so as you can see we have this option now let's add three more options and then this one is going to be price low to high and then for the next one is going to be latest and the last one is going to be all this okay so we have all of them here let's style this a little bit for example I just want to add a flex and then item Center and then we want to add some gap between there okay for this select we can have a class name as well for the select I want to have a class name I want to add the border for that we want to make a border large rounded large and we can add some heading as well so this is going to be like this for the options we don't need to add any style so that's it I think it looks okay final version so we have the search term type amenities and sort and after that we're gonna have a button here which is going to submit this form so here at the end I want to create a button and we just say search so we should see it now and then we can style it real quick for styling that is going to be very simple actually background as late 700 and fix to be white after that I want to have a padding of three a rounded large for the corner we make it uppercase and also when we hover over it I want to see opacity of 95 so that's it I think it's enough for the listing here on the right side we want to add some styling as well as simple design because later we want to add the cards but just for now I want to add some simple styling so everything look is looking okay actually and then in the here what we want to add I just for this class name I want to make it larger because it takes 3 XL and then we want to make the font to be semi bold and also we want to add the border at the bottom also we want to add some padding of three for this and finally I want to make it a little bit lighter we just said text a slate 700. okay so this one is looking okay let's add more margin at the top so we just say margin top five so I'm going to add some margin or margin so this one looks fine uh you can actually make this one ball two search term type amenities and salt let's quickly add this to these things too so inside the form for the labor I just want to add font semi bold so where is the other labels like this one we want to add font semi bold so let's copy this class name and add it to the other labels so where is the other label amenities and also sort okay so I think this is fine so we have completed the UI of this page in the next section we're going to get the information by changing this form and also we want to add the ability to search and change the url as well so let's add this one to the GitHub so this one is create search page UI and then we can commit and push together so see in the next section for the functionality of the search page all right in the last section we have completed the search result page UI and we have created this menu on the left side in this section we're going to add functionality we want to track the changes here and then we want to change this URL based on the changes we do here and we click here on search so the first thing we need to do is to go to visual studio code I want to add a piece of State here at the top and I want to call that one sidebar search params or search files data so we can just create a key substate we call it sidebar data and then this is going to be this is going to have a function set sidebar data and also the initial value we want to Define here first we need to import use the state we don't need this react anymore and then here we just create the initial value for example for the search term it's going to be an empty string for the type it's going to be all as a default then for parking we want to set it to be false for furnish it's going to be false for offer it is going to be false as well for the source sort we want to make it created at as a default and for the order the initial value would be descending so let's add this comma here so we don't get an error so now we have this piece of State we want to fill this one using a an unchanged event listener and a submit function so first we create a function here called handle change let's close this one I don't want to do anything now let's add it the unchanged to the inputs and also the value for them and then we can come back to the handle change function to complete the functionality for example for the first input which is for the search text we set the value to be sidebar data the search term and also we want to add an unchanged event listener which is going to call that handle change function next we have the input for the rent and sale so for this one we want to add let's make it like this so we want to add an unchanged event listener like the one in the above which is going to call the handle change and also we want to make this one checked if the sidebar DOT type is equal to all because both rent and sale we want this one to be chip and as the initial value is all and if you check our website we should see this one is checked by default rent and sell so that's it for this one for the rent is going to be similar we're going to have unchanged event listener which is going to call the handle change and also it's going to be checked if the sidebar the type is equal to Ram then for the sale let's do it real quick we add an unchanged event listener which is going to call handle change and then this is going to be checked if the sidebar data the type is equal to cell for the offer we have unchanged event listener and then this this is going to be checked if this is different from the previous one so this is going to be checked if the sidebar dot offer is true okay and then for the parking this is going to be similar to the offer we just added on change and then this is going to be checked if the sidebar data.parking is true then for the furnished we can add that one okay so the sidebar that furnish is true this is going to be checked but for the select is going to be a little bit different so we want to add a value for them we want to add the value to the options and then the unchanged event listener to the select so for the select we're gonna have an unchanged event list now let me bring this one down so we get a suggestion so we're going to have an unchanged event listener which is going to call the handle change and then we want to have a default value for the default value I want to set it to be created at and also descending so we just say created add underline descending so this is going to be the default value but for the first option the value is going to be Let's uh let's just say the first one is regular price regular price descending and also we can do it for the other ones just do it a regular price if you do it for the discount price because sometimes we don't have discount price so this is going to have a problem so you need to have a condition for example if there is an offer choose the discount price otherwise use the regular price but actually the price is mostly if you just sorted by regular price would be enough so here this is going to be ascending regular price ascending ASC the next one is going to be recreated ads descending and the last one is going to be created at but ascending so let me fix this one okay so now we have all the unchanged events listener so what we want to do we want to complete this handle change function here at the top so there are some conditions because the inputs are different sometimes the input is a Boolean sometimes it's text and sometimes it has a value like the rent or something like that so we want to have a condition we just say if the E dot Target dot ID is equal to all or e dot Target dot ID is equal to rent so three these are they have a value like sale rent and all so in this case if it is all rent or sale we set the sidebar data we keep the previous information and then we change the type to be either target.id for example a type can be all can be rent or sale okay so we're gonna close this condition so what is the next condition so the con the next condition it can be a search term because so if the search either targeted ID is search term we want to just change the search term so we just say if e dot Target dot ID let me close this so they don't get an error this one is equal to search term then we want to set the sidebar data we keep the previous information and then the search term is going to be either target.vary so we have handled the search term as well and after that we wanna it it can be true and false so the true and false are parking furnish and offer so we can just say if e dot Target that's Target we have that parking or we have that burnished or we have that either target.id offer so we want to set the sidebar keep the previous information and then this one instead of parking we need to create another condition we just say either Target dot ID whatever ID is this is going to be to its checked value but sometimes the check value is not Boolean it's it can be a string but saying true or false because we are getting the information from the URL as well so we need to create a condition so we don't get an error here so we just say if the E dot Target dot check is true or sorry this or e dots Target dot checked is equal to true so it can be string true or the real true like this in this case in this case we're going to have true otherwise we're gonna have false like this so we're gonna check if the either targeted check is true this can be true because we keep it like this Boolean true or they either Target that check is equal to string true so it's going to be true otherwise in any other case it's going to be false and after this one so we have the last one we need to track is this sort so if the either Target that ID is sort underline order if you remember we had let me see that he had we have this so we have the select and the ID is sort underline order so in this case we want it first we want to get the sort we just say sort is equal to remember we need we have a two uh two things together we need to split it if you remember we had created ads underline for example descending so the first value is going to be sort and the second value is going to be order so the first value is split it by underline the first value is going to be sort if there is no first value we just want to say created add or the order is going to be the second one so be splitted and we get the second information and if there is nothing we get the descending and then we want to set the sidebar data we get the previous information and then we add this sort and order to that so if you remember here we have sort and order now we have both of them added here I think we have done with this part let's console log this sidebar data and check our application we just say console log sidebar data and then we can just go here we open the inspect we go to console let's clear this refresh the page first we have the initial value as you can see we have the initial value for example if I change the search term to Modern you can see that now the search term is model at the same time for example I add the offer true so now offer is true and also it's boolier it's not string we can add parking and furnished parking is true furnish is true and we can change this sort for example I change it to latest so now we can see that the order is descending and also the sort is created at if you do price high to low yeah the order is descending and also the sort is regular price okay so what what we can do with this information now we have this information we want to change the url based on this information when we click on this search button so after clicking this search button I want to submit this form on the left side and change the url so let's do this part so we go to the visual studio code let's delete this console log we don't need it now and then we have this form we want to add an unsubmit event listener for that so we have this form I'm gonna add an on submit event listener so once we submit the form by clicking on search we're gonna call a function called handle submit and then we're gonna create this function here at the bottom so first thing first I want to prevent the default behavior of the form submission which is the refreshing the page by saying e dot prevent default you're already familiar with this and then we need to call this and also if you remember before I mentioned that it's not only this one for example we have this modern in the search term I want to keep this one in this in there when I don't write down anything here and this I just click on offer I want to keep this model I want to keep this modern in the URL and submit the new one just changing the offer okay so in this way we have to get the information of the URL first and then we do other things so here inside we're gonna go to the visual studio code inside the handle submit first we want to get the information already we have inside the URL so what we do here we just say we get the URL prams using the our the method URL search params we just need to call it this one we don't need to write down anything so we get the URL params here and then so actually we don't need to get the information now I just want to set the new information but later we want to add the use effect which is going to anytime the URL change we want to fill the sidebar data with that URL so what we want to do we want to set this search term to the sidebar.search term we want to set the type to sidebar.type we want to set the parking to that so I'm going to quickly fill this one furnish to this one and then we want to offer sort order and that's it I think that's it finish it and also we want to get the search query by converting this one to the string because we want to Now navigate the user to that URL so we have we need to import use navigate from react rather down we can initialize it here and then now after the submission we we have created a search query we can navigate the user to forward slash search with this search query so let's test this one for example if I do now we get the type R and everything else is false parking is false furnish is false offer is false and sort is created at order descent and then the search term is an empty string as well so that is actually a problem here because we want to keep the previous search term and also previous data and then when we submit it we do it for example now I search here for example Sahan if I click we change it and also we change here as well but what if I change something in this here for example I just say model if I search you can see the URL is changed but here is still so we want to get the information of the URL and fill this one as well we can do that by easily adding an on uh using a use effect react hook so this is the next part so we go to visual studio code and we can add the use effect of after this sidebar data we just add a use effect we need to import it from react and then first thing first we want to get the information from the URL it's just a new URL search params location dot search we get the information now we want to we set a new data for example we just say search term from URL is URL perhaps these scrums and we get the search term from there we can get the type we can get the parking finished offer sort and also order once we get all of them we wanted to check if in any situation for example if there is a search term or there is a type or parking or furnished offer sort order if in this situation if something like this happened any of them changes we want to set the we want to set the sidebar data for example if there is a change in search do you want to say search term equals to this one and in case there is a problem here we can add the or a string as well and also for the type we can do it we can get the type and all we can get the parking if it's true we get through otherwise we get false because URL is a string we need to add this string here and then we have furnish we have offer and sort if there is a sort we set it to be sort otherwise we just say created add and descending so in this case we want to uh and also we want this one happened if the location the search changes we want to call this okay let's see what error we are getting okay I didn't close this if okay so now if there is a change in location the search we want to change the sidebar data so for example if I search here second and I change the url you can see the change is detected by use effect and also fill this information here and imagine for example we change something here for example I just change the order to ascending inside the URL if you do that uh let me see now we have the default value this one actually it's okay we cannot change this one but for furnish for example we just say true here if I press enter you can see furnish is check parking through we see the parking is so we can change the url and also from the URL we can change this one for example if I remove this parking and search again the parking is going to be false and here if I change it to latest we can change it here okay so we have actually all the information so what we want to do here in this section we want to actually based on the information we have we want to fetch data from the database so and show the result here so after this use effect we get the use effect we can here fetch the data because we already called the use effect we can fetch the data here we can create a function called Fetch listings for example or fetch data and then we need to call this function here because this is asynchronous we call it here and then the reason I actually I explained it before because we cannot change the this one to the asynchronous we create a synchronous function here and call it at the end so what we want to do here we want to have a loading effect as well so here we add a piece of State we call it loading and we set it to be false at the beginning and for the loading we do here and also we want to have another piece of State called listings so we can fill it with that use effect so after that we're going to complete our use effect this functionality here so we create a res we set the loading to actually true and then we want to get the URL now we have updated this URL we've got it here updated the URL so we want to get the response based on that search query so we just say cons search query is going to be equal to that you URL here URL prints and then we want to convert it to string and then we can we just want to say response is going to be equal to a weight we fetch the data if we remember we have created a an API route with this URL forward slash listing and then we want to get so forward slash get uh sorry I think it was yes I think it's get and then inside the controller yeah we have created this function here called get listings so you want to use that function which is going to be forward slash API for slash listing four slash get and then we want to add the search query at the end and then once we get the data back we want to convert it to Json so we can use it and we set the listing to data okay but before that we can just uh yeah we can and then also we want to set the loading to false we can just add some error effect as well but it doesn't matter if there is no listing we want to say there is no listing at the end so for now for loading effect is enough it can be added but it's not necessary here so let's check the inspect and then we go to console here we need to console log listing at the top so now it's an empty array but imagine so let's let's clear this search term because probably we don't have something like that and then when we search we get now seven listings test three updated something like that and then if you for example add a hist here inside the input as search instead of 7 we get four because we want to only with the test 3 and then let's for example sort this one by all this as you can see the order is changed from test 3 to test to test to test three so actually we are getting the data here now it's a good sign so what we want to do next is to show this information inside the listing result and we want to create some cards to show them like this more beautiful so I'm gonna do this one in the next section so let's add this to the GitHub so what we did here is to add unchange and on submit functionality to the search page okay and then we can just comment and push it to GitHub in the next section we're gonna use this information that we are getting these listings and then we want to fill this listing result and also we want to create a card a component that shows all the information of the listing including the name description uh like a we want to add the price and Etc so see in the next section all right in the last section we have added the unchanged and unsubmit functionality to the search sidebar search bar now we got the information from the database we want to show this one inside the listing results section so what we want to do I want to create a card like this first so I'm going to create a components inside the client side we go to SRC components and then here we're going to create a new component we call it listing part or listing item.jsx we can use RFC to create a react functional component for now and then inside the search.j6 let's let's keep this control log for now and then we wanna uh after this listing result here we want to add some condition here we just say first we want to add a diff here and inside the div we're going to say if if there is no loading and the listing that length is equal to zero so there is no listing for example in that search term we don't have any listing we want to see some message so we can create a paragraph here we just want to say no listing found for example and then we can just add some quick styling for this we add a class name we just make it fix x large and then we want to bring bring it to the center let's change this actually text color to a slate 700 so let's see what we get inside the browser now if I search something that doesn't exist for example I just search something like this we see that no listing found here and then we want to just add some padding to that one as well so inside this div at the top we want to add some padding of seven okay like this I think that is fine for now and also for the loading effect we want to add some other things for example we just say if there is a loading we want to add another paragraph saying loading so the text large but I want to bring it to the center of this one so we just say text Center but in order to take sender to be working so we can just add here width full so we see the loading effect okay but it's not in the center okay so we need to actually in this step we want to add the flex and flex direction to column so I want to add some gap between the everything so when we do the flex I think this is going to come inside the center so let me change something if you're still getting some so text center with full oh instead of this Flex car column we just say Flex wrap because we want to actually have this listings come here and then if there is no space they go to the next line let's see I can fix that loading so in the final version when we refresh the page we see the loading in the center so I think the here that div that is covering everything we can change the flex to flex one let's see now we can okay now loading came to the center okay that's fine so we got the loading effect after the loading effect we want to just if there is no loading if the loading is false and then if we in this case we want to see the listing that map but we want to check if there is a listing as well so we just say listing if there is a listing two and then we want to map through the listing get the each listing so we're going to add it like this and then here we want to create this listing item we want to add that one here so we just say listing item we want to import it at top and then let's close this and let's close this parenthesis here we have another parenthesis okay and also as we are using the map we need to add a key here so we just say he is equal to each listing that underline ID something unique and then we want to pass the listing as well we just say listing equals listing and then what we want to do is to get this listing inside the listing item as the inputs so you just say listing here and then for example for now I want to show the listing dot name for example so let's try this for example I remove this search term and then I click on search we get the name of all the listing for example if I just just choose the offer we see less listings let's add parking okay and then we can just sort it by the oldest okay that's already all this let's do the latest okay so it's working we are showing the the result inside the listing item let's make them like a card so I want to bring this one to the right side so you can see the changes actually you cannot see the changes very nice here let's make this one bigger okay this here should be fine so I'm gonna bring this one to the left side so you can see the changes here as I do so inside the listing item I want to add some for example this div is okay but I want to have a link tag for example in the final version when we click in all the places in this card even here we want to go to the page of this listing so we want to have a link that covers all this card so let's delete this and we want to add a link tag first we need to import the link which is coming from react rather Dom and then we can cover everything with that link so just say link which is going to forward slash listing and then listing that underline ID that is okay so we can close that so everything should be inside this link and inside the link we're going to have an image first the source is going to be listing dot image URL and then you want to add the only the first one because we want to have the first one as the copper so we just say image URLs and then we want to get the first one we just say zero so let's see we get anything here it seems like it's not working let's check the console okay we are getting the listing and each listing should have the image URLs okay here uh it seems like the image URLs is not working because I didn't have added any image URLs but let's see some of them should have actually uh this one doesn't have to what about this updated so let's add some listing with the image so we can see them so I'm going to create a listing for example here I just write down modern home you can just copy this one for the name description and address with the same price and then I just choose one image from my desktop here I just choose two images upload them and then after that I'm gonna create the listing so as you can see this listing has an uh some picture for example if I search now modern okay now we see the image so now we can just actually install it better okay let's bring this one here and that's enough we can style it now so for the image so for the alternative text I just say for example listing cover and then we want to install this one a little bit for example for the class name I want to add let's add a height of 320 pixels but in the a small size and above in the big screen I want to set the height to be a smaller we just say 22 pixels and then after that we want to set the width to be full and then set the object I want to set the object to be covered so skip this aspect ratio of the image and then when we hover over it I want to change its size the scale of it 205 so I'm gonna add five percent to it so like this when we hover over it you see it's bigger now and then we want to add some transition to this scale as well so it doesn't quickly change so just a transition to only this scale not all and duration we can just say for example 300 milliseconds so if I do you can see it like that but this one is actually going over the card so for the card itself I want to set the background color to be white actually and then we cannot see it anything because we didn't add any other things let's add at least some name to it so we can see so inside here we're gonna have a div as you should be inside the sorry the link so we're gonna have a div and inside the div we're gonna have a paragraph showing the listing name which is the title of the listing which is a listing dot name okay now we see that background white so what I do here I want to add the background white I want to make it flex and then we bring them on top of each other by changing the flex direction to column and then I want to make the add a gap between them using Gap four so we have some space between it seems like it's not working well I think uh the name uh sorry because the link is inside this one this one's not gonna work actually so remove this Flex for now I just want to add some Shadow effect so we just say shadow medium you can see the Shadow and then when we hover over it I want to change its shadow to be large so now when we hover over it we see more Shadow but I want to I want it to have with the transition so we just add a transition into the shadow we add some transition to this transition okay now we have it and also as you can see the image goes over this card so we can fix this one by adding the Overflow hidden so now the image is going to be inside the cover and after that we're gonna have we want to make it rounded for example large like this let's add more things so we can see it better so for this paragraph we can add the padding here so we're going to have a padding of three so we push them a little bit inside we see okay so now we have this heading and then what we want to do here we want to style this listing name so the listing name the text is going to be large and also we want it to be with the font of the semi Bolt and then we want to change its color to text as slate 700 and also if we have a long uh long title I want to make it truncated like the final version we want to add some dots at the end so in order to do that we can simply add here truncate so truncate is going to remove the extra letters if we don't have enough space so we can just test it here as well by editing our listing so this modern home I'm gonna edit it so let's add more title name for example I just want to copy this one two more times create why it says create this update listen it's fine okay update listing but that one should be updating us okay let's fix that one too before I forget so a listing item update listing uh where was it uh here when we click on the button it should say when it's loading we just have to say updating not creating okay so that's fine so now if you go to the search page we can see oh okay because we didn't put any width for this one this is going to fill with this any name we have if this is going to be stretched so we need to have a width for our card so what we want to do here is to add a width so here after this step we're gonna say width to be full now it's full but in the large scale actually we want to set the if it's more than a small size I want to set the width to be only 330 pixels so we limit it like this so now you can see the title is truncated by Trida so it's working now let's close this one so we can see the other changes so after this paragraph we're gonna have that address so we want to do it exactly like the final version so this is the final version so we have the name we have the address we have the description price and the number of bits and path of course you can update it yourself with whatever you want later so here we're gonna have a div and inside this div we're gonna have that icon which is MD location on and this icon is should come from the react icons we just import this one from react icons forward slash MD MD whatever we see at the beginning of the icon should goes at the end okay and then here we want to Let's close this done so we don't get an error so we see the icon here after the icon we want to show the address so we're gonna have a paragraph same listing dot address okay so the address is modern home 2 because we have just write it down like that so we would we want to bring them next to each other we're just saying Flex and then what we want to do here uh we want to make it item Center so we want to align them like this we want to add some space between them we just say Gap two or Gap 1 should be fine so after that we want to set this icons we're gonna install this icon we want to set its height to be 4 and width to be four and change its color to Green green 700 okay for the paragraph which is saying address we want to truncate this one too and also make the text as small with the color text Gray so here we just say text a small text Gray for example 600 and then we want to truncate it so everything is good but why they are connected to each other because this did we didn't add anything here so in this step that we have padding three what we want to add here I want to set the make it flex and flex column to bring them on top of each other and also we want to add a gap between them for example we just add Gap two so this is going to be some space and it's I think it's fine now we can set the width to be full too so later we want to add other things we want to set the weights to be full to completely bring them in the full screen so that is okay for the address after the address we want to add the description so description is going to be similar but if you check the description in the final version you can see that it is truncated with two lines not only one line but we don't have such a class inside Telvin CSS by default to add two lines and truncate it but there is some Library there is some plugin we can install to be able to do that the the library is called line clamp so we need to install it on Tailwind CSS so here we can search for Tailwind CSS line clamp if you search this one and there's there is a plugin I think this is the GitHub repository Tailwind labs for slash Telvin CSS line clap this is official plugin of the telman CSS they created themselves so when we click on this GitHub repository we see we need to install it like this so let's copy this one and then we just go to visual studio code and we need to install it in the front end so let me clear this terminal and we we need to go to the client side see the client and then here I'm going to paste that code to install install it and then we want to add this one to the tailwind.config.js so we need to add this plugin here which I'm just going to copy this plugin and then we go to television CSS file which is telling that the config that which file was it yeah tell me that config.js and then we want to add it as the plugin so I'm going to paste it here okay so now what we can use it seems like we are getting an error so yeah we are getting an error cannot find this module okay so let's uh C inside the here we have installed already I think we need to restart the server I'm gonna stop it using Ctrl C and start it again because when we are changing the config file we need to restart the server otherwise you cannot get it okay now I think we are not getting any error for now let's test this line crap that we have added first I want to create this description a little bit longer so I'm going to edit this so I'm gonna copy this one here and paste it here let's go back I'm going to paste it two times three times update listing so the description is longer now let's go and search for this one and then bring it here okay this icon looks like a very small too so what is the problem of that so we set the height and width to be four for this one let's remove this I think it's too small for that no it's not related to that actually so let's see what's the problem here uh Flex item Center Gap one we also truncated MD location on and the location on okay seems like this text is pushing this empty location we can add some width of full here and this is going to fix it in the paragraph So let's add this uh description as well so we're going to have a paragraph here with the text uh listing dot description uh okay I think I I changed the address instead of the description so that's the problem and that was too long so it happens like this so I think I made a mistake here let's edit this yeah I changed the address so let's cut this one and put it inside the description I just add something in the address so we don't get an error so we update this let's bring this one to the right side let's search it okay now description is too long you want to fix this descriptions problem so let's style this description we can add a class name here and for the description we want to make this text to be first a small and then we want to change its color to be gray 600 and then we want to truncate it but two line we just say line Dash clamp and then we can just clamp it for two line as you can see now we got the two line crap you can do it for three lines you can do it for four lines and Etc so this is the plugin and it's working now so everything is done for now for the description after the description we want to see the price of that listing so let's add a paragraph here and for this paragraph we're going to have a condition because we want to show the discount price if there is a this offer and so we just say listing that offer if this one is true we want to see the listing dot discount price otherwise we want to see the listing that regular price but if you remember we want to add some comma if you remember inside this final version for example let's search for something else if you for example we see a place we can see that here we have 733 and then we have a comma so in order to add it remember we we have just added something at the end of the discount price and the regular price so we want to do that one here as well so let's change this thing instead of the rent to be sell and then let's set the price to be 500 000 and then we update the listing and then we go here so let's fix this number and we did it before for the listing page so listing.jsx if you remember if we for the prices I have added uh it was in the here we just added this one two Locale string English us so we can add let me just copy this one okay and then we go to listing item you need to add this one at the end of both of them and we just need to add actually the Dots here okay now you see the comma here that's working and also we want to add some dollar song dollar here at the beginning okay that's working so and then also we want to style this paragraph We just say ticks for example slate 500 we want to add more space here we just add margin top of two and also we want to set the font to be semi bold and also when it's red I want to see uh something else here so after this we want to have we just say if the type is red show the forward slash months like this one so let's test this one for example if I change this listing to rent we make advance and then we just say for example five thousand dollar per month okay now it's 5000 post slash months so it's working fine uh I think they are not aligned very nicely but I think it's fine yeah it's working we can change the flex and then item Center to completely align them here for example we can just say Flex and then item Center but I think yeah it was okay it's just it looks like they are not in the same line okay let's delete this one they don't need it so after this price we want to add the number of bits and number of bathrooms as well so they want it I want them to be next to each other like this four bits and five bets so they should be next to each other so we're gonna have a div here so after this paragraph I want to have a div and inside the div we're going to have for example two paragraph actually we should have another div because we have one div to cover all of them and also we have one div that is covering four amp bits so we can fix that one by adding another dip and for the first one we want to add if the listing dots bedrooms is more than one we want to say for example listing dot bedrooms bits otherwise you want to say listing the bedroom just bit because it can be one bit or two bits for example now it's just a one bit we see one bit if we modify this one and then we just change it to two bits for example now we should see two bits instead of one bit so that's working let's just style this one so we don't need to install the next one separately we can just copy this so the font is going to be bold and then text should be small or extra small we can just say make it too small I think the final version yeah that's similar just we need to change the color so we can change the color in the top there so that we can apply it for both of them we just say text a slate 700 here okay and then text the small it's fine let's uh just copy this one one more time and here instead of the bedroom should be bathrooms so I'm gonna change this one to bathroom and then this bit should be path okay and then we want to bring them next to each other we just say flex and then we add a gap between them we just say gap for example or yeah that's okay that's yeah that's exactly like the final version so what is the difference here no okay we just have some a space here at the top we don't have it here and that's fine actually we don't need to add that so that's fine okay so when we click everywhere in here we see the shadow effect and also when we click on it we should go to this page so let's try for example add some discount for this one too so we test it so the regular price is this we make it offer and then we just say instead of 5000 the discount price is going to be 480. so 220 dollar discount we're gonna update it and the problem here I just see the 20. we forgot to add the discounts here so in the final version if we go to an offer let's add an offer we see here discount ten dollar discount so we didn't add it we forgot so let's add this one too so we go to listing.jsx here and then let's see the let's search for the discount okay here after that we're gonna have uh we can just say off or discount and this one is fine too off okay twenty dollar off but you can make the off like a capital okay so that is okay too for the here we are uh if I see any other problem we're gonna fix it at the end of the project so let's search again and also I want to see more things like let's don't search for modern for example search so some of the listings they don't have image so we see just a listing cover that is fine we can delete them later and then we can also add some cover cover to for example we can search for uh real estate we go to images for example this image I want to use this image for example as the color so you can just use the copy image address and then inside our card in the image in the listing item we just say if there is no image we just use this one that we have copied and we have to put it inside the column okay so if you know go to our website if you refresh the page okay it's not working for this URL so what was the problem here so if there is no image oh there is an image actually but the link is broken so that's a problem but this is not gonna happen because we're gonna at least upload an image because we I have created this test by insomnia and for example in insomnia I have created a listing but for the image URLs I just added something uh like this but if you uh create a listing you should upload only images so this problem is not gonna happen I'm gonna delete this one in for the next section but as you can see the they are next to each other and and it's very beautiful too and the other things is when we if you remember we limit the listing to nine listing so if we we have more than nine listing for example if I add another one let's paste some text here new listing I just gonna copy this one just choose one image upload it we create this listing and also if we make another one definitely just make it two choose an image for example I choose this one so I just want to show you if we have more than nine so now if we search we see only nine listing okay but it's actually we have 10 listings so what we want to do we want to have a show more button here and when we click on it we want to see the next nine listings so we want to add them here like the final version so in the final version for example I search for no think we have nine image listings here and then we have a show more button when we click on it we can see we have an extra listing at the end and also we don't see the show more button because we don't have more than that in the database so we want to add that show more listing in the next section so for now I just want to add this one to the GitHub so I'm gonna add everything and then we just say uh create the listing item component and show all show listings so we can commit and push it to GitHub so in the next section we're going to work on the show more button so see in the next all right in the last section we have completed creating the listing item I mean the listing item card in this section we're going to add the show more button when we have more than nine items in the listings we want to have a show more button when you click on it we want to fetch more listing so we can go to visual studio code we go to we can close all of them and then we can we can just go to the listing search.jsx page first we want to add a piece of State called show more button or show more so let's delete this console log we just create show more we set it to be false at the beginning but when we fetch data in the use effect here if the data is more than so it's equal to 9 it means there is a possibility that we have more listing so here we can just say if data that lens is more than eight so it can be nine so in this case we want to set the show more button to true and then we want to make that show more button at the end of the page so here uh when we just added everything the loading effect we show the listing so after this death which is here listing results inside this one after this loading we want to say if the show more is true let's close this we want to have a button and then in this button we want to have a on click events listener which is going to call if a function called on to more click we need to click create it so and then this button is going to we don't need to install the button actually I just want to say show more so let's let's close the button here at the top and we bring these text inside this button and what I want to do I just want to make it green so I just add some simple styling here so I had a class name we make the text to be green 700 and then when we hover over it I want to add an underline underline and also we want to have a padding of seven order so we should see the button here now we can bring it to the center as well it doesn't matter so how we can bring it to the center we can just say text Center no it's and then we should set the width to be full okay now it's in the center so when we click on it we want to call a function and then the call the function's name is on show more click actually we don't need to have a callback here let's just delete this one let's save so we're gonna click create this function at here before the return I'm going to create this function this function is actually is going to fetch more data but based on the index because we don't want to fetch the data from index 0. we want to pitch after the whatever we have we want to after that we want to get the new listings so what we want to do here we want to get the number of listing first with just the number of listing is going to be equal to listings.length so the for example we have nine listing in the listings so we're gonna start from 10 to fetch if we have for example 20 we want to start from 21. so first we get the length and also we want to get the params because based on the previous params we want to fetch data so we get the params here we get it from the URL and then here we want to create the index we just say index or a start index we can call it a start index this is going to be equal to that number of listings okay and then we want to add this start index to the URL as well so here what we want to do we want to set the start index to this start index that we have and then we want to create a search query which is we wanted to add to convert this one to the string and then we want to fetch data so we're going to fetch data from forward slash API listings forward slash git and then we pass this search query and then we want to convert the data to Json and then if the length now for example the new one if it's 9 we want to show the show more button more again but if it's less than nine we don't want to see it so if it's data that length is less than 9 not 8 in our case because we set it to be a 9. in this case we want to set the show more button to false so we don't want to see that button anymore and also after that we want to set the listing we want to keep the previous listing and we want to add the new listing and as this listing is the uh an array too we want to add an array to the previous array we just spread operator the data as well so we we add the new listings to the previous listings so let's test this one now we have actually nine listings if you click on show more we see another one and as we don't have more listings because this is not nine we don't see the button show more anymore so let's refresh the page and also we want to for example only get the offers so the offers are only seven so one two three four five six seven and if you click on show more there is no nothing to fetch and as you can see the show more button is gone as well so and so we can do that one for the first listing uh fetching as well if the fishing is less than nine we don't want to see this show more too we can do it as well so in this fetch where was it the use effect so fetch listing here so if it's more than nine eight we wanna make it true otherwise if it's less than 9 or equals to 8 otherwise okay else we want to set show more too fast so now test it again okay now we get the seven and then we don't see the show more button but if you remove the offer we get nine listing and also show more is here so we have fixed that one as well let's try it with the rent still no this all of them are rents so let's add parking to it okay now it's here it's six and also as you can see we see the show more button that is a let's remove the parking loading and the parking so you see the show more button here just a second as you can see so we sit before fetching we need to set the show more button to false here yes actually set go more to forms so now if we refresh the page without parking now we see the show more button with parking we don't see show more buttons so actually we have added successfully the show more functionality so let's add this one to the GitHub so we have just add everything we did we create a message we just say add show more listing functionality listings okay so we can commit and push it to get out so in the next section we're going to work on the home page so we have completed the search one in the next section we're going to work on the home page we're gonna design this beautiful landing page and then we're gonna add this uh a slider and also show all these things in the home page so this is going to be actually as we have the listing item card so creating this page is going to be very easy and also we have created this slider before so we can use that one as well as our reference and we just need to create this design for our landing page so see you in the next section all right in the last section we have completed our search page in this section we're going to work on the home page of our project but now we don't have anything in the home page we're just saying home and then as you can see from the final version we have three main parts at the top we have this title then we have the swiper and then we have this uh like a result for the offers rent and sale so we're gonna separate our home page to three parts so I'm gonna go to Let's close this search now we go to home page and inside the home page we're gonna have three parts so what we want to add here is the top side then we have this swiper and then finally we have the like showing results so listing results for offer sale and rent okay so for this top section let's put it inside a div and let's bring this one to the left side since we can see the changes here so I'm gonna add an H1 tag and inside the H1 tag I want to say find your next and then instead of because I want to make this text to be in a different color so I just want to put this one in any span so I'm I'm gonna add an expand here and inside the span I just want to say perfect after the span we're gonna say place with ease okay after this H1 tag we're gonna have this section so we're gonna have another div and also I want this place with which goes to the next line so I'm gonna add a brick tag here so to bring it to the next line so after this H1 tag we're gonna have a div and inside a step we're going to say for example hand estate we can just accept these things like uh is the best place to find your next perfect place to live and then also we want to have a blind break and after the line break we're gonna say we have a wide range of properties for you to choose from and then I'll after that we're going to have a link here which is going to direct us to the search page so after this step I want to add a link tag which is coming from react water term you need to import it let's close this and this is going to go to the search page so we just say forward slash search and then inside the link we just want to say uh let's start now Let's Get It Started for example okay so we have done with the content let's style this now so what I want to add is to this H1 tag I want to add I want to make the text to be a slate 700 font to be bold and text to be 3 XL and then when it's a larger screen I want to make the text to be 6xl so 3XL for the small size and the large large screen I want it to be six Excel so and then for the perfect I just want to change its color to slate 500 so text doesn't suggest me any ticks okay here text slate 500. then we want to style this div so for the div I want to change the color to be gray 400 so it takes gray 400 and then takes to be a small or yes X is small for the mobile size X is small sorry and then for the after the mobile size I want to make the text to be this small so like this and then for the link tag let's add some styling it's going to be text x s a small and above make it takes a small makes the text blue 800 and then uh let's make the font to be bold and then when we hover over it let's change let's just add an underline like this so now they are just connected to each other what we do here we go to this div at the top that is covering these things I just want to uh we make it flex and then we just use flex column and then we can set the Gap to be 6. so what I want to do next is I want to add some heading in the y-axis so padding the y-axis here so we make a 28 in the y-axis and then in the x-axis I want to make it 3. okay and then we can set the maximum width to be 6 XL so in the larger screen I want to make it 6xl but in order to bring it inside in the center we can just say MX Auto like this I think that's it for this part as you can see is exactly like the final version okay so we have done with the title section let's keep continue and add the swiper if you remember we have added before the swiper but here we don't have any information we don't have any images so we don't want to add an aesthetic image I want to use the images for the recent offer so the last four offers so what we want to do here we will first we want to fetch data for the offers and also we want to fetch data for the rent and sell it's very similar to the search because here I just want to limit the search to offers and four results so we can do that first and then we can keep continue creating our pages so what we do here I want to add three pieces of Estates for the listings so we have offer listing thanks you need to import user state and then we're gonna have for this sale and also we want to have for the rent so once we have these pieces of State we want to fill them by using a user State use effective reactor and we're gonna fetch these datas so I wanna use use this effect we need to import it from react so let's close this and also we want to run this one one time when the page is loaded so we're going to create a function and this is going to be asynchronous so what we want to fetch first is for the offers so we just say pitch offer listing and this is going to be asynchronous and then we need to call this one here sorry not we just need to call it so what is the endpoint for here so first we need to add and try and catch to catch the error we just want to cancel log the error because we don't want to show the error to users that's fine because even if they don't see it it's fine they just see the top section but for the try we want to create a response and we want to fetch data from forward slash API for slash listing forward slash if you remember it was get and then we want to add the query we just say offer true we will only get the offer and also we want to keep the limit I want to add a limit of 4. okay after getting the response we want to convert it to Json and then we just set the offer listing to this data okay so what we do next I want to create another one because I want to make it a step by step first we want to get the offer and then we want to get the places first we want to get the offer and then we want to get for the rent and then the sale so when we refresh the page and come to this page I don't want suddenly uh requests for all these things I requested one by one I request first the offer and then we are on a request for the rent and then we do for the sale so how we do it so after this one is successful here I want to call another function so I'm going to create the function here I want to create another function which for example and first we do the rent okay first we do the rent so here I wanna create a function for the rent for example and then what I want to do is to call this function after this data is clear so here I'm going to call that function so in this case until this result is not clear and the response didn't come we don't fetch the radar for the rent so this is going to be a step by step so the page is going to be loaded better for the users and uh more nicer okay so and then here this is going to be similar we just use try and catch we console log the error and then we just uh we don't want to set the offer actually we just say type to be react limited to 4 and we set the rent listing to data and as you can see we are just calling the cell listing so we need to create this function as well sale listing so we use try and catch we console log the error and here we're gonna have a response but this time the type is going to be cell and limited to four we convert it to Json and then we want to set the sale listing to this data so in this case we get the data for the offer rent and sale one by one after each other okay so let's test and we see that we are getting this data or not so I'm gonna console log the last one which is the sale listing and then you see we get if we get the sale it means we already got the other ones so we console log this sale listings let's go to our website we open the ins web tools we go to console let me clear this and then I refresh this page okay we are not getting the results I just want to see if I have any sale listing so let me create a listing for sale for example I just say new listing for sale let's copy this and paste it here we make it this one for sale and then I just put the price for fifty five hundred thousand dollar I just choose some image and I upload it so let's create this listing as you can see we have a listing for sale and if we go to the home page now you can see we have one place for sale so actually it's working so we are getting the new listing for sale the reason we didn't get any at the beginning because we didn't have any sale at all so now we have this sale and also we have the offer and then rent we can just now create our swiper JS so what we want to do now is to go to after this and then inside the swiper we want to create our swiper and if you remember for swiper we need to actually we need to create a condition first we just say if there is an offer so if the offer listings exist and the size of it is more than one the length of it is more than one and then we want to create the swiper so and also we don't need to do actually here we can just Loop through the after listing we just say offer listings dot map and then we just get each listing and then here we can directly actually return as you remember we have to cover everything with swiper slide so actually we we can we need to cover all of them with swiper so after this step I want to just add the swiper and then we put this one inside the swiper and then here is going to be swiper a slide let's close this and inside is the one we're going to have a div and a style for this one is going to be h for example 500 pixels so we're gonna have a height of 500 pixel the key is going to be listing that underline ID so let's close this div and then what we want to do is to add some style because swiper doesn't work with the normal style we need to add some style here like a scissors style so we set the background to be we need to have a back tag here and this is going to be URL and then we have a dollar sign we just say listing dot image URL because we just want to get zero the cover of these images because each listing has many it can be it they can have six images but we want only the cover and then we just want to set the the background so this background it should be like this and this one should be Center and then no repeats and also we want to set the background size to be covered let's save this so background size and also we need to add a comma here I think yeah so that's correct and also we need to import the swiper and Swiper slide at the top so here we just import swiper and Swiper slide from swiper forward slash react and also we need to import its CSS bundle so we just say import swiper pull slash CSS forward slash bundle and also we need to import to hyper core from swiper and then we need to initialize it as well we just say here swiper core dot use and then we want to use navigation just say navigation navigation but we need to import navigation as well here we need to import navigation which is coming from swiper but sorry purple slash module okay so what is the error here I think we didn't close some of these parentheses or something so here we close this parenthesis also this is covering here also in other parenthesis here okay so as you can see now we are getting the offer here but maybe we have only one offer let's add another offer for example I add a name new listings for sale with offer so I'm gonna just add more so this is going to be cell with the offer the price is going to be 500 000 and then discounted with few dollars let's add some images so now we can create the listing and if we go to the home page we can see okay sounds like that I don't have that navigation tool here let's console log the offer we see that we get more than one offer first so console log offer listings let's open the inspect let's refresh the page okay this error we should fix it because we need to add a key somewhere in the home page and then we have four offers actually but we don't have this navigation so we need to I think I missed something here in the navigation so this is navigation from swiper forward slash modules uh let's bring this CSS bundle here at the bottom and also we have this swiper swiper slide from forward slash swiper for slash react swiper core from swiper and then we just say swiper.co cyber core dot views and then we have used this navigation I think navigation so this is correct let's check here okay I hear I forgot to add navigation here as well so inside the swiper you need to say navigation so now we have the navigation we can just let's refresh the page first okay it's working now some of the images are broken so it's fine so it's working after the swiper we want to work and showing the listings so after this swiper we're gonna show the listing so I'm gonna have a date here and then also we want to set the maximum width to be 6xl so we have the same uh way here as well so we just say MX Auto we have a padding of three we want to make it flex and flex column and then we want to have a gap between these listings of for example eight and then we want to have a margin y of 10. so and then inside this one we're going to have the three things for example we just say for the offer we just say if there is an offer and uh if let me fix it like this after listings so if we have other listing and then offer listings length is more than zero then we want to show the offer listings and then we want to have a div here and inside this div we're going to first thing first I want to add each so let's see so we have actually in the final version you should see that first we have a title here h2 tag we have a link and these two are inside a div as well and also then we have the listings so we're gonna have another div here and inside this div is going to be a h2 tag saying recent offers and then we want to have a link tag which is going to Let's close this and this is going to be the with the address forward slash we want to go to bring them to the search page so we just say search and then we just say but offer should be true okay so they have to see more offers there because we this is without limit and then we just say show more offers so let's see what we have here okay we have these sticks and then we want to have that listing so after this step we're going to have another div or we can just yeah you just say we add another dip and inside this there we're going to say we create a uh we just say offer listing.map we get all the listings and then we want to show the listings but we want to use our listing item components so we just say listing item we need to import it so this is coming from here listing itm.jsx let's open it so we can get a suggestion so and this one is going to have the listing we're going to send the listing and also we have a key of listing.id so uh that's it I think so we need to close another parenthesis here so let's check okay we are getting the listings like this but they are on top of each other and also we see here so what we can do inside this step we want to create a flex box we want to bring use the flex wrap if we have a a smaller size screen we want to bring them on top of each other so now the the they are next to each other but if there is no space the extra one goes to the next line so that's why we are using Flex wrap and then we can just add a gap between them we just say Gap four like this and then let's install this h2 tag and also this link so for the h2 tag we want to create a text with the size of 2XL we want to set the font to be semi-bold and then we want to create the text color to be a slate 600. like this and then what else we want to do for the link tag let's add a class name and we can just change the text to be a small we can change the text color to be blue 800 and when we hover over it we want to have a underline like this and for the div that is covering both of them we want to add a margin y of three okay I think that's enough that one looks good so we want to do the same things for the other ones like places for rent and places for sale so we can just copy this one and make it for other places so we can just copy from here this offer I'm going to close this so I can easily copy it I want to copy it two more times using alt shift Arrow done so we should see now three offers so for the second one this is the first one the second one the title is going to be for rent so recent places for rent recent places for rent and then show more places for rent and this is going to go to over slash search for slash type and the type is going to be red and then we want to Loop through the rent listings and also here we want to say rent listings if there is a Landry sink and the lens is more than zero so we should see the places for rent now as you can see they are all places for rent and the last one this is going to be sale listing let's copy this and change this one change this one this one is going to be recent places for sale show more places for sale and this is going to be with the type of sale so everything is good yeah we only have two places for sale okay everything's looks good and also here when we click on it we go to the search place when we click on these show more offers we go to the search page but the with the offer true and let's test this sale as well it is this as you can see this is the places for sale all right so that was it for creating the home page let's add this one to the GitHub so we just say complete on page so in the next section I want to just deploy the website to the reversal so I we just the only things left to the website is this about page that is very simple so I'm gonna create it in the next page in the next section and then deploy it deploy the whole website to the render platform so see in the next section all right in the last section we have completed the home page in this section we're going to work on the about page and complete it as we have in the final version it's very simple to do that so we can go back to visual studio code and then we can just go to about the jsx page and then here let's add some uh so let's bring this one to the right side so we just copy this one so what we want to do here in this div and we have an H1 tag saying about the hand the state after that we're going to have a paragraph and this is going to be the first paragraph let me copy this and paste it here after this one we have another paragraph let's copy this and then finally we have we can have the last one which is saying this let's bring the our final version let's install this real quick so for the H1 tag let's make the text to be 3 XL we set the font to be bold and then we want to add a margin bottom of four to add some space here and then we want to change the text color to be a slate 800. for the paragraph let's add a dual cursor to the paragraph so we can style them together so we can just okay we cannot close it but we can do the Dual cursor by keeping the alt and we choose the next one which is here and here we just add a class name and then I want to just add a margin bottom of four and set the text color to be a slate 700. for the div at the top I want to add a heading in the y-axis of 20 and padding in the x-axis of 4 and then we want to set the maximum width to be 6 XL and this we bring it to the center using MX Auto something like that so that's it for the about page and also I want to change this title from which plus react to something more meaningful so to change the title we can just go to SRC we go to the index.html and here we can change the title for example I just change it to the hand a stage and then also this link tag we don't need it we can delete it because we don't have this file anymore actually so now we should see the second stage in the title so that was it for the about page let me quickly add this one to the GitHub so we just say complete about page so we have done with the website in the next section we're going to deploy it to the render platform so see in the next section all right in the last section we have completed our project by creating and completing the about page in this section we're going to deploy our application to render platform before doing that we need to do some changes in our package.json and also index.js inside the API folder so we go back to visual studio code and let me close everything and we go to API we go to package.json if you remember we have added this npn start for the production mode we also need to add a script to build our client side so we just say if we run npn run build inside the server inside the virtual first install the backend which is in the root of your project it's just the npn install then we can add an end we just say we can write it down with the prefix we just say npn install with the dash dash prefix client it means go to the client folder and then run MTN build and also before running MTN build we need to actually uh actually we did we did the MPN install inside the client side we have built it and also we want an npm build also inside the client side so we just say first we install the backend and then we install the client side and then we build the client side so once you build this application you get an extra folder of the build application inside the client which which is going to be dist invit they're going to call it dist d i s t and once you have this folder and then we can run that folder by our backend which this file index.js where is the back end API index.js so we need to actually do a couple of things here first I want to get the directory name so we need to import so here we're gonna import path from path and using this path we want to make the directory name what I mean by directory main is because we have a dynamic things for example here we have a folder structure in my computer okay this is a folder inside my desktop and then we have forward slash API and here we have overslash client but inside This Server Like A render we don't have such a folder inside the desktop so we need to create a dynamic path name so even in this computer or the other computers this code is going to work so we're gonna get the create the dynamic directory Name by using path.resolve and using this directory name what I want to do is to create a static folder remember we have built our application our client Side npn Run build and this is going to create a folder called this and in this folder we're going to have f file called index.html and so what we want to do here after this API route it should be after that otherwise they're gonna not gonna work so in this forward slash API user we're gonna call the API and here but what if they go to the forward slash instead of forward slash API so the we have to run the client side so we just say after use we create a static folder we just Express that is static we use the directory name that we have and we join it so we have the directory name so in my computer it's for slash for example desktop and then we have the name and then API but in the com in the render it can be anything else so we join the directory name which is dynamic with the over slash client this client and then the file that is built using npn run build which is in this is going to be invit is going to be dist if you use the create react app this is going to be built so that's the difference and then after that we just say any address except these three run the index.html so we just say get app.get if you go any addresses but these addresses are excluded okay so we have requests and response let me close this first okay so now we we're gonna send back a file we're gonna join the directory Dynam Dynamic directory name beat forward slash client uh we can we can do it like the this way too we can just say client and then this and then we're gonna call that index.html so any address we go on the URL that is not for slash API for slash user post slash API off and forward slash API listing is going to run this index.html which is here inside the client side inside the dist folder which is going to be built during the npn Run build so this is the meaning of this so that is enough for us to be ready to deploy our application to render so what we want to do first we want to actually Commit This one and add it to our GitHub repository because we need that to GitHub repository in the latest update to be able to add it to the render so I'm gonna add this one and just call it add free installation uh early ad pre-installation and that's enough you just commit and push it and now we go to render application we just go to render we search for not render for us just render and inside the search results we go to render.com and here we need to sign in this is free to use don't worry about it it's free so we just go dashboard but before dashboard we need to sign in I'm going to sign in with my Gmail account once you're signing you see your application I already deployed three applications before so what you do here you can click on new and click on web service so we want to build it by our GitHub repository you just say build and deploy from a GitHub repository we just click on next this is going to load my GitHub repository the reason I'm seeing my GitHub repository because I have connected my GitHub repository to render otherwise if you don't see this one connect your GitHub repository after that you're going to see all your GitHub repositories here and this is the last one that I committed one minute ago is man estate and just click on connect and now I just create a name for my service I just call it for example Man dash estate you can choose the any location I just choose us West and we choose the main root directory is going to be empty because the root of directory of application is just this route because we have the package of Json inside the root of the directory so you just keep it empty for the runtime we just use node for the build we just write down npn run build and this MPA run build is going going to actually run this this one for us npn install npn install prefix client and Etc so MPN run build for this start we have npm start as we have here npm start and then we choose the free plan it's a bit slow but it's okay you can use it for now for free and if you have a successful application later you can update it as well and then in the advanced part we want to add our environmental variables so we just click on ADD environmental variables we just go to our DOT EMV file we just copy we paste it here for the this is the URL I'm gonna paste it here and then we have the jw2 secrets we paste it here and then just don't copy the code just the text is enough and then we want to add one more which is inside our client side which is with Firebase underline API key and then this is the we just copy the API key and paste it here so this is for our environmental variables that's enough and we can just leave everything like this and then here we click on create web service so this is going to take a while this is our URL of our application but don't click on it until you get live here as you can see first this is going to install npn install npn install the client and Etc and this is going to take a while when it's finished I'm going to come back and we're gonna fix the remainder part of our project okay seems like we got an error and if you scroll up you see the error we get so here we can see that they couldn't resolve a sign up from the app.jsx so if I come back I go to app.jsx when I imported the sign up page as you can see the sign up is sign up with the U capital u dot j6 but I have imported it like a sign up normally so I'm gonna fix this one sign up and also this one is okay so I'm gonna just uh again add this one to the GitHub we just say fix sign up fix the app.jsx file for sign up so and then we can commit and push and this is going to push the new version and probably this is going to run automatically again otherwise I'm gonna run this one manually so let's go back to our dashboard so as you can see now they're deploying it again because when you uh change a commit inside the GitHub repository this is going to actually trigger this render and this is going to deploy it again so if you click now again and then we go to our deploy we can see now it is working let's see if we can get the this time a correct one we are getting some warning about the television CSS line clap that's not important the warning is fine okay it seems like it's working it's building now it's already built our application it's uploading the build okay now it's deploying our application so it seems like this time is successful so it says build successful and we we need to wait until this one gets live because this is in progress even it gets live in my experience you need to wait another few minutes like five minutes to test your application otherwise you get an error because they said live but it's not actually live so now it's running our note uh JS and as you can see the server is running on Port 3000 and also it is connected to the database so let's uh let me pause the video and I'll be I'll be back when the installation is completed all right so now this service is live as you can see we get the live here I waited few minutes now so and now if you click on our the URL of our application this is going to run our application as you can see the first page is working as I as we expect let's try to sign in uh first we sign up with the user for example I sign up with the user 30 or 33 ads and then user33 gmail.com let's choose the same email for password and we click on sign up okay this sign up was working let's sign in okay it's working too and then in the here inside the profile let's change the image first I choose my rooster image so now it's uploading so the Firebase storage is working so along with the image I want to update the user name for example I just write down user 73 you can click on update as you can see user is updated successfully and then let's create listing for example I just say new listing from user 33 I just copy it let's make it for example an offer with a price of 500 000 with a discounted price of this much let's have a parking furnish let's add some image so I'm gonna upload four images so it's working too let's create the listing so this is the page uh the about page is working home page is working let's try these links okay search is working as well the show more button is working so what else for example we want to see the listing we can see the listing here and let's try to sign out with this user or delete this account let's sign out and then we sign in with Google but as I mentioned before for the Google we need to add the URL otherwise the Google is not gonna work as you can see the uh the the page is popping up and closing quickly so we need to just go to firebase.google.com make sure you go to your console here you choose the account uh this one was main estate and then in the authentication just go to setting and then authorize domain and add this domain so we need to copy this domain URL and then add it here once you add it and then you can just click on let's refresh the page first and then once you click on Google continue with Google you can now you see it's working and then we can choose one of our accounts for example this one as you can see now we have profile with this person and I think everything is working fine so that was it for the deploying to the render the process thanks for watching I hope you learned many things from this project and let me know your opinion about the project and see you in the next project

Channel: React & Next js Projects with Sahand

Views: 509,699

Keywords: MERN Stack, Web Development, Real Estate App, Full Stack Development, JavaScript, React, MongoDB, Node.js, JWT Authentication, Firebase Integration, Google OAuth, Modern Marketplace, Building Web Applications, Coding Tutorial, Advanced Web Development, CRUD Operations, User Authentication, Search Functionality, Web Development Course, Full-Stack Development Tutorial, Real Estate Website, Web Development Skills, Web Development Projects, Online Learning, Programming Tutorial

Id: VAaUy_Moivw

Length: 656min 55sec (39415 seconds)

Published: Mon Sep 25 2023