Build and Deploy a Full Stack MERN Responsive Real Estate Website with Redux, JWT, Auth and more...

welcome friends today we're going to build a full stack real estate application so I can here log out just to show you how the register end login works okay so let me log in back so here I'm tapping the username password and here I am again so here we have if you want to select and let's pick here the price range here the continent and here when I click you see here how it pops up here you can see the image let's go back here to the home here we have base type of properties for you here we have three page properties Zero Mountain and one Village here we have a featured property in here newsletter and footer we can click on the feature property you see it here okay I want to show you how we can send an email to the owner of the property so here we can go to that same one click again you see here even the URL has been changed I can click here you will see how it's looking and here I can click on contact owner and here you see this is the our email here it is our username oops here it is the user email of the person that have the property and here I can write a title hello bro I want to contact you in here the description and here I can click set okay so you see here we got the email you see here from zero minutes ago okay so you see here the description in here everything so it is working we know the email is working so guys see you in development so my friends in this project you will learn in the front end you learn how to fetch data from the API that we will create complex Flex layouts we're going to you're going to learn authentication also and how to parse complex queries for the backends you will learn how to connect your backend to the mongodb authentication with Json web token phishing data from the database and image uploading and many others so I'm waiting you in development welcome again friends today we are going to develop a real estate full stack mode application it will be responsive and we are going to deploy it at the end so if you find that interesting let's go so if you have watched my videos you know the first the first part is making here the folders so here back end client and usually I have a habit of starting first with the back end as most people do so let's open the terminal let me just close the debug console and here let's CD into our backend okay we are into the back end let's initialize it with npmb init why the next part is installing the dependencies for our back end application so let's go MPI Big Crypt then course then dot gmv Express Json web token Mongoose motor and nodemon so if you don't know some of them I'm going to explain so I think you'd probably know motor and no I mean not Mon and Mongoose and j7 talk and those are more famous but motor may be confusing to you I'm going to explain it so while they are installing let me make here the index.js file and let's write here the code so let's import here Express first just let me close this terminal let's import Express then we're going to import goes so requirement goes come on mongos then I'm going to Expo import Dot gmv and I'm going to instantly invoke one of the methods from the dot CMV module which is config as you see here it pops up from the intellisense this is used for environmental variables if I don't call this function we are not going to be able to use environmental variables and if you don't know environmental variables they are just secretive information like passwords or some secret data this is for environmental variables this is how you store them then let's import course which is used for so I'm going to explain you so our backend will be on localhost Port on 5000 and our client will be on local cost Port 3000 so you see here the difference there on different ports and they would they cannot communicate if we have not installed and configured this package so that's why we need course okay after course we just need to get our application just like this and we have to do two main parts which is one part is to connect our TV so mongodb connect and the next part which is the second one is starting our server so I suggest to you my friends that we first go here to the mongodb it is going to take us through one minute Mark Zoom so here I'm going to type the email then I'm going to type my password so here I'm on the login page if you don't know so here I'm going to type my password so okay let me log in okay and here we are in come on why is that so okay so here you see this icon click on this icon here which is over which is on my mouse then here on the left side you see here projects click projects click new project here as you see and here the project name is whatever you like I'm going to name this video with State modern just like this here create project then after create project here it will show up create a database or build a database so click build a database then here on the right side here this shared starting at three then click create cluster and here the username and password you want your database to have I'm just going to write some simple username and password of course in a real application you are going to write a very hard password and a very hard username right now I write username one two three it is you know very easy in username and password for hackers to Brute Force but of course you want longer and more complex okay I'm just going to click finish and close go to databases and here you see connect and on the second row connect your application this is the last step so you just copy it and of course we can do it like this on Google dot connect and then we can paste the string but there are two parts so first it's long but the the more important part which is the main part is because this thing here is a secretive information if someone have access to this link he can do whatever whatever he wants with our database this is something that you want to avoid at all cost at all cost so here I'm going to remove this link from here from the index.js and I'm going to make a DOT EnV file here into my backend directory so you see here that's why I have installed this module and that's why I have got this function so the name of the variable will be underscore URL and I'm going to paste it but you see here with the brackets in here password Here is the place that we need to place our password so here I'm just going to copy paste it because the username is the same as my password in this case of course in a real application you never want to do this you want them to be very different and very more long uh and longer I mean you see here it's 11 characters this is not enough if you want to make a password just a tip from me I'm not a security expert but just a tip from me make it at least 20 characters or on my password very long so you cannot hug them okay enough talking here so we need to start our server usually it's a convention to to write the port number here so I'm going to write here the port numbers and here let's go so up Dot listen process.gmv.port and here we have a coping function callback function to run if it's a success so here I'm going to write console Locus here and the message server has been started successfully okay here for the Mongoose dot connect it's process dot EMV dot underscore URL enter The Single part the second parameter is the same as here in this function so it's again a callback function if it's successor here mongodb has been started successfully okay so here I can go to my package.json here and here on the scripts this object here instead of test I want here to be start and here isn't of this Echo error or something I want it to be normal index.js this is how I want it to be so I can close it like this and here I can I can write in the console mpm Run start so if it's a success we will see those two messages pop up in the console so server has been started successfully it won't DB has been started successfully but here I see a warning so I'm going to copy this line of code and paste it just to get rid of this warning so you see here right now we have no warning so we get rid of the warning okay the next part here into our backend directory is to make the folders so here we are going to have models we're going to have controllers after models and controllers we're going to have middlewares and that's it for now so usually I start with the models first as most people so just let me close here and let's go to the model so we're going to have two models one is user.js and the second one is property.js so let me first start with the user so cons Mongoose is equal to require mongoose then cons users Hema is equal to new Mongoose dots Hima and here I'm going to have a username type is going to be a string required is going to be true and then it's going to be unique of true so our username must be a type of a string we must provide a username if you want to make a specific document and it must be different than all of the usernames in the previous document that's that's how you can read those conditions here okay after the username we have an email which have literally the exact same Fields here so I can just copy paste them so they may always think it is a quart that means that you cannot create an user document not collection without the email and it must be different than the other emails in the collection then after the email went username we have a password which is again a type of a string again it's required but instead of unique because we are not going to reach unique we are going to need minimum of six characters even I'm going to put it out let's put the actually at 6 I'm not going to put that more than six usually the minimum in Array application should be in my opinion at least 12 characters at least 12 but this demo application that's why I'm going to make tactics okay and here we have a profile image Stone the profile image is type of thing and default is an empty string so it's not required we can make the quad but I'm going to leave it just like this and here I'm going to provide time stamps to true this means that timestamps true this means that when we create a user document it will have automatically assigned two Fields one is when it was created and the other one is when it was last updated so it is good to hear some bonus metadata with the timestamps to True okay then we just export it so module.exports Mongoose dot module user users hema just like this okay the next model that we have here is the property.js so here let me close the user and let's start so const mongos is equal to require Mongoose then cons property here uppercase of course a property schema is equal to new Mongoose dots hema and here we have a current owner why is this popping up this this window so a current owner which is going to be a type of rules dot types dot object ID so you know when we create a specific document by default Mongoose assign an object ID which is a unique identifier so we are going to have the type of a unit of this object ID for the current user and it is going to have a reference to the user document user collection I mean so it's going to refer back to here and of course it must be required so we are going to link every single property with its owner then the next part here is to have a title and the title is going to be a type of a string required of true and the minimum is going to be of 8 characters so you cannot have a title Which is less than 8 characters it is too short in my opinion then the next is type which is going to be again a type of a string but is going to give enum as a field which is going to be quite an interesting field you have probably not encountered it so it is basically I'm going to write it and I'm going to explain so here it's Beach mountain and Village so this means that the type is only pH or mountain or Village you cannot create a type let's say to be I don't know let's say tropical you cannot have such a type enum basically limits the type to only three options which is Beach Mountain and Village so you have only three options and it's going to be of course required to true after the type we're going to have here a description which is going to be a type of string required of true and the minimum is going to be here of 20 characters after the description here we're going to give an image of course of the property so the image is type of string and required is going to be a true after the image we're going to have a price so it's going to be a type of a number and of course the required of true after this we're going to have square meters or sq meters for short which is going to have just I forgot the the column and it's going to be again a type of a number and we must provide this field here okay then we have continent which is a type of string and required is going to be true after the continent here we have bits which is a type of a number required true and minimum of one so you cannot write less than one bit I can even make it a two let's make it minimum of two bits and lastly here we have featured which is going to be a type of a Boolean and it's going to be here uh default of false just like this and here of course I'm going to provide some stamps is equal to room and the last part as you may know is to export so mojo.export is equal to Mongoose dot module property foreign with this part the next part as you may know is the controllers so let me close the property.js and let's make here the controllers so Alt controller.js then property controlled or JS and lastly upload controller.js so the upload controller because I think that's the more interesting part so the blood controller is basically for motor this dependency here that I have installed motor is used for uploading images so that's why I'm going to have a separate controller for the motor dependency so right now you know okay let me close all of them here on the right and let's start here with the out controller so let me make the out controller variable here which is required Express dot a router then we have const user is equal to require dot slash model slash user which is our user module then we have decrypt which is used for hashing passwords and lastly there was the dependency here is Json web token or jot or JWT for short you can pronounce it as short or gwg if I have seen both of the variants so it's interchangeable okay then we are going to have a register Intel logins so let's start first with the register out controller dot post slash register endpoint it's going to be async request response right now you may ask why async web dev money and I'm going to answer back to you it's amazing because we're going to interact with a database and every single interaction with a database is a synchronous by Nature so that's why we must have here the async keyword before the before the printers is here okay and it is going here to be a try cash block and for the cash block I'm just going to write return response status of 500.json error.mesh this is for the cache block for the try block here we're going to have first available which is const is existing and here we check if we have such an email in our database so a weight user dot find one email request.body.t gmail so we check if we have already registered that particular email and if so if that is true which means that there is such an email in our database we need to throw an error so throw a new error already search on email registered so of course when you register you want to register with an email that is not yet into the database but if it's into the database we are going to throw an error then the next part is to Hash our password so I'm going to show you an example what is caching a password so let's say your password is one two three one two three the window here sheet is going to look something like this of course not exactly like this but you get the point is going to be super long and super unrecognizable and I'm going to show you so don't worry if you don't if you haven't seen a harsh password okay let's continue so here const harsh hashed password is equal to a weight bcrypt dot hash request.body.password and here the second parameter is sold you can see here the sort to be used in a connection it specifies a number if specified as a number then assault will be generated with a specific number of rounds you can read more about salts uh it's uh iterates to cryptography I think so it is out of my scope but you can read it I have read it a little bit okay then we make constitute user is equal to weight user dot create and here we spread the request.body and here we reassign one of its properties which is the password and we reassign it here with the value from the hashed password so here is the username the email and stuff so I can write it like this request.body.tml username user request.body.username but it's basically the same and much much shorter and elegant to write it like this with the three dots just to spread the object okay then the next part here is to get the password away from the new user even though even though it is hashed it is still a good practice to get rid of the password it is it is better for security if you do not return the password okay then cons token is equal to GWT DOT sign and here the ID is just going to be the new user ID just like this the second parameter is a secret so we're going to write process.gmv.gwt underscore secret and here the third parameter is an optional and I'm going to write it to show you which is here an object in here expires in and here we need to provide a string which represents at some some time what do I mean by some time let's say 5H this means 5 hours 1D this means one day I'm going to provide it at let's say 4H just to just to be long enough for that project in the last part here is today to return everything so return response status of 201 dot Json here others and token if you don't want to be others you can rename it like this with the two dots user or user data or you get the point but I'm going to leave it as others is it does not bother me so of course let's let me open here the post terminal uh not the post terminal what what I say uh the the postman not the terminal okay so here we make a post request to the old route on the register endpoint but just let me close that model but before I write in but before I write whatever it is I first need to export the old controller so let me go here too rounds and middlewares so here able to choose on the out route we're going to import the out controller and you probably see here that I use request dot body here here and here into the into this line of code so in order to have access to the request dot body we we just we cannot use it like this we need to write two middlewares in order to have access to request.body this is a very common I'm not I'm not sure if it counts as an error but a lot of beginners face this problem because they don't write those two middle ears and they try to access request.body and then they lose a lot of time debugging and doing all sorts of stuff just to find out that they need to write two lines of code and I myself was in the same exact position so it is very frustrating so let's go so if the choose if the juice express.json and then up to choose express.q radio encoded here parenthesis and here curly bases in here extended to True with those two middlewares you are going to have access to the request.body without a problem and I just see here from now that I have not used the chords I'm just going to use it from now because I may forget later and I'm going to wonder why what error I have so here you can import you can place it here or here I'm not sure I don't think there is any difference but it should be above the controllers here it should be above the controller so I'm just going to place at the top to be extra sure okay so uh let me go here to the postman and here let me have a username so username is going to be here user user one email is going to be here user1 gmail.com and then password we're going to have here a password of one two three one two three so let me click Send and let me see secret or private key must have a value I know the error why why I know why we have that error because we have used process.tmv.jwt underscore secret but we have not declared that variable here let's declare it so JWT underscore secret secret one two three of course of course of course in the real application you don't want such a simple secret you want something a lot more complex and longer this is just for demo purposes I again repeat okay so we have this and when we change here the environmental variables we want to restart our server so I'm going to click on Windows Ctrl c y here and again npm button start so our server is started successfully again let's go here to the postman and click Send already such an email registered ah yes because of the other one so right now when I click Send we're going to have it so we get everything here you see the token this is how JWT token looks like and he'll get everything but the username uh not the username but the password I'm going to actually return the password which I'm just going to return the new user just just like this here just for you my friends to see how a harsh password looks like so from one to three one two three we get this thing here right it is in my eyes and probably yours completely unrecognizable from six characters and only numeric characters we get I'm not going to count them but there are a lot of characters like probably Third characters at least okay uh let me close here the terminal again and let's make here the login so amp dot shoes or I'm not able to choose but altcontroller dot post request on the login endpoint here async request response and try cage here so for the login we are again going to make this same check here but it's going to have an opposite logic first I'm just going to copy paste here the cage the code from the cache block and let's start so here const user is equal to weight user dot find one in here again email request.body.email so I'm going to again make the same check here if we have such an email in our database and here I check if we if we have and we throw an error but in the login I'm going to do the opposite logic if we don't have here I'm going to draw an error which is going to be wrong credentials just like this here if if we have passed this condition I'm going to compare the password that we get from the requested body to the password that is from the database so here const compare path is equal to wait bcrypt dot compare request.body.password and user.password so we're going to compare those passwords and if that is a false value we're going to throw again an error with the wrong credentials like this and again the next part is the same as here so I can I'm wait I'm just here going to replace here from it was new users I want it to be others not users and let's go so here again cons token is equal to to GWT DOT sign in here again ID user dot underscore ID then process.tmv.jwt underscore secret comma and here again the expression for H I have already written this you know what what the logic then const password and the rest of the object dot orders is equal to user dot underscore Doc and then we return them I'm not explaining that thoroughly because I have already explained that same logic five minutes ago so here return responsiveness of 200 or Json here orders and password just like this here and not password but token we need to write it like this so let's try here the login so here the endpoint is login and we don't need a username we only are going to login with email and password so here I'm going to use that the username3 gmail.com and that's password let me click Send so this is working again without any errors on the first try which is good so you see here we get everything that we need and the token here if I add an extra character here you see that one at the end click Send wrong credentials which is working on the intended I remove it click again we get it back if I add an extra character here for the password you see that uppercase a let me click Send the same message so this is working as intended to work which is great so we are finished with the old controller the next part here is the property controller so close it and let me open the property controller so here I'm going to import property model so cons property is equal to require dot dot slash model slash property and then let's declare the property come to our variable which is required here Express and then dot router and parenthesis and I'm going to import a middleware a function which I have not yet created so const verify token is equal to require dot slash middlewears slash verify token so this if you don't know what is the middleware I suggest to you my friends that you stop the video and read some article for 10 minutes it is a very simple concept but I don't want to lose the time of the people here that have already watched or just know what is a middleware it is basically I'm going to tell you for 10 seconds it is basically a function that is between the request and the response so we can check for authentication authorization that kind of stuff before going to the actual function okay let me make the verify token.js file and let's start here with the middleware so we just need to import Json web token just like this is the only dependency in this file and let's declare the function cons verify token is equal to request response and next and this next is literally the next function after the middleware you see it is literally between the request and the response and if I don't call next I'm not going to go to the function that you have got so here usually people I'm just going to get the token here usually people store it here this is the request here this is a request.body request.headers here people usually store it in the request.headers and here you see authorization here better space and the token here I'm going to copy paste the and replace the old token from another project and here better space and a token so if I want to access it I'm going to access it like this request dot headers dot authorization so here headers and authorization this is how you access it and here I'm going to check if we don't have it I'm going to return response authority.json here message not authorized no token then if we have request of headers.authorization and request.heathers.authorization Dot starts with this starts with is a JavaScript by default function it is literally doing what is it thinks if that thing starts with better and don't forget the space or better end space here we're going to go to this if block so here cons token is equal to request.headers.authorization dot split and we split by space so we get here an array with the oops with the better and the token use that long thing so I want to get a token how I can get the token I need to access the second element and how you access the signaturement you get it by the first index so I want to get the first index which is the token itself and then I'm going to use json.verify methods to place the token here as the first parameter then the second parameter here is processs.tmv.gwt underscore secret and then I get a third parameter which is a parenthesis here with the two with the error and data so if error is true I'm going to return response.403.json here message wrong or expert token else we have no error which is good this means that we have nothing we have no we have no error not nothing so let's continue request the user is equal to data and this data here is this is literally this thing here so this is literally the data that we are getting literally so I can even cope with what I did so I can just copy paste it just I mean it's the same okay and of course then we call the next so the next is literally the function that is after the verify token so suppose just an example I have the verify token here the next in this context is literally this function oops come on it's literally this selected function literally the next is the next okay let me remove it because of course I'm not going to have a token when I log in I'm going to create a token when I log in not to win before I log in okay in the last part here is to export to module.export is equal to verify toe can just like this okay so we have everything that we need to start the property controller so let's go so we're going to here first get all properties then get featured then get all from a specific type after this we're going to have get counts of types so example I'm going to show you so we're going to get an object but let's say with beach properties of two then Village of five and mountain of 12. that's how it's going to look the result then get individual property then create on a state offer I mean offer not a state so create an offer or I said I'm going to put just on the state then update estate and then the last here is delete so delete state okay first let's start here with the ghetto so propertycontroller dot kit slash get o this is the end point it's going to async request response and the try catch so again for the catch block I have return response status of 500.json error.mich and here for the try block const properties is equal to a weight property dot find in here we get all of them and then we return them so it's not a complex function as you see here it's pretty simple in my opinion we just Fetch and return and here it's property not property so the name of the model is property okay then here we have get featured so propertycontroller dot get slash find slash featured in here async request response again a narrow function again a track Edge again let's copy paste the code from the catch block and for the time we have here cons featured properties is equal to a weight probe property dot find in here let's return with the everything which have the feature true and let's populate the current owner and remove the password so this thing here is strange I'm going to explain it right now so do you remember this thing here current owner type mugus.tab.objectag when I navigate here this is the object ID this is what we're going to store this is it so we're going to start I'm just going to copy paste just for you to have a better imagination so this is literally what we're going to store here some object ID from some user and when we populated instead of the ID we get back the data so from the ID we get back everything so just like this this is what populate this and of course the minus password means give me the current owner from its ID but remove the password field that's why it's minus password of course we don't it's very bad for security reasons to get the passwords for from under from another person even though it is Harsh it's still very very bad for security reasons I cannot stress that enough then then we return so return status of Json feature properties just like this then we have get all from a specific type so it's going to be again property Contour dot get request and here is going to be just fine here async request response track cage here wow I have used square brackets not curly braces oops mistakes happen I'm just going to fix it so here he fixed okay uh here for the catch block we have the same code so I'm just going to copy paste it in here for the time we are going to have here constant is equal to request dot query so if you wonder what this request dot query we're going to have it like this so we are on the property route and here it is slash fine so here we have slash find on the endpoint in here let's say that I want to get every property which is a type of a beach so I do a question mark type is equal to beach this is what a query means this is how it looks so you have an idea and it's going to be an object so this is going to look like type is going to be let's say a beach this car is going to look so a key value pair an object as you see here I'm going to leave it just for you my friends and here if we have a type here we're going to return the property we're going to get the property so const properties is equal to weight property dot find type dot populate again current owner in here minus password so if we have a type of return it so return response status of 200.json properties else I'm going to return turns phone stops 500.json here no search type just like this okay get count of types let's let's go so here it's again find slash types here async request response again a try catch let me copy this here for the cache and here for the time we have here const Beach type is equal to a weight property dot count documents in here type is going to be a beach this is let's say better for performance even though our application is small it's have almost no importance but of course for a big application that's very important the performance of your application so I I have heard from better developers than myself.com documents is a better way compared to something that you have probably thought of so find and then dot length you can do it like this but let's stick to good practices this is better I'm just going to copy paste this two more times and here it's gone Mountain type and here the pack is going to be mounted and the last type here is Village type so here type is equal to Village and here oops we return response starts of 200.json here in here we have beach beach type then we have Mountain type in here Village type amid Village in here Village type as the value so the response looks like this we have the beach and then the beach type Mountain Mount type and village Village type okay so if a last git request because we have several kit requests for for now we have last one so it is the get individual property or here I think it's better done is to to call them property rather than a state I'll add property more so let's go here property controller dot get here slash find slash ID async request response a try cage in here again the cage code and for the time we have const property is equal to weight property dot find request.params.id dot populate current owner again without the password if we don't have a property we're going to to throw new error no search property with this ID else we have such a property so we're returning so return response so 200.json here property just like this and here it's going to be to be the function that we are going to use this middleware that you saw here as I have not just I have not yet used this but right now I'm going to use it for the create create a property not on create a property okay so here is going to propertycontroller dot Post in here a slash and here we have the verify token async request response so literally it sits in the middle of the request in the response that's why it's called a middleware in here the track Edge again I'm going to copy here the cache code and here for the try const new property is equal to a weight property dot create we spread the request of body rest like this and here for the current owner is request.user.id so you remember here from the middleware this is the data little this is the data and we reassign it to request.user so if you want to get access to the ID we need to do request.user.tig to get to get access to read the user ID so we do it and we store it like this pretty convenient way in my opinion and then return response status of photo of 201.json new proper to the update property so propertycontroller dot pot request this time ID here verify token async request response in here try catch editor response status just like this in here for the try code we go cons property is equal to 08 property dot find by ID request parameter and again we pop we don't populate it right now or do we no we don't okay in here property owner if the property dot current owner is not equal to the request.user.id here I'm going to throw new error you are not allowed to update other people's other people's come on other people properties just like this else const updated property is equal to now weight property dot find by ID and update and here the first parameter is I'm just going to make to several lines so requisite params dot ID the first parameter is the ID the second one is what we are going to update so we're just going to take the whole requested body and update it and then new to true if you wonder what nutrium is so if we don't have this new tree if I delete it it's too long to be updated but it is going to return the document before it was updated so it is going to update it but it's going to return before it was updated it's kind of confusing I know that's why I always put this news through because when you update something and you want to read this thing you want to get after it was updated not before I know okay enough talking the last part here is to return sponsors of 200.json updated property okay and here I see I have one last request which is the delete property so let's go propertycontroller dot delete slash here ID again I'm going to need the verify token async request response a try cage and here let me copy again this and let's go so here cons property is equal to await property dot find pi ID request of params.id then if property dot owner is not current owner not owner but current owner is not equal to the request or chooser.id here through new error you are not allowed to delete other people as properties else we're going to just do a weight property dot delete this is how you can delete a document and then return response address of 200.json here message successfully deleted property just like this so the last part is to export here the property controller and to import it here so it's going to be on the property around if you want to import the proper T controller nice so of course the next part here is to create some properties and use all of those functions here so I'm just going to be here just to see what Fields I am required to type so title type description okay right now we're not going to have image uploading so I'm just going to type some random string for the image later in the front end we are going to have this we're going to have image uploading so don't worry about this specific functionality so let's go here to the postman it is slash property just it is already a post request let's go to the request.body and here first we need a title so the title is going to be Pro party one then I have a description which is going to be property one description it's here then I have a type so here I have a type which is going to be a beach then I hear from the image which is going to be just some random string as I told you earlier which I'm just going to write this after the image here I have a price square meter so okay so here price is going to be here let's say 100 000 dollars or whatever currency currency it is it doesn't matter so so 100 000 yes it's one hundred thousand we have here square meters so for square meters we're going to have let's say let's say 100 square meters for the continent here we're going to have let's say Europe then after the continent once we have required which is only bad so beats it but that's three of course the price you see here it should be not a string it should be a number and here the same for the square meters it should be not a string but a number okay we have written all of the properties here let's click on send and to get it from the first time from the first try so you see here the current owner let me just copy this user ID let me go here to the mongodb browse collections and here the users collection and let me paste it so here you see here this is from the middleware this is how we we store it so you see the ID of user3 and when I go to properties you see here the object ID and property itself have its own object ID but the current owner object ID refers to that user so you see how it's working okay let's try them one by one I'm just going to create two more properties just so we have something so here property two property through the price is going to be let's say 200 000 the square meters 200. so click Send and let's make property three property three three hundred thousand and three hundred meters again I'm going to create into history properties to work with so go back to the vs code what they did come on go back to the vs code and here what we should try first let's try here get all so here slash get o which is uh let me go here this here let me write click Send error ah it should be a get request notable so change it here to get click Send and to get an array of three objects which is working on the internet we have three we have created three properties and two of them you see here they have different ID here so you see here it ends with six CD here with 6 CF but the current owner ID is the same here you see it is literally the same okay we're going to try then the uh find featured but we have not made a feature so here I'm just going to change this property one from false true and I'm going to update it just directly from the database so we get something back so let me copy paste this here and let's go to the postman and let's go click Send and do we get back this yes we gave this a featured straw and here is how appropriate object it looks like it's literally the the user so you see how cool it looks I like it a lot okay what else do we have to try so we have here to find a specific type so here we have find question mark here and what was the type here Beach so type is going to be go to beach click Send and yes I expected this we get the three of the three properties back because all of them are the type of beach that's why we get them so here you see type of beach type of Beach and here type of beach so this working again as intended then here we get the get Council properties we need to get Beach Tree Village of zero and mountain of zero if it's a correct so let me copy this let me paste it oops I'm just going to do it like this slash types and let's click Send so you see here Beach three Mountain zero will be zero so as I told you this is working correctly when we get the git individual so I can go here to the database and let me get an individual so here I'm going to copy what was find slash okay we have find slash and here the object ID here click Send uh what let's click this again parameter filter okay let me see what is the problem so here it's a get slash find with the ID here and it should be I find one here so find one but is that the problem so parameter filter to find but got a request or parameters what did I copy here paste again wow what's the problem let me see it so parameter footer to find one must be an object but got ah it should be fine by IG come on that's a silly mistake so it should be fine by ID right now it should work it must work okay so we get it back it should be fined by ID okay we have tried to create a property sorry we can go directly into the updated property so a put request here I'm going to remove this find and let's update it so here I'm going to make the title to 3333 I'm just going to put a lot of trees here and you're going to see that is updated so click Send you're not allowed to beat other people properties wow wow interesting so here if it's not equal uh I'm going to console log them because I'm very curious how are their nautical I think they should be equal so if I make the request click ah I have encountered this thing here you see they are the same two eight CCB 280cb but this is a new object ID this is just a string so here I need to make I'm going to make both of them to string and whoops come on just like this here and we are going to get rid of the errors so right now we are going to update so click Send and to see here the title is obviously updated so you you probably see it okay so the update works as expected and we can let me go ahead to the Token I want to show you so let's remove this last letter and when I click Send right now we get a wrong correct spot token this is directly from the middleware so where so this is the message here wrong or expand token nice and leave me on the back so right now when I click when I go when I make the delete request right now you should delete so click Send you are not allowed to arm it's the same mistake with the the update so I need to make it again to string so just let me copy and let me paste it just like this and let me try to delete it so click Send successfully delete property so we deleted this property here the tree so let me refresh it and right now we are going to see that is nowhere to be found so we have only two properties property property trigger property two I have deleted property one my bad I have deleted property one it is with the ID here let me see it so when I copy the ID here you can see that it's nowhere to be found no zero results so I have deleted the specific property okay this is working as well the last controller is the upload controller so I can close it here and let's go here to the upload controller so not the property but the upload so we import the motor dependencies or require motor in here const upload controller is equal to require Express in here dot another just like this here here con storage is equal to motor disk storage and here destination so if you don't know what I'm writing just check that no I'm going to explain to you actually don't check that you can check it of course you can check it but I'm going to explain it so you have bonus explanation so here that we have two functions to write the destination which I'm currently writing is where our file will be saved so here I'm going to get just the parameters request file and TB and here an arrow function so I'm going to use a CB and the first parameter is no this is for the error you see here CB and here we get error we have no error but the destination here it should be it must be a string so here this thing is going to be public slash images into the web dev money and what are you doing we have no public images right we have middlewares we have controllers middlewares models in here notes underscore modules of course let's create so here public and here images that's how we are going to do it so we have created it so when we haven't when we send an image it's going to be saved exactly here if we send it to motor and here the file name which is the other interesting function so again requests file and TB on their own function which is CB again no for the error and the file name will be request.body.phonium so whatever the file name is in the request.bully so we specify where and to what will be the name so I'm going to make a comment above for you to write to read again so destination where the image will be saved in which directory found him what will be the name of the image of the saved image okay so this is it for the storage then we have const upload and it's equal to motor parenthesis curly braces upload uh storage here is from the documentation storage and here we have named this constant storage so you know es6 syntax we can do it just like this it is the same storage or storage it is the same okay then the next part is here uploadcontroller dot pause here on the endpoint of image and here upload single Dot not DOT I mean approach dot single image here inside so this upload dot single image I'm going to write is going to check in the requests.body folder request dot body dot image so it must be the same as here if that was let's say image it must be here the same there must be identical here if you want it to work of course and then we have async request response here a try cage here for the cage we have console.error here error and for the right here it's return response status of 200.json file uploaded successfully and of course let me export it I mean I have ex yes we need to export it the model.export is upload controller and let me import it up to choose slash upload approach controller so I'm going to use it when we make the front end which is right now we are finished with the back end so let's go here to the front end so let me close it here just like this and let's open a new terminal and go City client and MPX create react up into dot so we are into the clan directory which means that our react application will be initialized in our client directory so click enter and it will be initialized okay our react application has been successfully initialized so let's install our dependencies so in PMI react icons react Redux react router Dom and Redux persist and redox JS slash toolkit so this will be our dependencies for that application so click enter And while they are installing I'm just going to close the terminal go to the client source and here I'm going to make the components folder and you have may noticed we have an access folder usually you don't have an assets folder just like this I have got some images while the application was initializing so you can get those images freely you can go to my GitHub here with the Mania GitHub and you can go here so you see you can just click here client source and assets and you can get the images and you can install them I personally use one website for it but you can install them manually just like this okay so uh for the components here I'm going to create several folders so let's start here we are going to have featured properties then I'm going to have footer then I'm going to hit hero then I'm going to shift navbar newsletter popular properties after it we're going to have just properties property detail and we have two more left which is sign signing and turn up just like this okay let me remove those boilerplate files that I personally never use and I don't need so I'm selecting all those five click delete and here I'm going to remove this code from here and here into the app.js I'm going to remove this here just like this and here the logo and here into the app.css I'm going to write some default styling so just let me remove this and I'm going to Target everything this is done by the asterisks as you see here so here I'm going to unbox sizing converter box then margin of zero padding of zero font family will be come on font family will be your bottom Indian Sun City so you probably know that Roboto is not coming from CSS by default so don't worry the process takes several seconds so we can go here to Google font and here let me click on Google fonts and to see later just let me close this so when you go to the fonts.go.com literally the first font that pops up here is the Roboto so you click here and here you have different boldness you see here select medium 500 500 italic about 700 700 italic and so on and so on so you can select them like this you can unselect them if you don't want and then why when you select several you can go here on the top right and here you see view selected families you click here in here you just copy this go here to the public so public index.html and here just paste what you have copied this is what we have copied so right now the robot font will work okay let me close this and here just let me okay and here for every single folder that I have created into the components I'm going to create here a j6 and the CSS file so here featured properties.jsx nfce right now if you want the web dev Mania what is that NFC that they have done just like this this thing here it's an extension here es7 you are going to see just a second if you react yes and not this one but yes this one this one this with the seven plus million downloads so you see es7 plus react reduct react native Snippets this is it so just those with the plus seven million downloads and install it it's going to save a lot of time okay then after the j6 we have a CSS also featured properties Dot module.css I'm going to use CSS modules which are basically running what CSS so don't worry if you don't know them it is basically for your CSS like 95 plus 21 CSS okay and here we have the footer.jsx LFC footer.mojo.css let me import here The Styling sheet so import classes from course dot slash okay then here for the Heron so hero.j6 jsx come on hero j6 here again NFC hero.modu.css import classes from dot slash here model.cs hero.mov.css then navbar Dot jsx nfce nav par dot module.css let me import again the CSS and I'm going to do this as you see for every single folder inside the components so the next one is newsletter so news letter.jsx LFC use letters of mojo.css again come on import classes from code.slash like this then popular properties dot j6 LFC popular properties.muru.css and let's import it again as you see here again the same procedure and we have four more left so properties.jsx NFC properties.motor.css import the selling sheets and we have three left so we are almost done so the next one is the property details of property detail.j6 LFC property detail Dot module.css so import classes from code to flash and we have two more left so we are almost ready so sign up Dot jsx lfce foreign import classes from code slash and we have one last left so line of j6 lfce signup Dot module.css and import import classes from code slash sum we have created every single file that we need let's go to the up.jss here up.js and here let's make the routing this is the final part that is like the you know the part before writing the actual code so here in the index.js actually before doing anything into the index.js import browser router from react outer Dom so we import it and we paste it here so we must set up our whole application with the browser router in order to have access to the react outer Dom okay right now here inside I'm going to make routes just like this here and decide we're going to have individual routes so route and here on the home part interactive here an element just like this we're going to have in total let me see so one two three four we're going to see how many pages because I can I mean I cannot see that that well from the screen so here we have the home part then the sign up sign in after the sign in you have properties then we have Pro per T detail slash ID and those are so we have a total five pages as you see here so for the home part here I'm going to do it like this so here I'm importing now but at the top footer at the bottom and below I mean not below but uh between them I'm going to have hero then popular properties then featured properties oops and then I won't give newsletter and of course they should be wrapped here into a react fragment to get rid of the error they must have a common parent element of course you can make them in one component but I did it like this and I'm going to stick probably it's not the best practice but I done it like this so yes here the sign up it's important here to sign up then the sign in then we have the properties so here again I'm going to make a react fragment like the home and I'm going to do it you are going to see how so here again are the topmost I'm going to have enough bar then between I'm going to have properties and then below I'm going to a footer so like this I can't even space them if you feel like you know it's like this okay and here the property details so the property detail is going to be again with the react fragment just like this here and we have the nav bar at the topmost then property detail and Below we have the footer so we have the sign up and the sign in I'm just going to copy paste them build one here below on the bottom most and here those are our three pages here like if we exclude those two those are our three main pages so at home the properties in the property details so you see how I did and of course I usually start with the nav bar so let me go here to now bar and let's start typing the code so here just let me close everything like close to the right come on okay so here class name is going to be classes dot container then excitement of classes of trapper in here I'm going to have a left side a right tight enter just classes of lift Center enter right side so we have three sides and here for the left side I am not going to give a div but I'm going to have a react outer Dome link so let's import it from import link from react router Dom like this and it's going to navigate us back to the home page n is going to be with the texturial state and here this icon BS house door just like this here and here import from react icons BS just like this then for the center side it's not going to be diff it's going to be here a UA also unordered list and we're going to have here a y so a y with a class name of list item and in total we're going to get 4 a y so if you want to write it shorter you can do it like this so just click enter and to see voila we have four a y here it's going to be home about featured in here contacts so it also for the list item and here for the right side we are going to have uh two links here which are going to be here for the sign up in the under one for the sign in so I'm they're both going to give a two attribute and it's going to be here sign up and Below of course we want to be signed in just like this here okay so let me start our react application so CG client npm run style and while it's starting I'm going to split the screen just like this for you my friends to see what I am styling okay so it's almost instantaneously started let me just see what we have command loading loading okay you see what we have here so we have a lot of things to style okay so here dot container is going to be position sticky top of zero left of zero height of 60 pixel width of 100 percent the index is going to be 9999 then below this background score of FFF and here border bottom of 1 pixel solid 888 then dot dot wrapper is going to have here marks with of 100 and 1100 actually 1108 pixel margin of zero Auto so it's going to be centered then height of 100 percent the speed of flex justify content of space between align items of Center you probably see how type how fast I type is not because I'm super human is because there are some abbreviations you see AIC is equal for Align item Center so AIC click enter alignment center for justify content space between it was J C S B you see from J csb just five content space between okay so this is a trick that could save you a lot of time and then below we have a padding so padding 0.25 on top and bottom and 1.5 on the left and right so click enter and we have the padding so we can see how it's ringing okay we still have to start with a little bit but but we are going to do it class Name by class name don't worry okay then after the wrapper here I'm going to start here the left side which is going to have text decoration of none font size of 26 pixel font weight of both display of flex online items of Center gap of 0.5 irm and here core of 3 5 1 2 D1 and here it's three not two so just like this then we have the Dot Center which is a display of flex justify content of Center align items of center cap of 1.25 RM then this style of known to get rid of that default dots below the list type of then we have cursor of pointer and font size of 18 pixel okay so you see how right now it's looking okay we are getting closer and closer to the final look of the navbar let's continue here below the center we are going to Target here the list item so the list items are going to give a Call of Duty so not like 100 black but it's going to be close to four black it's going to be let's say a little bit softer in here a transition of 100 in 50 milliseconds or is in out and here of course a hover effects so our effect is going to be chord of 555 so it's a grayish color then after the hour effect here we're going to install the right side which is going to be a display Flex align terms of Center and justify content of Center so here let me see how it's looking okay and of course we should have guppy set of justify content of Center so I forgot the Gap remove the Justified content of Center and add a gap of one 0.75 mm after the right side we're going to have here the first shot so like this you can it's an anchor tag or you see here it's a link but behind the scenes it's an anchor tag so you can style it like this so here it's going to have a padding of 0.4 iron on top of the bottom and one point two on left and right then background color of two five zero zero AC then color of white border one pixel solid transparent border radius to pixel from size of 18. cursor of pointer in transition of 150 milliseconds so and let me copy and let's make the power effect before making the hard effect I want to see how it's looking okay I think I forgot to put the text decoration of none okay it's here and here let me make the power effect so it's baller color of 2 5 0 0 AC then cover off again the same color so 250 AC and then the background code is going to be a white cover so when I have on it you are going to see how the course are changed so it's a good effect okay let me start here the second chart so don't write in here a and chart two it's going to be a cover of again this two five or AC and here font size of 18 pixel and cursor of pointer just like this here so you see how it's looking and again I want to get rid of the text decorations done okay and this is it for the number the next here as I see is the hero section so let me go here to the hero section and let's start typing here the code so let's close it in here let's start so here class name is going to be classes dot container then dot classes then H2 with the text of let me find your dream place right now below the H2 we have an H5 which is going to be here search the best selection of luxury real estate and below the H5 we are going to have a diff with a class name of options just like this here and inside we're going to have three select elements so select here and it is going to be here first an option with the disabled oops so I can so I need to right click this so here it's going to be first it's going to be the same mode and here the text is going to be select just enough here the closing tag and here the text will be select type just like this then below I'm going to have three options so I can copy paste we are going to have here three options for this select here below and here the value is going to be each here the bar is going to be mountain and the third I mean the fourth option here the final one is going to have the value of Village here the text is going to be Beach uppercase then Mountain uppercase and you probably guessed it Village uppercase this is for the first select then we are going to have another select which is going to be here for the numbers the price range so here the first option again is going to be here disabled just to show some text come on what I'm doing here wait okay so here disabled and here the text is going to be select price range below this option here we're going to have a value of zero I'm just going to paste it again so we're going to have six options and one of them is disabled so here are five options with value so here 0 1 2 3 4. here the first inch is from 0 to 100 000 the second one is from one hundred thousand to two hundred thousand then from two hundred thousand to three hundred thousand then we've guessed it from three hundred thousand to four hundred thousand and finally from four hundred thousand to Five Hundred K just like this into the final select here is going to be here for the continents so here just again select let me remove this from here and again First Option here is going to be disabled so I can just copy paste here the disabled and here the text is going to be select continent below the options here I'm going to list every single continent except Antarctica because I'm going to be surprised if someone in the world wants to go as a tourist in an Antarctica like if you want to be in minus I don't know how many degrees okay so here valve is going to be zero here is going to be first Europe and I'm just going to copy paste it so I'm going to keep here one two three four five here after Europe is going to be Asia Africa after Africa South America then North America and finally Oceania okay let's let me create here the state to to for those selects so here above cons type set type is going to be a default value of beach like this then const consonant set continent is going to be a default value of zero so it's going to be Europe as you see here it's a value of zero and here we're going to keep of course the price range set price range is equal to use state of zero and here I'm going to give a function of Kindle search which is which would go on to yet create but later because right now we don't have uh the page that we need okay so here of course I need a non-change so I can scroll down so here on change is taking an event and here set time to event to Target dot value I'm going to copy paste the event here and paste it for the other select here and set here of set type is going to be set price range and here is going to be set continent okay let me whoops not here but here let me see how it's looking okay of course we need to style it so we can go here to the timing sheets I'm going to split the screen to see for you guys to see what I'm selling it let's go so here dot container is going to be height calc 100 VH minus 6 pixel then with a 100 percent then background image URL images I mean assets slash estate or jpeg then back sizes background size is going to be covered then background color is going to be here LGB of zero zero zero zero point four and lastly background background blend mode is going to be darkened so you are going to see how it's looking right now and this is because of those two values if I comment them you see how it's light but right now it's darker and I like it a lot when it's like this okay then dot wrapper is going to have again a Max width of 118 pixel the margin of zero Auto then height of 100 display of flex Flex direction of common then align items to Center and justify content of Center so you see how it is here is exactly on the center after this here we're going to have the wrapper the H2 so the H2 is going to be a font size of 46 pixel then front weight of both core of white white space of an orap and then margin bottom of 2.5 mm then after the H2 we're going to sell the H5 which is going to have a quarter of e f e f e f which is a slightly grayish color like almost white but it's not white and then font size of 36 pixel and margin bottom of 3 irm so right now you see how it's looking okay then the next part is going to be the option so we're going to start the this container here this diff so don't trapper in here the options are going to receive here a width of 70 percent background color of white then padding of 1.25 item on top at bottom and 1.5 on left and right then board the radius of 20 pixel display of flex justify content of space around and lastly online items of Center okay so see how it is then dot wrapper we're going to go to to to select the select element I know it sounds weird but we're going to select the select element so it's going to receive here height of fourth pixel mean width of 106 pixel and Max width of 200 pixel then border of none outline of none paradink of 0.25 on top and bottom and 0.75 on left hand right then cover is going to be white background color is going to be just the blue like this after them I'm going to apply border radius of 12 pixel font size of 80 pixel and lastly here a cursor of pointer so you see wait where there's not ah because it should be a wrapper then dot options and then the select so right now they're going to be start okay you see how are they looking nice but I see one thing that is missing here I forgot to type it which is the icon so let me go back here it is just one thing so below the last select element we have ai outline search and here the class name is going to be classes dot search icon so I'm just going to copy it and import so important AI outline search from react icons AI okay right now you see how it's looking we're going to style it no worries my brothers okay let's continue here so dot options in here select first shout the cover is just white color but wait here I applied white color I don't need this so I can do it like this then just let me scroll it like this in here dot options here the search icon is going to be here particle 0.6 RM with the fourth pixel height of 4 pixel border radius of six percent and here I'm going to have a background core of gradient I'm going to type it but it's going to be quite long you can go to the GitHub I mean I even recommend you to copy it but for those who don't want to copy let me type it so here we're going to have 90 degrees then RGB of of 7 3 73 then we are going to have zero percent comma RGB 14 14 132 then 35 percent again a comma RGB I'm going to even make it I don't know like this here for you guys right now RGB 32 97 219 and here lastly 100 so you see here I'm going to again split the screen and you are going to see how it's looking okay but of course I want a few here just test it and close it and here few I want it to be white so right now the cover because that's an SVG that's why you need to apply fuel in instead of cover and then cursor of pointer of course in here do I have no uh wait no okay so this is yes for the search icon it's looking nice so you see here how it is you can select as you want and we are saving here the state okay the kind of search I'm going to apply it when I create the properties page so right now I'm not going to touch it what else do we need here so popular properties okay so for the popular properties here let me go here uh popular properties here so here we have class name is going to be here classes.container then classes dot wrapper and here I'm going to have classes dot titles here the diff in here on H5 with the different types of properties and Below I'm going to keep an H2 with the best type of properties for you below the diff of tight with the classroom of titles I'm going to diff with the classroom of properties which is going to have three links so here link is going to be two template string slash properties slash I mean no search but question mark type is going to be Beach then content is going to be here at zero and then it's going to be up one percent price range of one so right now the type here is going to be Beach but those two values I have written it arbitrarily you can write them one or two you're going to see what do I mean I know you may feel confused don't worry I have I have tried this application before making the video so I know it's working don't worry and here important link from react router Dom in here inside this link here I'm going to give here an image with the source of image one below that image I'm going to give here a diff with the classroom of quantity and here 34 properties and here this source of image one not just one and below that the diff with the quantity I'm going to have an H5 with the beach properties just like this here and we're going to fetch this don't worry so let me import those images so here uh import image from dot dot slash asset slash here and in this area State Beach then image 2 image 3 and here it is real estate mountain and here it is a state country site okay so I'm just going to copy paste those things two more times in here instead of beach it is Mountain properties in here instead of source source one is going to be so image two here property is going to be type of mountain and here is going to be an image tree village properties and here type is going to be a village just take this here but of course this here is static I want to fetch from our database so let's go but you may know that when you fetch the the fetch API when you fetch you write a lot of code I mean it takes a lot of your viewport so I have created I'm going to make here into the source YouTube so let me go here to the GitHub so web dev Mania here repositories and I'm going to show you what do I mean I'm going to show you one function that they have created myself I'm sure they're probably a lot of like my function in the internet but I have created that myself okay so let me make here uh let me see choose the furnace of oops so here it's going to be into YouTube Fetch api.js and copy paste it so you are seeing what is it so here is a get post button delete so it's basically an abstraction so instead of writing code that code here is going to be much much better so I'm going to show right now first we need set of course so here we're going to have a count uh num properties set num properties is going to be an object and here oops not only but object in here use effect is going to be here just like this and here the name of the function is going to be fetch number properties of course an async function and a track H here because it's async function here console.error error dot mesh and here for a try I'm going to show you so here comes data is equal to a weight fetch and here I mean request because here the function is called here request as you see here so request and here just let me see here from our server so backend controllers property controller and here where you yes this one I want to try this one so it's so quotes property slash fine slash types and here do we need to provide something else yes here it's a get request just this here you see here I'm getting the response and then I make response to Json so I get basically the data so you see what is it if you if you're confused you can stop the video and see what this function is but I think it's kind of simple it's just the four HTTP requests here and yeah and here I have written a comment why I'm doing this so if you feel not confused okay and here let me save this data here but actually before saving it I want to just to console log it to see what is happening and here let me do let me uh code a function so inspect console and here an object with the beach two mountain zero Village zero nice so here instead of just this here I can do it like some num properties in here Beach and question mark before because at the beginning is going to be an empty object and we could have an error uh here it's going to be mounting and here is going to be Village so right now just let me close it and if I scroll down you see here beach properties why it's not showing here it's probably because it's too big okay we're going to start and we're going to see how it is so it was here the CSS okay so let's walk here to the popular properties let me split the screen here again and let's start styling so here dot container is going to have a mean height of 100 VH Max height of 100 then width of 100 and margin top of 10 RM so then dot a wrapper is going to have Max width of 118 pixel height of 100 and margin of zero Auto after the wrapper we target the titles which are going to have display of flex align items of Center Flex direction of column and then gap of 0.5 Peak irm then dot titles and three Target the H5 which is going to have here a core of 777 then font size of 18 pixel and front weight of 500 then dot titles and we target the H2 inside which is going to have a core of 333 and font size of 28 pixel okay then we're gonna get the dot properties which are going to have here margin top of three item display of flex Flex wrap or flap and then grid gap of 3 RM after dot properties here I'm going to Target dot property but before this I want to see how we are with the stylings so how it's looking oh of course we need to Target the images we are going to soon Target the images don't worry let's let me continue here so that property is going to have a width of 30 percent position is going to be a relative because we are going to absolutely Center this quantity here as you see then transform is going to be rotate minus one degree after this border radius is going to be here 10 pixel 50 pixel 10 pixel and 50 pixel again after the Border radius here I'm going to have some box Shadow I'm just going to go straight to my GitHub here and copy paste it instead of writing this myself because it's kind of long so here components popular properties popular properties those module and here you see on the dot property I'm just going to copy paste here the Box Shadow here so copy paste it here it is the Box Channel and then here the execulation is going to be of none and lastly for the property transition of 150 milliseconds oh after dot property here I'm going to make the hover effect so dot property cover is going to have transform or rotate of zero here is -1 degrees here it's just zero okay and then and finally I'm going to Target damage so dot properties dot property just property and here the image inside the image inside is going to be a position of relative as well height of height of 400 pixel with a 100 object fit of cover border radius of 10 pixel 50 pixel 10 pixel 50 pixel then transform of rotate -1 degree transition of 150 milliseconds or and here again cursor of pointer the hover effect here dot property in here the image is going to have again a transform of rotate zero for the high effect okay then dot property but before doing the dot property I'm just going to see how we are with it so here here the image has still not been styled wait very fresh here because I have probably not targeted correctly let me see uh it should be here properties I mean here the link itself here the links should have the property class name so here class name is going to be classes dot property for the links here right now it should be oh right now okay you see how it is in here when I hover you see the effect that I made okay let's continue here so after this we are going to Target here dot property the image site but we're going to make the before the before saved element so here content is an interesting we must provide here a Content even though it's an instinct position absolute here then top of zero left of zero background color of 555 height of 100 percent then then let's continue we're going to have property H5 which is going to be margin left of one item margin top of one item font size of 22 pixel core of 333 and takes a line of Center so you see how it is okay after the H5 here I'm going to Target here dot property and the quantity but before doing this this save the element why I have written it if I remove it would I have any difference just let me make your regular braces yes I'm going to remove the third element I don't need it I think yes okay here for the quantity position is going to be absolute then bottom of five I am left of 2 irm color is going to be a white after the core white font size of 20 pixel background code of harsh core so zero three zero three c e then padding of 0.4 on top and bottom and 1.2 on safety right then border radius of 20 pixel transform rotate of minus 1 degree in transition of 150 milliseconds so and here property when the when we hold on the property I want to change the quantity transform rotate of zero so you see right now but I don't understand why this doesn't appear so no properties wait let me if I'm wait so I'm going to console it console log these known properties ah here I have not saved it so here wow such a silly mistake so right direction to work yes right now it's working wow okay so this is actually for the popular properties the next one as you see here is the featured properties so for the featured properties here let me close the popular properties in here for the featured properties let's go here so we're going to take care a class name is going to be classes dot container then we're going to have glasses.trapper after the classes of Trapper we're going to have a diff with the class name of titles so first on H5 with a properties you may like this is the text and the H2 is going to have the text of our featured properties just take this below the diff of with a classroom of titles I'm going to have here a diff with the class name of featured properties so here inside I'm going to map through the featured properties but of course to map through them I need to get them so I need to make an API call so here let's first make the state with the featured properties and set featured properties is equal to U State on mtra then use effects here is going to be like this so use effect and the function will be with the name const fetch featured so again an async function until I catch here for the catch you know console dot error error.message and for the try block here I'm going to get const data and I'm going to open this file to be able to import a weight to you open to request so this here so request and here slash property slash find slash featured and then get okay and then set featured property with the data just like this and of course we need to call it so let me call it okay and then here let me go back to the feature properties div so here featured properties dot map here featured prop or just property I'm going to name it's a property and here an instant return with those parentheses here and let's go so here I'm going to have a diff with the class name of featured property which is going to have as well a key because you know when you map through something like we must have a key here like this inside first I'm going to give a link here so link is going to navigate us to the details of the page so property detail slash here uh property dot underscore ID like this here and the name is going to be here classes dot image container so let me import this thing here so import link from react router Dom and inside this link here I'm going to have here an image with the source here of HTTP HTTP colon slash as localhost 5000 slash Images slash property dot image so you should probably wonder web dev Mania what is this wild syntax that I'm going to tell you instantly so here into the index.js here you know here we need to get somehow those images and we can do it with static with serving those images so here I have to choose here on the in on the route of images here is going to be expressed the static who's what happened here public slash images so you see it here so to access it it should be like this or here HTTP colon localhost 5000 slash the name of this here which in our case images if that was let's say files it must be here files I repeat it must be here files or I mean the same here as the first parameter and I'm going to revert it back and hear the the name of the image here like this so we have yet to do this so right now I'm going to import a static image and after this featured properties I'm going to make it so don't worry so import image from.net.asset slash state so I'm just going to copy paste it just like this here and here I'm going to provide a name to your tag okay below that link here I'm going to have a diff with the class name here of details and here for the details I'm going to have dot classes price and owner so here is going to be a spawn with a class name here of price so here is going to be a dollar sign spacing here property question mark price below the spawn here I'm going to have an image source which is going to be here the profile name of the user but we need to have the sign in to have the profile picture so right now I'm just going to import some profile so some not profitable image and we're going to make the the register which is the sign up with there the same thing and we're going to create the we're going to make the where is it here the oh here it's don't worry so we're going to have the register and then for the creating property which we're going to make it as a model in the nav bar that's why you don't see it as a component so don't worry and here important person from the start of the slash assets here slash it let me get channel let's see person here I'm going to paste it and it's going to have here our class name here classes dot owner So Below this prices and online I'm going to give another div here with the crossing here of more details which is going to be here a span with the property question mark dot bits in here f a bit are going to have here the crossing of glasses dot icon interview another span I'm just going to copy paste it here it's going to be square meters take square meters in here pets and here is going to be f a square four so let me import those two icons import fa Bits And if a square four from a act icons fa like this and below this below the more details I'm going to have a final difficult which is going to be here with the class name of disk which is short for description and here the description is also property which are marked on disk so if I go here what happens here it is fa bets not bits okay okay okay in here you see fa bet so changed here from fa bets to f a bit okay so we are ready here with the feature properties let me see here I mean wait why ah we don't have anything great how I don't have anything I think I have one let me just on the log so featured properties and if you inspect what will pop up here so it's from the nav bar so it's not from here so wait request if I console log the data here what will I get here let me refresh so I get an empty weight here in the mode B I'm almost sure that I have one of them properties to draw so if I don't I'm going to make them just for you to see how it's going to look like so false false yes so both of them false actually I don't have a true so here featured I'm going to make true just for the example here so update it right now when I reload the page I must have something here okay you see it's working so of course we need to style it so let me go here to the CSS and let me style it so here just select this okay so here just to remove the console okay let's start so here of course I'm going to start with the container so dot container is going to be here a height of 100 with a 100 margin top of 0.5 irm then I'm going to have dot wrapper which is going to be a Max width of 1108 pixel height of 100 and margin of zero Auto then I'm going to Target the titles which are going to be display of flicks online items of Center Flex direction of column end cup of 0.5 irm the indoct titles and the H5 which is going to be a cover of 777 oops so call 777 font size of 18 pixel and front weight of 500 then dot titles H2 is going to be a core of 333 and font size of 28 pixel then dot featured properties is going to receive here with a 100 margin top of three RM display of flex Flex arap is going to be wrapped so when it's too long it's going to go into the next row and gap of two RM let me see how it's looking I mean you cannot see that much because of that huge here so let's go to the image so features properties dot featured property and Dot image container is going to be displayed inline block after the display line block height of 350 pixels width of eight percent I mean uh here its height of 350 width of eight percent March bottom of 0.5 firm over four of hidden and cursor of pointer then we're going to start the image so I can just copy this part paste it and then to the image I can make it on a few minutes because it's getting too long like this okay so for the image we're going to have height of 100 width of 100 object feet of cover in transition of 150 milliseconds tall and then I'm going to copy this to to make the cover effect so here common hover scale of 1.035 so let me see how it's looking can I finish the page wait why it's still looking like this it looks so weird so it's featured property image if I make the height it's the height is weight so let me see what's the problem if I make the height let's see 350 pixel and two width of one let's say 500 pixel let me see how it's going to look like I mean it looks 10 times better like this so let me see what's the problem if I make the so the height if I made a height 100 let me see so the height is okay but I think the width is a problem so which is going to be let's say 50 if I make like let's say 50 percent why it's so big ah probably because of that image here so let me Target that image here so dot featured property features property and then dot owner is going to height of 35 pixel width of 35 pixel border radius of 50 another object feet of cover so right now is it because of the image here that I'm thinking yes because of that image here so let's make this from 50 to 100 so this was okay everything was correct but that image here made our page look very weird so right now yes it's supposed to look like this so it's working as no problem okay after the dot owner here and go Target feature property and here dot details which is going to be display of flex Flex Direction here of column then gap of one area gap of one irm and parting of zero top and bottom and left and right of 0.55 mm then dot featured property dot details and then dot price and toner is going to be here a width of eight percent display of flex justify content of space between Interline items of Center so right now you see how Rd aligned here the price here with the image okay below the price and toner here we're going to have price and toner and then the price which is going to be a front weight of both and font size of 18 pixel so you see right now it's both the range is bigger uh what is the next song yes so here more details is going to be display of flicks along items of Center gap of 1.25 area it's margin bottom of 0.5 RM so let me make this on a new line okay after the more details I'm just going to show you okay you see how it's looking after this I'm going to Target the more details and then the spawn inside some more oops I'm on my Bulgarian alphabets sorry so more details than the span uh display of flex online item Center gap of one item uh border right from Pixel solid 0707 B5 core of 2 c 2 c d c and padding right of 1.25 RM sir okay so right now I'm going to remove this border so don't worry your spam for a shout border noon it is a washout not for shot what I'm typing here wait okay so you see here right now we removed here the border so it's only on the first shot okay and lastly here I'm going to Target the dot description which is going to receive an overflow of hidden takes over four ellipses white space of norab marks width of 250 pixels font size of 18 pixel and color of 2 to 2. so right now if I make this super long let's say like this you're going to see what do I mean so you see right now it stops in here it's it's some dots so right now even if I spam more it is just this it has three dots so let me revert just let me remove this so this means that your description is too long it's just going to have some dots and it's going to be shortened shortened to say Okay so we're already here with the features properties I'm going to make the new Setter and footer which are going to be very simple components and then we're going to make the register and how to upload the the property so just make the newsletter and the footer which is going to be very easy just let me close the featured properties let me go here to the just close here and let me go here to the newsletter so let's go here class name is going to be classes dot container then Dot classes dot wrapper and inside here classes dot titles and here I'm going to have an H5 with the want to get the latest or first question mark in below the h55 H2 sent us your email and we will do the rest and he brought that diff here I'm going to have a diff with the class name of input container which is going to be here an input with a type or female like this and here I'm going to remove those properties in here placeholder will be type email dot dot dot and Below I'm going to give if I send so if I send class name it's going to be here classes dot sent icon so import if I send from react icons F5 so this is just the j6 the 6 is going to be again not that long so let's go I just want to show you how it's looking without the GSA without the CSS so you see how it's looking so dot container is going to be here a height of 100 width of 100 and margin top of 7.5 RM then dot wrapper is going to be here Max width of 118 pixel then height of 100 margin of zero Auto then display of flex Flex direction is going to be here a column Interline items of Center then dog titles are going to be display of flicks along items of Center Flex direction of carbon and gap of 0.5 irm below the thought titles here I'm going to have dots titles and then I'm going to get the H5 which is going to receive a cover of 777 then font size of 18 pixel and font weight of 500 then for the H2 I'm going to apply core of 333 and font size of 28 pixel so right now you see how are they looking okay let's start here the input container so input container is going to receive here a margin top of 2.5 irm to space it from the titles border 2 pixel solid 333 for the radius is going to between pixel height of 50 pixel with a 36 pixel padding of 0.20 0.25 on top and bottom and 0.5 on left and right display of flex justify content of space between and align items of Center oops so right now you see how it is in here the input I want to remove the border and the outline so we're going to do it just in a second and then dot input container when something inside so Fox written means so the input container remember the input container is the diff here and only the input can be focused here from all of the elements in this component this means that when the input is focused it will going to trigger this Focus within on the input container classing so this is what it means so the Border cover will be changed to 777 so when I focus here the input you see how the cover here changes here slightly changes on dark to gray you probably notice this it's like a slight change but it's not simple I would say itself so the input will have border of none outline is going to be none and padding left is going to be 0.5 mm then I'm going to Target the input container dot send icon margin right 0.55 mm and font size of 20 pixel so you should see how it's looking okay this was for the newsletter you see how easy it was then the next one is the footer so let me go here to the footer and let's start typing here the jsx so here instead of a div here I'm going to make the footer and it's going to have no class name just footer then classes dot wrapper for the div here and I'm going to have three columns so classes.com and I'm going to use the Asterix in three click enter into voila you have three columns with three three divs with a class name of column so the First Column is going to give an H to here with the text of about the up some some of the text here with the in the paragraph so here we'll remove some so here here is a dummy text below the dummy text here I'm going to have another column which is H2 with contacts here and below the H2 here I'm going to have a span with the phone colon plus one two three four five six seven eight nine below the this polygon have spawn YouTube web def Mania and below that that's panel don't have git help web dev Mania okay then for the last column I'm going to fh2 location in the location will be here oops come on spam continent Europe Again aspan country Bulgaria my home country and the current location so this was for the GSX let's go here to the CSS and let's start typing it so here I'm opening the styling sheets splitting the screen again and let's go so footer just the the attack I'm going to Target like this with a 100 percent height of 400 pixel and margin top of 55 area the indoor Trapper is going to be here width of 85 percent height of 100 margin of zero Auto display of flex justify content of space between Interline items of Center then dot Co is going to be display Flex Flex direction of carbon and then gap of 0.5 mm then dot Co and then the H2 is going to be a margin bottom of 15 pixel come on margin bottom of 15 pixel justify itself Flex start start and then margin left of minus five pixel I know it's kind of weird but don't worry so you see how it is don't worry we're going to Target right now the paragraph so dot Co paragraph is going to be here a Max width of 425 pixel core is going to be 555 and lastly font size of 15 pixel so you see and here the margin left I'm going to remove it just to show how it is without so see how are they that's why I wanted them to be on the right I can maybe do it with a much easier way to drive with marginalized 5 pixel no I'm going to revert it back to margin left -5 pixel so the title is more on the left here you see how it is not exactly aligned here vertically so as I told you the newsletter and the footer were very simple the next part is going to be the more interesting which is going to be the sign up in the sign in so I suggest to you my dear friends we first start with the sign up so let me click here sign up so let me close it here and let's start so sign up okay so we're going to have here class name is going to be here classes dot container then inside I'm going to have classes wrapper and decided I'm going to have an H2 with the text of sign up blow that H to here I'm going to have a form with the on submit function on submit handle submit below inside the form not below but inside inside the form I'm going to have some input so here the first input is type text name is going to be here username placeholder is going to be here username dot dot dot and here I'm going to provide a known change but right now I'm going to leave it like this then I'm going to make the own change when I write everything then I'm going to have again an input I'm just going to copy it because we are going to change just several things so here type is going to be email name is going to be an email and placeholder is just email then I'm going to have it's going to be quite interesting so watch carefully label is going to have an HTML for here or photo and here upload upload photo AI outline file image so let me import so import AI outline image from react icons AI then I'm going to go below and I'm going to give an input but don't copy paste like the email I'm going to write it manually so input is going to be HTML is going to have an ideal photo because the html4 connects with the ID so the label in the so the html4 in the label connects with the ID of the input literally it can exit then I'm going to have a type of a file because it's not a text or an email it's going to be a file for photo that's why it should be like this and it's going to be style of display of none if I mean it sounds it sounds weird my friends I know I'm going to show we are go we are going to see what's the logic so when I click on the label when I click on this it's like I'm clicking on the input it's it's display off none but when I click on it it's still going to upload images I know it sounds weird you are going to see it if you want to see it if you have never encountered this concept okay let's continue here then I'm just going to copy paste this again paste it in here type it's going to be a password name is going to be a password and placeholder is going to be a password and then I'm going to have a button which is a type of submit and here it's going to be with the text of register below I'm going to give a paragraph tag so like this I already have an account question mark here the link login or sign is basically the same thing I'm almost sure that I'm almost sure that they're the same signing Network login and sign up at register and here to sign in okay let me create here the state so here I'm going to give several States so cons State set state your state is going to be here and an empty object then const photo Set photo is going to be here you state an empty string then close this patch is equal to use dispatch then cons navigate is use navigate so this user's patch is coming from reader so we're going to do that soon we're going to need that we are going to need some things all over our application like the token it's not going to be exclusive to one component that's why we have Redux it's it's not scared don't worry uh so here let's import the use navigate Hook and the link from react router Dom and right now I'm going to comment this dispatch I just wrote it to not forget about it okay let's go and here I'm going to have const handle state which is going to take the event and here set state is going to take the previous state and it's going to to return the previous state just like this dot dot dot but it's going to be assign a t.target.name e.target.valu so that's why I wrote here name name and name I did that consciously so here for the own change here they are going to be for those three inputs the same so unchanged here handle State this is much cleaner way in my opinion to handle the state in that big of a state I mean it's not Victory but it's yeah yeah it's more than one to put it that way and here for the file of course I'm going to do different so here it's going to be on change it's going to take an event and Set photo e dot Target dot thousand get the zero index so that's how you get the image I'm going to have only one image but this is how it works to get the zeroth index so let me go here how it's looking handle submit it's not defined okay let's define it if it's undefined so const handle submit async the event here and here an arrow function again I'm going to have track Edge but before I think the function I want to see how it's looking okay and you see here where is that input here you see here the input photo we have the text email the password to see here text oops wait the username the email enter the approach photo just this and here the password this this is like this is the magic I would say uh what else do I need to do I suggest to you that you first up before writing the CSS I want to show you this kind of state how it works so here I'm going to console log state if you have never encountered this I won't show you of course here I'm going to refresh I don't know why okay I have no more errors and here you saw at the beginning it's an empty object Here sign up to any seventh line we're on the 27th line you see here 27th line so right now I start username so you see right now it reassigned the username then I'm going to have something as an email you see how it's going how it's working and then the password so right now you see here email password into the name this is a very convenient way to handle state in my opinion okay let's get into the CSS and then we're going to write here the handle submit so let me remove that console log and let's go here to the sign up so let me split the screen again and let's let's go so dot container is going to be here uh width of or just position absolute top is going to be one left is going to be one height of 100 VH width of 100 VW background image is going to be URL dot slash asset slash estate 3 jpeg then background cover is going to be 8GB 8000 0.2 at the end then background size is going to be covered background blend mode is going to be darkened then display of flex justify content of Center and here are line items of Center so you see how it's looking but still we have a lot a lot a lot left to style for the sign up so let's continue so then dot wrapper is going to be a height of the 67.5 VH which is going to be 27.5 VW border radius is going to be 20 pixel display of flex Flex direction of carbon and here we have a background color of white so let me see how it's looking okay we're getting closer and closer after the wrapper I'm going to start get here the H2 which is going to receive a cover of harsh cores so type with me I mean hex color so one seven one zero nine seven then text align is going to be a center margin 2.5 on top and bottom is not left and right and font size of 36 pixel then form is going to be a display of flex Flex direction of carbon oops take the direction of column online items to Center and gap of 42 pixel so right now you see how it is okay we're getting closer and closer I told you my friends after the form here we are going to Target the inputs of form and the input if you want that what this exactly means this means that the egg shoulder literally the direct so so this is like every it doesn't matter how deep is the child element but this means one level deep so Direction you see how they are direct how the form is a direct parent of the input okay I digress let's continue so width of 50 percent our time is going to be unknown uh border is going to be known and then border bottom one pixel solid 333 then form in the label inside is going to be here a line self Center with a 50 percent cursor of pointer transition of 150 milliseconds or display of flex online items of Center and gap of 0.75 mm how it's looking okay let me copy this again and I'm going to apply the hover effect so for the label I'm going to apply just 444 for our cover so see it's like a slight color change I think you will you will see it I personally see it it's just a slight color change okay let's continue here then form and we are going to Target the button so the button is going to receive an outline of none background color of blue just blue then go out of FFF border radius of 12 pixel Pi think of 0.5 on top and bottom and 1.25 left and right font size of 18 pixel cursor of pointer border one pixel solid transparent then uh form button in the cover effect for the button which is going to be a background color of white border color of blue and text color is going to be a blue so let me check see I know how it is nice then I'm going to Target here the form in the paragraph inside which is this thing here this paragraph which is below the button so text align is going to be a center core is going to be a black color display of flex Flex direction is going to be a column specify content of Center and here the last thing that I'm going to style for the sign up is going to be the anchor attack inside the paragraph which takes the equation of one font size of 17 pixel and color of 888 and lastly here margin top of 0.25 irm uh so you see right now how it's looking I can hope I can toggle between the sign up and the sign in but the sign in we have not made it uh but we before we made the sign in let me go back to sign up we are ready with this part but I want to make it functional so let me close the CSS here and let's make it functional so here the first part is to write event or prevent default because it's a form and when you submit the form the default behavior of form is to refresh the browser and I don't want to refresh the browser so that's why I do it like this here for the cash block I'm just going to write just uh console error.console.error and the parenthesis error and let's try and let's start here let file name is going to be called to know because they're going to upload images right now I'm going to show you how so if photo cost form data is equal to new form data right now I want you are probably wondering if you have never seen this web deaf manner what is this you we must send images in the form data because otherwise where we cannot we cannot send the images it must be in a form data that's why I'm doing this thing here then I'm going to make the file name is equal to crypto random uuid plus photo.name so if you wonder what is good to you your ID I'm going to show instantly so just let me copy it console Institute so you see it's a random ID generator which is from the crypto crypto module which is by default in JavaScript so you don't need to install any dependencies it is from JavaScript so you see here is just some random ID literally uh okay so it's going to help us create a random view to create a random name for the image then I'm going to make a form data dot append this is how we make the key and value pair so here founding is going to be found in airform data dot append is going to be here image photo just like this here and then of course we are going to send it so here is going to be a weight request of course I need to open this so a weight request here we are going to send here on the Apple width here slash upload slash image it's going to be post request let me see here what was here so then the methods then the header so for the headers we don't need to write anything so we are going to skip this so the headers and are going to be an entry object just like this here what else so here then of course the form data the body itself and I'm going to write here true as the last parameter because as you see here by default this is false but when I upload images it's going to be like this I'm not going to signify the body otherwise I'm going to simplify it but of course for the image I don't want to stringify it I'm going I frequently hear the comment for the explanation so you can see it and this is how we're going to do it okay and here of course here it's a new field so I also I'm going to return because if we don't have an image towards the point of creating an account we must have an image okay so we're ready with this part of the function then we make the Cons data is equal to our weight request slash alt slash register oops register and here I'm going to again make it as a post request here I'm going to provide some headers this time so here headers is going to be content type application slash Json so here are the headers and then we're going to provide the body which is the state so here you see here the state so I'm going to spread the state like this and I'm going to reassign one of its properties to found him I'm just going to assign it because I have not written this previously soil lengths this is how we're going to send it and then we're going to dispatch register data which is that with some Redux and then we are going to navigate to the home page but of course you are asking again with the money you're going to way too fast I know so right now I'm going to comment this and I want to register to see if it's returning the correct thing so here username is going to be let's say user one two three emails user123 gmail.com here you see when I click it you see what is getting here of course I want to get here to downloads and here I'm going to have this person as a profile image and then the password one two three one two three so when I click register you see I am here but let me see here to the sign up yes I get everything so this is working correctly nice nice good but here of course I need to change this for the navigation don't worry we're going to do it so let's uh make sure the Redux is going to be very very simple I promise my friends so here for the old twice just let me make here a reductions Redux folder inside the source directory not in the components but in the source directory and here it's going to have a note slice.js and then store.js so if you have never seen Redux it is basically some variables and some functions that change those variables and those variables in Redux are available in all of our application that's why that's why people use it because it's their Global variables so let's go create slice from Redux js2kit then cons in Niche initial state is equal to user no and token no then X come on export const old slice is equal to create slice and here name Alt initial state reducers oops come on why this window popping up it's annoying okay so here we have the name of the slice basically Redux have a centralized store this store is composed of slices all slice and others depends on your application so if that comments helps you I'm going to leave it like this then login is going to have a state and a nation here which is oops I'm going to remove here that so like this why have an error here I need to remove this okay so here the login is going to be date dot user is equal to action.payloads dot orders if you wonder why it's the colors I think you would not remember because here into both the login and the array in the login and register we return here orders and here orders so that's why here into the outside it must be others so where where am I writing the code oh my God I'm going to keep the store.js guys write it in the old slice.js and remove from store.js and paste it here it's not the place to be here right now okay let's continue States about token is equal to action dot payload dot token just like this then register State and action like this I'm just going to copy this because it's the same as the login literally is the same and lastly here I have a log out which just take the state here and it makes the state user is equal to no state DOT token is equal to no and let me and let's clear the local storage so local storage.clear so this for the register login and logout and here export cost login and register end logout is equal to outslice.actions then export default l outsize dot reducer so we export the functions the reducer function in the twice itself so I know it's kind of confusing those registered functions in this reducer okay and for the store I suggest to you we go to the git cap and copy because 95 percent is a boilerplate code from a Redux persist so I'm going to explain the code that you need to have explained so let me go here to the store.js and like this so here I don't need this property twice I removed that when I made the application because it's not useful so we here we just have the reducers you see here everything some read experiences that's why it's you see here some border print code it's not important and here you want to place your slices here in this variable here okay let's go here to the index.js to import those things to be able to import those feedback things that other to to have them here otherwise they would be unable we will be unable to use them so here persist gate okay and here provider is going to have a store in here store and the person it's going to have persistor and he appear store like this here okay we just need to import here the provider which comes from just a copied from Redux from react Redux okay we're ready with the Redux let me go here to the signing and let's make the sign in and then we're going to try everything so here for the sign in we're going to have class name classes dot container then we're going to have classes dot wrapper then here I'm going to have h2it sign in as a text below the H2 of course a form and inside the form we're going to give an input with the type of female and here placeholder email dot dot below the input of the email input I'm going to give another input which is a type of a password and here placeholder or password below button submit sign in and below the button I'm going to have a paragraph I already have an account I mean don't have an account here the text don't have an account in here sign up and is going to navigate the user to the sign up page I'm going to import here the link so import link from adapt router Dom and let me hear the state so here cons email set email is equal to use State unnamed string then cons word set password is equal to use state below the below this I'm going to have the dispatch function so U is equal to use this patch come on I cannot write this and below the dispatch now we're going to have a navigate so it's equal to use now we get import this from import use part from react Redux okay let me make the on submit here function so here the function will be called handle login so let me copy here the name of the function and here comes Kindle login is equal to async it takes the event here a try catch in here console.error error so it's going to be a very simple function first of course I need to make the event dot prevent default and here I'm going to have const options is equal to content slash type application Json and below because data is equal to weight request so I'm just going to open this again to give from the deletions yes so it's imported here on the Auto login route post request and here options enter the final parameter the email and password but of course I need to attach him here with the own change event so here on change here that we take the event and then sit we set the state to it so like this and here of course it set password so this is almost it so the last part here is this part login with the data and we navigate to the home page so we are basically ready I'm going to register again so here first relation and then login so handle login is on defined maybe because I have not imported it okay so here let me go to the slash sign in let me sign up in here username let's make user12345 the email is the same with the username but with gmail.com upload photo let's use this photo and here the password one two three one two three so here when I click on register you see here I am again navigated do I have a console log again yes I have a console lock with everything that I need here and to see here the image I forgot to show you earlier here the image is saved so you see here the images so here of this person nice so the login and the register we just need to try the login of course so here oh I need to write the CSS okay at least it's not that big of a deal so let me close it here and let me let me write here the CSS so dot container just let me scroll down so dot container is going to be positioned absolute top of zero left of zero out of 100 VH with a 150 VW background temperature estate 2.jpg 000 0.2 box size of background size of cover background blend mode of darken display of flex justify coordinate of Center Interline in terms of Center then dot wrapper is going to be here a height of 55.5 VH which is going to be 27.5 VW then border radius is going to be 20 pixel display of flex Flex direction of carbon and here background core of white so let me check how it's looking right now okay we still have to style it a little bit so the Trapper and the H2 inside is going to be a cover of one seven one Z hex core so one seven one zero nine seven then takes a line of Center margin of 2.5 frame multiple bottom is the right left and right and font size of 36 pixel then let's target the form so here form is going to have an input of width 50 percent outline is going to be none and border is going to be non-border bottom of 1 pixel sorry 333 guys right now when I'm looking at the code it is basically the same as the sign up so I'm just going to go to the sign up and copy because it's literally one-on-one the same so let me copy and I'm going to paste the only difference is here the width and height of the wrapper so we're going to change this and here the picture instead of three here it is two so here it's two and here it is 55 and this is it actually of course here we're going to need some on the button margin top of 1.5 RM and here for the H2 we have margin bottom of 3 irm so you see it's basically the same so let me try to sign in so user12345 gmail.com one two three one two three so when you click I think I did not uh [Music] uh wait I'm going to see from the local storage so no worries so yes I'm actually this is successful because here everything is assigned into a local storage this means that AI thinks a success but I want to change of course this number because it still shows me that I'm not logged in and you know that's we need to change the song let me close it here let's go here to the nav bar and here we're going to get the user from our Redux secure user user is equal to use selector State and we get the state DOT old slides so let's import the U selector so import new selector from reactive Docs and here uh the user I'm going to make conditions so here inside the right side I'm going to wrap this in here if we don't have a user we're going to show so if you don't have a user we're going to show this otherwise we're going to show else so let me make this on several lines for you to see what exactly I am doing so here of course I need to have a react fragment like this and here else I'm going to show here again um I need a react fragment so like this and here if I'm logged in this is what it means oh again I'm on my Bulgarian alphabet which I personally love but I cannot code with it here with inside the spam hello user dot username below that span I'm going to have a span with a class name of logout BTN log out and here I'm going to give a link list your property which is going to have here a class name of classes dot list and here an on click function which is going to show us a model which we are going to write right now which is going to be here for the creating so here set show form to true need to make the state here so when basically click this we are going to get a pop-up so let me make this state here so cons show form set show form is equal to use state to false okay so here let me Target uh that list here that I have so let's go to another.css in here below everything dot right dot list padding of 0.25 on top bottom and 0.5 on left and left and right then background code is going to be Discord so 250 is a c then color of white so FFF the Border radius of 12 pixel transition of 150 milliseconds so and here cursor of pointer 10 I'm going to apply some hover effect so dot list column hover which is going to have here core of e f e f e f and background color of three four zero B C 8. so right now of course I want to remove these text decoration so here text the creation of none okay right now it's looking nice Okay so we are ready with this specific functionality but of course we need to make the for making the property here which is going to be let's say quite uh quite a big formula I'm going to show you I'm not going I I really don't like when someone talks with explaining some something which is code related with words I like to see quote example with code that's how I understand it the the best so enough talking let me go here I'm going to have a condition if I have show form I'm going to show this thing here so classes dot list property form which is going to have here an on click of handle close form and inside I'm going to have here dot classes dot list property wrapper I'm going to make the classroom here on that side because I want to see it click this and here I'm going to have the on click ok and here inside it I'm going to have an on click I'm going to explain it when I actually made the CSS and stuff so here event top stop propagation it's going it is very interesting if you have nothing after it so stick with me uh below that if I'm going to have an H2 with the text of list property and here I'm going to have a form with the on submit so handle list property and here inside the form I'm going to have an input type of text placeholder of title name is going to be had a title and here I'm going to have a known change handle state so we're going to have the same logic the same function that I had in the sign up so it is basically this function I can even copy paste it because it's like one on one the same so let's paste it and of course here we have some state so let's make it so here constate set state so if you feel confused I'm going to repeat once again what I'm doing right now we are making the functionality for uploading a property to make an offer let's say to yes to upload the property so let's continue here the input type takes then input is going to again type of text but the placeholder is going to be a type and here the name is going to be disk it's going to be a type note that's what I'm looking at sorry then again it's going to be a type of a text the third input here but the place code is going to be 10 desk and here the name is going to be disk the fourth is going to be a continent so here continent and the name is going to be here continent I'm going to copy paste again several more times so here which is to this part I have returned so go to spaced out here is going to be a type of a number actually the placeholder is going to be here a price in the name you probably guess is going to be price therefore that input here I'm going to have again a type of a number the placeholder is going to be SQ dot meters which is short for uh square meters and here the name is going to be SQ meters then again going to have a type of a number the play score is going to be bit and here the name is going to be better as well and here I'm going to provide a step of one enter minimum of two so this means that let me show you so step let's say step is going to be 0.5 this means that I can have 0.5 1 1.5 to 2.5 so it gets the point but when it's one it's going to be like this so one two three four there should be there must be whole numbers okay here we are ready with the BET and the next one is uh for the image so let me delete this input here I'm going to make them here connected out to say and here I'm going to give a diff which have some inline styling so here the inline stylings are just a few so here style is display Flex online items is going to be here at Center and GAP is going to be 12 pixel and lastly width of 50 usually I try to stay away from Miller and stylings but this time I have written it with inline star links I'm going to use them once it's not that big of a deal here labo is going to be HTM html4 or photo in here property picture AI outline file image so let me copy and here let me paste so react icons AI okay here again is the same logic with the sign up again we are uploading an image here I'm going to have an input which is a type of a file ID of photo so it's connected here with the label as you see here the html4 in the label is connected here with the input by the ID uh okay so here our style is going to again display of none and here Set photo oops I mean on change is going to be event and here Set photo e.target.com we get the zero index I'm just going to make this one several lines to to make it more readable just like this and here below the input I'm going to have if we have a photo we're going to show the name of the photo we did not have that functionality in the register we are going to have it right now so Auto dot name here below the div here I'm going to have a button which is list property and here below the form I'm going to have ai outline close with the class name here of classes dot remove icon and here I'm going to have on click candle close form so that function I have fitted it for the second time I need to write it so here let me copy the Kindle class form which is basically closing the form and doing one or two things additionally so here handle close form I don't think anything has an input oops I here forgot the equal sign so here it is going to have set short form to false Set photo here to know and set state is going to be an image so when I close it I'm going to to empty the state we end the photo inside so uh whoops let me go here Set photo is not defined let's define it if it's not so here comes photo Set photo is equal to U State and string handle this property is not defined oh yes this function that we need to Define so here async it takes an event as a parameter and I'm going to write event prevent default pre and preemptively so here if I click on just I want to refresh and here if I click on it you see how it is looking of course of course of course we are going to right now use CSS and it's going to look amazing so I suggest to my fans that we head right into our styling sheets so again I'm going to split the screen scroll down here and let's go so here I'm going to make a comment to separate it so here at least property form and let's go dot list property form is going to be here position absolute top is going to be zero left is going to be here 0. height is going to be I'm height is going to be 100 VH which is going to 100 VW background core is going to be rgb000.4 then display flex online items of Center and justify content of Center in the index of nine nine nine nine nine just putting some land I've got six nines below the least property form we're going to have list property wrapper she's going to have her position of relative then background color is going to be FFF height is going to be 80 87.5 feet h width is going to be 35 VW and both the radius won't be 20 pixels so let me see how it's looking if I click here it's getting closer and closer and you see here that already have here is darker and when I click on it it gets removed so here if I tap something because I enter the state I can go here click here and go here and nothing is here nice okay so here the wrapper it here it's list property not property property I don't know if there is such a working slide properly I still don't know okay right now it looks nice okay so here list property wrapper is going to be here H2 with a text align of Center margin of 2.5 on top at bottom and zero left and right and specific for the bottom I'm going to make it a little bit more so 3.5 then list property wrapper The Forum the diff and the label inside I know it's quite strange to look it like this but don't worry so it's perfect items of Center gap of 12 pixel font size of 18 and margin right of one item so it's basically this year and I see that it's not quite it's not quite making it here you see the button I'm going to make the where it is uh are here I'm going to make it just to 90 VH right now it's going to be yes it's going to be nice so let me continue Dot list property wrapper and here the button is going to have margin top of 0.5 RM so let me click it okay and here of course I'm going to make the remove icon position absolute so position absolute top of one item right of one item font size of 20 pixel and cursor of pointer which is that icon here so if I you see how it's here so I can either click here on the overlay or I can click here on the remove icon to get rid of the form nice uh of course we need to pay the functionality which is going to be the more interesting part so let me close it in here I want to check one thing here didn't I have ah here forgot to write on click handle logout it is a super simple function so just to make the logout functionality I'm not going to log out right now but just make it so here above everything comes handle log out and the handle logout is going to look just like this so here this patch log out so here log out like this and then navigate to the signed in so here I'm going to have the dispatch is equal to use this patch and then close navigate if you go to use navigate and here the logout function I need to import it so here I'm going to open the old size and here import it so it is here it's imported okay uh here I have the ones the handle stay thing so this is working let's make here the handle this property function again I'm going to have here let file name is going to know the same logic here that I had in the sign up you see here that thing come I can copy paste it but I'm going to write it for you just to remember this because I'm sure that you don't see this thing every day so here a photo constform data is going to be equal to new form data again I repeat why we have form data because otherwise we could not send images that's how we can send images then file name is going to be equal to crypto random UI gym plus photo.name this is again a random ID generator which is in JavaScript it's not like a module that you need to install it is in JavaScript here form data dot append found him if he found him then again from data data paint here it's image in here photo so here we have await request just let me open this to be able to import it so like this and here we have slash upload slash image again a post request again empty headers form data here and here we have two so this is for image uploading and here if we don't have an image else we just return oops return okay let's uh pause the actual data the proper data so here we have a try catch console.tero error and here for the try block I have const options are equal to authorization two dots better and to get the token I think I have not imported it yes I need to import it so here I get the token and here of course I'm going to have content type application slash Json here are the options and here we make the actual request so here our weight request slash property post request here are the options and here we spread the body so dot dot state in here image the founding oops image file file name So This Is How We Do It and then we can control the data so just like this to see that success actually and then we set show form to false or we can just call this function actually handle closed form why I'm doing it like this so like this enter let's make a property so here the type is going to be I mean wait here it is title and the title so here European property here attack is going to be Village description is going to be so I'm going to write something like this the content is going to be Europe's price is going to be let's say 200 000 square meters let's make 125 and bits let's make it four and here for the image I'm just going to have this image here and you see here the image stream of course this portal is a little bit below but that's not a big problem I can click on this property and when I have on inspect I have no errors here and here I get an object which should be the property nice so here here it is we've uploaded it that's working on successful which is great so here I don't need to get this data I just wanted to see that it to work it's working so you see the function is working very nice so I want to close this here because it clutters my workspace and what I wanted to do here here I remember it in feature properties I have a very good memory I need to make like this or HTTP slash localhost images and here uh property dot photo was it photo let me see here from the models ah it's IMG so image like this or I'm going to make just a connection here so if if I have property dot image I'm going to make like this otherwise I'm going to show the default image so if I go down foreign because that's it's not feature at all let me make that feature just for you guys so here properties Let me refresh it and here we're going to make the the property that we have just uploaded to be featured so you can see it so here features is going to be true update Let me refresh and here you see here the image so we're ready with this part the next part is here when I click here I want to have those types in here those things which is literally the we'll just let me close this again so it is a component and here the properties so this is I'm going to tell you from now it is going to be let's say the most complex component but this is of course good because if it's more complex you're going to learn more things on average which is great so without further Ado let's go basically for this component here I want first to write the state and the things and then I'm going to write the GSX itself compared to the other property so here comes all properties set of properties is equal to U State here on empty array then const filtered properties set filtered properties is equal to use State and empty array the const state set state is equal to here to use States no cost query is equal to use location dot search and here dot slice one I'm going to explain to you why I'm going to close the lock and do some stuff and hear the comments so slice one to get rid of the question mark and here comes our query is equal to query dot split and we split by the ampersand so here's the Ampersand I'm going to call the lock everything so don't worry I know it sounds very confusing initially you're going to understand the logic of the code it's not that easy but it's not hard it's like medium properties then I'm going to have passing query params what else I'm going to give and here yes this is for now so potential properties we just make here a use effect so use effect and here cons fetch or properties is equal to async and here because data is equal to weight or equal EST property slash get o and here again request and here set all properties to the data maybe I can call this set of properties just like this in here before doing anything else I'm already here so I can refresh what do I have an error or something I do cannot read properties of undefined readings twice ah I get it twice so wait let me go here and if I make like this ah this doesn't work right now I'm going to make this function right now to not forget later for the hero function so here is going to be quite simple so don't worry just literally one line of code so here navigate to properties and here navigate I just need to import it so here comes navigate is equal to use navigate and here navigate here is going to be a template string properties question mark type is equal to the type then ampersand is equal to the continent and again we have a number sound which is price range is equal here the price range so you see the logic and of course I'm going to attach this event here to the icons or handle search just like this here okay so if I go right now to make like this let's say again Europe that price and here amount or Village when I click here I have some mirror let me see I'm very curious about the error cannot read properties of undefined trading twice so it's basically the let me see what is the mistake so here I forgot to call the use location I need to call it with the parenthesis like this so guys add the parentheses here I forgot them so right now we have no error okay that was the error this is the entire error no problem so here let me consolock everything so first I want to console the query which is the use location and search so we have this here and of course we have here Ampersand and Ampersand but this question mark here I don't need it that's why I do I do slice by one to get rid of the question marks so right now you see I have everything but the question mark and when I split it with an ampersand you see right now how's the code so he has no question mark and we split with one percent we get type physical to Village content is equal to zero in price range is equal to zero so we get closer and closer to something guys you you get me so I'm going to delete this and I'm going to make this use effect which is going to be very interesting so this is really really interesting because effect watches is going to be good for you for your coding skills so here are all properties array query and here if array query and or properties dot length is more than zero because we have there's no point in filtering when we have no properties and if status know that means that we have not yet don't wait how is the state ah yes yes okay so all right now we're going to see what do you mean let formatted queries to go to an empty object initially then I equate for each here and to get an option and an index in here const key is equal to option dot split and we split it by the equal sign when first we get the first index uh and then we get the first the first element in the second element where it times I cannot pronounce that words come on so here I'm going to console log the options the options are basically those things here those are the options so you see them you see how are the options and when you split them I'm going to cause a rock like when I split them just for you guys to see what do what happens here behind the scenes so we get the type Village content zero price in each one okay in here I'm going to re to assign them of course so here after the the key and valid declaration here formatted query is equal to spraying the formatted query and here key value so we're getting this value into assigning it to this object here and then we make a check so just making the comment here oops so here the comment if we are on the last index assign the formatted query object to state so if index is equal to R query dot length minus one this means that we are on the last index literally and here set state is going to be formatted query and handle search formatted query we have not yet created this function and I don't write this out of my head just like this I have tested this let's say specifically this component I've invested several hours let's say like so I don't remember about at least two or two or three hours at least so that's that's how I found that it's working in here of course for the Hindu search we are going to do it right now so this is how we get the filtering and at last I'm going to control here console log here the formatted query just for you to see how it's going to look like so this is the ignore this error this is because we have not declared the function we are going to do it right now and here you see continue in zero price Central fun and type of Village but we need somehow to get from zero we need to get to Europe and from price range we need to get the range that is for one we have utility functions for this I have thinked in advance don't worry so this car is looking finally from these parameters here from this it's to this I know it's quite the transformation but it's not that complex I mean it's my own cart if I need to put it in a category okay uh let me hear the const handle search which is going to take here a parameter which is initially equal to state if we if we provide something is going to be the thing that we have provided if not it's going to be equal to State that's why here this is the logic so here let options in here I'm going to write a comment with either pass we either pass the formatted of G or event Dot why we do the if else so here we have if param if event native event so if that is true we have options is equal to state else we have options is equal to parameter I know that's looking kind of complex guys uh let's continue here so cons filtered properties is equal to all properties dot filter property and here curly braces in here const price range is equal to array price ranges options dot price range so let's make the utility function for this thing here so here we have our utility index to price arranged.js and here I have another one index two continent so I'm I have them in GitHub I'm just going to paste them to avoid losing your time if you are interested you can see the functionality in the logic behind them no one is stopping you so here uh let me copy so here it is indexed continent in here the price changes so just let me close this in here going to import it so here this is literally the index so where if it's let's say if it's one if options dot price range is one we're getting array price ranges 1 which is the second element second element element which is this here it's like the simplified logic I would say like simplified version of what's happening this kind of scenes over here it's equal to one all right you understand you get the point then const mean price is equal to number price range dot split here and to get the zero index so because you see here how it is here we have a number we have here that Dash and here we have another number and with the dash here I'm getting the zero eight index which is the first element which is the minimum price and then I can get the second element or the first index which is this 200 000 which is the maximum price you see here the logic here Max price to one then constantinent is equal to continent to index so here I can provide an index and I can get the content so we are going to check this function right now so continue to index uh indexed which which I'm using here wait wait consonant two index so I'm using this one so here I from the consonant you see here having it so here I'm getting here the index so here continent to index or wait should I get this I have content 0 I should get from index to continent ah guess what I'm doing here or is it like this I'm going to I'm going to see later I don't want to make something Boogie so right now I'm going to leave it like this and here I'm going to make a condition if property DOT type is equal to options DOT type here yes here it should be like this here it should be like this so here if property or weight I'm getting confused if you should be dysfunction because here into the properties I have a number so it should be index to content right yes I think it should be like this I think yes so property DOT type is equal to options.type and continent is equal to number options.continent and here Ampersand property dot price so it must be bigger than the minimum price but property dot price it should be smaller than the maximum price or equal this what it means and else we are going to return the property just like this here and of course I want to console off the continent here I'm very curious refresh it it's some defined if I make the other function which was this one continent to index very fresh it is zero so isn't zero already like continent to lowercase is equal to content work is ah it is from the property guys uh you have heard nothing from me I was thinking literally on another thing another value here so yes we provide here the the continuity to get the index back so it is working yes it should be like this so leave it like this continue to index uh what else here we have from this function is here after this filter I have const query string is equal to type is equal to options.type then ampersand Ampersand continent common continent is equal to options.continent percent price range is equal to options dot price range and then navigate stash properties question mark and here query string and here I'm going to use the oops not here but here replace to true and lastly set filtered properties filter properties here we have filtered them and here we assign them to the state so right now it should work so here we are we actually editor the entire uh logic here so we are ready with the logic which is again like as I said it's not that easy to understand so let's continue here with the Json j6 secure class name if you go to classes dot container and here I have dot classes dot wrapper and here we have classes dot options and here again I'm going to have that select things here so I can just copy them from the hero because they're literally the same guys like you can freely copy them from the hero.jsx they're literally the same so like this here they are literally the same okay and Below them action not below but here button in here I want to have the icon the search icon erupt inside the button tuck like this and actually not below the button but below the button in the div so here I'm going to have filtered properties if the length is more than zero this means that we have something we are going to display them otherwise other Nails I want to display here on H2 with the class name here of classes dot no property we have no properties with the specific specified options and here of course the interesting part let's start so here uh you map through them so here let me see what exactly is happening oh yes so here we have an empty fragment and here we have first classes of titles with an H5 here selected properties and Below on each two with the property you may like and below that div here I'm going to have classes dot properties and inside I'm going to map through them so here filtered products dot map property here and here we have a div with the class name of property and it have a key of course because it will map to it we must have a key that's how react works and here inside I'm going to have first a link from an act outer dome which is going to be the image container so here class name is going to be class dot image container it is going to navigate us to here a template string property detail slash property dot underscore ID and inside that link here we're going to have an image here with the source of HP slash localhost 5000 slash images property question mark dot image in here on old stack then below this link here I'm going to have classes or details and inside I'm going to have price and owner so spawn with the class name here of price in here I have a dollar sign space in here property dot price then below that span with a class sum of price I have a image with the person so here person the class name of classes so here let me import this import person from the slash asset slash person.jpg okay and here prices and toner and below the prices and solar prices and owner I have classes dot more details which have here a span with the property dot pads and here if a bit with the class in here of icon classes dot icon below the span I'm going to give a span with the property dot square meters and here I have another icon but before the another icon we have square dot meters and after this we have fa Square few we close it and again I have the same class name as with the BET icon so again it's classes dot icon and below this more details below this diff here I'm going to have classes dot description and here the description so property dot disk oops not here in the OBS but here so we have set type set pricing is not defined ah okay so let's let me first import the icons and then I'm going to show you how we're going to do the state so here import AI outline I consume react I can say I then import uh what was the f a bit and Fa Square full again from react icons fa and here it's not Square full but it is a square square fewer for weight let me try Square Four and here I'm going to have the handle States uh trick that I showed you earlier so here above everything comes the end of state it takes an event here and here set state which takes the previous state and Returns the previous state when we spread it so like this and it reassigns so either Target dot name and here e.target.com here I'm going to have I already have declared the state so here uh with those selects I can just paste paste like this so here paste and here paste and we have talk of the state which is incredible uh okay we are ready with this part but of course those images again huge so we have no other option but to go to the CSS and let's start styling it so here we close everything and here let me split the screen just like this so dot container is going to be height of 100 with a 500 percent margin top of 2.5 irm then thought wrapper is going to be here Max width of 100 and 100 I mean 118 pixel High to 500 percent and margin of zero Autumn then the titles are going to be margin top of five firearm display of flex other items of Center Flex direction is going to be a column and gap of 0.5 irm then below the titles we have the H we target the H5 inside the titles so core 777 font size of 18 pixel and front weight of 500. then dot titles and Target the H2 inside which is score of 333 and font size of 28 pixel wrapper and here are the options width of 100 padding of 1.25 on top and bottom and 1.5 phones left and right board the radius of 20 pixel this below Flex justify content of space around align in terms of Center and here background is going to be rgba 255 255 255 and 0.2 then box Shadow or I'm just going to go again to GitHub because it's against some box Shadows stuff that I just don't want to lose your time it's not it's not some complex logic to copy paste I rarely copy paste complex logic so here properties module in here let me copy this see how it look how it's looking for what is happening right now what is there cannot read properties of undefined trading split online 68. line 68. so here it is price range what is the problem here I don't get it it should be should be like this is that the problem cannot read purposes of undefined what is the problem let me check it so price range so what is the price range here if I refresh it's undefined why it's undefined so here it is options dot price range I think I have a clue why it's undefined here line here wides undefined so here options so here we make everything kind of state handle search in here let me console look here the options so uh why how it's this price reagent one why it's concatenated with the key ah here wait how that happened so it should be equal right now is it something because of here I have a clue actually why it's like this here I forgot the question mark So guys the only mistake is I forgot here equal mark equal symbol this is Olympic so here line 85 here on cons query string and here on the price range is equal to options or price range this was the mistake you know some sometimes it happens so I wanted to see how this is looking but why the background color is this so here options and upper options ah because I have to yet Target the select here let's make like this in here dot options in here select is going to be here height of 40 pixel mean width of 360 Max width of 200 pixel then border of none outline is going to be none blue after the background core of Blue Core of FFF border radius of 12 pixel font size of 18 pixel and cursor of pointer so right now let me see yes right now they're looking okay so after this we target the DOT command dot options inside we target here the search dot search BTN outline of none border of none come on border of none then with a 40 percent height of 40 percent cursor of pointer and background core of transparent then dot options here search BTN in here search icon border one pixel solid transparent after this border radius 50 percent after this padding of 0.6 element outside then height of 100 with a 100 background cover is going to be here linear gradient 90 degrees here okay I'm going to copy paste I really don't like to write linear gradients because they are you see this is the thing that we need to copy paste it's just a background color here and this is it so come on load why it's behaving like this here if I refresh again the page so you see here why it's not targeted wait I forgot here to apply search icon so it's inside the button R here it should be with the class name of classes of search BTN that's why it doesn't get applied right now it looks very nice and we're going to make it when it's active we are going to make that's why I have rapid button so right now we are going to see so in the bottom make the button active I repeat make the button colon active like you may hover you make it active in here border one pixel solid RGB seven three seven three then few is going to be RGB 737373 oops and Below we won't have background of FFF so like this you see here how it is when you click this is not when you hover you see I'm covering nothing happens when I click it happens okay uh what can I do wait if I do it like this we have some properties why they are there no showing up wait what would it be here let me refresh here I want to see what properties do I have so here's the properties uh want with some with the real image so here price of 200 000 so yes it's two hundred thousand so between two hundred thousands it's in Europe and it's a village but when I click nothing pops up which is kind of interesting so here is Chico and Tico let me console up here field third properties it's a basically an array of zero wow wait we need properties so I have them so I'm going to delete uh the first two because you see here the image is some let me take that I have done earlier in the back end so I want to delete it and I'm going to make several properties and right now we are going to see them of course I have no Stadium but I just want you to see that it's working and here why it's like this I really wonder I want to check here so property DOT type and here options DOT type if I refresh here it is village Village okay then continent in here options continent right now it is zero ah because this is a string that's why it doesn't pop up so here which is string here the second parameter which is options with continent but I mixed as a number here oh it's like this why it's behaving like this that's some unexpected Behavior here this option called I but here it's a number ah wait my butt what I'm talking so right now if I make like this and refresh the page there but you call so the problem must be here so property price and here minimum price so if I refresh here the second thing defined which is a minimum price is it because it should be here these are the problem the index should be here yes that was the problem okay so make the index here on the right side of the closing parenthesis here you see here how are they treated so that's why we didn't see that pop-up okay you see here we get that property pop-up let's start here writing the CSS so here just let me remove that console lock and go down for you to see what I'm doing so here individual so I'm just going to type here properties just separate a little bit and here dot properties is going to be margin top of three item width of 100 display of flex flexor up offer up and here gap of two RM then dot properties here property in here image container it is going to have display of inline block then height of 350 pixel width of 8 percent margin bottom of 0.55 RM over 4 is going to be here of hidden and here cursor is going to be pointer after this I'm going to Target here though I'm just going to copy this and just uh like this like this and here the image so just copy and here we target the image which is going to have a height of 100 with a 500 object fit of cover transition of 150 milliseconds so then the properties I'm just going to copy paste it because it's just a hover effect for the image so colon cover and its scale 1.035 so just the same thing that we did here but right now it's behaving like this because this the image of this person is taking a lot of our website a lot of our width so we're going to Target it right now so then the proper cheese and here the owner which is not the direction and this means Direction and this means just if it's a it's if it's inside we target it it doesn't matter how deep is it in the hierarchy so here height of 36 pixel width of 30 35 border radius 50 percent and object feet of cover so you see here that one is here it right now the image is smaller here you can cover it it's nice and here the property and hidden the details is going to be display of flex Flex direction of column 0.5 then dot property details and then price dot price and owner is going to be here a width of eight percent display of flex justify content of space between Interline items of Center so right now you see how the price is spaced out from the owner of the house then okay here dot price and owner in here price so here font weight of both and font size of 18 pixel then Dot more details is going to be here this prooflex and an items of Center and gap of one point 25 RM and here margin bottom of 0.5 mm then more details and the spine side is going to have here a display of flex on an items of center cap of one item border right one pixel solid zero seven zero seven b five and here cover is going to be 2 c 2 c d c and here more details is going to be spun last child is going to be border of none then dot description is over four of hidden text or form of ellipses white space of not up Max width of 250 pixel font size of 18 pixel core of 2 to 2. then no property is going to be here takes a line of Center margin top of five item sometimes of 36.7 core of two to two it's the H2 so here the image is kind of small as you see here we can make certainly bigger so if I go here the width should be 100 percent yes I like that way more here I'm going to make the price and toner again 100 percent yes like this and here uh for the right here I forgot the padding right of 1.255 remote this here so at the piling here padding right on this Pawn so you see here how it is it looks very nice here the house the price the owner and here's some metadata so I'm going to create several model properties so here the title is going to be let's say again follow like new Asian properties just to have a different title the type is going to be let's say peach descriptions which I'm just going to write something the continent Asia Priceless picked like two to 200 and 250 000 so like these square meters 10 but 200 that's five and I'm going to pick some random image so here Beach and here list property so here I'm going to refresh oops I get nothing because of the query parameters right now let me search so I made a ph and it's Asia so right now when I search you see how it is like there is a great difference but this switch should be fixed here because of that image um so let me go here above image container so properties and here the width should be let's make that 400 pixel me as 400 pixel is good enough for the width so here in the image container guys change the width from 100 to 400 pixel I want it to be static you can even make the 350 the same as the height I think that will look better yes that looks even better yes yes so this looks amazing you can see here let me search again for uh what was it here and here right now you see the price range is two this means that it should be here but it's when I refresh it does it's not here I can fix this insanely easy so I want to remove the CSS just to give some space and here value is going to be here State DOT type then for the select here is going to be price range like this and here is going to be continent so right now you see how it is but why it's not changing here let me see here from my main screen up here we have to provide the name of course I don't know how I forgot this part so here name is going to be a type then I'm going to copy and paste it for this and just change here the text to price range and continent so right now you see when I refresh the page here it's come on what happened right now oh let me see here what's the problem ah I know the problem I need here to put question marks here because initially it's undefined that's normal behavior let's go to this so right now when I refresh you see here how it is like here it says automatically if I make here the continent 2 it's going to be different continents right now it's Africa if I make zero it's going to be Europe so you see how it is working and when I click here on the search or here it's not specified with the weight don't they have uh then they have I it should be here Village and here is the European property this is working as we intended the only part left is here the property Details page which is not that it's let's say that's medium complexity I would say so here let me go here to the property detail and let's start typing here the jsx so first let me remove the text here and here I'm going to have class name it's going to be go to classes dot container then I'm going to have here classes.trapper and here I'm going to have a left side and when you have a left you have a right side so this is the left and the right side and here I'm going to hit an image of the property so here source and the image and actually I think it's a better it's going to be better if you first fetch the in the the property itself and then we write the jsx because if the data is dynamic and told that we cannot do anything so uh here const user we're going to need it is equal to use selector State and here state DOT alt let me import the U selector so use selector from react Redux okay then below this I'm going to have const property detail set property detail is equal to use state no then const show form set show form is equal to use state to false comes title set title is equal to use state again an empty string come on const description set description if you go to use State here you get an empty string const ID is going to use params like this and here comes form ref I'm going to need this because we're here in this country that specific component I'm going to send me we're going to send emails which is going to be something that I have never done in my previous video so it's going to be quite an interesting here so without further Ado let's continue here I hit on this because of the teacher I'm just going to comment it for now to get rid of the error and here let's fetch the details so here use effects just like this I'm going to provide the ideas Independence because when the ID changes I want to fetch again and here the function comes fetch details is equal to async like this try catch console dot error error and here for the try block uh const data is equal to a weight request slash property slash find in here the ID and this is going to be a get request and here set property details to the data like this and of course we call a function so I can console log the proper detail and let me see so when I click here initially it's a no of course it's not initially but we need fetch everything is here you see everything is here the European property type Village and all the other stuff so the data is fetched successfully here I'm going to have again uh cost handle Clause Forum which is again for closing confirm this form is not going to be for making properties but to send an email to the owner of the property it's going to be quite an interesting so here said show form is going to be false in here set title with an empty string come on and here's set description is an empty string and here I have conse handle Kindle contact owner which is amazing it takes an event and of course I'm going to write again preemptively event of prevent default and here to do emails to do send email logic here let me uncomment this image stack and here HTTP localhost 5000 images and it was a proper chip detail question mark dot image so you see that Village here that beautiful house but it's super big because I have not started that's why and here let's start with the right side so for the right side here I eventually an H3 with the classroom here of classes or title and here we have title colon and here I have then below the H3 I'm going to have classes though details which is going to have a classes DOT type and continent quite so descriptive questions I would say and here type and here I have inside the type as palm which is containing here the property detail in the type here continent is going to be equal to property dot continent just like this and here below the diff here I'm going to have a diff with the crossing of price and toner which is going to be spam dot classes dot price and here again I'll responding side with the price colon space dollar sign and here I'm going to have here the price itself so here property detail.price in here spam Style display is going to be Flex align items Center and gap of 12 pixel and here of course owner here the image of the person so here source is going to be http localhost 5000 Images slash property details question mark current owner and here the profile image so let me see if it's actually working and here is the image of this man here nice it's working so the logic is working successfully nice but we still have to write some other things so here below the prices in order with the upload the prices and only have glasses Dot more details and here spawn with the property detail here bits and here if a bit with the class name here of classes dot icon in below I'm going to have again another span with the property detail dot square meters in here f a square foe and here I have Triple S I need to remove one of it and of course I'm going to have the same class name here So Below this diff here and Below those two divs here I'm going to have a paragraph with the class name here description and here description and here inside the spawn the description itself so here property detail dot disk below this and don't have a button with the class name of contact owner and here the text is you guessed it contact owner and here that I'm going to provide a non-click event which is going to make the set show form equal to true and Below not that button not below this the button and those two divs here I prefer to select it for you to be incredibly as much visible as I can so here between the above the last if here let's make sure forum and if it's true we're going to write here the form so here diff last name is going to be classes Dot contact form on click is going to be here handle close form and here the diff is going to have a class name here of contact for wrapper and it's going to have here an event of on click event e dot stop propagation so inside the Contour contact form wrapper I'm going to give you an H2 with the text of sent email to owner and below the H2 I'm going to have the form so here the form and I'm going to make here the ref sorry if here to the formula that variable here that I have created here in the beginning so it's not coming out of nowhere you see and here is going I'm going to here the input which is going to be here a type of a text placeholder of my email and here we need to have a name which is from underscore email this is because of email JS we're going to use email.js to send emails right now I'm going to write here the names and you are going to see how they are going to be connected to let's say connected to the email.js template so right now just type here the name and you are going to see why do I do it here [Music] uh it's uh my username that's called username another input which is going to be here type email my so here it is a placeholder owner email and here the name is to understand so here from our email to the person email and here we are going to have or two more inputs which is going to be text and here again text both of them are going to be text here the placeholder is title so the title and the description of the email so here it's going to be two it's going to be from underscore title and here again it's going to be from underscore description or actually not from underscore description but uh just like this here and below this I'm going to have a button with the text of sent and you know below the form I'm going to have ai outline close here can I see of classes dot remove icon so on click handle close form so this is the property details of course we need to head into the CSS to make it visible so here I'm going to again split the screen as I've done in every single component here let's start so dot container is going to be height of calc 100 VH minus 60 pixel with a 500 percent and margin top of 55 RM then dot wrapper is going to be Max width of 1108 pixel height of 100 percent margin of zero Auto this will Flex align items of flex art and gap of 46 pixel then we are going to have the left and the right side so I'm going to separate them so for the left side here we have a flex of one just like this 100 percent then dot left and here the image inside is going to be height of 65 pixel with 100 and objective of cover uh we're going to Target the right side so top right is going to be a flex of one with a 500 percent it's pure Flex Flex direction of carbon below the right we have a title which is margin bottom of 2.5 irm from 20 to 500 font size of 28 pixel Encore here of two two then dot price and owner in here the only site is going to have height of 35 pixel and width of 35 pixel border radius of 50 percent and object feet of cover then dot details is going to have a display of flex Flex direction of column gap of an item and padding of zero top and bottom and zero weight zero wait come on SO padding zero top and bottom ends left and right of half iron no details and inside the details price and owner is going to be with a fancy represent display of flex justify content of space between online types of Center and martial margin bottom of 2.5 items but you still cannot see the difference because that images are taking a lot of our viewport so I suggest you that the first style here are the images to make them smaller because we cannot see anything here uh where is the image here of that person so here the price is in toner and ah here I forgot the question that's why it's still super big so here classes.com are here for the image of the person so right now okay you see it's okay nice let's continue here just add the class calcium here for that image stack here classes dot let's continue here so we were lost with the prices and toner let's continue so here price and toner in here dot price is going to be front weight of both and font size of 18 pixel damn dot price and owner dot price in here spend is going to have a font rate of normal so font weight of normal and font size of 17 pixel then dot more details is going to be displayed Flex the land items of Center gap of 1.25 RM and margin bottom of 3 RM then more details is going to be here a span which we have for the display of flex and an items of Center gap of one item border right of one pixel solid 0707 B5 cover of 2 c 2 c d c and here finding right of 1.25 RM so right now you see how it's looking of course right now we're going to remove for the last shot the border so more details span lash out border none like this then type end continent is going to be display of flex justify content of space between online items of Center text Transformer capitalize and the margin bottom of two irm so you'll see how they are looking right now let's continue here so type end continent the div and the span inside the diff background code of two two five oh ohac color of FFF which is a white color as you know pad equals 0.4 on top and bottom and one on left and right border radius of 0 pixel margin left of 0.25 RM then the description is going to be over full of hidden then text overflow of ellipses then white space of norab marks width of 450 pixel font size of 18 pixel and marginal two item on top and bottom is rotated right and here the the spanner that is for the description core of 444 and here for the sinus for for font size of 16 pixel then dot contact owner is going to have width of 25 percent text aligned text align of Center border 1 pixel solid transparent outline is going to be none margin top of 1.55 mm by link of four iron top and bottom and one left and right white space not up background color is going to be here come on back ground cover again 250 AC ore of white and cursor of pointer so let me see how it's looking nice this is looking great at the moment and here of course you need to provide the hover effect is going to be to discover cover is going to be again the 250 AC and here background code is going to be FFF and here I'm going to style the contact form so I'm going to make this variable here true just for you to see how it is or actually I can make it as a force and click the button what I'm doing so I can click the BTM same thing here contact form is going to be position of absolute top is going to be zero right is going to be zero height of 100 VH width of 100 VW then background code is going to be RGB a of zero zero zero zero point forty five the speed of flex along in terms of Center and justify content of Center in the index of 9999 just put several mines to be extra sure here contact form wrapper is going to be position of relative background cover is going to be FFF height of 65 VH width of 25 VW border radius of 20 pixel so right now let me see how it's looking okay it's looking nice but we I mean it's not looking nice right now but it's going to look soon so here come on contact from wrapper H2 is going to be takes a line of Center margin bottom 2.5 on top and bottom and zero left and right actually it's a margin just margin so margin 0.5 and 0 and margin bottom let's make it more so 3.5 then contact form wrapper form here the div in here wait why do we target the label we have here a level no I don't have a label okay and what else do I have just let me click it I mean I just need to position absolute this so remove icon is going to be positioned absolute top is going to be one item the right is going to be one item font size alternative to pixel and cursor of pointer so we've made the design you see it's working let's make the functionality for sending the email so guys let's go to email js.com this is the website that I'm going to use to send emails programmatically so here click on sign up free if you have not yet created an account but I have created one already so I can just sign in here I'm going to type my email and then I'm going to provide the password okay wrong passwords let me try this one okay this one is not trunk so this is a previous service but I can use this yes I can use sort of problem so we need to have three things we need to have the service here the service ID which is one of those things the second thing here is the email template that you see here uh where GCS if you have a template ID and the third here is uh I it was yes here into the accounts and here we need the public key so first I'm going to get here the service the service ID so I'm going to create into the source directory I'm going to create here a DOT gmv file and here I'm going to name my variable like this so I can just close right numbers it says I don't need it so react up it in service ID environmental variables oops environmental variables interact a little bit different than in node.js with one thing they must start here with a react underscore app underscore service and here the the whatever you want but here it must start to track underscore up okay uh let me get here this one so oops I can get the template like this wait did they copied come on how can I copy this uh connected come on I cannot copy a template I will kill me okay I have copied hear the react up template ID and here the template item and the next thing is the public key that we have here so react app public key and here we paste it so here uh our environmental variables so we can get them like this so service ID is equal to process.gmp.react underscore app underscore service underscore IG I'm going to copy paste them for the template ID and here it's template ID and here it is a public key so here public key in here public key let me let me try to console log them to see if I have them I mean to see if the Irma metal variables are configured correctly so that's why I can unlock them just to see console and here I have undefined after several minutes of debugging the problem is that the dot gme file must be into our root directory so to speak in our client directly in our client not in our source nothing components directly here in our client so the Dutch info is on the same level as those three directories here that was the problem okay let me close it in here let's make here let's make the function so we know that it works so handle contact owner I want to attach it here to the form with a non-submit event so here on submit and here I'm going to paste the function in here let's go so here image.js.cent from but I have I sense that there is a problem so the problem is that we have not installed in Pai entities at email JS browser this is the package this is the name of the package so install this package here and we will try it so let's continue here first we need to provide the process.jv or wait I took them as a variable so it's not a problem what I'm doing here I did that uh then the template ID then the Forum RF dot current and then the public key and then I'm going to have then as a result here so I'm going to console log the result and if you have an error we are going to catch the server of course so here error and we are going to control console log the error like this so it is to be honest pretty easy we don't even need this I think or wait I we're going to I'm going to leave them for now I'm not sure if I need them currently let me see I don't need them okay so let's see how is the form here when I emojis is undefined I have not imported it no problem so let's import it so oops on API but import email Js from add email JS browser like this so if I click on contact owner here my email my username so here those fields here should be filled so you don't know how we can do it it's not hard so here value is going to be user dot email here I'm going to copy this value and here is going to be set of an email it's going to be username like this and here 2 is going to be property detail dot current owner dot email so you're going to see the mail here so why uh I know why the emails here are the same why you may ask because we are the same usernative that we've created so we're going to contact ourself like there's no point so uh what was the other property here this is the European but I have I think a beach here and here the Asian one yes here this one am I the same here okay let's make it in another account so here click on log out to see logout works and here let's create I don't know yeah user one two three four five six at email.com here upload photo I'm just going to pick some random photo here one two three one two three and let me go here and let's contact the owner so something happened here as you may noticed I'm going to try again here to see the error so inspect here and when I click cannot read properties of no nine nine ninety four so nine film white why there's a problem I have not imported the user or what so right now if I make like this is a silver problem okay right now it's not a problem so my meal wait I want to console log this to see what's the matter so if I console log the user and it's know how the users know is on the application here wait don't they just register why is that the problem maybe because when I register here I don't remove the local storage or what so here local storage dot clear if there's a problem I'm going to try again so let me clear this here let's refresh the page and then try to sign in so user123456 gmail.com one two three one two three here click inspect and here let's sign in so okay we can Vlog in successfully here here we are so actually let's search here so let's search for Beach this price I made one property while I was not filming the video so this is the property that I made with my email so here contact owner here that's my email and here let's make the title final like uh hello bro how are you inflate click Send so we need to send it to this email here so when I click Send let me see here in my email so my friends you see it is working as I want it to work so this part of the application is working as intended so let me close here my Gmail here and what we have here we have done here with that functionality we did the details we have one thing to do which is not that small to be honest which is the responsiveness of the page itself so I suggest you that you first start here with another bar so let me make the page inspecting here let's make it 900 999 initially I'm just going to make it like this and which is like I don't want to touch them but like for specifically for this Dimension it's not that big of a video so I'm just going to go here into my uh GitHub just to copy the the yes itself I'm going to delete the style exercise that we're going to do it from from scratch so don't worry here I'm just going to paste it and here I'm just going to delete whatever it's here so we're going to start so uh what is this ah okay because of the dot so when I click here on this property you see how it is I want to make it a little bit bigger so here the height is going to be 90 wait I need to Target element so here list property wrapper is going to have a height of 95 VH and a width of 60 VW so right now when I click here you see how it is but even right now small uh what the button come on button I'm just going to copy and here make the margin top to zero let's say can I make the button uh the form just 100 VH just like this here I mean it's not the best solution let's make like this all right let's make it it's not that big of a deal okay here it is sent let's decrease here with 255. yes I like it that way so here we don't need to touch this it's not that big of a deal here and here we can make them actually in one row the featured prop the yes those properties here not featured but the popular properties so let me go here to the CSS of the popular properties where are you here so let's paste here there is oops not this but I'm just going to copy this and here let me remove it in here I want to Target here the dot properties I want to make them here's justify content Center so right now we don't see the difference but I'm going to make right now so dot properties and here dot property and the Imaging side with whoops width of 450 pixel so you see how are they looking then dot property is going to be width of 50 percent so right now you see how are there how are they and let's make the container here dot container margin bottom of 5 am so right now you see how are they looking they are right now in one column okay let's uh touch here the featured properties so let me go here to the feature properties and let's make them so here of course I'm going to remove this part and here dot container is going to have margin top of five item margin top not bottom like this let's make it actually a 10 to see okay right now it's based out as I wanted it to be yes and then I'm going to Target the dot featured properties they are going to be displayflex Flex direction is going to be here a column a lantern Center is Justified content of Center so right now you see how are they centered and here the footer and the new Setter I don't need to touch them so let me click here one not actually not click but let me search here for final let's say Beach this price and here Asia let's search here and let's apply the responsiveness here for the properties so close these files here and let me go here just I want to close everything because they have so many files here okay so here we go to properties and here I'm going to copy just paste this and here I'm going to Target first the option so dot wrapper and the options inside are going to have here width of 90 percent padding of 0.75 for top at bottom and one on left hand right and margin of zero Auto so right now you see how it is if I remove those signings you're going to see it different so right now you see how it's looking right now when I applied off silence it looks much much better and then I'm going to Target here the properties justify content of Center so right now you see how are they centered that's looking nice attack and even apply margin top of 1.5 irm just to space them a little bit or actually more let's make them three 3.5 yes like this and here I want to provide some Gap here so what is the normal Gap here which is 2 RM so let me make it 2.5 Maybe yes 2.5 works and here let me see here for the details we're going to touch the details as well so uh property detail here let's paste this in here for the details dot left is going to be display of flex justify content of flex end then this house looking okay then dot left oops dot left and here the image inside is going to be here a width of 90 percent and height of 75 percent so right now you see the image is more here dot right is going to be width of nine percent and then dot contact form wrapper is going to be a height of 75 pH it width of 75 feet double so when I click here you see how it is but if I had not applied the starlings I wonder how it's okay okay that's how it's going to reflect without responsiveness and this is how it's looking right now it looks much better in my opinion and I think in almost everyone's opinion so let me close it here and this is looking okay so let's go on to the next big breakpoint which is going to be a lot of fun especially with the navbar so 700 768 and you see here right now here we need to change something because it's you see how they are all smashed in together so of course we need to do some things here so for the nav bar here let me go here to another bar and here let me make oops it make your cost show mobile nav set show mobile Nerf if you go to use state to false initially so in order to make here the mobile we can go here below this here so below this and this so we are here and here we have a diff with the class name of mobile enough and here inside if show mobile enough is true we won't have classes dot navigation come on why is that here like this so like this and I'm going to make that so inside the classes of navigation we are literally going to have what we have here in our usual nav bar so I can fill copy and paste without any regret like that I think so I don't want to say a big word so right now this should not be visible so of course let me go here with just a second okay so here I'm going to make the wrapper display of none and Dot mobile is going to Mobile enough is going to be display of flex with a 500 height of 100 percent on items of Center so you see right now how it is but we still need to write a lot of things in here the the mobile enough bar is surely display of none so by default is a display on phone so here above the responsiveness it's a display of none and here we display it and here we have this problem on the wrapper so we do the inverse logic so to say and let me just close it here just to hit the nav bar okay so let me go here back to another.js in here what else we have to write so here below this here so below this div here I'm going to have here show form and if show formative show mobile enough like this we're going to have a we're going to have exactly this thing here so I can three copy and paste to be honest so like this so this is going to show only if we have those Bots to things and this is basically it and here uh below this below this below this so here there's so many divs here I'm getting confused when I look at my monitor but here it is below this so we have here if we don't have mobile enough we're going to show ji hamburger menu with a class name here of classes dot hamburger icon and here I'm going to provide an on click which is going to be here said show mobile enough to the opposite of the previous like this so GI humble reminiscent defined okay we're going to import it right now Port from a yeah icons GI and let me see right now we don't see it or do we okay we see it let me Refresher okay so let me go back again to the CSS and let's start typing the code so then below.mobile enough we are going to have.com Humble gear menu and here display is going to be a block margin left of one item and font size of 26 pixel like this perfect then if I click on this you see how this is looking of course we need to change it here Dot Center in the input inside is going to be background color of transparent then dot Mobile close icon is going to be position of absolute top 1.5 RM write one item for size of 24 pixel so right now when I click on this I want it to be you know oh okay so it is exactly below this so here dot navigation is going to be here a width of 75 percent width of 100 position fixed then top of zero left of zero Z index of 999999 just want to write some Nines in here background core of 55 so right now it's going to going to look like this it's position fixed top left position okay then below here we have display of flex justify content of space around space around below this alignment of Center Flex direction of column and gap of 2.5 irm and here below I have dot module dot model is going to record of FFF so like this and you should be here on that side so my friends I was wondering why it was looking like this is the mistake was again a very silly one here into the navigation the height it should be here 100 in the width 75 not wheatened with its width and height so here make the height 100 percent in here with 75 percent in the navigation class name so right now it is working as I intended but when I click here you see how it is I need to move it a little bit so you see here I have already moved but can I move it even more let me try so 20 pixel how I'm going to move it now let's make 15 let's make 13.5 I like it that way and I can bump up the view view High a view with like oh that's too much makes let's say and five and here I'm going to make this 12. I'm just making some arbitrary data okay so this is working here and here I should have an icon to toggle away from this so here the icon so my friends here just let me remove this here I have tried something but the close icon should be positioned here between the left and the center side so here AI outline close and here I'm going to give it the class name of classes dot Mobile close icon and it's going to do just the secure so on click is going to be like this set show mobile enough is going to be false so Mobile close icon here let me have already targeted let me see here yes I have fully targeted so we can go here and to see it here I have already targeted this DC here so top here right in here font size of 24 so I can do this and here why do I see here an icon let me see where it is exactly so this is below the mobile enough let me check where it is and I need to make a condition or what wait if I make a condition show mobile enough no it's an another icon here which I don't know from where pops up and this is that icon here that I've tried you you have probably not written this I did that outside of the video so I'm just going to remove it you don't need to do anything in here you see so right now here we can toggle like this here I can list the property here I can do whatever I want so the next part here is the hero section which is going to have us still quite a few styling so let's go here let me close here love bar and let me go here to the hero so the hero is going to be just let me copy here from the nav bar this so just the media I'm going to remove the stylings here so here you see how it's looking right now we need to make the titles lit the titles are smaller and options smaller or actually bigger we need to make the options bigger we're going to see what do I mean here so dot wrapper in here the H2 is going to be a font size of 40 pixel then dot wrapper and then the H5 which is a font size of 30 pixel and then dot wrapper we target the options a bit of 90 percent so right now you see how they are looking right now this is just three stylings and it looks completely different that's why I like so much responsiveness you see just those three simple stylings and this looks very different if I remove them we are going to see how it's looking like it's completely different with those dialects here okay then I okay here we need to do some things here into the popular properties so popular properties and here we're going to make dot property width of 65 percent let me see how it's looking okay you see right now it is looking as I wanted it to look so this is looking amazing then here let me check what we have so here we have this okay this okay here the footer actually we can change it so I'm going to copy this and let's go to the footer here I'm going to make the comment here responsive and here I want to make uh the the this the paragraph smaller so I can just copy and paste it in here let's make 14 pixel and I'm going to decrease the width to just 400 so right now it's going to look like still we have some stylings left to do so here let's make the height the foot or height they make to 500 pixel is going to look so footer and the this let's make the let me try here the dot wrapper so dot wrapper is going to be instead of justify space between what is going to be so let's just find content Center or I'm going to try line items like start I mean yes and we are going to provide some footer margin top of 2.55 RM just to space it even more actually 7.55 mm let's make just a 10 yeah like this here and let's make this smaller but why are they aligns like this here let's make here the wrapper with here of 95 percent okay so here Max width will be 300 pixel let me try this okay 300 pixel like this this is working good so this was something for the footer let me check here the detailed properties if we have to do something just let me check here my code if I have for the property details yes I do have actually so let me go here and here for the property detail let's write something so here the contact form wrapper is going to be larger so height of 75 VH and width of width of 50 VH and here dot contact owner is going to be a width of 150 pixel so here you see how it's looking right now if I remove here the stylings how it's going to look I mean it's not looking great so right now it's like this is looking much much better and here let me check what Tails do I have so I think we are ready with the responsiveness my friends the next part which is going to be the more interesting part here is going to be the to deploy the back end as well as the front end so my dear friends for deployment we're going to use neatly file for the front end and here the render for the back end so let me first log in here into the Notifier I have already clicked an account if you have not you can just register it's not hard literally it's so fast so here I'm going to write my password and here I'm logged in and here simultaneously I'm going to login into the render so here I am right now logged in both of the websites so here let me first make the back end so here web service you see here connect the repository in here public git repository so here I can go to my GitHub so GitHub web oops not here but here so I can go here here and then go to the back end and or no not to the back end but to the root directory my friends here where is the root directory bucket and client and here you paste it you click on tune and here it's loading right now don't worry in here just write some news so here you stayed up more this will be the name here I have selected the location which is the closest to my home here I have four choices and obviously from Bulgaria Germany is by far the closest is going to be the back end this is the directory in Here Am Pm Run start is going to be and this is it then the next part is create web service and right now it's going to redirect us back to another page if I'm not mistaken okay while we're doing this thing you see here it is loading we can go here to an identify and to for netlify it's going to be a little bit interesting so here I'm going to make here into the first actually in I make City client and here I'm in the cloud iron npm run build here for the client so here I am writing this function and it is going to take not that much here like 10 to 15 seconds so we can see here what is going on so here I have done everything so yes it's just loading loading loading and here in here inside the build folder I'm going to make underscore redirects and here I'm going to have that code here and here into this specific file we need to add this piece of code so here slash Aesthetics space index.html in here not one but you see two we have two spaces so one space to space in total we have here two space and here 200 and here we have already done here the builds files so here you can click browse to upload and you can we can go here and here it was YouTube Let me see what was it here YouTube Real Estate so we can click on this and here I can click on client in the boot folder so here we just upload the build folder so you can click upload here and this will upload of files from build you only do this if you trust the site upload and let's see what happened here wow here we have some problems as I see the URL parameter ah here I know the the problem here I have uploaded it but I have not uploaded environmental variables how it's going to work it cannot work without them so here underscore URL and here the value so let me go here to the bucket and here let me copy it let's go back paste it at environmental variable ports Port 5000 at environmental variable in here JWT underscore Secret one two three so save changes and here on manual deploy you see here you click you click on the first one deploy latest comment you click on this so it's going again to start the process so with environmental variables right now it's going to start it so here we can go to logs and it's going to start again so let me see how this is doing so you see here when I click this working I mean we have we have it working you see here how it is nice and of course here it is right now in progress so we're going to wait and I'm going to show you that it is working so my friend here we are on the render and it is working successfully so you see here server has been started in DB is connected we have get rid of the errors so here I'm going to copy that URL this is like our new packet link so here I'm going to go to uh not public but source where it was com not component are you choose fetch API and here I'm going to replace my link here so do you see how convenient it is to have one centralized place in which you have your apis I just copy paste and this is it I don't need to write a code in 15 components to change the localhost 5000 this is incredibly convenient and actually I went too fast with this icon I will going to again build that application here so I'm just going to copy this and here I'm going to delete it and build it again because I forgot that first I need to make the backend and then the front end so you see here first make the render and then make the netify so right now I have made this here and I'm just going to go here to the build underscore redirects and here going to paste that and it is going to be soon okay so here I'm going to terminate my current side so here delete site like this and here is it easy okay so it is it has been built successfully let me again upload it so it's it's uploading usually very fast like in 20 seconds at most so you see how this is working creates see okay this is working too so I can click here on this let me go here to sign up here username something email something gmail.com upload photo so here of course I need to go here to the downloads and here I'm going to use this image here one two three one two three register is not working what's the problem never the site was router https but it was an insecure element ah I get it I get the problem of course http localhost 5000. so here I need to change that link here to here it was yes it is because of the images I think here too here I need to paste it and here as well so right now let me try again oops so right now sign up let's try to again some random data three one two three the password here I'm going to again use that image here register and again I have some error which is interesting blocked by client here I got that ah okay we get no error so first I got an error then I don't have an error nah I get we don't have an error guys don't worry I I guess what's the console miss it is because of damage

Channel: WebDevMania

Views: 23,843

Keywords: react js, react.js, node.js, node js, programming, full stack, mern stack, javascript, front end, back end, coding, html css

Id: cKeip7PkLPo

Length: 274min 16sec (16456 seconds)

Published: Thu Feb 16 2023