Transcript for:
Creating a Property Website with React

hi everyone my name is f my and welcome to my YouTube channel today we are going to build a forch property website while you're building it you are going to learn all the advanced react Redux not JS and mongod DB at the end of this video you will have this unique and complex project that you can add to your portfolio now let me show you a quick demo of the entire application on the top right here we have a logo suchar and user navigation when there is no user login yet we can log in and sign up so let's register this is the register page you can register a user for example I will register a user called Alex Taylor and the email is Alex Taylor at email.com password is Alex Taylor and confirm password is Alice when you see the conf confirm password and the password are not matched the this line will appear until we type the correct uh password then it will disappear right here we can upload the profile photo for example I have the photo of her here and then register after register it will lead us to the login page now we can log into to the account we just created so Alice Taylor at email.com and the password is Alex Taylor login after we log in it will lead us back to the hom page and now we will have all the list of the user below we have all the top categories if Will click to the top category it will lead to another page uh have all the properties belong to the category we choose come back to the homepage go down here we have all the categories listing here we can filter we can filter the listings belong to the category we choose and then we can come back to all so if you are interested in this uh listing you can click here to add this listing to your wish list so it will become from white to Pink this mean like it already added to your wish list you can check here in your new user navigation the wish list here this is the listing you just like it go back to the homepage if you want to uh see the details of this listing you can click here to see all the photos and back or you can click anywhere here to go to the listing details it will show you the title all the images the place the guest bathroom bed and parts allow in this property who host the prop property and the description the highlight and all the utilities this place offers right here we have a beautiful calendar that you can pick the start date and the end date it will show you the price of each night how many nights you stay and the total price if you want to book this place just need to click this button booking it will lead uh you to the chip list where uh all the booking you booked so it will show you the start date the end date and the total price if you want to check this uh listing details again just need to click it it will show back to the listing details right here you can also add this list to with list as well yes so uh to have the property list you need to publish a y property so if you want to publish a new place you can go to become a host here or become a host here so just click to become a host in this uh creating listing page uh we can uh choose the category for now I will choose the camping for example and then I will choose an entire place it have a different types it can be only some rooms or a share room and I can put the street address I will put random street address like 39 TC cus and then the apartment is Unit 13 see Toronto Province Ontario and Country Canada for the basics of the place we can choose how many guest we want and how many bathrooms our uh Place have how many beds our place offer and how many bathroom our place offer so right here is all the utilities your place offer I can choose uh very random and for example you don't want uh the dedicated work space anymore you can just click again to deselect it okay so I think it's enough go right here we can add the photos of our place so I will add all the place here all the photos we also can delete the photo we don't want and move the foldo to the New Order and then upload a new photo if you want all right so right here is all the details information of the place have a title I will copy paste some random text all right so I already add all the information the title and the Highlight will be a short sentence but the description and the Highlight details will be pars now to set up the price you can choose any price you want to me I like to set up the rice is 500 and I can adjust here as well so now after everything you see um our information is correct and detail you can create your listing so it will lead you to the property list the property list is all the property you own right so it's uh uh and then you can go here to check again your pleas so for the reservation it need to be someone else book your property now for the Nappa you can also search anything you want for example I will search a place have a lake like near the lake and then I click sear here it will show all the properties uh near the lake like related to the lake for example this listing is near the lake right next to the next to the lake and then this listing also is the lake gorgees overlooking Lake GES here so I search another one for example the uh Mountain so there is no mountain uh listings related so it's fine that is how the Shar uh function working go back to the homepage yes so this is all the entire application and then you can see it's very responsive as well it can be mobile like this and in the listing details you can see are mobile responsive in all devices okay nice so are you ready to build this beautiful project with me let's get started we create a new folder and then you can name whatever you like to me I will name it is uh dream next then you will open the visual stereo code and then just R and drop here okay then go to terminal new terminal here we will initiate the react app by the command npx create react add and then client so we will have a two folders client for the front end and server for the back end click enter it will uh creating the app for one or two minutes and I will come back later now it's finished and then you can see the client folder here okay so uh now uh we are going to install some packages first we need to go to the client folder by C client so after going to the client folder we will install some packages we will install the react router the to sorry to handle the um uh react uh routers with uh different RS and different bges and then we will install SAS with mui for the designing so add mui icon material add emotion flash react okay one thing I forget is like I forget to put the i in the beginning to install Okay so try to type everything correctly and add emotion flash style and then click enter it will start installing these packages for one or two minutes and I will come back later so after installing all the packages you can go to the client folder and then check the package. station you will see the size the react router D the material UI in the dependency so it's all good now we'll go to public I will delete some files okay and then in the index.html we will finix uh we will sorry we will delete everything here all the commands and then the no scripture okay you can change the name to the name you already named the application to me it will be dream next and then we will delete this comment as well okay for the Google font we will go to uh Google font. google.com and then I already select some font weight you can just uh unclick or add uh the font where you want or you can add the 300 as well okay and here they will give you a link you just need to copy the link and then paste it above the title okay so the Google forms already imported uh for the asset and the forant icon you can uh download in the GitHub link below okay so I just uh copy and then paste the asset folder in the faon icon here then we will go to the source folder here I'm going to delete most of the file to no no [Music] sorry so we only have three files left in the app uh. CSS you can delete everything and then type start here mean it will apply everywhere in your application and then we will have a marching zero ping zero box sizing B box and then font family will be n n and then son s okay that's it very simple and then in the uh index.js we will delete everything here below and then delete this we also delete the index. CSS come back to app.js we will delete everything in the header then we don't need the class name here okay so um here I will show you how to um uh build a register page in the lockin page okay okay so to do that we will in the source folder we will create a folder called pages and within the pages we will have a file called home page not C uh jsx and then r a f c e isce is a react snippet extension for vs code and then uh click tab if you don't have this snippet yet you can go to the extension and then search for ex7 Plus so it's right here okay I already install it okay come back to homepage it's all good and then come back to the application we will create another page called login sorry login page do jsx and then do the same thing a c e snipp it create another page call register page jsx then do resenting IC go back to the app.js now we will import the browser router in all the routes okay import browser router rout and route from react rout to do okay so uh we will go here okay and then just type browser router and then inside the browser router will be all the rout have a S at the end remember and then now will be each route so no s okay so each route we will have a part so part for the homepage will be nothing so just only one Flash and then the element will be the page so it will be homepage so here it's already here we just need to click it okay and then close this so it will automatically import it for you so I will try to Cheo it for the register page I will have a register part like this with this it will be register page okay it will automatically import for you and for the login page the part will be flash login and here will be login page okay un good so now um You can uh okay I will contr C again and then to start the application we can have the command nbm start so it will start the website for you okay so here is the website with the Local Host uh colum 3000 and the homepage because like we have imported the homepage and then you see homepage we have the text homepage here okay if you go to register part it will show register page when we go to login PA it will go login page as you see here in the pages lockin page we have a login P test so it's all good okay now I will show you how to build this beautiful register page so first first this we will be class name register so this div will contain the whole page right the whole container here okay so inside this div will be another D with the class name will be register contain so this div will be the black form here the black container here okay and inside this div will be a form so this form will be from the first name to the button and then when you f all the information you click the button here it will submit the form so after the form will be a an anchor tag so this anchor tag will be this line this line will lead you to the login page so the text will be already have an account question mark you here okay and then with the H reps will be flash login because it will lead you to the login page so inside the form we will have a one two three four five inputs so the input so the first input with the placeholder will be first name okay and name of this input will be first name and this one is required so if you don't feel this input you cannot submit the button because it's required and I will just duplicate four times okay so the second will be last name the name will be last name in require this the third one will be email name will be email okay but this one I will have another type email so it means like for example when you type um your name.com you cannot submit the button because it's not the type of an email so they say please include an add in the email address so the email address to be your name at your name.com for example then this is a type of an email then you can submit the form okay so the first uh the next one will be password the name will be password and then in this password input I will have a type password because I don't want to show my password here right so when you have a type password it will HDE it same thing for the confirm password name confirm and the type will be password to upload a photo we will have an input okay this input type will be file and uh name will be profile image we will accept all the type of an image so will be image flash start mean everything it can be uh b& G or gbg okay everything or gift or even like SBG and then require as well but this one is not the input for example if you see here it will show like this choose fine and no F chosen I don't want to show this input that's why I will have the style display none okay okay so I just uh want is it easier to see I will show this label so I will have the label here the label will have a image and a text so it will be image the source of this image will be FL ass set at image.png okay and all to the add profile for after the image will be a text so upload your go go and I want to assign this label to this input that's why in the input we need to have the ID the ID will be image and in the label we will have a at ml4 and then we need to have the same with ID so I will copy and I will paste here and after the form so sorry after the label will be the button so the button will be registered and then type of this button will be submit okay so here we'll have all the HTML here to style this page I will create a new folder in the source folder called Styles so this Styles folder will include all the styling uh n CSS so in this Styles I will have a file called register. scss so to apply uh to apply The Styling to this page we need to import so we need to import do flash Styles folder and then the name of the file register. scss so uh in this video I'm not uh focusing on The Styling so please go to the GitHub link below and then copy paste all the style uh in the register. CSS all right so I already copy and paste all the styling SC CSS I will explain you a little bit I have the variables. scss here which mean like I assign here I assign a text to a color so whenever I want to pick the color I don't need to remember the code of the color I just need to import the text pink red so it's very easy for me to uh style and then uh I don't like during coding and then I have a mixing saddle mixing button style so uh what does it do uh it will have you for example this button like this styling can be repeated like so many places even in the login page or even in the homepage or creating uh hosting Pages then we have repeat the styling of this button so many times that's why I create the mixing here and then in the register styling for example this button so I have this button here I don't need to uh write down all the uh style here I just need to include the button style and then we will sty the same thing here and then for the break points as I said I have assign all the uh size of the screen and then uh have a mixing to export so the max WID SM will be have a like Max WID of 480 pixel so it for mobile responsive go to register you will see um for example I have here I have a include large with the 60% it mean like for the screen like maximum large large is um yeah maximum 1,000 pixel okay so maximum 1,000 pixel the black container here will be uh 60% but for the small screen the black container here will be 80% here you can see the wood will be 80% so it will be responsive yes okay so here it apply The Styling uh this like this because I forget to put the class name here uh register the contain form okay so after you add the class name for the form it will be applying properly see it's very beautiful so now uh we will add a value to the input and then create the hand change function okay so now we will type cons form data set for data equal to U stage so when we tap the use stage it will automatically import the use day for us so the use day will be an uh object for all the input so first name they initiate state to be empty Street last name empty string email empty string password empty string confirm password empty string and then profile image because the type of the profile image is a file not the text like all the input so this one will not be an empty string but will be no okay so okay one more thing here the first name need to consistent will be same with the name we assign here so I see here this one is a capital N I will change this to capital M so I just want you to make sure like the name here and the name here need to be same exactly so this one the last name will be same and the email password so everything is same is good okay so now we will add the value here okay so the value here will equal to form ler okay form later here DOT first name and yes so form first name and I would copy I will paste here uh it will be form last name okay this one be value from data. email and then this one value will be from data do password same here value will be from data do confirm password now I will consult that lock the form data to see how it is so consult that Lo form data and then you can go here go to inspect and here go to console so it will show you all the property of the form data so first name last name password confirm password and profile image and have a initiate uh state is a empty string here when we type something nothing happened because we didn't create the handle change function yet so let's create it so com handle change equal to event and then function now we will take the name the value and the files from the event e. Target and then we will uh set form data dot dot dot form data so this one is a spread operator I will explain you later when weish is everything we will take the name with the value according to the name and then if the name name equal to profile image question mark then we will take the first item of the files array so the files array we will take the first item or we will take the Valu okay so now we have the handle change function here then we will apply to all the input so here I will apply on change equal to handle change okay and then we just need to uh copy paste copy paste here pce here past here past here and P as well okay all good so let's see okay now we can type uh my name is f right I will type f so you can see like it take the first name f here in the the other property is still empty string I go here I my last name is my will be M AI you will see now it's string it still keep the first name tends to this rad operator so this one will create a copy of the existing form data so it will keep the data previously we already enter this mean my first name it's not like refresh the form again and then I uh just only the last name appear here so if I delete this and then I type my email is uh F my see you can see like all the previous uh information like disappear that's why we need to have this spread operator is very important to remember make sure you have this spread operator to keep the copy of the existing data and then so according to the name for example the name here is a first name and the value of this name is a format. first name so uh it will for example I change another name is Maria it will take the name and the first name Maria here okay and then for the name equal to the profile image here because the type is the file that's why we have the files array here and then we will take the first item of this files array okay so now I can um just close it and I can upload like my profile image here but nothing happened because uh we didn't like uh show the image now I will show you how to display the image under the label we will add uh form data do profile image and and this one is a condition okay and then we will show the image the source of this image will be url. create a check URL of form data. profile image so this uh create a check URL is to uh create a URL for the selected file so this URL can be used to display the photo okay and then we will have the um or will be profile photo and the style will be Max with 80 pixels so I don't want to show like the very big profile photo here okay let's try okay we try this photo now it's appear the photo to register the user to our database we need to set up the back end and now we are going to build the server folder I will enlarge this window and we will have another terminal in this uh terminal will be the server uh terminal we we uh we will um have a command make there server so this will create a server folder for us and then we go to the server folder by CD server okay and then now we will run the command nbm install T J not mod so uh this one to install not mode globally so we have access to install and run our note to a Le server so it will refresh every time we save and then we will run uh to install many packages nbm instore Express for our library for the passer to process the request body B uh script bcrypt JS for password in encryption calls for cross origin request. EnV for environment variables motor uh and motor D Bri fs. storage so this one to upload the files globally and then save it to the database Json web token sorry Json web token uh for authentification and mongos to uh assess mongod DB so make sure you type everything here correctly and click enter it will take uh one to two minutes to install and I will come back later all the packages already installed and now we will run one more command nbm init Das y to set up the um our package J in server folder so in server folder I will close the client folder server folder you will have a package Chason it will show all the uh package we just install in the dependencies and not modules here so in server we will create a file name sorry we will create a file name index.js and here we will set up the environment to import all the packages so cons Express equal to require Express cons at equal to express cons mongu equal to require mles cons. EnV equal to require EnV do config this one is uh very important you need to have the config here cons c equal to require cost okay and now we will use app. use C and then app. use express Json okay and now we will have app.use Express do static public so this one is to serve the static files from the public directory now we will set up Mong in order to access to our database we will go to cloud. mongod db.com in here you go to I will not show you how to set up uh register the account is very easy to find the material online so we will go to the uh database assess after you created your account you will go here and then you can add new database user okay you can uh create the password authentification enter the password and make sure the buildin row need to be read and write to any database I already created one here and then go to network assess we can add the IP address we can add our current IP address or any specific IP address but to me this one is just the practice uh project so I will allow assess from everywhere so the um IP will be 4 Z and then confirm after that we will go to database and then connect connect the database to your project so connect go to rivers and then we already uh install mongod DP and then we will copy this link not the link it just copy this and then go to um our application in the server folder create a new file called EnV and then we will have mcore URL you can pass the um sorry you can pass yeah the text here so the password here Will will be your password created now we will go back to index.js and then set up the mongos so this part will be set up cons H to me I will say 31 you can add any number you want and then that connect we will connect to our database on the uh on the Mongol DB website right so we will process the uhv file EnV and then Flore URL the one you just assign here this one okay then we will have use new URL pass assigning to true and then use unify topology assigning to True after that we will have a DOT then in a function so app do listen listen to the part okay the part here and then another function we will conso that log the server part calling and then here will be the part okay if uh any uh error it will catch you error and then console that log error did not connect okay now all the uh mongus is already set up now try to uh start the server MBM start okay so it have a error here because like in the back Chason we need to change this the script to start so we have an nbm start it will run the note mod of the file index.js so just make sure you add this into the packages and file so now we will start again nbm start okay so after running it have the server Port 30001 here so this one this been like is connect to the database mongod DP successfully now we will create a user schema so in the server folder we will create a new folder called models and then in models folder we will create a file named user.js so uh we will create user schema in this file user schema actually the data structure for user so every user when they register their account they will have the same structure so first we need to import mongul eal require M and then comes user schema you go to new schema and then the property so the a user will have a first name with the type is string and require is true and the second will be last name type is string require is true okay I will copy paste it will faster the third one will be email I will copy paste my two okay the first third one will be email type string and then require to and then unique so email need to be unique and then the password type string required to same this one will be profile image profile image pack so profile image part is mean like we will take the uh URL of the profile image so type string and default will be NTI stream so that is the form in the register here this the form first name last name email and password and profile image part but after you log in in the user navigation here you will see the chip list the wte list property list reservation list okay so we need to have all these list in the schema too so the next one will be cheap list and because this is a list so the Ty will be arranged and default will be Mt do the same thing for all the chip for all the list so we copy paste three times because we have a four list so Chip list and then what else wish list and then wish list okay then what else and then property list and reservation list property list and this one will be enter and isation list okay so right here we will have time stem so this one will help you know when the user register okay and then after we will have a const user equal to do model and then VI user we will call the schema name user and we will use this user schema here all the schema here and then modu do export equal to user so this is how we create a user schema now we will go to I will just close this file it's not necessary anymore okay so I will um create another folder here call route and then under routes folder will be a file called .js so here we will have all the API for out so com router equal to require Express okay do router cons b cryp equal to require B Crypt JF this is like how we import all the packages cons JWT equal to require Chason web token and then con mot equal to require motor okay so we will import the user schema as well so con user equal to require and then we will import the um user schema yes so now we will create the API for the user register so we here user register first we will have a router. post and then the link will be register here you will see the link will be register okay and then P blow do Syle and profine image so uh the user will upload the photo right for the profile image and then we will have a sync function request and response so we'll have a try and catch so in chy we will have uh we will take I will have the commment here for you easy to understand so in the beginning we will take all the uh information from the form so how we do it we will cons first name last name email and password in the body so will be request do body it need to be equal here okay so we take all the information from the form and then after that we will get the uploaded file for the image so the uploaded file is available as request. file okay so we will take get so we have a con profile image will be equal to require. file okay one more like because uh to uh upload the file we need to do the configuration for the motor to uh upload and stall the local files so configuration motor for find upload so cons storage equal to motor dot disk storage and then the destination will be function require file and CB so CB no so we will store the file in the public flash upload flash so this is the directory for the a file storage so I will Comm in here St uploaded file in the upload folder okay and then you'll be file name will be function and then require file CP CP no file. orinal name so we will keep the name like over there like for example the user uh name the file how the name so we will keep the same name you don't change it so this one is like use the or original file name and then coms upload equal to motor storage so the upload here will be use here okay that this is the configuration for the motor okay so come back to the profile image so if they didn't upload the profile image so not profile image we will return no file uploading so return respond that status 400 and then say and no file uploaded okay now we will have the PS to upload it the profile photo to store right we need to create a part to store in the user structure the user database so here we will create the PS to the uploaded profile photo so cons profy image part so in the beginning we just take the file but to uh get the information to read the the file we need to create a p so profile image. P so we can start the p in the mongod DB okay now we will check if user exist okay maybe like they already created an account and then they they didn't remember so they create again so coms is this thing user so we will find the existing user okay so equal to await user this is a user schema do find one we will find the email because the email is unique everything else can be flexible can be like same but only email is unique so that's why we can find a unique uh property is a email to find out that ex this or no so if existing user we will return respond. status 49. Json okay sorry okay and then we will send a message user already exist okay and then if not then we continue if um they didn't exist we will check the password but before we check the password we need to has the password first because we don't want want to start their password right we need to has them so has the password consult equal to await bcrypt do CH s and then con has pass word CLW word so like uh for example the password is like um everything okay for example the password is uh everything but we cannot store the everything password Here we cannot know the password right so we need to has the password so after passing after hasing the password will will be like all the character all the number and the sign mix going be like this yeah okay so cons has password you be await bcrypt do has and then password the password they um they enter and then s has password okay now it's time to create a user so create a new user so coms new user equal to new user first name last name email password so the password Here need to be has password not their real password we will not store their real password and then find image p and now we will save the user save the new user await new user not save so we also save all the information the user put in the regist forms and also we will have all the list with the empty arrays as the default in the beginning so after that if they have any um property list or they book any um listing or they have any reservation list it will add later so after we save the user we will send a message if it's successful so send a successful for message response. status 200 do Jason message user register successfully and then we also have for the user as well so the user will be the new user we save here also for the error we will console that law the error and then we will send the message as well 500. Json message registration failed and then error is the error Dot message okay so it's good for art route and then now we will go to index.js to import the route to import the art routes so here we will have cons out route equal to require. flash and then routes and then .jf so we will use route okay so here we will use all the route will be more routes but the first one will be aut route so app. use will be out and then out route okay so it's good for the server for the back end to set up the um uh user API and user schema so we have the ABS grass here and the um error is require is not defined so here okay BP require I miss the ey okay what else and then it will say router. use requires a middleware function so at the end we can add one more line mod. export equal to router okay then this will be fixed okay oh good and then one more thing in a user I um have a capital here but which must not need to be normal letter okay so now we will go to uh the register page and then we will uh create the handle submit function so const handle submit you go to assing event we will have a e. prevent def we will uh like check if the password is match or not okay because remember we have password and confirm password here so need two of these need to be matched so we have the um a state here con password match and set password match equal to use State true so the beginning will be true and then if if form data do password equal to form data. confirm password we will set the password match equal to true and then else set password match equal to false so if set password match for we they cannot submit the form so we will have a CH and catch here chy and catch in ch we have cons register form equal to new form data so register form is the we will send the data right to the back end and then we use the register form to send to the body okay because we have a file or photo file that's why we have to create the form data here so for the key in form L then we have a register form. append key form later key so what does this do so this one here you can see we look through the form dator and then like uh every key of the form dator we will obtain the key pair value okay this is the name and this is the value of the input so we will obtain the each key value pair to the register form and then we will send this register form uh to the back end okay then cons response equal to await fetch so we will fetch the API right so ATP calling flash flash Local Host calling 30001 FL all FL register so how we have this API first Local Host 30001 because we have the part here is a 30 1 and then the art because in the index you can see like we use the sorry in the index we have the app Ed first is a art and then after that is a art route art route is import from the. JJs and then you can see here we have the part is a flash register so according to that the API will be flash out and then after is a flash register okay and then we will have the method is supposed and the body the body will be register form so here you can see we have a request from Mod right so all the information here we will they will take from the register form here we pass so if response is okay we will navigate to the lockin okay navigate but first we need to import the use navigate from uh react router down so here I will import use navigate from react router down and then okay here I will use cons navigate equal to use navigate so I have a navigate here like after they submit the form and successfully okay then it will lead them to the login page okay now we will handle the error so the error will be console cat log reaches Json fail and then error do message okay so now we finish the handle submit function we will add that to the form we will go to the form where's the form okay here and then we will say unsubmit equal to handle submit and uh we will go to after the input of um confirm password so we will have if not password match and and so we'll have the text the text will be password and not match okay and then here we will have the style the color will be red so if the password is not match this line will appear and we will disable the button so go to the button we will disable disable the button if the password is not match okay so the register now is done actually I do a mistake here we cannot check the password match inside the handle submit function because we need to check the password first before we click the button uh to handle submit right so here I will Del this and then under the states I will use effect and then we will check the password match here so we will have a set password match will be form data. password equal to form data. confirm password but there will be one more thing whenever we just enter the password this line will appear because when we enter the password right so the confirm password at that time is a empty string nothing yet so it will be different right away and then this line will appear to avoid that we will add one more case is form data do confirm password equal ENT string so until we finish both password and confirm password then it will check and then we can click the button so I think it's good now you go to the website and try to rease the one user okay so the first name I will try for example Danny the last name can be black and then the email will be then blackmail.com sorry at and then the password will be then me like confirm password for example I will say uh everything right see it will be password and not match so we need to then C now it's good and upload the photo I will have a DA photo here nice and then I will register one more thing before we register we need to create the upload folder remember we need to start all the uploaded files in this folder and then we didn't create it yet so we need to go to server folder create a new folder called public and inside the public folder we will create another folder called uploads so all the uploaded files will store into this folder and then uh if you go to index and you want to name the database collection uh we can have one more line here DB name and then we can name it as um our application's name to me it will be dream next okay so now it's all good to go go back to register page and then click register see it will lead us to the login page because we navigate here you can see we navigate if response is okay then we navigate to the login page so if you go to mongod DB and then restart refresh the page so here I have a dream Nest collection and I have a users so the D black and then all the email with the chip list with list all the empty array the default and then we have a created at created at here tends to the time St true here okay so now I will show you how to create the login page now let's open the login page and then in the D we will delete this and with the class name equal to locking and inside this div will be another div with the class name equal to loore contain and inside this D will be a form with a class name equal to lincore content underscore form and after the form we will have an anchor it's same thing with the register so this anchor will lead us to the register page and the text here Will we don't have an account customer s in here and inside the form we will have two input the first input will be email placeholder email in require as well same thing for password type password placeholder password and required and after two input we will have a one button and this button will be login the type for this button will be submit so now we will add the value for the input so here we will have you state con email set email equal to New State empty string in the beginning for initial States same thing for password so here we will add the a value for email and same thing for password okay so we will do the unchange e and e do Target value same thing for password now we will add the style in the Styles folder create new file call login s process and then we will import import. flash sorry and then we have a Styles here and then Lo ncss so in the beginning as I say uh I will not be focused on The Styling in this application so uh please go to the GitHub link below and just copy paste for The Styling so first we router. host the link will be flash login and then we have a syn function chy and catch inside a CH first we will take the information from the phone [Music] so we'll have accounts email password equal to required do body request sorry not body and then we will check if the user exist check if user is this remember remember in the user register we also have this check if the user is this okay so I just need to copy paste so here I will just have a user and then user but we will do the opposite way because we lock in right so we have a not user and then the message will user doesn't is this after we check if the user is this we will compare the password with the has password remember we don't store the real password we just only store the has password so when the the user uh have a real password Here we need to compare with the has password we saw so cons is match equal to await B cp. compare and then password password Here we take from the body this mean we take from the form and then the has password you could to user do has AAL to password so the user and then password the user here is the user we stall in the database we just find it here and then the password here remember here we have a create new user and then we start the password right as a has password so the has password equal to user. password and then if not match we will return the message return. response. status 400 watch Chason the message will be invalid credition invalid credential after We compare the password we will generate the JWT token generate GWT token so cost token equal to JWT do sign and we will sign the ID as a user doore ID and then we will have a process. env. j JWT secret okay so we will go to the EMB file and then we will create the JW tore secrety equal to anything you want to me you can a phrase like um um password secret message it can be anything you want come back to the art we will delete the password user. password and then we will send a successful message respond. status 200 but chasing so when the uh return here we will have a token and we will have a user so we don't send the message here and then you can put the message here uh if you want so at catch we will conso that L the error and then we will return 500 error ER that message okay so it's all the user loging API now we will go to the login page for the handle submit function but first of all um I want to install or some packages so I have an a new terminal here and then C the client I want to install Redux Redux is a state management library and then like is a very useful especially in the react application this makes it easier to manage and develop the application State okay and then easy to scale so I will install NM install react redu and then H Redux CHS plus 2 Kit so this two Kit is a set of utility functions and abstractions that is commonly used with Redux to simplify and streamline the process of writing Redux code and Redux positionist so Redux persist is a library for persisting a Redux store so the purpose is like um uh you can possess the state of the product store even if the user refreshes the page or closes and reopen the application so you uh can maintain the user sesss and provide the sist user experience so uh it can like uh allow the state of a reduct store to be safe and reloaded from the storage okay now just need to enter and it will install all three packages in one or two minutes and then I will come back later okay now it's already install so we go to package. Chason and then we can check we have Redux Bist we have react Redux and then we have the Redux token okay go to the login page and then we will have the handle submit after we will have cons and will submit equal to uh a sync function e. prevent default and then we will have a chy in catch inside the CH we want fetch the API cons response equal to await p and then the API here will be HTTP calling flashl Local Host calling three 001 and then Ops and then lock in after that we will have the method equal to post and the headers contain type this application Clash CH and then now we will pass the uh email and password input to the body so the body will be Jason Dot stringify and then the email and the password so we need to have the uh here so the email and the password is from the input and then we pass to the body as the API see we have a cons email and password from the body so after we fetch the API uh we will get the data after that so here is the get data after fing so we have a login equal to await response. Jason so here you can see this is the data we get so this is the data we get okay respond. Chason and then what we will get we will get the token and the user so now I will uh assign the not assign we will I will add the token and the user to the store of the Redux so in order to do that we need to create a folder car Redux inside the source folder and then inside the Redux folder I will have a stage DJs I will enlarge the window so we will import create slce from Redux toit at Redux JS FL to it and then we will have a initial State con initial state so this initial state is the data we store in the global state so this data will be accessible throughout all the entire application and then we can WRA it any way we want so we don't need to pass in the state of properties down to different component so we will have user is no and token is no so in the beginning user and token are known and then after that we will export cons user slice and then we'll have a create slice which just imported we will set up the name is user and then initial States and then reducers so reducers actually simple as a function like as a function this can be many functions and then each function is a specific action that can be disected to modify the state so it will modify the state to a new state through a specific action so we we have a set login here with the state and the action so the state. user equal to action. Halo do user and then states. token equal to action. payload do token then we will export the set log link so export cons set login equal to user slice so the user slice here do action and then we will export default user slice. reducer so this is the setup for the state and then we will have another file inside the rux folder call store.js so so in the link below uh please uh copy and paste out the configuration for this store.js so we have all the configuration for the Redux Bist so Redux Bist uh is mean like whenever the user close the tab or close the browser their information is still be there and then uh whenever they reopen the tab and then they reopen the website they can access to their uh State review state and then they don't lost any information what did they do in the beginning and the only way they get rid of it is clear the catch and then we also have a configuration for the store as I say like uh Redux um is like a store you can store all the state right globally and then you can asset it everywhere you want that's why uh the store here is like on the top of everything on the top of the application so this the configuration setup is kind of like same for every application that's why I don't go to detail with this you just need to copy paste go back to the login page now we will set up the handle submit and uh actually we uh need to continue with the uh uh add the login um response right so we have a the respond is the token and the user so now we will add that to the state first we will import the set login so import set login from Redux State here from this file set lockin and then we will import use this app use use dispatch from Rea ru so here we will add the to the state after get the data so if loging we will dispatch first we need to uh call it so here comes dispatch equal to use dispatch after we call it we will say the dispatch here here and then we will set login and then user is login. user token is login PL token and then after we disect we will navigate so navigate navigate to the uh homepage so we need to uh import the use navigate from RE backr to them so here you can import use navigate from react rout and then you will call it as well so after this you can cons navigate equal to use navigate and then here we will navigate to the homepage okay sorry I forget to uh consult that L the error uh we can say loging failed and then the error message okay so it's all the function for the handle submit now we will add this function to the form so here is our form and then we will have a on submit equal to handle submit okay so now we will go to the website okay all good okay now let's go to the website oh sorry we need to set the email and then this one is a set the password set the password equal to e. target. value okay now then black at.com and the password is then black and then knocking after loog in it will lead us to the homepage and then you can see the Redux store so we have a Redux Dev tools here and then to the right you will see the users here and then this is the ID this the first name Dy last name black email password is a has password and profile image part and then chip list all the list so we already like add the user here and to the um uh state so whenever we want to uh wrap all the information about the user we just need to assess the uh State globally here and now we will create a nap bar for the homepage like this this the nap barar so we will create this here we go to uh source and then we create a new folder called component and then inside the components folder we will create a file called Nappa H jsx and then afce okay so inside this div we will have the uh anchor text for the local so the class name for this D will be Nappa inside will be an anchor tag and then a r will be home and the inside the anchor tag will be an image that is the logo image so image and the source will be in the assets folder so FL assets and then logo. vng the an will be logo so this is the logo and then we will have the um um n Bar search because this one in Mobile U responsive so if I enlarge this you will see the um search bar here in the middle so now I will D class name will be na sh and then with we will have the input with the type is a text and the placeholder will be such dot dot dot unable to see the NAA here we need to go to the homepage and then we need to import the naar component import naar component and then inside this we will have na components okay now you can see the logo in the search bar we will have the styling later so after the input okay we enlarge okay so here you can see we have the icon button and then we will have the text with link to publish a post like a listing and then we will have a user n navigation if in the beginning uh user like didn't log in yet we will have a login ins s up but after they log in they will see all the list and then lock out as I show you in the beginning so let's import icon button from Material UI import icon button from at mui flly material and then after the input will be icon button after this icon button will be the search icon search icon we will import the sear uh icon from the Icon material so right here we will import search from at mui flash icons material and this search uh we will add like um we will have the um red color okay we'll have a red color so I add a styling here the color will be variable imported from the variables scss and ping not ping red okay so here we will import variable from. flash Styles and variables. scss so here variable. scss I have a being red at this color so I just need to import the whole variables here and then do ping red because I already export ping red as the pink red color okay we close out this tab it's not uh useful anymore like we already done after the icon will be the um user navigation so here another diff the class name equal to napar right and inside this D we will have this we will check if the user or no so if the user we will have the anchor TCH a create listing and the text will be become a host but if there's no user we will leave them to the login so they can log in and then uh come back to the account so Anor Tech the a rep will be FL login and the text will be send become a host so after this will be this one is the button with the menu inside so I will have the button the class name will be NAA rightor account inside this button we will have the menu so we will have the menu and we will have the uh user icon so let's import the icon so search and then person and then menu icon so inside the button you will see like we have a menu icon first and then the style for this icon have the gray color so the color is variable that's backr [Music] after we have been menu then we will have the person icon person icon and then the style will be sa but if like this one because there is no user the user didn't log in yet but if the user loog in we will have their uh profile image here so we will have two uh two cases so let's check if not user then we will show the person icon but if they do have a user then we will show the um their profile image so image and then with the source will be [Music] okay a little bit confused here no problem so we have a HTTP calling flash FL Local Host 31 is a 31 is for Server folder and then flash we will fetch the user profile image part so user do profile image p and then we will replace the public with empty string the public to empty string after the image inside okay here we also have the art equal to profile photo and then the style equal to object a check fit cover but the radius is a 50% okay so now we will have the drop down menu it's mean like when we click at the button it will show the drop down menu here so in the beginning we will have the state for the drop down menu so coms drop down menu set drop down menu so in the beginning will be false this mean like no problem menu in the beginning just only the button and then we also uh have the user con user equal to use selector because now we have the store right we need to uh use selector to select the state so State and then we will select the state. user so the user here we will have to check the user is exist or no tends to the select the state so I can show you uh this is the our application right now you can see like we already fetched her uh user profile image app we can right click go to redu St to to right you can show here the user and the token so in the user we have a profile image pa okay and then we have uh all the information now let's add The Styling so in the Styles folder we will create a new file called nap. scss and then copy paste in the GitHub link below okay so I already paste here and then let's see oh we need to import right now we will import the file CSS import flash Styles folder and then naap bar. scss okay let's see okay so it's good now and then we need to add a class name for the become a host so the class name here will be host and same for this one okay now it's better okay now we continue to the rown menu so we already have a user and then we already have a drop down menu stage so after the button we will have if drop down men new and not user so what we will have we will have a tool link so diff class name na right account Min and then the first link will be login so link we will import from uh uh link we will import from reactr to down so it's already imported for us here okay so the first link will lead to lockin page oh no it's not the self closing because we also have a text okay so the text will be lock in and the second the link will need to register and then it's a sign up okay but if the user is here so for example this one is a lockin and S because no user but uh for this it need to be the user uh navigation right so we have a another case is a ROP down menu and and user and and we will have other links so D oh sorry this one okay the class name will be same with this we will have a five links total so the first link will lead to the chip list we will add the chip list uh we will add the link later okay because now we don't have the page for the other list like J list wish list property list so just uh put the tool here just the empty string and then it's not the self closing TP T is so it will be chip list and then I will multiply so many times this here will be which list this here will be property list and this one will be reservation another link will lead to like become a host right I also have a become a host in the menu too so this link is become a host and then after all this link we will have the log out so this link will be log out so we will lead to the login page and then we need to uh dispatch to the log out right so first we need to go back to the states. JS here and then we will have a set log out so this set lock out here we only have the state because we lock out to no that's why we only have a state we don't have action so state. user equal to no no same for state. token equal to no and then we have set loog log out here come back to the NAA we will import the set log out import set log out from leux State and then we need to um import the use dispatch right to dispatch the set loog out so use dispatch and use selector all come from redu Redux re Redux so use this patch and then here I will have cons dispatch equal to use dispatch so this link we will have another function like on flick on click uh okay so the function will be this patch and set log out okay so let's see so here oh yeah we need to uh set the when we click to the button we need to set the uh drop down menu to chew right so the button is here we need to um click and set drop down menu to True okay let's see okay now nice so we have the drop down menu here chip list s list everything and then like actually like but if we click back here it's not come back to like it not come back to normal the drop di menu is still here so this one is not set um where is the button so it's not set R down menu to true but like opposite of a current R down menu state so if it's close if it close okay if it close it will open if it's open open we click again then it will close Okay so let's see the whole thing so we have a logo search bar and the nap navigation okay let's try to log out is it lead to the login page or no nice is lead to the login page and you can see in the Redux the user and the token uh come back to know so now we will go to the homepage and then we will create the slide like this we have the slide and the categories okay let's do [Music] it so in the component I will create another file C line not jsx n r a f c e okay okay so in this slide we will have a class name equal to slide and the age one is the text welcome home anywhere you wrong and then we will have a break so I will put a break here and another sentence stay in the moment make your M memory okay so this slide is very simple and in the Styles we'll create a new file call slide that's scss and then copy past in the link below okay I already copy and paste here so we will go to homepage and then we will import the uh slide component so after na will be slide okay let's check this is compiling okay nice so this is the whole screen and this a mobile responsive so what's next next we will have the category is here so go to components folder again create a new file called kg. jxx okay in the guub link below we will have a file called data.js so in data.js we will have all the information about the categories so in the source folder create a new file called data.js and then copy paste okay so in this data.js okay we will have the um all the categories here this the array with the label this is the label and this H sorry this is the icon and the label is the text we also this is the lout and we also have an image the image is this the background and the description okay so um let's go to categories and then I fce in this one we will have a class name Kate G and then in the this is the whole um the diff here is a code container so inside this container we will have a H1 called explore top categories and after the H one we'll have a paragraph and then I will copy paste here copy paste and after there will be a list so we need to import the categories so import the categories from the data file okay and now now we will map the category so after the P we will have a div with the class name equal to K Gore list and inside this D we will map the category so category question mark dot but I don't want to uh have like map all the categories because here we have a total like um nearly 20 categories but right here we only map the top category so I only pick uh around like six uh six C only so we will use slice from 1 to 7 because the first one will be all all mean like all the category okay all the categories and then P font it B front it will map it will filter the category but come back to all we will map all the listings so we don't slice the zero here but we slice from the second item mean one to seven and then we will map we will map the category and the index so we will have a whenever we click here it will link to the list things belong to that category so this will be a link and uh this link will link to the the link uh this one I will tell you I will tell you later we will do later like it will link to another page so inside the link we will have a a div and this div have a class name equal to category and the key equal to index make sure whenever you mapping you need to have a key okay and inside the div will be the image the image have a source equal to category sorry category do image so in the data right we have a image so here this is the link of the image the part of the image so we just need to do category. image is a source and then this one the art will be category label category. label is uh the name of the category that's is the image and then we will have the overlay see the overlay whenever we uh over it so this is the diff with the class name equal to Overlay this are anti diff just only for overlay and the style will in the CSS file and then we will have the uh icon and the text on it so it will be a div with a class name equal to category underscore text and inside this D we will have another div with the class name category underscore text underscore icon and this will fetch the category do icon below the icon will be the category. label so it will be a bag with category not label okay so in the Styles folder create a new file called Kies do s CSS and copy paste like us so after you done that come back to the categories and then import the style file import that flash Styles flash skate. scss okay in here we forget to import the link so let's import the link from RE actr to D okay now let's check the website so here oh in the homepage we need to import the categories components and then after the slide will be categories component now check is compiling cannot found the react route okay so maybe here yes so the react icons in the data we have all the icon here is from the react icons and then we need to install the package so go to the new terminal and then C the client and then we will install the react icon so MBM install react icon after we install the uh react icons package you can go to package. and then you can check the react icons package is already installed so it's good and then here in our application scroll down you will see all the top categories fet here and then it's a mobile responsive as well okay now we will move to create listing let me show you in our completed project you will see all the categories and then the all the listings is here so so to fetch all the listings first we need to create the listing we can create the listing by clicking this uh link become a host it will lead us to the gray listing page and then here you can choose the category and then display your place and then publish so let's create this page in the pages folder I will close all the tab in the pages folder we will create a new file called create listing okay I already create here let's uh have this okay this one is just like add a fce tab and then you will have this in the Styles we also create a files called create listing I also have this file created as well okay and then I already copy paste in the GitHub link below you will find and then just copy paste so go back to create listing page and then we will import The scss import. Flash Styles and then create listing. scss then we will import the naet pass okay why is not show the recommend let me check the file okay so I will change a little bit here I will have a cons here only and then at the end I will say export default NAA so we need to change the homepage it's not in the bracket okay come back here when we type na it will show okay it's not showing okay it's fine froma flash components and then NAA here we will delete this line and then we will have a na in the beginning okay go to the app.js we will import the create listing page import create listing page and then we will have a route for it so the route here will be create listing and of course here will be create listing so this is our application let's go to create listing nice so the N appear here okay lock in ins up so go back to create listing now we will have a H1 and then we will have all the steps so the first div have a class name equal to create listing inside this diff we will have a H1 publish yeah please and then after this we'll have all the form so from here at the end of the button it will be a form so this form have a class oh no CL name for this one and then we will have a div class name for this T will be create nting underscore step one and inside this de we will have a H2 here the text will be step one tell us about your place after H2 we will have a live here so it will be HR after this line we will have A3 here so A3 which K which just copy P will be faster after A3 we will have the D for fetching all the categories so this this have a class name category as list and inside this GI we will fetch the categories so we need to import the category from data file so import categories not from the component from the data import categories from this mes so now we will French categories rest. map item Index this in this D the class name is uh category okay and then we also have a key remember when we whenever we P we need to have a key so key equal to impex and then we will have a diff below this this da we have the class name equal to category underscore icon and then inside will be the category do icon so category but icon this one is not capital okay category here oh no it should be item item not icon yeah because here we call item we don't call category so after the icon will be the label so we will have the bag and then item do label so we already fatch now we go back to 82 so this is the first eight no yeah this the the first part right so the second will be A3 what type of place will gu will has after this A3 will be a diff the class name will be four and then another D no the class name will be Tye L sorry type list and then inside this this we will fetch all the type so in the data.js file we we have a categories here we also have a type array so types array we have a three types so here are three types so we will F three types so we need to import the types and then we will fetch here types question not map item index and then this the class name will be typed and then inside the diff will be another div so inside this div will be the first div on the left side and the second div on the second on the right side so this class name will be type underscore text and inside we will have this uh H4 and then B teag so H4 is the an entire place this will be the name of the type so I will say item do name and then the B Tex will be item do description okay so here this is the descript description this the description of the type so what next okay now we will have the address so A3 until here we will have another A3 call where is your place located then we have a div with the class name name equal to four four because it's the four here but half we will have the half here we have a two columns and then four we only have one column so this four will have a div this diff call class name location in this location this we have a b is street address and thisp tag will be an input the typ will be text the placeholder will be street address and the name equal to street address as well this one we will use to add the value and it's required okay under the D4 we will have a div half for two columns so the D4 up to here we will have a diff with the class name equal to half so inside this list will be okay the class name will be location as well it will be the same Bes side the different is just the length the width of the input so the B will be apartment so appable I will copy and piece here after this will be an engage have a type text same thing placeholder equal to same with the title but this one it will be a short term so it will be AP only okay and then the name will be app switch F three so we will have another input for the city I will copy and paste for fast so City the placeholder is City and the name is city oh this required too required and then this one also required we will have the same thing for province and Country so the whole half D here will copy and paste we just need to change to Province and Country so Province placeholder this province at the name will be province this one is country text placeholder is country name is country no Capital C and require okay okay now it's good oh okay I think we forget to put the icon here so let's go to the type so this the type okay so after the this GI we have another GI so this day we have a type class name equal to type under score icon and then we will have the Ty icon here ion do icon can see ah now it's appear the icon it's good okay the street the address now we go back to the completed application we will have the yes bathroom best part room number here to set up so after this half now after A3 where is A3 here okay so after this is we will have another A3 call say some basic about your pleas and then after it three will be a diff the class name will be basic and inside the div will be another div with the class name equal to basic but no s at the end inside this D we will have a big tag called yes and then we will have a div with a class name equal to basic underscore cou inside this D we want have the icon and the number in between so we need to import the icon so right here we will import the remove Circle outline remove remove Circle outline from icon material and add Circle outline okay so now go back we will have remove Circle icon first so inside this uh icon we will have a styling so s x equal to bracket bracket we have a f size is 25 pixel and then cursor cursor poter cursor poter and then hover and over we need to have a here will be color coling variable okay now we need to watch the variables as well not ping red okay let's go to the top and then import vares from the F flash Styles class variables. scss okay go to the bottom now we have the style here this are yes it's good so exclude where is it oh it's a variable okay so we have the icon here now we will have the basic C the number so it will be after the icon will be a and then uh it can just do uh the the number random number first okay and then we will adjust later and I will put one then after this I will have the add icon okay good and then we will multiply so so many times like this we'll have a four times right so we will just need to copy pce three times more so the second will be bedroom okay the first is yes the second is bedrooms the Tod one will be B and the last one will be part room we will add the function to make the handle change later okay now we have for uh count basic here and then we will continue to step two so under the whole step one let me find the step one okay this is the 824 step one okay so after this div yeah it will be a little bit hard to find out where uh the end of the part right we will have a diff the class name will be create missing underscore step two and inside this div will be A2 and after A2 will be align HR so this is a line and after the line we will have A3 after A3 we will F we will map all the facilities here so in the data. yes we have the facilities array here below the types array so we will import this okay I already imported here facilities so we will have a leave for facilities the class name will be amenities and inside this amenities we will F facilities facil question task map add some index and inside this will be a diff and the class name is facility inside this D we will have another diff and the class name is facility uncore icon and here will be Item B itcon so as I say always have a key here so key equal to index for the type as well so look at the type this is the um the categories and this is the type see and forget the key so in next yes after the icon will be the name so we have a b and item. name so let's see this is um our application the r Nest nice okay so let's see after all the facilities then what's next okay now we will add the photo after the A3 other facilities we will have the A3 add some photos of your place and then after that we will have a upload photo here I can show you we can choose multiple photo okay well enlar and then I even can WR and drop to change the uh position of the photo I can upload another one and we can also delete it as well so let's do it so if I delete everything this BL upload your uh your upload photo from your device will be bigger than after you already upload photo it will be smaller and equal size to the photo so in order to do that we need to install a package called drop and rack I will have another terminal and then CD client I will install the react beautiful DND package that we can do drag and drop there so nbm install react Das beautiful that Das D and D after install we can go to backage Chason to check okay the react beautiful dndd is already installed now we will import the drag and drop context dropable and rag a so right here import R drop contact rag a and drop a remember we have a double P here and double G here from the package react beautiful DND after we uh import it we go back to uh the photo and then now we will start in the beginning it will be R drop context we just uh import it and then inside will be on gra in it will be the function to handle gra folder we will add later inside the r gra Contex will be dropable dropable and then inside the dropable we will have a dropable ad it will be photos and then the direction will be horizontal I will enlar our window and inside the dropable will be the provided and then we have a diff inside this diff the class name will be photos and then we also have a spread operator dot dot dot provided do drop a br and then we will have a reference equal to provided dot in the ra so inside this de we will fetch our photos in order to map our photos we need to create the photo state so right here I will have a command so we will have upload drag and drop as well as remove move photos so first of all we will have a use stage for the photos so comes photos set photos equal to usage and empty array in the beginning after that we will have a function for upload photo so const handle upload photos equal to event and then then con new photos equal to event. target. files and then we will set the photos have a previous photo us and then will be that do previous photos and do do dot new photos so this one is a spread operator it will keep all the previous photo uh when we set the photo the it will continue to add more new photos here we also have a spread operator here because we can upload multiple photos at the same time so don't forget to have a previous photo and then spread the previous photos as well so we will have another function for handle R and drop handle R photo equal to result and then if not result that's destination then return nothing comes items equal to array not from photos and then con reorder item equal to item do splice result do Source do index comma one in item do splice result not destination not index comma zero comma order re order item so we will have set photos equal to items so this one is items have S at the end and this one as well items okay so uh this one is like we change the order of the photo and then after that we will set the photos of all the items with the New Order so after we handle R photo we will have a function for remove Photo so handle remove Photo equal to index to remove so we will have the index remember we have a key equal to index so we will find the index to remove and then we will filter so coms oh no we will set photos first we need the previous photo and then we will filter all the the previous photo underscore comma index and then index not index to remove okay so in the previous photo we will filter all the photos that the index and not the index to remove so the photo have a index to remove will disappear now we will go back to our photos here and then we will map the photos so uh the r r context the on R end we already have a function handle R photo we will add here and then uh for the U inside the diff of a photos we will have photos that map and then we will map the photo and the index but we have a two cases let me show you so if there is no photo we only have the label for the input but if we have the photo for example we have this two photo we will have two photos with the uh label for the upload input so I will show you the first case first it's like there is no window so I will delete this okay in the first case is if photo less than ifo do do Lan right less than one then we will only have the label for the input so the first is the input this input the type uh will be file and then um we have the style because we don't want to show it right so the style will be display is none and then we have accept we will accept accept all the uh file like uh and everything so it will be start so image FL and then start for the on change we will have a function handle upload photos and then it can be multiple multiple photos Okay after this we will have the label for this input so label atml 4 okay we need to have the ID for the input right so the ID equal to image and then this ID need to be matched with the label okay and then inside the label what do we have inside the label we will have this uh photo uh this is the icon and then the text upload from your device so inside the label we will have a diff the class name is icon and then we will have the icon IO IO uh s images we need to import this icon so go to the top and then import Io Io s images from react icon oh okay in the code IR react I FL IO okay so EO IO iOS images that is the name of the icon after the icon we will have a b tag upload from your device so the label will have a class name is alone because you will see like if we have a photos the label will have equal size but if I delete the photo the label will be bigger so that's why I have a class name alone here for this case where we don't have any photo now we will go to another case where we have a photos so photos do length greater than one and then we will map the photo inside so we have a photos do map and then we will have each photo with index so return r a inside this R we will have the key equal to index and then r a idid equal to to index not to string and then this one is not in the um code but it will be like this okay so rankable ID will be index not two string and then index equal to index okay so inside the r we will have another provider who will have a div and then inside this di we will have a class name equal to photo no s and then the reference equal to provided do in okay and then we will also have dot provided do R A GRS and then dot provided dot direct handle drops so direct a drops and direct handle drops I know this one is like kind of U complicated and I didn't like code by myself I go to ctivity and have this so just um uh code with me like exactly like this it will be a little bit complicated so inside this dat we will have an image in this image The Source will be we need to create the URL so url. create a check URL and then photo because the photo is the file but to show we need to create the URL to show and um yeah and then the ant here is a place okay so um let me upload one photo so we also have the icon delete here to remove the um photo so I will have the button this button type equal to button and then on click equal to handle remove Photo inside this button I will have the icon B CH B CH reported from react icon uh flash di so I just already imported here it's imported automatically okay after uh the button I think we are all good okay right here it should like greater than and equal not only just R done and then the handle remove Photo we need to add the index so this index will be the index to remove and after the photos we will have the uh input right inputs to upload a new photo so after this after the um math photo here I will have the input the type equal to file I think Isel will have the same thing here I just need to copy and paste it will be same the different it just the style it will be smaller in equal size to the uh image so the class name here is not alone but the class name will change to together everything else will be S now let's go to our application and then oh wow nice so try to upload a photo okay I will go to dream next client public assets so just I just try to upload to okay nice and now I will upload another one nice I want to delete this one nice so it's all working after upload photo let me go to the completed uh project so this is the completed project after that we will have the description title highlight and then the price okay now let's do it I will make it smaller Inside by side so after the drop context we will have the A3 A3 will equal to what make your place objective and exciting after the A3 we will have uh the div have a class name is description and then the bch is the title and after the title we will have the input type equal to text placeholder equal to title and then the name is title and then we also have the uh require okay so I will uh copy and piece so this one is a description but in description we don't have a input but we have a text area text area and then type text placeholder will be description the name is a description and require as well highlight will be input placeholder is highlight name highlight require this one is highlight details this one is a text area text area and then placeholder is highlight details name is highlight details highlight description highlight description and then require okay so after that will be the price so after the text area we will have a bag is now set your price okay first we will have a span with the dollar size then we will have the input for the price input the type will be number in the placeholder you can add any random uh number to me it can be 100 or even you can put zero if you want and then name equal to price and the class name is price and require okay so now let's go to our application okay so it's good we can now have a number here and then increase decrease if we don't have any number it will have a 100 starting so now we will go to to uh in the beginning and add all the function so I will go to the top so right here we will handle select the category so right here I will say const category we only choose one category only for each lising category youal to use St have the empty string and then same thing for the type we only choose one type only for each listing const type set type equal to you state and empty string for the amenities here the facilities we can choose uh multiple facilities that's why it will be an array so com a main nities set a main nities equal to us stage and ENT array okay now we will go to category here and do the on change on click so this is the category and then the div is the class name category and then key here we will have on click function so when we click it will set the category is item. label so when we click here the category will be beit front and the is is a string but we want to um have like one click here right it should be like show the red so we know which one we will choose so the class name here I will change so first we will have a class name category and then we will have the function so if category the category we uh we choose because when we click right it will set the category to item. label so if that category equal to the item. label question mark it will have another class name cost selected otherwise it just the empty string so which one means like for example I click to bit front and then the category is compiling sorry that's why okay now now I click to bit front when I click the the category become bit front and at that time the class name for this one will be category and selected both but but are the category they don't have the um uh they don't have this one category equal to item. label that's why they don't have a selected class name we will do the same thing for the type so the type here key index and then um we will have onclick and then we will set the type to to the item do name okay so I will set the type to the item do name and then the class name I will do the same thing so inside this we will have a type equal to item. name question mark then we will have a selected class name otherwise it just empty string so for example I choose this one so this one will have a one more class name is selected that's why it's different okay so for the street address now we will have the um handle change for this so go to the top below this okay I will have the location so this one is um the function for location section so I will have a cons form location and then set form location equal to use it will be a property in this property we will have a stet address empty string and then app switch empty string and city province country city province country okay so I will enlarge this so remember then we have the name for each input right so you need to make sure the name of each input match with this because this is the name this the key pair key value pair so this the key is the name and this is the value so we will have the handle change function com handle change location equal to event and then cons we will take the name and the value from the input e Target and then we will set the form location dot dot dot form location remember we need to have the spread operator to keep the data and the uh key value here so the key is name in the value so we will Lo to all the name and value in uh the input and then we will set to the form location so go to the location form okay this is the location form and then now we will add the value right we have a name here already so the value will equal to form location dot street address nice the location here the value after the name equal to form location do absite and same with the CD so value equal to form location about city province value form location. Province and then country value form location do country and then now we will have the onchange so onchange will have a function handle gen location and it will be same for all the input okay so now I will try to check uh this okay this is good okay this is good I will try to check I will consult that lock the form location okay so this one I will console that law from location okay let's see inspect go to console okay so will chy one two three down M Street okay they have one two three one street app is uh Swit 13 CD AB C Province X Y yet country 123 okay so here we have a street address ABS with city province country so it's all working nice so now I would delete the consultant law formulator and then I will continue with the uh count so we have a count here right we need to increase and decrease the number let's do it so we have basic this is the basic count okay section so we will have all the use stes for guest bathroom Bed and bathroom so com guest count and then set guest count equal to usage and then one in the beginning so it need to be one okay it shouldn't be zero I will duplicate three times so this one will be bathroom and set bathroom set bathroom the next one will be bad pad and then this one will be bad the last one is a part room part room and set part room okay yes bedroom bed bathroom simp here set yes count set bedroom count set bed count and then set bathroom cou now we will go to the um basic the basic okay here and then we will have the um function so we will have the on click here on click and the function will be will will okay we have a uh because this one is removed right so we need to make sure the guas count greater than one and and this is the condition you need to pay attention because it's a remove it cannot be zero and then we remove to minus and then we will set the yes count is the yes count minus one M oh sorry this one equal I will copy this and then do for the um add but this one we will no need the condition we just need to get yes and then we one okay for the I will just copy and paste and then change the text for the remove okay the on click is not yet count but uh this is the um this is what this for the PS okay then P count and then set P count and then this one is a p count I will do the same thing for the PA room so this is the PA room count and set PA room count this one is the PA room count minus one same okay uh so we have only for the PA room for the bed for the bathroom oh this one for the guest Al so I do the mistake here this is the bedroom not the guest count the guest count is for the beginning okay I will copy and paste here again this is the guest count this is the bathroom bedroom count set bedroom count and then bedroom count okay to make sure it's match okay [Music] um this one bed count correct and this one bathroom count correct so now I will do the remove oh sorry I will do the add more so this one I will cont C first for the guest I will have set yes Cal yes Cal uh add one more okay good for the guest for the bedroom I will change this to set uh bedroom count and then this one is bedroom count okay it's match this is the pad so make sure you need to change the text okay so on click here will be set B count and then this is bad count okay and this one is the part room count so this one is a set PA room count and then this is the PA room count okay now go to the our application and then check increase okay it's not working okay let's go back what's wrong okay I know because I put one here student it must be guest count so in the beginning I just put the random number but now we have a two chain because we already uh have a use stage right so we will have a guest count here and then the bedroom it cannot be one it need to be bed couch or bedroom couch and then this one is the bed so it will be bed couch account and then this one is a part room so this will be part room count nice so go back to our application and try again no still not okay nice nice if it's uh already one we decrease it not allow us to decrease it because we need to be greater than one it shouldn't be zero here okay more increase decrease okay our working nice okay for the um facilities we can select multiple so we need to create the function for this amenities so go to um where is our amenities so this one is our amenities right I will cut and then I will at below the basic count I will have a Rec command here is first amenity section and then P okay so now we will have a const handle select amenities we have facility here and then the function is if amenities that includes the facilities then we will filter then we set the amenities with the previous amenities we will filter the previous amenities with the the option is not facilities okay then um else we will set amenities previous and then TS oh no TS previous and facility no facility facility okay oh we don't have the arrow here because it's a if else what's wrong okay have extra here okay now it will be extra here oh oh good okay I will explain you so for for examp okay let me add the function to um the on click and then you will see so go to the facilities okay this is the facilities and then here we will have a on click on click so we will have a function with the um handle select a man is and then the class name we will do the same thing for the class name remember if select we will have one more class name extra is selected so we will have here if amenities not include the item here if amenity include the item and then question mark we will have one more class name is selected otherwise it will be empty string okay right here I forget like we always need to have the handle select amenities and then we need to put the item right so they know which item we select okay go to our application so for example I choose the batter so so it will have the selected class name sty here and then if I click again it will disappear that's why like we have this function so in the beginning if we if the amenity already includes the item oh sorry we go to the um the function so in the beginning if the amenities already include the facilities then we will remove that facilities by filter the option is not facilities but if it's not selected then we will add more so this one is not selected like amenities is not uh including the um uh included in the amenities then we will add like this it just like if already selected then we will remove this one if not selected then we will add more so this one is not selected then I click it will be add and then if I click again it will be disappear I can click multiple uh amenities right and then I deselect this I deselect this this disappear the um the class name selected I can console that log for you to uh easy to see so I will conso that law the um amenities so go to our website go to console here it will be in Array washer and everything now I don't want hanger anymore so in the beginning is have a hanger now I deselect I deselect now it just only F array and no more hangle this is how it works okay now we will continue we already um have other functions for the photo now we continue with the description form so I will delete this we no longer need to cons the log so under the photo section here we will have the description section description so we have a con do the same thing like form location but this form will be form description and then set from this cryption here is a US state with a property so we have a title with the mtion string and the description anty string make sure this one match with the name of each input it need to be same highlight empty string and then highlight description empty string and then price it can be um zero yeah this a number so we will have a const he handle change description equal to event we will take the name and the value from the input equal to e. Target and then set for okay and then set no set form description dot dot dot form description is uh to keep the data I explained so many time already so name and value okay so we will have the handle chain description in the input okay this one in the input we will have a unchange equal to handle chain description and it will be same for all the input contr C and I just need to copy paste we need to add a value too before onchain we need to add a value right because we only have a name only so the value equal to form description. title the value here is from description dot description and then this one is highlight this one is highlights description and this one here will be price so now I will cons that lot the form description and let's see so console. law form description go to our application and then I will try to type something okay it's appear here title oh no APC y a Highline j k y and then everything then is 200 okay so we have a title description highlight highlight description and price so now we already finished all the front end for the create listing page it's very good and very beautiful and it's uh mobile responsive as well so now we will go to the server folder to create the listing model as well as the listing API let's go to uh the server folder I will close the client folder here and then in the models folder we'll have another new file called listing do JS I will close this tab so we will do the same thing like user.js we will cons equal to require mongus and then con listing schema equal to new mongus do schema and then inside will be an object the first one will be uh user ID actually is a yeah it's a owner ID so the um the one who creates the listing so in this user ID we will have a type string and then require is true after the user ID we will have um a first name actually uh we don't need the first name uh but we need the category the category will be a string type equal to string and require is true after the category here I miss one bracket yes so after the category we will have the type type E string and require is true I will copy paste after the type we will have a striet address street address make sure this one is same with the name of the input street address will type string and require to after street address will be ABS with apartment s apartment sweet and then after that will be City and Province and Country this is the Farm location remember so category type street from street address to country is in form location and then we will have the basic count in the basic count we have a guest count type is the number and then require is true I will copy paste so guess count and then we will have the uh bedroom count bedroom count after that we have B count after B count is a part room count and then after pat C we will have all the amenities amenities the type will be an array and then we will have a default is the empty array but uh each amenity we will have the icon in the label right in the name so it will be an object yeah it's not necessary after the amenities we will have a listing photos parts so listing photo part and then we will have type E string so we will store photo URLs in the array after the photo we will have uh comma here we will have title type E string and require E I will copy paste three times this is the description for the place the title after the title will be description and then the highlight and highlight description after the description will be the price the price we have a type is number and require true we also have a time time stamp to to know uh when this uh listing created time St true and then count listing equal to mongus do model the name is listing the name of the um when we save in the Mongol DB right so the name will be listing and then we will use the listing schema we have a Define above and then modu do export equal to listing so this is all the listing schema now we will go to the rout and then create a new file called listing. JS so we will have the listing API here first we will have a cons router equal to require Express dot router then cons motor for file upload equal to require motor then con use then con listing right listing listing we need to import from the models so count listing equal to require do flash uh models and then listing now we will have the configuration for motor for the file uploads it's same like we have a configuration for um profile image so configuration motor for f upload cons storage equal to motor not this storage and then destination is function require file CP CB no comma we will start in the public upload folder remember here I will show you in art we have the same here actually I want to just copy and paste it will be same yeah so we have the uh we will stall the uploaded files in the public flash uploads directory then we will have a file name and then use the original file name and cons up blow equal to motor storage same same with this so now we will have a create listing API set up create n thing router. host flash create and then upload do array here we just upload single but the photos for the CL for the listing will will be an array so upload array because it's a multiple files and will be listing photos and then after this will be an a sync function for request and response so we will do the same thing cat and catch in ch we will take the information from the form take the information from the form it will be a lot okay so can't don't miss anything because if you miss uh you it will not like store the listing correctly so first we will have user ID is the ID of the user who creates the listing then we will have a category then we will have a type and then SCP address and then app apartment suet city province country and then go to the basic count we have a guest count bathroom bedroom cou make sure you type everything correctly bed couch and paath room cou then aain nities amenties then title then this description highlight highlight description and price equal to request. body is a very long list right user ID category if you want to make sure just go to listing here or go to the form go to this form okay just make sure we don't miss anything so user ID category let me check one more time user ID category type Street address apartment with city province country yes count bedroom count bed count bathroom count amenities title description highlight highlight description and price so we have enough then con user we need to find the user who creates this uh listing right so we need to import the user model as well con user equal to require and then from the user mode uh schema user schema so we will find the user like await user dot f by ID because we have the user ID here from the front end and then we will find the user through the user ID okay now we will have a listing photos so comes listing photos equal to require do files and then if not listing photo we will return a message return response. status 400. send no file uploaded now we will get the photo URLs after we check in so cons listing photo Parts listing photos is a file but we store the P we don't store the file in the mongod DP equal to listing photo do map we will map all the files and then we will take the file P not P right so we will map in the listing photos we will map all the file and each file we will take the part of that file now we will create the new listing so const new listing equal to new listing model this is a schema listing schema right so we'll create uh the new listing through the based on the listing schema first is a use ID then we will have the first name equal to user. first name because we will show um here uh for example I go to this listing right so I will show the host so I need the first name okay in first name user. first name and the category the category and then the type I can copy it everything here okay so I just copy and paste here I have another idea here we will not you have the user ID but we will have the uh creator so creator for the listing then I will delete this and I will have the type equal to schema typ object. object ID and we reference the user so the Creator we will populate all the users here all the information of the user so in the listing we have the user information inside and we have everything when we at the user that's why we need the reference user here go back to uh listing. JS uh so if you I don't think we need to find the user here I will uh delete this and then I will delete the user ID and I will replace with the Creator so need to be match right Creator okay so the listing will have a Creator not the user ID right right here Creator and then delete the first name this one is a listing photo pass so here even I uh copy but I miss one thing you need to add a listing photo part okay I will add um after the amenities okay so our listing uh is uh good now I will save the listing so await new listing not save and then for the uh response I will have a respond. status to 100 Jason and then I will return the new listing after I save it to handle the error I will return the uh message so respond. status 409 not Jason message is fail to create listing the error is the error. message and then we can conso that lock the error console. lock error after we create the listing we will get the listing right we will so right here in the home page we have all the listing here so we need to have the API to fetch all the listing can go back to so this part will be yet listings router. post H not yet because we get so we um not like passing data we get the data and then a s [Music] function we will have a try and catch in chy we will have the um um listing right but one thing here we can like filter the listing belong to the category so I want to do it um I will have the query here so below like above the CH I will have a cons qu Kate equal to request. query and Kory okay try let listing just uh call the listing first and then if we have a category then we will have the listing equal to await listing do find category calling qu Q category so we will our this thing s here because it's a multiple listings so listing here we will go to the listing uh schema to find the category equal to the Q category we take from the query and then right here we will populate the Creator we populate the Creator so all the information of the Creator uh will like uh inside like all this information will be inside the Creator here that's why we use reference user schema and then for this we can public and else is mean like we don't have the category in the query we will fetch all the listings so listing equal to await listing dot f and then nothing just find everything okay now we after TR we will U now we will send the message and then we will return all the listings status 200 do Json and then we will return all the listings in the catch we will have a respond I will just I can copy paste here and then I will change the message so I will change the message is uh faile to fetch the listing okay this will be 404 now we will go to the index.js to import the listing routes so under out routes we will have a listing routes equal to require l. flas no flas have a route and then listing. JS so after that we will have a app. use slash uh listing yeah we cannot have like um properties anything you want properties and then we will have listing route okay now go to the C folder the source folder the pages and the create listing we will add the button uh to publish the listing so after the form after this diff um no uh after this live because the button need to be inside the form so I will add the button the class name is submit uncore button and type equal to submit you will have the text here is create your listing now we will go to uh the function section and then we will have I will delete the cons law now we will create the handle submit function first I need to have the user ID so uh I will use the use selector to take this the ID from the user so if is out the application I will lock in uh remember we have an any black and then password is then black login okay it's have a faile to fetch here let's go back to our application and let's see the error so they say uh schema is not defined so the schema here is not Define because I forget to have Mongol in the front so schema belong to Mongol right so have a star schema okay then what else so after this is another Scrat oh sorry only one o okay then um okay they say router. use is not require it requires a middle wear okay same error like before I forget to put the mod. export equal to router okay now it's uh connected to the Mong mongodb I will go to our application and then log in again okay okay then need black and then then need black lock in okay good so now we have all the chip list here I will close it I will open the Redux St tools okay the user and the token is here so the user this is the ID I want to take so I will use selector to take this ID from the store Redux okay so go to to uh just close everything here I will have const create a ID not in the bracket just Creator ID equal to use selector and then State I will have a state. user doore ID remember to um import the user leor when I type the use selector is automatically imported but if it's not automatically imported for you you need to import manually so y State user notore ID I can show you in the Redux so this is the state the whole here is a state and then we go to the user then we go to the underscore ID okay now we will have a cons cons hey handle post equal to a sync function e it not prevent default this is the error okay so we have a CH and catch in case we will create a new form data object so create a new form data object because we um um we pass the file that's why we need to create the form data to handle file upload so we have a cons form data it can be um uh listing listing uh form data okay listing form data equal to new form data this is just only listing form new format and now we will uptain everything inside the new format here so I will have a form listing form listing form do append and then I will append the Creator ID here um okay let's go to the listing right out so I will uptain the Creator right I will uptain the Creator and the value is the creator ID you got that okay I will have so many of hand so the second I app hand is a category type and everything so the next one is category and then I will the value I appear here is category as well this category is here in the you us here and then same for type I will add the value type here in the state so we have US state type and set type right and then the next is a street address so append the street address and then this is the value is from form location dot street address so this is the form location so the value is form location. street address and then we will appear the apartment Suite I will copy paste apartment switch so this one will be same form location do apartment Swit continue I will append the CD the value is form location. City next one is province location not Province next one is country location from location. country the next one is yes count the value is yes count as [Music] well guest couch here is from this state here or you stay here so next one is the bedroom couch bedroom couch next one is a bed cou sorry I will type that count and this one is a count then pum count P count amenities and then same amenities okay for the amenities here I just remember like uh if you go to the data.js in the data.js you will see each facility will have a name and icon so each facility is an object not the uh string but I want to um s only the name only I don't want to S the whole object of the facilities so I need to go to the listing models to change a little bit so in the listing schema we will go to amenity here default this one is not an object I don't want to store an object on mongod DP I will store the empty string uh the an array but with all the empty string sorry with all the string not an object so go here I will not um start the whole facility uh where is the facility okay here facilities I don't want to start the whole thing I just want to store the name only so item do name okay so um if amenities include the item not name okay only store the name okay let's check um is is working go to become a host revent for is not Define form is not Define fine okay let's go back to our coding I will okay here is do and then this form is a form data have a capital D okay so let's try the amenity yeah it's working and I want to consol that lock the amenity I will go to inspect and then console okay good it just only store the the name not store the whole name in icon okay right go back to our application and then amenities will be amenities then we will have uh listing photo we will do later but we need to have a title here so title equal to form description do title and then next one will be description this one will be highlight and then the last one will be highlight description I will appear in the price as well so price equal to form description. price now I will append the photo appin each selected photos to the form data object so I will have a photos dot for each and then each photo we will appear to the um description form what is it called listing form okay listing form do Ain and then have a name is listing photos then here will be photo after I append all the photo into listing photos here you can see we have a listing photo pass right and then this listing photo part we take from listing photo so here we take the information from the form we take the uh the file like listing photo files and then we will uh take the part later so here we take the file first and then when we fetch the API it will take the part of the photo now I will send a post request send a post request to server we have a cons response equal to await Fetch and the API is HTTP calling flash flash Lo host calling 30001 and then FL let's see in the index.js in server folder we have the AI here is a property so it need to be property and then after the property we have a listing routes so we go to the listing uh API where we create we have the uh link is Flash create so I will copy this and then I will paste here so the API will be uh Local Host 3001 properties create the method is post and the body is listing form we already app all the information into the listing form now we will send the uh uh message it will have uh the respond okay so if response. okay then we will navigate to the homepage okay navigate we need to use navigate right so I just delete let's go to the top and then import use navigate from react rout to them and then uh here I will delete the consult that log and then I have a con navigate equal to use navigate okay now I can use navigate navigate to lead us to the home page after we uh submit the form and then the error I will conso that law publish listing fail and then have the error message okay so this is the handle post and now we will have this function to the form so with the form is here we will have on submit if equal to handle post now we will try to publish one listing okay so go to our application I will close this I will choose the beach front and the an entire place and the street address can be 1 2 three down street uh Swit 13 just random City Toronto Province Ontario Country Canada guess maybe five four bedroom two B two three bathroom one okay maybe two and then I will choose the um facilities I will deselect this and I choose another one you can choose as many as you want okay good then I will upload some photos in the GitHub link below in the assets folder will be another folder we have a listing one I uh already provide you all the photos if you want to uh use it or you can use all the photo those anything you want I will open it okay nice and then the title okay then the description okay and then highlight I just copy paste some random text online I find it and then highlights details to be a paragraph okay good now I will set the price to um 600 no it's too cheap for example 800 because it's a whole house and then create your listing oh nice it will navigate us to the homepage as uh we already set up and then now I will go to um our mongod DB to check the listing that okay so this is the dream Nest uh application and then now we have a listings here I will go inside the listings and then voila here is our uh listing we just created have all the information nice so the create listing page um is already done now we will go to fetching the listing I will show you in the completed project here you will see see we will fetch um all the listing and then we will have all the categories here so now let's do it first I will create an um component a new file called loader do s uh jxx and then I fce okay so um here I want have a class name equal to loader and then another div inside because you know what when we fetching the data right it can take time and if we don't have the loader it can give us the error class name equal to loader Dash inner okay that's it and then now we will create a file in the Styles folder call loader. scss and uh in the GitHub link below just copy and paste the style link already Reed now I will import the CSS file flash style flash loader. CSS okay good now I will close a tab I will go to the Redux uh folder and then have a state because I want to have the set listings I want to have a listings in the state as well so right here I will add one more thing say set listings equal to State action and then State start listing equal to action do payload do listing and then I will export the set listing here okay so uh in the component we will create another file called listings have SSN okay uh jxx and then AFC so this component we will add to the homepage so in the homepage we will import the listing component and then we will add below the categories okay I will close the homepage now also close the states okay so now I will show you a side by side so easy to see this is the completed [Music] project so this is the whole thing here is the listing component first we will have the uh all the categories so this D we have a class name is category Dash list and then inside this uh diff we will map our the category but we need to import the category from data import the categories from data file so that. FL data.js now here we will have a categories question mark do map we will map the each category and then the index so we will have a div with this div the class name equal to uh Kory this is the dynamic uh string because we will do the selected category class name later so we have a key equal to index and then inside this div we will have a like the icon and the text right so the icon is category do icon and the class name is catore icon after this dat will be the uh text so B teex category. label okay let's uh create the file in the style for listing component so new file and I have a listings scss and then copy paste like always okay after I uh copy paste I will go to Lis thingss component and then import the style link bl. flash Styles flash listings scss okay now we will check our application okay nothing here okay still nothing I will go back to the code okay here it should not be the bracket I do just a mistake so this okay let's check again okay now is a list all the categories in the completed project we will have all the listing here right so we need to have the uh listing card so let's um down and then in the component have a new file card listing car do sjs and then R FC we will import the listing C okay uh so now we will um map the listing we already have one listing just created so let's try to uh fet it I will import the loader so when we fetch it can take time and then if we don't have a loader it will get us uh an error no so we have a loader from flash loader and then I will also have the um uh dispatch for the I will dispatch the set listing remember I just create the set listing in the state and I will dispatch after I fetch it I will dispatch the listing to set listings here so first we want have a coms dispatch equal to use dispatch we will import the use dispatch from the agu import use dispatch from react reduct now we will have a state for loading const loading and set loading equal to use State we will be true in the beginning like it's loading in the beginning and we also have a con selected Kory set selected category youal to use State and empty string now we will have a cons listing equal to use selector state and then State not listing so now I will get the uh fit listing so cons get fit listing will be a Sy function and then try catch in ch we will have a const response equal to a weit Fetch and our API will be um HTTP calling flat flash loc coost 30001 okay and then uh let me go to the index JS in the server folder and then also the listing so in the index we have a property first and then we have a listing routes later so after this will be properties and then in the listing API when we fetch where we get the listing it just nothing just uh one FL so we don't have anything after but we have two cases remember we have a qu category here so before we fetch this K API we need to uh check so if selected category not uh not um all so in the beginning the selected category always is all let me show you always this all because we will fetch sorry because we didn't finish yet but yes we you will see here the in the completed project we have all in the beginning always and then if we choose other category we will choose later then we come back to all so in the beginning will be category will be all and then if the selected not all so we will get what we will get the qu category so we will get the request query and then how we get the request query here the API will be one more question mark is a query right and then Kate G equal to selected this need to be dynamic string so inside will be selected category yeah so let me explain you one more thing so we have a quick category we take from the request query and then request query we take from the category that's why in the API here after the question mark is a query we need to type category because we have a query category and then after that will be the selected category we need to have a on click here so when we fetch the category here we will have a on click so it will have a function I set selected category equal to category. label okay so the category here will equal to category do label and then um so selected category not all okay and we will fat this question mark we need to have a question mark here then we will fet this API otherwise we will fetch the normal we will fetch only up to [Music] properties and the method is post okay I need to we need to have the property here and I will format the document easy to see so select the category not all we will fetch the uh query okay the query category here the query category the query category equal to qu category and quck category is selected category otherwise we just fetch all the listings method is post uh method is need to be get now we will const data equal to await response. Chason so in the listing we respond that Chason equal to listings right so the data here will be all the listings are fetched after we get all the listings are fetched we will dispatch to the Redux so we will dispatch the set listing from okay we need to have import the set listing from the Redux State file and then we will dispatch here listing calling data so we will dispatch all the data all the data equal to all the listing affet to the listings in the Redux and after that we will set the loading to Falls so it will not give us the error and the catch here will be console.log fetch listings fil and then error do message [Music] now we will use effect and then we have this uh function right we need to call this function in the use effect so get fit listings and then whenever we change the selected uh category the use effect will be do the second do the this any time time we select the different category the use effect will be Checker so now let's me conso that lock the listings so conso that lock listing okay and now we go to our application I will inspect right click inspect and then go to console it's nothing here I will reload one time okay they say fetch listing fil let's go back to our code let's check the get fit listing okay right here I forget the coding sorry okay now go back to our application and refresh okay so now it's fet here let's see the listing nice so we have the array with one listing here and then we have the Creator okay the Creator here is not populate let's go to our code again so this thing here okay so right here I forget to populate so I just forget to populate the Creator that's why okay we need to populate for uh when we have the category and then we don't have the category okay go back to our application and then refresh one more time okay so now we have the Creator see and then I will drop down the menu so it's populate here everything so Creator email first name last name password image part and then we also have other list with the empty array so it's working now uh we will go back to listing and then continue to uh have this atml for all the listings okay so we have loading question if loading we will have the loader okay if not you will map the listing listing okay so we need to have a diff first this div have a class name equal to listings and inside this D we will have a listing do map and then we will map each listing so each listing we will map the listing card so listing card okay go to our application and then let's see so I have a one listing card here now we will move to the listing C component and then have cing on that component we will go to our coding window and then go to the listing card right here I will have the uh this is the completed project so we will create this uh listing card I will have a side by side okay so in the Styles I will create a new file call listings. scss and then copy paste in the giup link below sorry we will have the file called listing card. scss okay and then copy paste in the G link below I already copy paste here then I will go to the listing card I will close this all tabs and then I will import flash styles. flash listing card CSS I promise I will have a video for uh styling s uh CSS and scss S uh yeah but it will be a separate um uh video just only for atml and uh CSS so in this listing card as you see we will have a big div with the class name equal to listing do Cass and then inside this div we will have another div for the image slider here we have this for image slider so the class name equal to slider container inside this diff we will have another diff with a class name youal to slider and inside this d uh we will map the listing photos P right so um uh we need to have the props from uh from the listing here where is the listing okay so listing here uh we will have all the props here and then we will uh have a drop and it will pass down to the listing card so uh let's do it inside here we will have the ID of the listing we will have a Creator and then we will have listing photo P we have a city province country category type price okay so in the listing card we have a listing ID equal to underscore ID then we have um Creator equal to creator then we have listing photo pass equal to listing photo pass c equal to city province equal to Province country equal to Country Kory category equal to category type equal to type and price equal to PR okay so I already uh uh prop all the props here go back to our listing card right here we will have all the DRS so I will just copy paste um I'll copy everything here and I will pass here but I need to change this to the listing ID so okay so we have a listing ID uh listing phoac city province type category type and price inside this uh class name slider I will will map all the listing photo pass rest. map I will map each photo and index and then I will have a div inside this div we will have a key equal to index and the class name is go to slide inside this we will have image and the source The Source uh we will have from the API right so it will be the dynamic uh string HTTP ping flash flash loal host calling 30001 and then we will uh have the photo not replace the public to the empty string so I will show you right here photo not replace it's because in the listings. jxx I forget to destructure this so we need to uh destructure okay so now come back to our application okay now it will show the uh image right the listing card here now we will continue and you go to photo and then we will have the index plus one because the first index will be zero after this image okay let me show you the completed project so this is the completed project we will have the arrow to back and forth so this is the image slider right so right here we will have a div inside this div we will have a class name called rious button and then inside this we will have the arrow Arrow like to okay we have a arrow back iOS s new it will automatically import here inside this St we want have an arrow so let's import the arrow icon so we have to import Arrow forward iOS and arrow make iOS s new from package at mvi Icon material and now we will have this uh first we have the back arrow and then we'll have the forward Arrow so the back arrow will be Arrow back iOS new inside this we will have a style and then the font size is 15 uh pixel 15 pixel so we also have the same thing for the next button so I just copy paste here and then I will change here to next but button for the class name and this Arrow will be Arrow forward iOS now we will do the function uh to go to the next line and go to the previous line okay right here above the return I will have a command slider for images we have count current index and Set current index equal to new state zero so in the beginning the first image will appear first that's why we have a the first uh state is zero and then the function conses go to next slide we will set the current index with the previous index and then previous index minus one plus listing phot part do link and then we will minus for listing photo part. BL okay uh sorry this formula is go to the previous slide not go to the next slide okay and then we have con go to next slide equal to this function and then we will set the current index we have the previous index and then we will take the prev index plus one and then take the remainder after we divide for the length of the whole photo listing part okay let me explain you here I have a six images and then this is the index of uh six images so for the previous button here go to the previous uh slide we have the previous index for example I'm in the first image so the index of the first image is zero I have zero minus one and then plus the length of the listing photo path is equal to six so 0 minus one + 6 = to 5 and then I will take five divide by the length so five divide six and then we take the remainder after we're dividing the remainder equal to five so if we are at the zero and we go to the previous slide it will go back to the last image and then for example I am at the four image and the index of the fourth image is three I have 3 - 1 + 6 = to 8 I take 8 divide by six and then the remainder will be two so from three we will go back to the uh to so from fourth image we will go back to the third image forther go to next slide for example I am at the last image right and the last image have a index five I take five + one yeah the previous index + one equal to six and then divide by the one the L so six divide by six and the remainder after dividing equal to zero so if we go to the next line after the last image it will go back to the first image for example I am at the third image and the index of the third image is two I take two + 1 equal to 3 I take three divide by the length divide by six so equal to zero and then the remainder after dividing will be three so from here we will go to the next uh image is three so we will have the function to the uh to the icon so here here I have um I have on click and then event so I will have a function go to our previous SL and then event same thing for the next button but this one we will be go to go to the next slide okay now we'll close it and then we'll go to our website here let's check okay now it's not go to the next slide because we didn't have the transform so right here in the diff I have a slider container and then inside this we have the slider we need to add the transform here so I have a style and then transform transform we will have trans l x x is a horizontal and then we will minus the current index current index multiply by 100 and then have a percent here so let's check check okay now it's working now we will have the information here okay after this diff after the slider container so this is the slider container and then after this we will have the information here we will have a A3 and then as you see this is the city The Province and the country so I will have city province and Country okay so after this it will be the category so I have a B Tech here with the category and then after this will be the type so it will be bag and then type after this will be the price so I will have a bag inside the bag it will be a span and the span will have a the dollar sign and then price after the spa we will have the text per night okay so right here we also have a a a hot icon to addit to the wish list right now I will not do it because like we need to create the uh wish list on the list of the user after we have the wi list of the user I will add this icon on the listing card now let's check our website okay nice so we have our the listing here the city The Province and Country the category the type the rice and per night okay so now we will go to the listing details when we click this listing card it will lead us to a page with all the details of this listing I will show you in the completed um project here for example I click to this listing card and then it will lead us to the uh listing details so in the listing Details page we will have this uh part is uh listing ID okay now we will start doing the uh atml and CSS first and then we will go to the server and have a API for listing details let's close these two Tab and then we will open uh the navigation in the pages create a new file called listing detail do jsx and then rce so when we have the um uh the page here we will go to the index.js to have the route for that page no sorry in the app.js I close it okay app.js so we need to have the route for this page right so let's import listing details here and then after this we will have another route this will call as say it will call properties so properties and then flash it will be listing ID here so I will have coling and then listing listing ID inside the element will be listing details so we already have the link the route for the page I will close it okay go to our application and then um but I need to have the um uh the listing ID right so let's create the atml first and then we will uh navigate this listing bar to the listing details so right here you can see we have the title so let's add the first diff have a class name is listing Dash details okay I will install I will create the CSS file too so in the page in the style create a new file called listing details. scss and then copy paste in the GitHub link below after I copy paste I will import the file inside the page so import do flash Styles and then listing details do SC CSS okay so inside this div we will have another div called have a class name equal to title and then inside this D we will have a H1 and I will the H1 will be the listing title in order to get all this information we need to create the API so let's create the API open the server folder so in the server folder and in the a listing routes folder in the listing. JS we will add another API to get the listing details so I will have a command here called listing details then we will have router. getet and then we have a flash calling listing ID this listing ID we will get from the parents remember right here in the route in the app.js we have the listing ID in the P so we will take this listing ID by use params go to the listing. JS and we continue so we will have a a syn function request response try and then catch in ch will will cons listing ID so listing ID will equal to request. params so we will take this ID in the one from the parents no sorry so listing ID here actually we will take from this one so this is you will take this ID by using parents and then comes listing you go to await listing do F by ID and then we will pass the listing ID here so let me show you I will go to Redux and then to write so in the listing here we have a one item and then you will see the underscore ID so each listing it will create the this ID and this ID is unique so that's why we have a function listing do 5 by ID after we find the listing we will return the listing so respond. status 2002. Json and then we will return the listing in the catch we will have a respond status 404 if we cannot find the listing that Jason and then the message is listing cannot file and the error is error. message so we already have the um the listing detail here I will cut this line and I will put at the bottom we already have the API so now go to the listing detail and then we will fetch the API so first I always have the loading and set loading remember when you fetch the data you should you must have this to avoid the error H set loading equal to use State and then uh true in the beginning after this I will have the listing ID cons I will get the listing ID from the params so Lis thing ID equal to use forams so use foram imported from react router D after I get the listing ID I will have a state for the listing so const listing set listing this is the listing we want to see the details equal to use State and then no in the beginning so I will have the function to fetch the API get listing details equal to assing and then try [Music] catch inside the try we will have a cons response equal to await I will enlarge it fetch the API will be HTP coling locco host coling 30001 flash so same property right and then the next one will be the listing ID here so the listing ID here is actually this one okay so this one need to be dynamic and then I will pass this listing ID to here [Music] okay the method is yet after this I will have a const data equal to a wait response not Chason so the data will be uh the listing because we return the list listing here so after I get the data is mean the listing we found I will assign it to the set listing here so I will have a set listing equal to data and then the error is console. L fetch listing detail f and error do [Music] message after that we will have the use effect to check the to um Che the function so use effect and then we will have the function yet listing detail and then here will be the empt array so it will fetch one time only when we click to the listing card it will fetch one time only we need to okay they already um import automatically the use effect now we already have the listing we will pass the data here so the H1 will be listing do title now I will put this side by side and then we will have the uh H icon and save here so it will be a div here but as I say I will uh have this later when we have the wisness of the user we will come back here and then add the favorite button so we move to fetching the uh listing photo right listing photo part so I will have after the div of a title I will have another div and this div have a class name is photos inside this T we will fetch the listing photo pass so listing dot listing photo PS I will show you in the Redux right here this is our listing so the first item we have a Creator have all the information of the user who create the listing because we populate and then we have the uh listing for photo PA here is an array inside you have all the parts of the um uh photos so we'll will Map listing photo parts so listing. listing photo Parts question mark. map and we will map each photo each item we will map it as an image this image have the source so in this string we will have HTTP calling Local Host calling 30001 and then Flash and doll sign bracket item because I call here item if you call here photo you will add this like Photo so item do replace and then do the same thing we will replace the public to the empty string so after this image we will have um oh I will put the an here and it will be listing photos so after the image we will have the [Music] A2 so this is the D for the photos right I will have A2 here in A2 it will be listing listing. type here the entire place is uh the type and then in in Barry is uh listing do City comma and then listing dot Province comma and then listing Dot country okay so this is the A2 after this we will have all the um basic counts so enter will be a bag inside is listing dot gas count gas count right in the Redux you can see yes count bedroom count here so listing. yes count and then we will need to have the guest here and I will put listing dot bedroom count bedroom count and then bedroom after that will be B count so listing do that count after we will be bad after that will be Pa room couch badroom okay sorry listing do padro couch and then P room okay so after the basic C we have a right here so HR and then closing tag the here will be the information of the Creator right so I will have another div and inside this div we have a class name profile profile of the Creator so we will map the uh profile photo part here so image and then the source equal to here HTTP coling Local Host coling 30001 Flash and then we will have the one the Creator right okay go to the Redux I will have here so we will have the Creator so we'll be listing here this is the state this is is the user this is the listings of the all the listings inside all the listings we have the first listing here and then I will go deeper so that's why the first listing is the listing we are fetching then we will go to the Creator so listing. Creator and then inside this we will have the profile image path so dot profile image make sure you type like exactly profile image part and then we continue to replace the public here into the empty string replace public to the empty string okay so that's is the image and then we will have a text here so under this will be A3 and then we will have a hosted by listing okay go here again listing dot Creator dot okay the Creator we will fetch the first name and the last name so listing. creator. first name and then listing. Creator do last name make sure you have a n is a capital exactly like in the API or in the data okay after this we will have a live so this div is done after the profile D we will have a line This HR okay now we will move to the description so we have A3 here and it will be description and below is a BTE with the the par of listing do description do description okay continue Aline HR and then we will have the um a highlight so A3 will be the listing dot highlight and after is a bag in uh inside will be listing do highlight description highlight description I just want to make sure I uh type correctly so we have a highlight here and then highlight no there's no l Capital here so highlight and description okay good then will be aign okay now we will fetch all the amenities we will have a diff and then this diff will have a class name is a booking because after this amenities we will have the calendar to book and then if we I enlarge this the calendar will be side by side with the amenities but because it's a mobile responsive as well that's why you will see here yeah like that so the class name booking inside this we will have the def for amenities so D A2 what this place offer and then now we will fetch all the amenities so we have a diff with the class name equal to a main Mes in inside this amenities we will have the um listing we have the listing do where is the amenities okay amenity here is an array and okay uh you can see here is is uh I don't know it should be an array and then it should be separate but it's go like combine everything in a string so if the API like that we need to pass so I will do Jason not pass and then I will pass the listing do amenities amenities so it will pass the this string to separate and then after I uh pass this string I will map I will map each item okay and then I will have a div with the class name equal to facility and then inside this div will be the um image remember always have a key here so key equal to item okay or you can have the index here so key will be index but make sure you have the key whenever you map so inside I will find because right here I only have the name but I need to find the icon of the name to so um I need to uh I need to uh like um import the amenities from the data.js so right here okay if I have the name of the um facilities I will find the icon so let's import okay import facilities from data.js and then go back here now I will in the facilities I will find so in the facilities I will find the uh the facility the facility which the facility which have the um the name so for facility. name equal to item. name so let me explain right here in the um later for example we have a BB okay so I will go to the facilities here in the data.js and I will find the facility have this name so this is the facility have the name is part up that is how this function do so we will find the facility that facility not name equal to the item here not name so we already found uh the the the facility now we will fetch the icon so uh that name and then question mark we will not icon now yeah and then after after this div okay so inside this div uh we will have a div for it right right we want we will have a diff for the icon and then I will put the whole line here I will cut and I will paste inside this div so this div have the class name equal to facility underscore icon okay so this D is for the icon and then uh I will have another bag for the item the item here is the name right because we right here we pass we jason. pass we will pass this string to separate uh F like separate between the comma so the item here is the bot of the personal care product each item will be each part here will be passed between the [Music] comma so after we um fetch the facility now we will go to the calendar so this is the diff for the facility now we have another div for calendar we have a A2 equal to how long do you want to stay question mark and inside is the calendar so we have a d for the calendar with the class name equal to date range calendar now to have this calendar we need to install a package I will have another terminal go to client and then I will install the package npm install the package called react date range and click enter it will install in uh some seconds okay now we go to the package. Jason to check so uh where okay react State Range is already installed so it's good to go so we close this so I need to import some things here I will import the react Das date do Dash range and then list and style do CSS so this is the where you can go to the documents of react dat range they already have the rebuild uh CSS so we just need to import it so I will import another CSS react date range flash this flash team flash default do CSS so this is also the prevu um CSS by the pack page react date range and then I will import the date range from react date range is the calendar go back here go back to the end after this diff we will have the date range we just imported but we need to have the function to handle select right so like this so we have the handle select and it can recognize which date is start and which date is in so let's do it after the use effect I will have a commend call book uh booking booking calendar okay so first I will have the date range const date range comma set date range equal to VI State and this is um an object in the array so the object here now we enlarge this so we have a start date first right so start date is a new date like this and then comma and date and date is a new date so we take the date we choose we take the date and then the key equal to selection after this we will have the um handle select con handle select equal to ranges we will update the selected date range okay I will have a command here so you easy to understand update the selected date range when youer make a selection and then I will set the date range is ranges do selection oh I forgot the comma here so the keys key the selection here range do selection now we will calculate the the night so we have a con start equal to new date date range zero dot start dat so this is the start right this is the date range and then the this array right and then so this is the first item of the array so that what date range zero and then do start date do same thing for the end date so start and equal to new date date range this the date range have an array and we have the first property of the array and then we will go to end date so end date now we will count the day the night so comes Day Count you can say night count whatever it's fine M do round and minus start and then we will divide by 1,000 multiply 60 multiply 60 and multiply 24 so 60 seconds 60 minutes and 24 hours 4 day okay this is the calculate the difference in days so this is the format to culate the difference in days unit so go to our calendar in the date range we will have a ranges so the range it will be date range and the unchange unchange will be handle select so if the DAT count more than one night question mark we will have A2 so I will side by side again have A2 A2 and in A2 we will have the listing do price remember to have the dollar sign in the front so dollar sign listing notot price and then have um X and then they count okay night so we have a two uh cases if uh the day count is just only one so there's no s here but more than like for example I choose like more than uh three right more than one night so it will have the S here so this is the first uh case and the second case should be here and the second case will be a same thing I will copy and paste but just on the uh the night here okay so A2 listing price and the count is one and just only no s at the end and then after this we will have for start dat and end date here the information so after the A2 um this A2 right after this we have a b we have a total price total oh it is not B it's E2 so total price is listing dot price multip by multiply by day count so we will calculate we calculate the listing. price multiply by the count here and then we will have a start day and end date information so start date calling so I have a date range the first item do start date dot to date stream they will uh transform it to a stream do the same thing for the end date so here will be end date the here end date yeah and after this will be a button so after the btag let's do the button here button the class name equal to button the type equal to submit and then in order to handle submit we you need to have the um we will um like um put it into the chip list right so we don't have the API for the chip list right now we will do it later for the on click but we just do the atml first so booking now uh we will import the loader so import loader from the comp bonance loader and then we will um have a set loading to set loading to false after we get the data we will fetch loading to false oh I forget have a flash flash here okay uh when you cing with me I hope you will uh see this error and then do correctly in the beginning okay so now let uh do the loader return loading question mark and then we will have the loader component otherwise we will have this the whole thing here and then we need to put the this one okay nice now we will have a look from the beginning so we don't miss anything yes here I forget the flash flash this one too flash flash make sure the um local hold flash fast here would to be correctly and then uh for the amenities I will show you in the Redux here we will see is a string in an array and this is the first item so we can use we don't need to use P but uh we can have the split oh because it's the first the first item of the array right is zero here we need to take the first item of the array and then I will split between the comma so the item here will be the facility not name if the item is already the name so right here we don't need not name it's not not name anymore because it's the item is a name already and then this one I forget to put in the bracket okay now go to uh our application here and then click to the listing nice I think we forget to uh import the naar as well so on the top we will have a napar here napar component go back to our website yes so we have a Nappa and then we have the listing details the title the image it's good we have a whole photo here and hosted by the first name and last name description highlight amenities and let's check the calendar okay so we have a three nights and the total price the start date and the end dates so uh the listing Details page is good now now uh let's log out and then create another user and another listing so we will have the chip list uh wish list and then all the list so now I can have a main for example the first name is John the last name is Smith the email is John Smith at email.com the password is same John Smith confirm password John Smith in upload photo I also have his image in the asset folder and then register okay now lock in so John Smith even well and then John Smith log in okay nice so we have a his profile image here and now let's go to become a host let's create a new listing so the first is a bit front so I will do the wind Mills here will be uh an entire place the address will be one two2 Victoria p and the absolute will be apartment n city is um Vancouver British uh Columbia which just for shortage British and then Canada so guest can up to three bedroom one B two bathroom one so I will have I will pick some here very randomly okay and I will upload the photo so I have a listing too here you can um in the access folder you can pick um nice so the title I will copy paste some random text okay I already copy and paste some random text here it's uh you can have anywhere on the website on the Google you want okay now I will create your listing so I have another list L here and let's try okay right here it should be it's already all but we didn't have the selected class name so let's go to uh the um the categories so here in the listings. jsx here we have a categories map and then we need to have uh extra the selected class name so category and then we will have dollar sign the bracket and then check uh category do label equal to selected category then question mark then we will have the selected class name otherwise it will be empty string now let me go to uh and then restart and scroll down okay in the beginning is all right and then I will click to beach front yes it's filter only the first listing then I click to win Mills it the second listing I come back to all is a both listings so I will go to uh second listing we just created okay nice good and this the hostess by the guy okay now we will start to do all the list here chip list which list property list is the property they host chip list is the property they book they rent and wish list is the property they like and reservation list is someone else book their property okay so we will start with the chip list so in order to start with the chip list we need to have a booking let's go to the uh server folder and then we will start from the back end go to the models in the server folder create a new file called booking so we will create the booking schema and then right here we'll have a const Mong equal to require Mong and then const booking schema equal to new mongus do schema and then first we will have a customer ID with the type is do schema type. up ID and then we will reference user so uh we also have the host ID so the host ID will be same and we will have the listing ID the listing ID will be same but we will reference listing schema so he will reference user schema but he will reference listing schema and then we will have a start St type equal to string and require so we will have end dat s and dat type string and requires true so we will also have the total price so total price type is number and then require is true so after this we will have a Time Time St is true here we will have a con booking equal to modul but model and then booking and we will use the book sking schema we have a module. report equal to booking now we'll go to the routes folder and create a new file called booking JS we will create the API to uh create a new booking so first we'll have a const router equal to require express. router and we will import the booking schema so require that flash models flash booking and then here I will have a like a command create booking so we have a router. poost the link is Flash create and we will have the async function request response we have a chai and catch in ch we will have a const all the thing here so customer ID host ID so C customer ID host ID listing ID start date date is a capital here end date and total price uh I will close the listing and total price okay total price have a p Capital we will have a request from body now we will create a new booking equal to new booking booking schema okay so booking have a b is a capital and then we will have everything same customer ID host ID after that we will save the new booking new booking do save after we save we will return the bookings so let's respond. status 200. Json and then return the new booking for the error will be console. law error and then response. state 400. Jason and then we have a message is fail to create a new booking and the error is error. message okay now um we when this it just create the booking we go to the index.js to import the routers so here comes booking routs equal to require routes and bing. JS after that we have a app. use bookings and then booking routes to have a chip list we will have um another route called user so in the user route uh we will create all API to uh have all list so so user.js so we have const router equal to require express. router then we will uh import the um booking so cons booking require dot dot dot um flash models and booking so now I will say here is a get Gip list we have a router. yet and then inside is a user id youer id we have a flash here and user IDs and then chips okay then we will have a sync function request response ch my catch in ch uh we will have a con user ID equal to request. parents so we will take the user ID to Here by use pars now we will find all the bookings of the user so const bookings equal to await booking so I I would say it's a chips so cons chips equal to await booking do F so we will find the um uh you user ID right so in the booking we will find the customer ID okay I will copy and then in the user address here so we will find the customer ID equal to the user ID we take from the parents so like this and then we will buul late we will poate everything we will poate the customer ID we will populate the host ID and we also populate the listing ID after this we will return the bookings we return the chips so return the status 202 do Json and then return all the book chips cat console that law error and respond. Status 44 do Json so the message is cannot find GS and the error is error. message okay so this is how we get the chip list now we will go to index to import the user routes so const user route I think here just a booking it should be B in here not capital okay so use the routes equal to require routes and then user.js so right here we have app.use and then we will have um users have a flash flash and then users okay and uh user routes okay now we will I will close this I will close this as well I will close everything I will go to client and go to the page listing details so now we will add the uh submit book so here it is um submit booking so we have a con customer ID because uh the person who book is the person who log in right so customer ID will we use we will use the selector uh to to select the user so State state. user _ ID so we should have a question mark here okay the use selector is already imported automatically but let me show you in the Redux we have a user the user here is the person who log in to the account so the the person who book is the person who log in that's why customer ID equal to the state do user andore ID here okay so now we will have a const handle submit equal to try and catch error oh handle submit is a s function a s function okay good so in TR we have a con data to uh okay so we have a like booking form booking form okay so equal to first uh let me open the booking schema so we need to have a customer ID right so customer ID here customer ID we just uh use the selector to select the ID of the person who lock in and the listing ID listing ID is the one B we use B right because this is the listing Details page this is the list listing ID so we already use param to have it so listing ID and then uh we have a host ID right host ID equal to the listing dot user ID so in the Redux in the Redux we have a listing so uh the listing here so we go to the listing and then we have the not the user ID we have a Creator and then notore ID so this should be Creator and then doore ID is the host and then we have a start state is date range date range the first item and start date but remember to date string okay to this string same thing for end date so end date dat ring and here is in date today string you remember uh where is the okay here this is the dat dat range right these are an array so we take the first property that's why we have a DAT train and the first item here and then we go to the do property we take the start date and we take the end dat and the total price so the total price equal to listing do price and then uh multiply multi for day count that is a total price equal okay that is now we will have the response so const response equal to a wait we will fet so HTTP calling flash flash Local Host calling 30001 Flash and then we will have the bookings right because in the index we have a bookings first and then we have a booking routes later so we have a bookings and then we have a create in the booking uh API I show you in the booking API we have a create here link so this is the API to create a new booking and the method is post method is post and header headers is a content type application flash application contain oh here sorry so contain type and then application flash station okay then the body the body is this one booking form but we need to json. stringify and hook booking booking form here okay so after this if response that's okay then we will navigate okay before we navigate we need to use navigate here so const navigate equal to use navigate imported from react rouon let's check okay use navigate and use params react R so I will navigate to the chip list okay so that's why navigate and then the link will be you customer ID right customer ID is the the one who are locking so we will navigate to customer ID and then uh flash chps for the error you will conso that log submit booking fail and error. message okay so this is the handle submit and then we will add to the um booking button so go to the booking button right here we have a on click on click equal to handle submit so uh this this is the finished page of a listing details everything is uh finished and like completely I see the app class here in the server terminal let's see the error so the error is router. use requires middleware so it will be the same mistake I forget to have a module do export equal to router and it will be same for user API as well just make sure you don't really forget it like me okay so after we submit the booking it will lead us to the user chips so it will lead us to the chip list of the user who locking so let's create this page in the pages create a new file called chip list do jxx and then r a f c e in the style create a new file called list. scss and then copy paste in the L link below I already copy paste here then go to the CH list and we will import the scss file so styles. flash list. scss I will delete some okay so in the beginning I always have the loading and cons loading loading and set loading equal to you state and in the beginning will be true so after the return we will check is this loading or no if yes we will have the loader component if no we will have the div okay so and the class name here equal to first let me show you the finished project here in the chip list page we will have all the chips here and then you will see this one is similar with the listing card correct the only difference is like right here instead of type of the place we will have the start date and the end date right here instead of the price per night then we will have the total price of the booking so we will have a na the title of the name of the page and then the list so right here I will delete and first I will have this sign then after the beginning will be the na let me import the na component after the na will be an H1 for the name of the page and here will be your your Gip list and after the H1 will be the list so the class name equal to list and the class name for each one equal to title list here we will map the chip list so let's call the chip list we have const chip list equal to we will use the selector to select the state in redu use selector in imported from react Redux and then we will select the state the state of the user. chip list so let me show you the Redux this is the Redux state so it this the whole state we have a user and listings right so in the user we will have the chip list okay so so uh we need to have the fetch the API to get all the data of the chip list right so const get chip list equal to a s function we have a k and catch so in ch we'll have a const response and then fetch the API so await fet the API will be ATP calling flash flash Local Host calling 30001 and then for the this is the user right go to the index so we have the users here and after that will be the user routes so we have a users here and then now go to the user API we will have the user ID and then the chip so how we get the user ID right here I will have a const user ID equal to I will use the selector to select a state so we have state. user doore ID so that is the user ID we will pass here so I need to change this to the dynamic stream and then we will have a user ID right here after that will be gips the method is get so after we fetch the data then we will uh get the data sorry after we fetch the API then we will get the data so cons data equal to await response do Jason so in the uh back end we will return the chips and then the chips is the data we fet from the link API right so right here all the DP list will go to data so after we get the data then we will set DP list like we will get this data back to the um uh chip list in the state of the Redux in order to do that go to the state. JS and then we will have set chip list is a state action and then state do user. chip list equal to action. pay load so right here we will export the set chip list so come back to the chip list import the set CH list from the states. JS we just created import set chip list in State I will add the data into the state of a chip list of the user so const oh not cons I will use dispatch so let's call dispatch here dispatch equal to use dispatch and then right here I will dispatch the set chip list and I will add the data I get from fetching API I put here when I dispatch then uh I will set the loading to false so in the beginning we have a chip list is the user. chip list it will be the empty array as default but after we submit the booking the booking will add to the chip list and then we dispatch here and then we get the data then we will fetch the the data in this right here we will have the error console that's lock fetch chip list fail error that message we will use effect to CH go the function so I will have effect here and I will get the function get chip list and here it will be empty array because we only uh fed one time in the beginning now uh let's try to book one uh property and then we will see how it works when but before we book we need to create the route for this page right because it will navigate to the chip list after we booking so let's go to the app.js and then have a route another route this routee here will have a user ID and then this one will be chips here we will have the chip list page yes because like in the listing details we navigate to customer ID right this is a user ID and the chips that's why in the routes in the appjs I have a user ID here and and the chips so let's go to the website here is the second user we created so let's go to the first listing of the first user and then here we will go to the calendar and then pick the date I will pick the weekend for this booking as a um as a trick so we have a price per night three nights total price start day end date and then let's check booking yes so it will lead us to the chip list right but right now there's no cheap list yet because we didn't like map but let's go to the Redux so in the user and in the chip list yes you will see we have the first chip here so we will use all the information to map the chip okay so inside the list the diff we will have the chip list chip list here will take from the uh deduct here select the state state. user. chip list question mark. map we will map each chip and then the listing card component okay so go to the listing card component go to the component we have a listing card here let me show you the uh finished project here in the finish project we will have the list here and then each CH you will see is similar to the listing card correct so the only differ difference is instead of the type of the place we will have the start date and the end date and at the end instead of the price per night then we will have the total price of the booking so let's do it so in the listing C we have all this props right so we will do we need to find the information and then pass the props to the listing card go to the chip list I will close the listing detail scroll up State user so how we need to pass the data inside this strip right it trip so I will I will Destructor all the information here first I will have the listing ID here okay and then what else I will have the um go to the Redux so we have a listing ID and then we have a start date and date total price so start date and date and total price okay so now let's have the props the listing card equal to listing sorry listing ID not listing car listing ID equal to listing ID start date equal to start date end date equal to and dat total price equal to total price okay but look at the finished project we also have the listing photo part right and then we also have the city province country and category so we need to pass all this information into the pro so we need the listing photo paath equal to go to Redux I will show you right here tends to we populate right the whenever we have the gimma we reference so when we fetch we populate so I populate the listing ID inside the listing ID is all the information of a that listing so listing photo pass will equal to listing ID dot listing photo pass right here the array yes so let's do it listing ID do listing photo do the same thing for uh CD equal to listing I B do listing photo part the same thing for province equal to listing ID dot Province do the same thing for Country So Country and this one is country and same thing for category so category listing id. category right right here because we populate that's why inside the listing ID ID we have all the information of that listing good but there is one thing we have two cases in the listing C out so in the finish project we can see this is the L this is for uh the trip list right in the homepage we will see we will have this this is the normal listing card so we need to separate two cases by uh have one more BLX so I will have one more prop here is the booking equal to booking and then here I will say booking equal true so if in the CH list booking equal to then go to the listings component for the homepage you have to have a booking equal to false and have a one more props booking equal booking so the listing in the listing card they know two cases go to the listing card we will add more drops here here we will have the um start date end date total price and booking go to the end from after the category we will separate two cases so first is a not booking so I will have a not booking question mark then we will have all the tie and the price per night inside I will cut and I will put it here otherwise we will have the um start dat and date and total price so I'm still copy all this and put it here but I will change this to start date and dat and date and here will be total price not per night but will be total okay so go to the website and let's see okay so this is our website and we have these things let me check again okay right here the city is listing that City okay okay just uh nice so now we have the listing here and then if I sorry we have the CHP first CHP and then when I click to this uh CHP it will lead to the listing detail okay it's not L to the listing detail have a problem then let's go back to our code okay so here the we didn't pass actually the listing ID I will show you in the Redux we go to user we go to chip list we go to the first strip and then in the listing ID is not actually the ID but actually inside the listing ID will have underscore ID here so the listing ID will be listing id doore id that is the actual ID so go back here and then go to go back to the chips and then now I will click to see it will lead to the listing detail one more thing like uh for this button like if I click this button it will go to the next line of the image right but it's not it will check the um the navigation to the listing detail page I will show you now I click to the next slide but it will lead to the listing Details page so in order to avoid this we need to have we need to have propagation stop propagation so go to our uh listing card be uh below the go to the previous uh slide we will have e do no no before that e do stop we have to stop first propagation do the same thing for the next uh button so before we go to the next sline we have a two star propagation okay so let's check go to our website and then okay so go back to our code we have a propagation oh this is the function sorry this a function yes okay so right here I will uh go to the next slide see now it works it doesn't lead to the listing page anymore so now we are good with the CH list page and then what's next let's go to the wish list page in the user.js in rout folder in server folder we will have the patch which list here so I will say a commment add listing to wish list we will have a router. patch and the link will be flash calling user ID calling listing ID so the user ID is the one who like who who ENT uh who loog in right so they like the listing so the listing ID will be the listing we we like and we have the assing function request response we have a chy and catch in chai we will have a cons user ID and listing ID user ID and listing ID we will use param require. parents and we will have a con user equal to await user okay we need to import the user uh book the user schema const user schema imported from flash model flash user so we will find the user have the user ID here so cons user equal to await user. five by ID and this is the user ID same thing for the listing const listing equal to await listing we need to uh import the listing schema as well con listing equal to require Flash models flash listing not find by ID and we will pass the listing ID here now we will add to with list so con favorite fav favorite sorry favorite listing equal to user dot wish list wish list so the wish list inside the user right that find we will find the item the item dot underscore ID dot to string equal to listing ID remember we have a two string here and then the server like the will create an ID have this type like Mong good. schema. types. object ID that's why we need to two string here because the because the listing ID we take from params is a string then we have uh if if favorite listing then we will user do with list equal to user do with list do filter filter we will filter item that the item doore id not two string not listing ID else we will have a user okay we user dot wh list. push listing and then here we will await user. save because we patch that's why we will save after we patch await user. save as well and then right here we will respond right here we will respond not status 200. Json with the message is listing is removed from wish list and wish list is a user. with list which list okay same thing for this one but this one will be like is added to wish list and wish list equal to user. wh list okay now we have a catch error will be console. law error and respond. status 404 Json we have a error is error. message okay let me explain you so first we need to find the user ID and listing ID we find the user ID to find the user by the method F by ID we have the listing ID to F that listing by the method F by id2 so after we find the user and the listing we will check we will check that listing included in the W in the wish list or no so favor is listing here equal to the user. whs list. find we will find each item in the wish list and then check each and then check like the listing ID we got from the baram is equal to one of the items or no yes if it's equal to one of the item then that listing included in the wish list but if the listing is not is not equal then that is not equal to any ID inside the wish list then that listing is not included so we have two cases here one is a equal is mean favorite listing so for example if we if it's already included in the wish list and then we click the heart icon again it will remove that's why here we remove remove that listing see now if if is included now we remove that's why from equal to not equal but if it's not included and then we click the H icon then it will push that listing to the wish list so that is the API set up for the add listing to Wi list now we will go to the index and then we will have um yeah we already have the user rout here we don't need the index anymore now we will go to the listing card to have the um add to Wi list function in the listing card component above the return I will have the add to Wi list function here so add to with list so we have a const const user you go to use selector we will use selector to select the user in the Redux you select state and then state DOT user okay so now we have a user here and the wish list same so wish list equal to use selector and then State and then state. user. wi list okay now we will determine is uh in the wish list or no so is like is like mean like included in the wish list then we will check the wish list here we we select from the Redux and then we will check we will check we will use find and then we will find each item in the wish list check is there any item have the ID equal to the listing ID or not so where we have the listing ID here in the listing card we have the props listing ID so it's good here and then we have a function batch wish list equal to a sync function con oh sorry we have need to have the bracket inside the bracket is const response equal to a weit Fetch and then we will fetch the API right HTTP calling flash flash Local Host calling 30001 FL user FL uh the user ID right so we will pass the user ID here user. uncore ID because we have a user already here so we'll be user doore ID and then Flash and then listing ID okay so after this oh I one bracket here and we have the method so the method equal to patch we also have the header so we have a content type and then application FL Jason when we uh patch the API we will get the data right so after this we have a cons data equal to await responsejson so in the user route what we return we return the wish list right we return the message and we return the wish list the wish list is the user. wish list and this wish list already save after updating so I will have a dispatch to the um uh reduct right so go to State and then we have another set with list State action state. user do which list equal to action not payow go back to the listing card we will dispatch before we dispatch we should uh we must call it Con dispatch equal to use dispatch okay and let's uh import we also not import the user selector here as well so go to the the top and then import use selector and use dispatch from react Redux so after we get the data we will dispatch set wish list we need to import the set with list too so import oh we need to export first we forget to export so set which list here and then after export we will import Set uh wish list and then we will set with list here and then we add the data okay but look at the data again in uh in this data we return both you message and wi this right so we have a to like data. wish list because we return both is this is a property have a message and have a wish list so right here we have to say data dot wish list now we will add the icon on the listing card let's import the icon import the favorite from icons material oh you can have here right here go to the bottom right here we will have um a div and this div have a class name equal to favorite and uh inside this div we will check is like and question mark If is like we will have a favorite icon but the color will be red so we will style here we will say the color is red M if not we will have the favorite icon as well but the color will be white so here is white so now I will add the function so I have an on click and then will be a callback function B wi list okay let's go to the website and check so in our website they say cannot read the properties of a no reading with list let me show you why it happened because uh if there's no user lock yet so we have a user and then selector use the select the state state. user at the time the user will be know because there's no user login yet that's why when we go to the WIS list and then we go deeper after the user we go deeper to the whs list it will have that error in order to avoid this we will have another case so I will have a r here and then the Mt array so in case the user is no we will have the Mt array here I already see we have the user so we don't need this we just need to check the user question mark and then dowi this if the user is no we will have the empty array for the is like we have H the item and then checking item so in order to make sure all the error please have a question mark in the front just like to make sure they don't give us an error so like here as well so just say user question mark okay and go down to the part icon we will need to do one more thing I want to disable this uh div because like if there is no user login and then when we have the onclick uh function here check out the bat wi it will give us the error so I will disable disable first in order to disable we need to change this two button because we cannot disable a div so I change this two button and then now we can disable I disable if there's no user just want to make sure there's no error so now you see like is no error and then even when we click to this button uh it's not give us any error as well it's a disable but there's one thing remember it will have the same problem with this icon right because right now there is no user login but if the user login right and they like this listing The Click part icon it will list to it will go to the listing Details page so remember we have a that problem with the next and previous icon here button here so just do the same uh solution so right in the on click I will have the event and then I will have the function I need to put in the bracket because now we have two function first we will stop the sorry e do stop propagation then we will have another function is a pat list okay nice so now uh let's go to login and then we will try ENT with list function I already log to the second user a main I go down we have a two listing here so I will click to the heart button see is from white to Red it's mean like it add to the wish list and same thing here so it add to the WIS list if I click again it will remove it come back to White and right here if I click again it will remove from the wi list and come back to white but there is one more thing this is the property uh like he own so he cannot like like the property he own right I don't want to do it so I will have the condition like uh if the user ID equal to the Creator ID so they cannot click the like they will will um uh return nothing when they click to the H button so right here before the response I will say if the user question mark doore ID not equal to the Creator notore ID then we will have a this ra response and data else they will return nothing so why I have the Creator doore ID here remember in the propse of the listing card we have a graphs Creator here so I will show you in the Redux with we go to the listings and this is the second listing we will see the Creator here because we populate the Creator that's why inside the Creator we have the underscore ID this is the ID of the creator of the owner so if the uh user who login not the creator of a that listing they can like but if they are the Creator they are the owner of that listing they cannot like that's why I will return nothing here okay and on a check so here this is the user who is the main and the second listing is uh his property and then when he click the hard icon nothing happen but the this is the listing of the first user when they like they click the H icon it will go to his wish list so now we are good with the wh list we will go next to the property list but I forget we didn't have the W list page yet so just created very quickly so I will close everything here in the pages create a new file called with list jsx and AFC we will import the CSS import Flash FES and then list. scss so in the wish list I will con with list equal to use selector and then we will have a state state. user. with list okay and um when we return we will return a nap bar first we will do the same thing with the chip list so inside this we will have a Nappa below the NAA we will have a one the class name equal to title list and this a your wish list and right here we will have a diff the class name equal to list inside this we will have a wish list so we list start map so we will map each um like listing right so each like listing we will map the listing card so listing card let's import the use selector and then the listing card import use selector from react reduct and then we also import the net components from data flash component FL nap we also import the listing card as well from data flash component flash listing card okay so I need to like pass all the props in the listing car right so in the like listing I will dist structure the information so let's see I will go to the reduct and then go to the user we will have the whs list here right and then each WIS list we have a one one U like listing here so let's check so first I will pass the listing ID so we have underscore ID and then I will pass the listing photo P the city The Province the country here the tie the price yeah the tie and the price okay let's do it so we have a listing photo packs and we have a city province country category type and CH we also uh need to um give them the booking is a true or four if it true it will give the um start date end date and um uh the total price right but this one is not the booking so we need to say booking equal to false and then let's do let pass all the um other the props here so we have listing ID equal to underscore ID listing photop paath equal to listing photop City equal to city province equal to Province country equal to Country category equal to category type equal to type price equal to price and put Bing equal to booking so let's go to uh his wish list right we need to go to the Napa so in the napar component we need to add all the link uh to the list so we already have a che list page let's add the link here in the naar so we have FL and then user ID user doore ID and then flash chips same thing for the wish list we will have a user. ID and then here will be wi list we need to create the route for the page as well go to the uh app.js and then right here do the same thing but here will be quiz list and here will be w we need to import the w l cage so w l yeah it's already imported automatically put it in like this okay good now let's go to his quiz list so here in a napper we will have a wi list so you will see this is the listing he lik and then if he unclick like if sorry if he click again it will remove so we have the error cannot read the properties of undefined so let's go to our code so in the wish list we didn't pass the BR Creator remember go to the listing card component so right here we have the condition like if the user ID need to be different with the Creator ID right so we need to like ask the Creator go to the WIS list and then have a Creator here right here have a creater equal to creater okay so go to the um this is the Redux go to our wish list the first listing so here the Creator they didn't populate it so it means like when we go for the user we didn't populate see right here we populate right but when we uh cons listing and we find the listing ID we didn't populate so we'll copy everything here no we will populate the uh Creator because in the listing model in the listing schema we have a Creator here reference user we need to populate the Creator so user poate Creator and then now it will poate okay let's go back to the homepage because we cannot like um unclick like we cannot remove this WIS list in this page we need to go to the homepage and remove it okay and then add it again go to the Redux check is this populated or no with this go here and then now it's populate see now Creator and then populate so now it will work if you go to the wisness page now if you click the hard icon it will remove done okay now good let's go to the property list in the user.js in the server folder we will have a get property list here I will just copy here and then paste we will just change a little bit so here will be get property list so right here we is not Che but is a properties and then we also have a user ID by using the params right here we will have a property as well but this one is a listing not booking we will find the Creator go to the listing schema you will see in the listing schema we have a Creator so right here I will change to Creator because the Creator is the one who own the property right so we will find the in the listing we will find the Creator have a this user ID we take from the params and then here we will populate the uh Creator right here we will return the properties and then cannot find properties okay now uh in the pages folder in the client folder create new file call property list that jsx and then we will have r a c e oh property not proper tool okay right here I will change to use to Y I will import the CSS file so do flash Styles folder and then list C SC CSS you can actually you can go to the chip list or go to the wish list and then just like copy paste because everything here will kindly same I control a and then control C go back to the property list contr a and then contr V so right here instead of the WIS list will be property list so property list and then I will past it as well here we have a property list property list it's actually a property list I forget the name yeah property list in the Redux so we will M the property list and then we will map everything is same everything is name oh here your property list okay I think it's good uh go to the NAPA NAPA components then we will add the link to the property list so I will just copy paste right here and then I change this to properties go to the app JS create a new route right here I will have a properties right here will be property list page okay so now we will have the function to fetch the API to get the property list so I will have const yet property list equal to this is the a function so Asing and then chy catch in ch you will have cons response equal to await fetch so the ab will be at TTP calling flash flash local post calling 30001 flash users Flash and now what's okay um user ID right okay then we need to have the user ID here so comes user equal to use selector and then state state not user so right here we will we don't need this anymore we say user question mark and then just property list right here I will have user doore ID and then I need to change this to the dynamic string and then flash properties like in the user we have user ID and then properties then we will have a method is get for the catch we will have the console cons so that log fetch of properties failed in error do message okay so uh use effect to check the function use effect and then we will call the function get prop property list and this is the empty array we will just only fect one time in the beginning we will click to the property list in na so right here we didn't have the data yet so after the response we need to get the data right so data equal to await response dot Jason in the user we return the properties so the response is are the properties but uh remember we always need to have the loading right so right here I will have a cons loading set loading equal to US state is true so um I also dispatch I need to dispatch to the property list in the Redux tool so go to the state JS and then we will have a set property list State action and then the function state. user. property list equal to action do payload and I will export the set property list okay sorry my bad here it is only property list [Music] go to the property list I will import the set property list in the state file after I get the data I will dispatch before I dispatch I will assign the dispatch first so equal to use dispatch we have a to okay use dispatch here so I will dispatch set property list and add the data inside after I dispatch I will have a set loading is false so right here return loading question mark if it's loading it will have a loader component and then if not we will return all these things Okay so now I'll go to the website and then check okay so this is the property list page and then this is the property he own okay we have a chip list and then we have a property list yes so now let's go to reservation list again in the user.js in the server folder we continue to get the reservation list so I will copy here I then paste so here I will say reservation list and this one will be reservation this one is reservation copy paste and this actually the booking is correct but instead of a customer ID it will be the host ID go to the booking schema you will say the customer ID and the host ID so here we will look at the host ID and then find any ID have the same user ID we take from bar and then populate everything customer ID host ID and listing ID return reservation okay cannot find reservation so this is the API in the pages folder in the client's folder create a new page call reservation list jsx and then go to the chip list contron a contron c go to the reservation list contr v as I say are the list of different pages kind of like same we just need to change a little bit different so right here we will have reservation list and then state. user. reservation list go to the Redux to check is an actual name so in the user we have yeah we have reservation list here with the capital L then we will have a get reservation list go here is a reservation have S ATM and then okay go to stat because we need to dispatch right go to states. JS and then continue copy paste we have a set reservation list okay I will delete cons that lck here user Dot reservation list okay then I will export here set reservation list so go to the uh reservation list page we instead of we import the set list we will set reservation list and then right here we will have set reservation list to dispatch the data and then fetch reservation list filed if in the use effect we will change to get reservation list function okay anything else we need to change let me check okay here cones reservation list make sure you go from the top to the end to check like you need to change everything necessary mhm okay this one are good and then your reservation list so we have here is reservation list we take from the Redux so we have a listing I be listing okay good okay now uh go to the NAA and then we will have the link I will copy and case here but right here I will have reservations have S at the [Music] end okay good go to the route the app.js and then add one more round this here will be res ation and this will be reservation list page reservation list page okay now go to the website then check so for the reservation list we have to log out and then log into the first user because the second user book the listing of the first user right so now to see the reservation we have to go to the first user account so the first user is V black v black okay now go to the reservation list yes it's perfect so we have a reservation list who book her property right from start dat and date category and total price okay so let's go to uh the homepage and then I let here is her property she cannot add to wish list but this is is the Main's property then she can add to her wish list go to her wish list and then you can see okay now um for example like uh she want to book okay so let's go to the listing details and then go here just book uh from December 8 or Christmas for example like uh from 22 to 27 for the Christmas and then booking when we uh click to booking it will go to the ch chip list her chip list so let's check nice so it will go to her chip list and this is her booking so now for example uh here she have the uh heart icon is red right because it's in her wish list but for example he doesn't want this listing anymore because see already book right so just remove it from the wish list then just click again and then we have a this error so let's go to the code and then let's see why we have this error is undefined so in the chip list we didn't like um pass the Creator BR so now I will pass the Creator here I will have greater actually in chip list is uh booking right okay let's go to Redux and then check so in the cheap list we don't have the um creater because it's a booking schema when you go to the booking schema we will have a customer ID host ID and listing ID ID so the Creator ID is actually the hosting um the host ID right here the host ID and have all the information of the host so for the BR listing card we will have a Creator because the listing card the is creater but the data inside will be host id doore id okay and then for the reservation list we also have a the host ID as well so host ID and then for the Creator will equal to host id doore id okay so now let's go to our website and check let's see can we uh remove it from the wish list or no yes see we can remove it from the wish list nice so become a host there's no link okay now go to the Nappa we will in the NAA we will add the link Le uh lead to the create uh listing I think create listing let me go to apps and check the link uh apps okay we have yes we have a create listing for create listing page just FL and contr V okay nice okay so let's check everything for her we have a chip list here this this page then go to the wish list there's nothing because we just remov so go back to homepage and then we can like the second listing of the main property and then go to her wish list again so now we have her wish list here go to the property list so we have a property list here and then we can she cannot like like her property list that's good go to reservation list so the main right the main booked uh his reservation so it appear in her reservation list and then go to become a host so she can upload the new property in this page and then log out so go back to the uh homepage so uh we have all the categories here and then we can filter the listing we don't have other categories uh listings yet you can add more and then you can add anything you want go back to all for this one uh we can create another page that whenever we click to this uh this is the top categories right if we click to this uh image it will lead to another page and include all the listings belong to the beach front category so let's do it in the PES folder create a new file called category page. jsx and then R AFC e we will import the scss file import. Flash um styles and then list. scss so it will be the same with all the user list so first uh we will have a loading and set loading so const loading and set loading equal to use State and in the beginning will be true then we can go to the return and then loading question mark If loading we will have the loader otherwise we will have this div so in this div uh first we will have this one and then inside we will have we will have a another bar and import bar here as well import na from flash components flash Nappa okay so below the Nappa will be um a div actually we can go to the wish list and then we can copy paste everything here um so we copy page from here to H1 because we already have a another and then I will paste here okay so we just need to change the title to the category right so first uh remember in the listings component I will show you we have the get fit listings and then we will filter the selected category with this API and if the selected K three equal to all we will fetch all the properties so we will do everything same here here but we will uh instead of we get the selected category by choosing the all the icon we can get the category in the params so uh let's go to the appjs and create the link so right here you can see uh this is the listing details right um so let's create a route another route and then this route we also have a properties but right here we will have the category so when we click to the image it will lead to this page the page is a category page yes so when we click to the image it will lead to the category page with this link but we cannot have the same like this because like um we also use baram to get the listing ID right so it will be confused and give us the error right here we have a two to add more so to make this uh link and this link different so we will have the category by using params go to the category page and then we have a const Kory equal to use param from react router down and then when we get the category already we will go to sorry we will go to fetch that API so here we will find this API same I will copy and page in the listings component we will fetch the same API I mean this one okay sorry because we didn't finish the code yet so I will cut I mean this one we will fetch the same API because it will be the same uh function go back to our code and then I will paste here we will have the listings equal to you selector and then we will select the state start list things let import the use selector import use selector from react ROMs okay right here instead of we use the selected category right I will delete this we will not use the selected category I will delete this as well delete this right here we will use the category we take from the param okay and then okay so we right here we need to import the set things from the Redux state so import the set thisis thingss from Redux flash State yes so I mean everything is same but the selected category now we will change to category we take from the param and then right here we don't fetch the wish list because I just copy from the wish list page right we will fetch the listings here and then it's not your wish list but it will be the category so we have a category here and we have a listings so now we have a import loader and then import na oh no import listing card and then import use effect right us we can import right here oh no us import at the use state from react use effect from react and then use uh dispatch use dispatch from Rea okay it's good let's go back to our website dispatch is not defined okay so we will have right here we have a cons dispatch equal to use dispatch okay so now it was let's go to the bit front and then let's see okay so we didn't add the link and we need to go to the categories and then add the link for the other categories component so right here I will have just go to the app.js and then copy paste this part okay and then right here it will be category have a dollar sign and put in the bracket so the category here we take when we map we map each category the category is the label so we have to say category. label so it will take the label the name of the category put in the link and then it will link to this page this page is a category page category page we will t the category by using the baram from the link and then we will put the category in the API and then Fetch and then we will dispatch to set listings listings equal to data like the the listings belong to the category only effect and then set loading to fals then we will have the use effect to call the uh function get F listings with the dependency array will be the category so if the category change the use if effect will be uh check the function again but actually um it's not necessary here because we uh have to go back to the homepage and then pick another category so it's not necessary here you can put the ENT array as well okay let's let's go to the website and then right here in the homepage let's go to the beach front yes now we will have the category name here and then listings go back again then we go to wind MS now we have a category with MS and listings now I will show you how to do the search bar function uh when we sh something and then we click the icon search it will lead us to another page uh that have all the listings uh related to the search we already enter in this input so let's go to our code in the listings. JS file in the routes folder uh we have the get listings API here uh but here we get listings by a to the category right so right here I will say get listing by category and then we will create another one say get listing by search and then under we have router doget the link will be we need to get the Shar right Shar from the params but it need to be different with this one like because we have the listing details we also use param to take the listing ID so this one cannot be the same like this we have to get one more so it can be search and then flash to make all the uh route here different so we have a search here and then we use the ram to get it and then after that we have a syn function request response and then cons search put it in the bracket equal to request. par then we will have sh and catch in Dy first we will call listing so left listing equal to the Mt right because like if uh like when the user shut for something right but we cannot find anything uh any listing create like related to that search then it can be an Mt here and then we'll have if Shar equal to R then we have a listing equal to A8 listing not find we will find everything and then remember to populate the Creator else we will have a listings you call to your wait listing schema do fine and then we will have the L sign or operator here first we can find the category the category and then sign re yes sh option and then Cote e do the same thing for title as well so what do we do here we will find uh the any category or the title that match with the search uh we take from the parents so uh right here if the shortterm is not or uh we can use the um dollar sign or here is the operator to perform a case in sensitive regular expression such on both category and title okay and um we have a dollar sign reest here this is the mongodb operator that allows you to use the regular expression patterns for matching and then we will match the search here we take from the params is the value for the short term and then we will check like if it's match with any category or title so the dollar sign and then options with the I uh here is uh to um this is a specifies options for the regular expression so it it stands for the case insensitive matching it means that if the search uh should be case insensitive so example in the Shar by you type like upper case or lower case doesn't matter it's still like case insensitive so that is the uh get listings here and then we will have a return listing right one more thing never forget populate the Creator so we have a populate Creator so after uh we have find the listings then we will return the listing so respond. status to 100 do Jason and then we will return the listing for the error I will copy paste here message failed to fure the listings and error is error do nothing change so this is the API for get the uh listings by search then we need to create a page for the shirt right because when when uh we uh click to the button it will lead us to another page so in the pages folder in the client folder create a new file called search page.js 6 r a f c right here I will import the CSS file so importa flash Styles and then Flash list. scss the atml will be same with the users list so I will go to the wish list and I will copy uh all the atml here so from return I will copy everything content C go to search page and then case here so we will have not your wish list but we will have the um the Shar so first let's do cons um we will get the sear from the parents right so con sear equal to use parents and then we will pass the search here for the title right here we will have a listings so how I have con listings equal to use selector and then select the state state. listings so we will map the listing here I will cont C and cont V here so now we need to fetch the API right so const get sh listing this a Sy function so right here we'll have a CH and then catch always in chai we will have a cons response equal to a weit and then um fatch the API so what is the API here we have HTTP calling flash flash Local Host calling 20001 flash properties because it's a listings rout so flash go to the listing API we will have the sh and the sh from paramere so after properties we will have a sh and then after that we will have the sh from the parms shut from parms and then method is get after we are fetch we will return the data so const data equal to await do response dojon and we have a data we will dispatch this data into the listing state so let's import dispatch or we need to uh use dispatch use dispatch from react Redux we also need to okay I will combine it into one line only because it's in the same package re and then right here I will say cons con dispatch equal to use dispatch and then right here I will dispatch to the set listing we have to import the set listing as well so import the set listing from Redux State now we will dispatch set listing and add the data we will uh add the data into the set listings in theux oh now we forget the loading right always loading and set loading youal to use state in the beginning will be true so after we dispat we will set the loading to false and right here when we return we have a loading question mark If loading we will load the have a load of components otherwise will have all these things so right here also import the loader components do flash component flash loader what else we didn't import we also need to import the listing card in the Nappa as well so import Nappa and then import the listing card whenever you copy paste you will like need to import everything again okay so right here this is good I will handle the error just console that log console. LW sorry console that LW fetch sh list failed and then we have error that message okay right here set listing and remember in the state so we have a state. listings we have a pay action. payload do listings here so that's why we in the set listing we have a to do one more thing we have a to do listings and then calling data okay now we will use effect to check your the function so I will use effect and then I will deare the function get search listing and then the dependency array will be the search so if the search in never in the search by change the uh the user will check the search listings function again and then it will lead to another page now we already have this page go to the app.js and then create the route for this page so we have a properties here under this line I will change this to search and this one to search as well in the element I will import the search page search page right here so this is the part okay property search and then after that is a search uh we put in the search bar and uh it when we uh click to the search icon it will lead to the search page right so go to the napar and then do it go to the naar so right here the icon button have a search icon here so right here I will have a const search set search equal to you stage okay you say in the beginning will be empty string so then we will have the value for the icon right so after this uh no input sorry for the input so the value for the input will equal to search and then we also have on change function is set search equal to we have E Event here so if e. target. value for handle change in the input so uh right here in the search icon we will have on click function equal to this the function we will navigate before we navigate we need to call the navigate first so call navigate equal to use navigate and then import the navigate so from RE rout to already imported so when we click it will navigate to the link go to the app.js and we will copy the link copy the link go back to the na paste here but the sh here we need to put in the dollar sign and then crack it it will have a Shar from the input so I think it's good now let's go to the website and then check so in the search back I will search the bit the pit uh front let's check nice so it will lead us to another page have a that this listing related to the beach front because this this thing is the beach front category right for example I go deeper to this listing so this is the bur house by pay let's search I will say for example like uh bur so p a r l and then check nice it's still um have the um this listing fetch for us and then this listing have the title match with the we put in the input right but there's one more thing if we didn't uh add anything in the input and then we click search it will uh lead the error so in order to avoid that we need to disable the button so go to the icon button disable when the search equal to empt array okay so now go back to the website restart to the homepage again now when there's nothing in the input you cannot click the button because we already disabled okay so that is all the function for the search bar now we will add one more thing for the footer because I already see we have a nap right here and then we should have a footer at the end so in the component create a new file called footer. jaet and then rce I will import uh create a new file in the Styles so this file will say fter scss and then uh in the link below just copy paste okay I already copy and paste go to the folder we will import the scss file import. flash Styles flash FSS then inside the foto we have the class name equal to fter and then inside this we will have another div with the class name equal to footer go left inside this uh like on the left side of the footer we will have a logo with the anchor tag so it will link to the homepage right so the logo will be IMG and the source is Flash asset logo. BNG and the answer will be logo okay so uh that is the left side now we will go to the center we have a diff the class name equal to footer uncore Center so in the center of the footer we can put the link so we have A3 is a useful link so let's just add some random link so this is the list right so I have a u uh ul and then inside will be U uh Li I the first link will be business for example and the second link it can be terms and condition terms and condition and this one can be like return return and Reon uh policy right policy okay policy so here it can be about us about us just like for decoration so I will not create a Pages for this information okay I just want uh the photo for decoration to make the homepage like to make the pages l view better so for the diff of the right side we have a class name and phore right so right here we have a A3 is a contact so we will add the contact information of the pery right so have a another D with the class name you go to Foot Right Dash info no underscore info and then inside here we will have the email icon so let's import the email icon and the local phone icon as well so import you can import the location location on local phone and email icon from Material UI from here material icons that's material so right here first we can have the um the local phone right so just say local phone icon and then the BTE have the phone here so just say 2 3 4 5 6 7 8 9 okay and just duplicate this for email email and I will say uh dream n at um support.com and then after this we can have the image for the payment right so we accept all the payment method so let's add the image and the sour is asset plus payment not BNG and all is payment okay so we can add the um any information the location and any for the Facebook the social media icons you can add here like just duplicate this thing and then add more information now let's import uh the footer go to each pages and then import the footer so first I have a category I will close this so go to uh the end right here and then say footer footer component let import import foot from um do flash component and then photo I will copy paste okay this p is done okay I already import out a photo in every single pages except the login and the register page remember in login and register page doesn't have a na in Foo okay now go to our website congratulation you finished a very beautiful and complex project that you can add to your portfolio so I hope this video will improve your skill and uh give you more experience on the coding journey and then you can uh create your own account and when you log into to your own account you can go to become a host and publish your own property after you publish your own property you can go to the homepage and then like all the user uh listings or book their property it will uh lead you to the chip list and also have all the information of the WHL property list and reservation list you need to create another account and book your previous property so that is all the project we are building today and thank you so much uh for everyone watching my video and see you in the next one