React Real Estate App UI Design Tutorial for Beginners

Hello friends today we are going to design a real estate web application using react this is the homepage we can choose the type location and price and search for the related items here is the list page we can see the search result we can change the filter options and search again and here we have a map that we can see the locations I can check the entire map I can zoom in or out and when I click on a marker it shows the information of that place so users can choose a place using the map or this list let's open up the single page we have all the information here again the location of the place all the features and the description and here we have a slider we will create this slider without using any third party Library we can save the place send a message to the owner of course to do that we should be logged in first after the login process we will see the profile link on this page we can change the user information we can see our posts and the saved posts and on the right side we have the latest messages when I click on any message here the chat component shows up and we can see the conversation and send a new message it's a great tutorial to understand the react Basics and to improve your design skills and this design will be responsive so you'll learn how easy to change Styles depending on different screen sizes and in the next tutorial we will create our backand server and fetch all these data from a database so let me know in the comments which technology IES you want to see in the next video I'll read them and start creating the tutorial if you want to see more projects like this one please like the video if you are ready let's get started okay I'll create a new folder on my desktop let's say estate UI I'm going to open up my V code and move this folder here right now we are ready to create our react app to do that we'll be using my GitHub repository the link will be in the description below and when you open it you will see this page and here we have the starter Branch it's an empty project so we are going to create everything from scratch and inside public folder we have all the images we are going to be using during this tutorial so it's a great way to start our project so let's come back by the way at the end of the video I'm going to create here one more branch and it's going to be the completed version of the application so it will be an open-source project if you want to you can give it a star and if you have any problem you can check the code here okay let's import this project to our vs code I'm going to come here copy this URL I'm going to open up my terminal and I will say kit clone we are going to be using this starter Branch so I will say single branch and the branch name I will paste my URL we are going to download everything in this folder so I will say dot and that's all but this tutorial will be really long and you will not finish the project today probably so it's better to use the fork option and it will create your own repository and it will be much easier to keep track of your progress if you choose this option as you can see it's going to create your own repository this is my test account and right now you can use your own URL here in this case you don't have to write single Branch you can directly say git clone your URL and Dot so I'm going to ENT and they are here as you can see we don't have our libraries let's install and start our application to do that I will say mpm install as you can see all the dependencies are here so we are ready to start I will say mpm run Dev and this is the local server that we are running our application ation let's open up okay so right now we can create our website this is our example but before I want to give some style as you can see there is a space here and we don't have any font family so let's give this style using CSS but to do that we are going to be using SAS we are using that because it makes writing CSS much easier we can use nested item so we don't have to give class name for every single item when we start you are going to understand better by the way I know some of you will say why you are not using Tailwind I just try to use different Technologies as much as possible we created projects with Tailwind we created projects with styled components material UI and I try to encourage you not to stuck on a single technology because when you get a job you'll be asked for different Technologies if you want to be a frontend developer or a fullstack developer you have to know CSS you have to know Tailwind vanilla JavaScript typescript or whatever it might be so try to create different projects with different solutions this is how you can keep yourself up to dat okay let's install our library mpm install and sess okay let's create here our main CSS file I'll say index. SC CSS and I'm going to import this file inside my main jsx file I'll say import index. scss okay so let's get rid of this empty space I'm going to use the selector and here pading zero margin zero and the Box sizing will be border box and if we add a link in our app as you can see there's a default style here I don't want to see this color or this underline so I'm going to choose all the links in our application and I will say text decoration will be n so it's going to remove the underline and the color will be the parents color so I will say inherit okay awesome so let's change our font family I'm going to choose the body and I'm going to change the family and finally I will say overflow hidden if you don't know why we are using buddy for the font family or this overflow or if you don't know this selector I recommend you watch my CSS video I explained everything you need to know right now we can create our layout let's check our app as you can see there's a space here it's not full screen and if I open up my console and if I shrink the page as you can see its size is changing let's do that I'm going to close here and here and for my application I'm going to give here a class name and let's say layout we are going to change here when we build our page rouer but for now it can stay like that I will just say hello again and for now I'm going to create here a new CSS file and let's say layout I'm going to write my class name here and let's call this file here let's see okay it works let's give a full height so we can see better okay basically we are going to have three different break points small screens medium screens and large screens and for each screen size we are going to change the width of this layout and the maximum size of this width will be this size as you can see its size is not 100% we are going to give a limit let's do that I will say Max maximum width and it's going to be 13 66 pixels like that let's Center our layout I will say margin left and right and it's going to Center my item and also I can give a space here so I'll say padding left to any and right will be 20 so in any case we are going to have here a space it will be really useful for the mobile screens you are going to understand better right now let's create our break points again new file and I will say responsive do CSS and I'm going to create here a sass function using mixin and the first function will be small and inside I will create a media query and I'm going to write here my condition and it's going to be maximum width 738 pixels and inside we are going to write our style depending on the class name so for each class name it can be different styles so I will write here content and and using this function I can say for small screens make the background red for example in this case our content will be background color red let's try I'm going to save here and I have to import this file here import responsive. scss let's use our fun function here to do that we are going to be using include and the function name small and background color will be red let's open up our console and Shrink our page you can see the number here when it comes to small screen as you can see it's red this is how it works so let's create other screens by the way you don't have to write small medium or large if you want to you can write phone desktop large screen whatever you want but I will say MD and large and this break point will be 1024 and the biggest screen let's try again medium and large let's say this color and this color as you can see at the beginning it's purple because in our condition the maximum width is this width but our screen is much bigger than that so in this case it's going to take this background color but if the screen is maximum LG it's going to show curl after that this blue color and this red color let's see remember this is our width at this point orange this point oops didn't work because we are not using mobile first in this case we should write them in order for the biggest screen is going to be this smaller smaller and the smallest let's see again purple orange blue and red if you want to you can use mobile first approach it depends on you but it can stay like that so what I'm going to do here let's make them a little bit lighter I'm not going to delete them we can see which screen size we are using so for the large screen the maximum width will be 1280 pixels so we are going to keep seeing our white space what I mean by that when I shrink as you can see there is no space here to prevent this I'm going to give here maximum width in this case we are going to have a space and in this point again I'm going to give a space and it's going to be 768 pixels and for the small screen maximum width will be 640 and perfect this is our responsive layout so I can delete this background color others can stay and let's take care of our naar I'm going to close here and let's see what we have as you can see we have two sections those links logo and links and some other links here but as you can see they are separated and the background color is different so let's create our first component and create two different divs inside source folder I say components and inside nowar do jsx let's create our function nowar and I'm going to export my component export default n Bar and we are going to return a n Bar and inside we are going to have two items the left side and the right side let's use this component here I'll say now and let see okay our items are here so how I'm going to separate them firstly they are going to be horizontal so we can use display flag let's do that I'm going to create a file number. CSS actually I can create here a folder it can be easier to see because we are going to create different components in this case make sure that it's updated and let's import our CSS nowar do SC CSS so I'm going to come here and choose my nowar and I will say display Flex justy content space between just like that I can give here a height let's say 100 pixels and in this case I have to Center my items vertically to do that we are going to be using align item Center let's move this here okay awesome so let's create our logo as you can see there's an icon here and this text inside left D I will say a link and inside this link we are going to have an image and the image will be logo. PNG after that is Spen and you can write here your brand and after that by the way let's give here HRA and another anchor tag let's say home about and and the others okay uh for the right side again two links let's remove this right just like that and I will say sign in and sign up okay let's check our example as you can see the left side is much bigger than the right side it's like 60% and 40% if you want to you can give your size like that I'll say left and right as you can see we can use our items inside the parent this is why we are using scss it's much easier right now and and you can say with 60% and 40% but since we are using display Flex I can say Flex three and two so it's going to be three units it's going to be two units okay if I give background you can see better just like that right now let's take care of this logo I'm going to remove those background colors and inside left I will say logo first the font weight will be bold I'm going to increase the font size again I'll say display Flex remember this is our logo this icon and this text so they are going to be horizontal and I'm going to give a space between them so I will say capap time pixels let's check our example okay I didn't give class name here let's say logo actually I can close my sidebar and move this now bar here okay right now it's much better let's see okay there's a space between them but they are not vertically centered so I will say align item Center let's decrease the size of this image I will directly choose image inside the logo and I will say 28 pixels okay as you can see those items are not horizontal it's really easy to handle you already know how to do that align item Center and Gap between each item will be 5050 pixels just like that so let's move those items at the end of the right de again I will say display Flags align item Center and the justify content will be flex and so it's going to move the items to the end of the div just like that and I'm going to change the background color of this right side as you can see it's going to be this color so let's say this color but its height is not 100% let's fix this okay and what about our items as you can see the last item has its background color let's give a class name for that I will say register and I'm going to use it in my right d i will give background color it's going to be this yellow color okay by the way there is a typo here and I'm going to give some margin and padding I can do the same thing for this item also so I'm going to choose the a tag inside my right do and I will say padding 12 on the top and bottom and 24 on the left and right and I'm going to give margin and perfect what about how effect if I hover over my links as you can see they are changing their sizes so I'm going to choose all the anchor tags inside my nobar I'm going to give a transition effect and it's going to take 0.4 seconds and the timing function will be e and when I hover over them I'm going to increase the scale it's going to be 1.05 that means 105% bigger let's see and awesome let's open up our console and when I shrink as you can see we don't have this logo text anymore and if I shrink more and right now we have a menu when I click we are going to see our menu click back by the way there is a problem here we cannot see the Border we are going to fix this but before let's take care of the responsive design for the all links I will say include small screen and display will be NN of course if you are using this function you need to import your file I'll say import responsive scss let's open up our console as you can see they are gone and for the medium screen I'm going to delete this text let's copy this find our logo if you remember we have a span here I'll say span for MD screen again is going to be display n but for the small screen you are going to see it again so I will say initial let's see it large medium it's gone small it's back it's that easy guys so what about the responsive menu firstly I'm going to create here an icon so inside the right there I will say menu icon and let's create here an image and it's going to be let's see what was the name menu.png and right now at the beginning it's going to be display nonone so I'm going to come here and say menu icon and if it's small display will be initial and also we are going to need here this menu let's create I will say menu and inside again again we are going to have some links let's copy here additionally we are going to have sign in and up and for this menu I'm not going to write display nonone because I'm going to change its position it's going to be position absolute and at the beginning it's going to be beyond our screen it's going to be here we are not going to see it when I click on this button I'm going to change its position let's come here after menu icon I will say menu I will say position absolute let's give background color it's going to be black and the text color will be white and height will be 100 VH so it's going to contain all our screen as you can see and its width will be 50% the half of the screen let's see okay it's here but we didn't give any position if I say top zero and right zero it starts from Top zero and right zero here right now if I decrease this right side let's say 100 pixels as you can see it's moving on the X axis and it's moving to the left if I say minus it's going to move to the right if I say 200 it's going to move more and if I say 50% we are not going to see it anymore it's beyond our screen so this is going to be its initial position and when I click the right will be zero so I'm going to write here a condition to do that I can create here a use State hook but before let's take care of this icon it's too big inside menu icon remember we have an image it's going to be 36 pixels and cursor will be pointer okay by the way for the medium screen I can delete this background color because in our example let's close here as you can see it's white and after the large screen we see this color so inside our right do I will say include MD the background color will be transparent okay right now let's create our functionality firstly we are going to have a state I'll say const open set open use State hook and at the beginning it's going to be false and when we click on this button we are going to change this state if it's false it's going to be true and if it's true it's going to be false so I'm going to create here on click event and we are going to set our state set open and it's going to be the opposite of the current value you can use it like that or you can say take the previous value and switch that value like that it's exactly the same thing and right now I can write here a condition I will say if it's open the class name will be menu and active if it's not it's going to be only menu right now I can add here one more class name and I'll say if it's active the right will be zero let's see when I click and Perfect by the way we cannot see our icon anymore to prevent this I will come here and say c Index and any number bigger than one just like that okay we can give here any transition effect inside menu I will say transition is going to take 1 second and again timing function and it's much better right now but there's a problem we cannot see our items because if you remember for small screens we said display none but it's not for our menu anchor tags so I will say include small the anchor tag will be display initial okay right now they are here let's Center them on this menu to do that again I'm going to be using display Flags but this time they are going to be vertical so the flex direction will be column I will say align item Center justy content Center and perfect let's increase the font size okay awesome if you want to you can add here some icons you can change this menu icon but for now it can stay like that if I change anything you can see in the GitHub repos story but right now you know how to create response see now bar small screen medium large and X SL okay we finished our naar let's take care of our homepage so again we are going to have two divs left and right side in the left side we are going to give this background color it's exactly the same and we are going to have an image some text and this search in by the way there is something wrong here let me fix it okay so in this component we can search for any location any price uh we can change the type of the search of course we are going to give all the functionalities in the next tutorial for now we are just going to design so let's create our home page and after we are going to create other pages so again I'm going to be using appj s x later we are going to be using react R do but for now let's open up the menu and in the source folder I'll say Pages or routes whatever you want let's keep it like that and the first one will be homepage let's create our jsx file and CSS file and I'm going to create my component as you can see I'm using this shortcut functional component SC CSS and it creates my component it Imports the CSS file and gives here a class name if you wonder how I am doing this you can visit my GitHub page again and find the cipit repository and here you can see my react component cipit as you can see if you say functional component SAS it's going to create this functional component and if you use Arrow component SAS it's going to create this Arrow component so you can copy this Json open up your cipit search for JavaScript react. J on or if you are using typescript you can choose this one and paste it here and if you are interested in my other shortcuts you can let me know in the comments or give a star for this project so I can see that you are interested and I can update this repository okay let's close here functional component s and I'm going to use it here I can actually write here a div let's say nar and the content and I'm going to move my item here right now I'm going to make my layout 100 VH okay it's already 100 VH and if I give background color for my content you can see that it doesn't contain the rest of the screen if you remember our nabar is 100 pixels you can basically say height let me move this here calculate 100 VH minus 100 pixels in this case it's going to be what we want want but also if you don't want to use calculate you can use display flex and our items will be vertical column and I will just come here and say flx one 100 pixels is nowbar and the rest is our content I'm using this class name because the content will be our homepage our list page single page login and register pages so they all are going to be the same okay I'm going to remove here and let's close here and let's open up our homepage so I'm going to create here a text container and image container image text and and I'm going to do exactly the same thing homepage display Flags the text container and image and again Flex will be three and it's going to be two and I'm going to be using exactly the same background color remember this color and let's see okay I can use 100% here so we can see the background color better and inside this image container let's add our image and it's going to be let's check bg.png okay as you can see it's overflowing I will say image with 100% in this case it's going to fit inside our container but in our example as you can see it's overflowing a little bit so you can come here and increase this number let's say 15 and it's overflowing to the right to prevent this again we can use position absolute and the right will be zero and if you are using absolute positioning the container should be the parent should be position relative just like that if you don't use it as you can see it starts from the closest relative parent which is the body to prevent this we are using relative by the way I can Center my image display Flex align item Center okay so what about the text container let's create this H1 tag actually I'm going to make this longer because I want to show you something as you can see our text ends here in this case it's going to be behind this in which to prevent this we are going to need here a padding but if I give padding for the container directly it's going to push our image container to prevent this we are going to need here a wrapper let's move this here and inside text container I will say rer and right now I can give the padding for this dropper inside text container container I will give padding but it's going to be padding right only and 100 just like that right now we don't have any problem let's create our other items I'm going to copy this it's going to be our description by the way let's give here a title P tag is going to be only one sentence and after the ptag we are going to have this search bar but it's going to be a different component because we are going to have here tons of functionalities let's create that component inside components folder I will say search bar search bar. JX and S CSS I'm going to save and I will use it here after the P tag and finally we are going to have this section that includes three boxes so let's create here a do and each individual box H1 tag let's say H2 and it's going to be years of experience I'm going to duplicate this award gains and this text and that's all I think let's check okay let's give a style after that we can take care of this search bar I can make this larger and for the text container I will come here and again display Flex Flex Direction column and I'm going to Center my items and gap between each text will be 50 pixels like that but as you can see it's not centered because it ends here it's not 100% to prevent this I will just say height 100% okay let's take care of this title it's too small it's going to be bigger and and this parent de will be horizontal boxes display flx and just fire content space between let's change the font if you remember we have H1 and H2 tags font size will be 36 and for the h2 tag is going to be smaller and also ther just like that so what about this search bar let's close everything here open up our search bar and let's see what we need firstly we are going to have two Dives first one will be our types and the second one will be this form input form so let's come here and I will say type and one more D and it's going to be form actually I can directly say form inside this form we have three inputs it's going to be our location and placeholder that's a city location I'm going to duplicate this it's going to be Min price and maximum price in this case they are going to be number and I'm going to change the name first one will be minimum price and and maximum price you can also give here some District I will say minimum will be zero the maximum will be let's say 10 million and again it cannot be a negative number and it cannot be more than 10 million and finally we are going to have our icon search icon and that that's all I think okay I forgot types buy and rent so I will come here and say button buy and rent so let's give a style I'm going to move my CSS file here so inside type we have two buttons I'm going to give some padding top and bottom and left and right let's give a border one pixel solid and the color will be this gray color and as you can see those colors are different when I click here it's going to be active and the background color will be black so again we are going to need here a functionality at the beginning this button will be active but we will be able to switch that to do that again we are going to create a use State hook and it's going to be our query object basically it's going to store the type the location and these two prices so I will say query set query use State hook and at the beginning the type will be by the location will be empty string minimum price will be zero and the maximum price will be again zero so when I click on those buttons I can change the type of this object so I will say on click and let's create a function I'll say const switch type and we are going to call this function here but we are going to send our value if I click on this button we are going to send buy if I click on this button I'm going to send rent buy and this is going to be rent but writing them like that is okay but you shouldn't repeat yourself so what I'm going to do I'm going to come here and create my types this going to be either buy or rent and using this array I can show my buttons types do map and for each type I'm going to show a button and right now this text will be my type by the way there is a warning here because we don't use any unique key if you are using map you have to give here a unique key and we can use directly type because they are different buy or rent let me close here and right now we can pass here the type and I'm going to take this type here let's say value and I'm going to set my query I'm going to take the previous value and everything will be the same so we are not going to location minimum and maximum price we are just going to change the type and it's going to be this value of course I should drop this like that we are going to return that and right now we can update our button according to this type so let's come here and say class name and I'm going to write here a condition and I will say if the query type let's remove this code equals the type of this button it's going to be active otherwise it's going to be empty in this case at the beginning our type is by and since type of the first button is by it's class name will be active in this case I can give different style so I will say if it's active the background color will be black the color will be white just like that if I click here as you can see it's changing but let's change this background color it's gray and also I'm going to give cursor pointer background color will be white and I can capitalize the first letter to do that I will use text transform and capitalize just like that and if you check our example you can see that this point and this point is rounded and we don't have here any gray border but in our example they are sharp and we can see this gray border let's take care of them I'm going to choose the first item and make this point round it I will come here and say first child and Border top left radius is going to be five pixels and I'm going to delete the border right it's going to be n because remember we have a border and I'm going to delete this one I'm going to save and perfect let's do the same thing for the last child I'm going to copy and paste and it's going to be last child in this case top right radius and Border left will be n okay perfect and what about our form here as you can see they are horizontal and we have a border here after this type I will say form it's going to be exactly the same border I will say display flag just five content space between and I'm going to give some height and space between each item will be five pixels okay let's take care of inputs I'm I'm going to delete the Border I'm going to give some pading for the left and right side and the width will be 200 pixels and for the small screen we are going to decrease that as you can see this line is to tick to prevent this I can say border buttom no so we are going to have border for the left up and right just like that and what about this button I'm going to change its color it's going to be exactly the same color and I'm going to increase its size button I'm going to delete the Border we can click and the background color will be our yellow color and I will say fla one okay perfect maybe I can decrease this image size let's say 2 and4 okay and that's all what about the large screen this is the X large large as you can see this button is too small to prevent this I can decrease the size of this price and this price so I'm going to choose my input and I will say include large screen I can decrease this padding is going to be five but also I'm going to decrease is the size of the second and third item so I can use anth child here and this second item and also the third item and the sizes will be 140 pixels of course we should include our responsive CSS don't forget semicolon and it's much better right now and for this point I can remove this image container I'm going to open up my homepage CSS file and again I'm going to import my responsive CSS like that and for the image container I will say include MD screen display n okay perfect we are going to take care of these items but before let's finish our search bar when it's small they are going to be vertical so I'm going to come here find my form where is our search bar here and I'll say include small and if you remember it's a flex box so I'm going to change the direction just like that okay if I try to do this right now it's going to overflow because of this box and this title is too big so let's take care of them first I'm going to come here let's first start from the beginning for the large screen I can decrease this image size include LG it's going to be 105% and I'm going to decrease this font size I will copy this find my title and it's going to be 48 pixels and I can do the same thing for box H1 here let's say 32 pixels okay and for the MD screen we already removed our image here so we don't need this space anymore I'm going to find my rer and I will say include MD screen we don't need any padding anymore it's going to be zero and finally for a small screen we are going to remove this box container here let's say display nonone and it's going to be small and I can change the position of those items they are centered but I want to move them on the top of the content so again wrapper include small and justy content flags start it was center right now it's going to be flx start okay awesome so we can take care of our items right now so I'm going to open up my search bar for the MD screen we don't need this withd anymore so let's copy and paste this and for MD screen they are going to be Auto so we are not going to change the size and this input also it's going to be for the first item they are going to be for the second and third items and I can give some padding I will say include small screen and padding will be 20 like that right now we don't need this bter anymore let's find our form okay we already have small here and I'm going to delete the bter uh this time I can use border for the first item first type I'm going to find find my button and the first child and for the small screen border bottom one pixel solid and our gray color and maybe I can give here some space inside type margin bottom five pixels okay what about this button again it's going to be bigger so I can just give a padding this is our button for the small screen it's going to be 20 okay it's too big maybe 10 and awesome of course we have a background color and it looks weird this is how we can see our inputs but if I remove let's open up our layout and I'm going to comment this out of course this time we are going to see other colors as you can see our inputs are not visible the prent is I can give border buttom this is our input and small screen border buttom one pixel solid and the gray color it's okay but let's change this to full border okay it's much better I think if you want to you can remove this space and Border let's see how it looks I'm going to remove this and this okay it's much better so we don't need that and this one I gave them because I forgot my background color when it was pink it was nice but if the background is white they are not going to be visible so we have to give those borders okay this is the small screen for the mobile version we are going to see it like that perfect for bigger screens it's going to be like this by the way it's huge for MD screen we set auto but let's make this 200 again but for the small screen it's going to be Auto uh second and third child again okay let's check again or the Mobile screen they are going to contain all our container for Mobile screen sorry for the medium screen they are going to be 200 again for the large screen these two will be smaller and for the biggest screen they are going to be two 100 again so this is our homepage let's see did I forget something or not okay it's exactly the same only difference is this number so we finished our homepage let's take care of other pages but before we should learn react rather don't in our project we just have a homepage but right now I'm I'm going to create one more page here and it's going to be the list page let's create our function functional component or Arrow component doesn't matter and the CSS file okay if you remember in appjs we show here the homepage directly but how we are going to show the list page when we change the URL to do that we are going to be using react rouer do it basically allows us to switch between pages on the client site to do that we are going to be using react browser router function and inside we are going to pass our URLs and the components that we want to show for example for the homepage in the example it shows this component in our example we are going to show this homepage component and for the about URL it shows this component so in our example if the path is list we are going to show this page for the single page login page register page we are going to do exactly the same thing and after that we are going to create a router provider in our appjs and we are going to pass the router that we created here let's do that I'm going to copy this and we are going to install this Library let's create a new terminal and I will say mpm install re crder and after that I'm going to open up my appjs and let's import the necessary items like that and I'm going to comment this out we are going to use it later in different component and I'm going to create here router provider and we are going to pass inside our router but before we should create let's copy this and paste here for the homepage we are going to call our homepage function this component and for the list page we are going to call list page component let's pass this here and let's see of course this is not our design because we are not using this layout anymore but it's not important for now we are going to fix that the important thing is our path here as you can see this is the homepage but if I say list as you can see the list page this is how we are using react rather don't but in our example in the homepage we have a bar for the list page again we have the na for the single page login and register page they all are the same we are going to have a common component here which is n so instead of writing them again and again inside each page we can create a layout as we did here we can create this component and instead of this homepage content we can show different pages to do that we are going to be using react ROM Outlet component by the way we are not using those methods I'm going to remove and and we don't need n bar here so what I'm going to do is create here a new folder and I will say layout layout. jsx layout do scss let's create function and inside I'm going to do exactly the same thing let's cut this from here and paste it here of course we already have layout here just like that let's import our nowb bar okay it's not here n Bar and N bar and instead of this homepage we are going to be using the outlet component okay so I'm going to open up the index CSS sorry layout CSS and I'm going to copy everything here and paste it here in this case I should change this URL and that's all so we don't need this file anymore I'm going to remove and right now we are going to need some changes instead of creating all pages like that I'm just going to add here my layout this is going to be the main structure of our application but I'm going to Define here the children basically we are going to add here our pages and they are going to represent this Outlet so if I say path the homepage the element homepage component and one more the list page and the list page component so we are doing exactly the same thing here the only difference is the main layout let's see right now by the way if you remember we removed this file so we don't need this here and our now bar and this page if I open up the homepage and perfect this is how we are using react rouer doome layouts so I can do the same thing for the single page let's create CSS and the login page just like that let's make this lower case and I can use them here but I want to show you one more thing here when we list our single items we are going to be using their IDs for example if I say ID 1 we are going to show here our single page so this ID will be dynamic it can be any number or string in this case we are going to Define this with column and after the name of the identifier in this case it's going to be ID let's call our single page here and it's here if I change the url again single page and in the next tutorial using this ID we are going to fatch the single item and show it here okay I can close here let's take care of our our list page in our example again we are going to have two sections left and right part we are going to add here our map and for the left side firstly we are going to add this filter component and after our item list let's do that I'm going to open up my application and let's close everything here and open up the list page before creating anything firstly I want to add here a dummy data because we need to fetch these items first but we don't have any database so I'm going to create here a new folder let's say libraries and inside let's say dumy data.js and let's copy and paste this data you can find this in the GitHub report and let's say list data of course I'm going to export this and import here con data list data and right now our items are ready let's create our sections and after show them here so I'm going to create a list container and map container let's say map list and again I'm going to do exactly the same thing here display Flags list container and map and it's going to be flx 2 flx 3 and also I'm going to give here our background color just like that let's make this 100% perfect in our example as you can see there's a space here that means we are going to need a rer you know how we do that wrapper let me take this here and close the menu and inside this container we have the rupper and I will say padding right 50 pixels and inside this rupper we are going to have the filter section so let's create a new component I'll say filter filter. jsx filter do scss and I'm going to create my function here we are going to take care of this later let's use it here filter why it's not showing up components filter and filter okay it's here and after that we are going to create a list here and for each item in this list we are going to create a cart and this cart includes this image and these texts so we are going to need one more component let's say card and jsx so using this data I can map through my items data. map for each item inside call the card component and remember if you are using map you should pass here a unique key and also we are going to pass here our item remember each item includes ID title image and other information here we are going to use them inside our heart component let's see our example as you can see we have eight items here so right now we are ready to start our filter let's check we have three items here the title location input and on the bottom we have five more inputs and this button let's do that I can close them right now and open up my filter search results for here is going to be the location name let's say London after that we are going to have two divs top and bottom inside top we are going to have an input item the label will be the city let's say location and I'm going to add here an input its ID will be city name will be City and the placeholder will be City location just like that and under we are going to have the type the property minimum and maximum price and the bedroom number and this button so inside bottom we are going to have five items 2 3 4 5 and after button and inside our search image okay let's change our labels and inputs inside bottom the first one will be type but as you can see it's not an input it's a select element so let's remove this input instead I'm going to create select it's going to be type ID type and inside we can create our options the first option will be but by and the second one will be rent just like that so I will do the same thing for here property again select name and ID and inside let's see what we have apartment house cond or L just like that and after that we are going to have minimum price let's write our label is going to be an input but type will be a number and for the placeholder let's say any because we already have label here we know that it's a minimum price actually we can create here options by default it's going to be any it doesn't have any value and I will do the same thing here so at the beginning everything will be any of course in the homepage if we search for any location and price and this type we are going to update them but again it's going to be in the next tutorial and let's change here maximum price and again any and finally [Music] bedroom and any okay so let's give a style parly I'm going to decrease this font weight and all these items will be vertical so let's open up our CSS file move this here and for this H1 tag I will say font weight 300 and font size will be 24 pixels just like that let's separate those items display flx flx Direction column gap between items and pixels okay so let's take care of our top section but before I want to take care of our items because they are all same we have the label and after the input or select so I'm going to choose item first and they are going to be vertical and gap between them let's say two and I'm going to choose the label here and phone size will be just 10 pixels just like that and let's change their sizes they are too big I'm going to choose input and also select and they are going to be 100 pixels I will give some padding insight and I'm going to change the Border solid and let's make this this light gray like that I want to change the Border radius 5 pixels and font size will be 14 okay right now I can take care of the top input top and I'm going to choose the input we said 100 pixels but this one will be 100% okay by the way why there is no gap between them oh I forgot pixels okay and what about bottom they are going to be horizontal display flag justy content space between and in any case I'm going to give gap between my items okay and for this button again it's going to be 100 pixels padding will be the same I'm going to delete the Border cursor will be pointer background color will be our yellow color and the image inside as you can see it's too big let's say 24 pixels okay awesome let's check perfect and what about those cards I'm going to close them open up list page and list CSS and inside dropper I will say vertical Flex box and gap between each item will be 50 and there is something important here as you can see I can scroll down so I need to say here if it overflows on the y axis we can scroll okay so let's see what's inside our cart we are going to have two sections the image container container and the text container and inside this text container you are going to have the top section and the bottom section it's really easy let's create I'm going to close them open up cart and CSS let's move this here and inside I'm going to create an image container but this container is going to be a link so I should use an anchor tag but since we are using react ROM we don't need this anchor tag anymore we are going to be using react ROM link component just like this and its class name will be image container and also we are going to have a text container to add here HRA you have to use two and I'm going to pass here my item id if you remember we passed our item as a prop we can use it so I will say slash and item. ID and inside we are going to have the image and we can show item. image just like that as you can see when I hover over here its ID is one before creating anything else I want to take care of this image because it's too big and we cannot see anything here I will say display Flex gap between image and text container and image container and text let's give a size for our containers in the example as you can see this image is smaller than the text container so again we can use flex box it can be two units and three units flex two Flex 3 and also I need to add here a height let's say 200 and for the image I will say width and height will be 100% object fit will be cover and I'm going to give some border radius let's say 10 pixels okay so what about our Tex container firstly we are going to have the title the address and inside this address we have the icon and the text price section and this bottom div let's create quickly and I'll say h2 tag and its class name will be title and again I'm going to be using a link here when we click on that we can open up the single page item dot title and I'm going to call exactly the same HRA here remember for single page we are using the item ID and after that let's create a ptag and give class name address inside we have our pin.png and let's say a span and it's going to be item. address let's open up our data again and remember it has title image bedrooms bathrooms actually let's change those names and we'll just say bedroom and bathroom Okay and we have address and our location but we are going to need this later when we create our map after this address another P tag and it's going to be our price let's say dollar sign and item do price and finally I'm going to create here a div and it includes two sections let's say features and icons so first here I will say features icons and each feature has an image the first one will be bat.png and and the number of bathrooms and one more is going to be bathroom Okay and finally inside each icon we are going to have an image the first one will be save. PNG and the second one will be chat. PNG but we don't have our images let me move them here again they are going to be in the starter Branch so don't worry about them when you download the starter Branch you are going to have all and let's see I'm going to refresh and our icons are here okay let's give a style right now firstly for each image inside this text container I can give width and height so I'm going to come here and say width and height okay perfect let's give a flex box for this text container and separate our items just fire content space between and in any case I'm going to give a gap okay let's decrease this font size let's write it here title it's going to be 20 font weight will be 600 and the color will be a little bit sofware let's say 444 and also I'm going to give here a transition effect is going to take 0.4 seconds and when we hover over its color will be black and I'm going to increase its size it's just going to be 1% just like that and what about this address I'm going to decrease its font size and and I can give here a gap after this title I'll say address it's going to be 14 pixels let's say gap between items will be five and I'm going to change the color okay uh for this price I'm going to give a background color it's going to be this yellow color and I'm going to change it size its weight and give here border radius let's say 20 pixels font weight heading will be five border radius will be five and I'm going to change the background color let me copy and paste okay as you can see it's too long but its size will be the maximum content it should end here so I will say with maximum content okay and what about this bottom firstly I'm going to separate my items these two will be on the left and these two will be on the right so I will say bottom justy content space between and in any case I'm going to give Gap I'm doing is because when we shrink our page for the mobile screens they can be too close to each other to prevent this I'm giving here a gap and inside remember we have features again it's going to be flexbox Gap 20 font size will be 14 and for each item they are going to be vertically centered and I'm going to give here a space and let's give a background color oops it's going to be five and it's going to be really light gray just like that by way these item should be here I set space between let's take care of our icons and after I'm going to check that inside bottom G 20 pixels uh for each icon I'm going to give a border let's give some padding from top and bottom left and right and Border radius again five pixels we can click on them and I'm going to cign to the item inside this image so again align item Center just by content Center and when I power over the background color will be light gray just like that these two items should be on the left let me check here first the bottom inside we have features and icons oh I said 200 okay it's here so that that's all I think but there's a problem here as you can see I cannot scroll let's check our list page here as you can see we don't have any height if I say 100% okay still there is something wrong our layout is 100 VH let's check as you can see and 100 pixels is this now bar and the rest of the container should be our content let me give here background color so basically it's 100 VH minus 100 pixels if I take this back let's remove this and if I use height and calculate method and right now we have a certain height we are using 100% of this and in rupper and right now it works but as you can see if I scroll down we don't have any space here and it looks a little bit weird to prevent this I can give here some padding padding [Music] button and right now it's much better okay and what about this map to create our map we are going to be using an opensource project of course there are better options like Google Maps or mapbx but in order to use them you have to give your credit card information but this tutorial for everyone so so I don't want you to give any credit card information and I know some of you don't even have so we are going to be using this opensource map its quality is a little bit low but anyway it's enough for this project as you can see when I click on this pin button it shows this popup so let's see how we are going to use it firstly I'm going to create here a new component let's close them and inside components I will say map map. jsx let's create our function and right now we are going to need our library and it's going to be react leflet it uses this open source map and it's a great component here we can pass the center location we can arrange the zoom we can show any popups so let's install this Library we're going to come here we not going to be using CDN let's add this leflet and react leflet I'll open up [Music] terminal and after that we are going to be using this map container component actually let's come back this example was great as you can see we are going to need our position to pass here for each different city we can show this marker popup it basically will be those pins let's copy this and I'm going to paste it here actually I can directly paste like that let's import them and marker let me close here and I'm going to give here my position let's give exactly the same for here and see as you can see it's not here because we didn't give any width and height let's give class name here it's going to be map and I'm going to use it here and it will be 100% And I'm going to give some border radius okay let's use our component here I'm going to open up list page and instead of this text I'm going to call my map component and if you remember we have have a size here with is flag to and I also want to give here the height and our map is here but there is a problem here we don't have its own CSS to prevent any visual error I'm going to paste it CSS just like that and right now our map is ready I can drag and drop I can zoom in and out let's change this Zoom by the way it's tur but I'm going to make this seven I'll will refresh as you can see it's much better right now so what I'm going to do is I'm going to show different pins using each item here so I'm going to come here and I'm going to pass let's say items and I can directly pass here data let's take it and for each item I'm going to show different marker actually I can create a new component here let's say pin and pin. jsx and I can use this marker here I will cut and I will paste it here let's import them so I'm going to take the item here and I will use its position L and and long and inside popup let's see again we are going to have our image and text container which includes the title the bedroom number and the price so let's say popup container I'll say image we are going to pass here the item image and after that we are going to have a text contain container that includes our title I will use react rather don't link item do title and again it's going to be the ID of the item and after that let's create a span B item. bedroom and let's create here a bolt tag and it's going to be the price item do price let's use this component here Pary I'm going to map through my items and for each item we are going to call our component and we will pass our item here and again we need a unique key each item has an ID we can use it and let's see by the way we don't need them anymore okay okay there is something wrong here okay there is a typo here I'm going to refresh and perfect of course the image is too big let's fix this I'm going to open up CSS we have popup container here image text container and our text I will say popup container will be display flag and image will be 64 pixels height and it's going to be object with cover and let's give some border radius and for the text container again it's going to be vertical and just by content let's say space between so we don't need this class name here okay perfect so this is how we can use map so user can scroll down and choose the item here or check for any place using this map you can choose the location when they click on this item they can see the information of that place so let's take care of this single page let's see what we are going to have again two sections this post information and the features of this post let's create quickly I'm going to open up single page and inside let's say details and one more is going to be features details and features and again plx will be two and I'm going to give my background color as we always do like that and it's going to be Flex 3 of course it should be display Flex let's say 100% and inside details we are going to have this image section and the information section but for the images I'm going to create a new component because when I click here as you can see we have a slider when I click here or here we are going to update the index number of this slider image so for each update we shouldn't reender the whole component so let's create here a slider component but before I'm going to add here a rupper because as you can see there's a padding here wrapper and I will do the same thing for this side because we have a padding also so I'm going to duplicate this and move it here so we have rer here and here let's say padding right and here it's going to be 20 from from left and right okay I will save here and open up my site menu and here let's say slider do CSS and jsx okay let's call it here inside rapper let's import quickly okay and after that we are going to have an info section let's say info and inside this we are going to have two Dives this top div and the bottom top bottom before creating others let's take our data again inside D data I will paste my data so we will be able to reach those images title price description and and others so let's open up and I'm going to paste it here as you can see single post data we have title price images and other information and here we have the user data which is going to be the owner of this place okay let's use it oops here import from Dum data okay so I can pass this image array to my slider so I'll say images single post data do images okay after that inside this top we have going to have again two section this post information and the user information so let's say post user and inside post let's say H1 tag single post data. title it's here and after again we are going to have an icon and text and the price let's say address pin.png and a span that will show our address and finally we are going to have the price de single post data do price just like that and for the user site we are just going to have this image and the [Music] username image user data don't forget to import this do image and a span that shows the username user data. name okay let's give a style inside dropper we have the info section and inside this we have the top section and the bottom section and in the top section we have the post and user sections and we have an H1 tag here address and price and inside user we have an image and I'm going to change its size so we can see better and Border radius will be 50% so it's going to be a circle okay perfect let's make them horizontal I will say display flag and justy content space between just like that and what about this post section is going to be vertical and I'm going to give space between each item inside post display flag flag Direction column and gap between items 20 any pixels let's decrease this font weight like that uh for this address cap between items will be 5 pixels align item Center color will be this gray color and phone size will be smaller okay let's decrease the size of this image let's say 16 pixels perfect and for this price I'm just going to give background and some padding let's say five background color will be this yellow color it's our main color but I just decreased its opacity and the Border radius will be 5 pixels okay as you can see its size is too big remember how we are handling this I'll say with maximum contact and let's say size is going to be a little bit bigger and font weight will be thiner okay perfect uh for the user as you can see there's a container here basically I will give a padding and they are going to be vertical and I'm going to Center my items inside user align item Center just for Content Center and gap between items will be 20 let's give padding 50 pixels from left and right I will give border radius 10 pixels the background color will be our yellow color and font weight will be 600 just like that and for the bottom we are just going to show our description so I will say single post data dot description okay let's give a space here let's say 50 pixels color will be a little bit softer and I will give line height it's going to be 20 pixels okay so what about this slider section firstly I'm going to create this container this first image will be three times bigger than this section and after we are going to handle this slider component let's open up if you remember we passed here our images here let's take that and I'm going to create two D first one will be big image and small images and inside this big image we are going to show the first image images remember it's an array and I'm going to take the first image and here I'm going to show the rest of the images so let's get rid of the first item images and we are going to get rid of the first item right now we can map through the rest of the items let's say image and we are going to take their index numbers and for each image and it's going to be this single image let's have close this and remember if you are using map you should give unique key and it's going to be this index number okay they are huge right now so let's give a style for the container we are going to give flax box and after using flax we are going to change their sizes let's open up here our slider I will say 100% let's give some height display flags and gap between items will be 20 and inside we have the big image and small images it's going to be flag one flx three and the image Insight 100% height 100% object fit will be cover and I'm going to give some border radius 10 pixels and finally cursor pointer actually those images will be exactly the same so I can move this here instead of writing them again and again and perfect as you can see we don't have any height so for the images inside this container I'll give a height and it's going to be 100 pixels like that let's separate them using justy content it's going to be space between uh for any case I'm going to give Gap just like that awesome let's give a space here by the way for this info I will say margin top okay so let's create our slider when I click we are going to see this container basically its Position will be absolute and it's going to fit inside the whole screen and inside this container we are going to have three sections this Arrow are and another arrow so let's create inside slider what I can say full slider and inside Arrow another arrow and between we are going to have our image so let's say image container inside arrows we are going to show our icon arrow.png I will move this here also like that so let's give position absolute and background color and after we can see better I will come here and let's write it here actually full slider position absolute it's going to be full screen top will be zero left will be zero and the background color will be black and I will see display flex and I will give size for my items arrow and image container so our image will be 10 times bigger than our arrows so I will say Flex one and flex 10 and the image insight 100% height 100% object with okay they are huge inside Arrow it's going to be 50 pixels by the way let's add here an image I'm just going to take the first image for now images and the first first item arrows are still pick let's say justy content space between and I will Center them vertically okay perfect let's Center our icons in the arrow align item Center justy content Center and for this second item I'm going to change its direction instead of using different image I'm just going to change its style so I'm going to come here and say class name and it's going to be right and I will say if it's right transform rotate 180° just like that and let's add here a close button after this Arrow I'll say close and you can add here any image but I'm just going to use X after this image container I'll say close Position will be absolute top zero text color will be white I'm going to change the B size is going to be big and font weight will be BT and I will give some padding here perfect when I hover over I'm going to change the cursor okay so right now we are going to need here a logic let's close here this is our example at the beginning the image index number of full screen slider will be null so we are not going to see it here but when I click one of those images I'm going to update the image index so this component will be here and using this and these buttons I'm going to update the index number again let me show you and you are going to understand better I will open up my example and let's close here for now and I will say const image index set image index it's going to be a use State hook and at the beginning it's going to be null so this component will be depending on the image index let's cover this and I will say if image index doesn't equal null you can show it otherwise we are not going to see as you can see it's not here but if I update this let's say any index number as you can see it's here okay so when I click on Big Image on click event I'm going to update my index State set image index and it's going to be the first item because we are using it here and and I can do the same thing for the small images when I click on them I'm going to update my image index in this case it's going to be the index number of the image so when I click here it's going to be 0 1 2 and 3 and using those index numbers we can show image here image index let's see I'm going to click as you can see the first image of course we don't have close functionality here let's add on click set image index number again it's going to be null I will click and it's gone second image okay there is something wrong here because if you remember we just removed the first item item in this case the second item's index number is zero right now to prevent this I'm just going to add here + one let's come back and try again first item this image second third and fourth perfect it works what about those buttons when I click here I'm going to decrease the index number but be careful if the index number is zero it shouldn't be minus one instead we are going to show the last item and here exactly the same if the image is zero it's going to be 1 again 2 3 and after the maximum length it shouldn't be four instead we are going to show the first item which is index number zero let's do that let's create here a function change slides Direction and when I click on the first item first Arrow the direction will be left now for the other Arrow it's going to be right we can write our conditions with question mark and column but it can be a little bit confusing for you instead I'm going to be using IF and else so I will say if the direction is left do something if it's right do something else and here again if image index equals z do something otherwise do something else and for here if image index equals images. length do something if not do something else this is the main structure by the way the length of our images are four we have four Images but as I said the maximum number should be three because we are using index so instead of length I will say length minus one okay so right now we can update our image index if it's zero as I said it shouldn't be minus one in this case it's going to be length minus one which is the last item if not if not zero we are just going to decrease the number image index minus one and for here if it's the last item we can't increase this more we are just going to show the first item set image index and the first item if not if it's not the last item we are just going to increase the number image index + one and that's all it's that easy let's check right now I'm going to click here and perfect and this one okay it works I'm going to choose this item perfect previous or next okay it works so what about the right section let's check what we have I can close here by the way okay for each section we are going to have some titles let's create them actually I can close this slider and inside this wrapper let's create a P tag and I will say class name title the first one will be General let's say room sizes or just sizes nearby places and location okay I can remove the rest and inside General we are going to have a container but as you can see they are similar so I can create exactly the same container for each item and this container will be vertical and this is going to be horizontal let's come here and I will say list vertical and for the places it's going to be horizontal and what about sizes again we are going to have a container it's going to be horizontal but items are different so let's come here and say sizes and for the location we are going to have a map container and inside we are going to call our map map container and we are going to call our map let's import this just like that but remember how it works we are taking the items but in the single page we have only one item I will say items I'll add here an array and send my single post data of course we cannot see it right now because we don't have any size it can stay like that and after location finally we are going to have some buttons and inside this chat icon and send a message save icon save the place one more save save to place okay right now let's create those items for each item we are going to have an icon and a text container so inside list vertical I will say feature the single feature it's going to have an image and after future text we are going to have a span which is is the title and a P tag let's see renter is responsible so let's create two more features here this is going to be pad policy pad PNG pad policy and pad that's allowed and finally the fees fee. PNG and this text and inside sizes container we have three items and each item has an icon and a text so I'll will say size container and image size. PNG and the span is 80 Square ft or matter and two more two beds one bathroom and it's going to be bad PNG and bad PNG and I'm going to add exactly the same items same features but I'm not going to waste time anymore I'll just copy and paste we already created here so inside places I will just paste them scroll pass and and restaurant and finally we are ready to start our styling let's come here as you can see our images are too big let's make them smaller I'll save close here and open up my CSS file let's find our features as you can see we have a rapper I will just say display flex and gap between each item and after that for each image size will be 24 just like that and what about those titles let's give font weight for each title font WID will be Bol font size will be bigger and I will give margin botton just like that and for this container I can separate my items let's see here list vertical Flex Direction gap between each item and I'm going to give some some padding and the background color will be white and Border radius will be 10 pixels perfect and let's make each item horizontal I'm going to choose feature but remember it's also inside the horizontal list so I'm going to use it before for my list or after doesn't matter display Flex align item Center and gap between items will be 10 pixels just like that and for the image I'm going to give a background color is going to be our yellow background just like that uh for this span it's going to be font weight bolt and I'm going to decrease this size remember we have feature text for span font weight bolt for the P tag font size 14 okay perfect and by the way where is our title oh what did I do here okay General is all right there is nothing wrong but I covered this it's going to be sizes and our de is here uh for this one what was that nearby places and our horizontal D is here how did I do that okay it should be all right okay so let's take care of this horizontal list I'm going to duplicate this but this time it's going to be horizontal but this time it's not going to be column I will remove this Gap it's going to be again 20110 white B the radius and I can say justy content space between I can separate them like that okay what about sizes again it's going to be horizontal here justy content perfect and for each item I will do the same thing and separate them for each size display Flags align item Center gap between items will be 10 and the background color will be white let give some padding and Border radius and perfect and for this location we are going to need some width and height otherwise we can't see our map so I will say location or what was the name map container it's going to be 100% and height will be let's say 200 okay perfect it's here and for those buttons exactly the same thing and for each button I'm going to give some padding I'm going to Center my items give some space and the background color will be white but we are going to have this border so it's going to be one pixel solid and our red color and finally border radius by pixels and csor pointer okay those images are too big maybe we can decrease the number okay it's much better but remember our page is 100 VH so if we have more information here or if we have a small screen it's going to overflow and since we are using overflow of hidden we will not be able to see the rest of the items to prent this I will find my component this D and I will say height 100% And if it overflows you can scroll I will do the same thing for this container because if we have a long description it can overflow so for details just like that okay awesome so what about the responsive design for the LG maybe I can decrease these sizes before I should import my file just like that and I'm going to find my size and I will see include if it's algae font size will be smaller let's make this 12 okay perfect and there is no problem but for the medium screen we can move this section to under our information section so it's not going to be horizontal anymore so I'm going to come here at the top of the file and for the med medium screen includes medium PL direction will be column just like that but as you can see we have a problem here because we said detail section is flx 3 and feature section is flx 2 but right now we don't need this because they are vertical so I'm going to copy this for the details Flex will will be none and the height will be the maximum content I will do the same thing for the features Flex n maximum content and this time we cannot scroll because size is 100% so what I'm going to do is write here overflow scroll just like that I can give a space here margin bottom perfect and maybe here okay um what about small screen as you can see there is nothing wrong okay actually we don't have any problem what about our slider okay those items are too big so let's copy this open up slider I will paste and I will find my arrow and for the MD screen actually it's going to be our image it was 50 pixels but this time it's going to be 30 and if it's even smaller it's going to be 20 okay and as you can see our menu button is here we don't want to see that it should cover all our screen so I'm going to come here and say c Index bigger than everything oops not here full slider and it's going to be bigger than everything just like that okay okay we don't have any [Music] problem and perfect so we finished our single page so let's take care of the profile page so let's come back close everything and open up our menu right now I can close my folders and create a new page and it's going to be profile let's create CSS and jsx and we should Define our new route in the app JS so I will come here Create A New Path and it's going to be profile let's open up okay it's here so firstly to see this page we should be logged in in this case instead of this sign in and sign up buttons we are going to see our user image username and the profile button here let's check the example as you can see user information profile link and this is our profile page let's take care of this firstly I'm going to open up my number and I'm going to create here A D data const User it's going to be true or false in the next video we will be authenticated but for for now for the design part we can use that user inside the right part I'm going to cover my links and I will say if there's a user create a user div if not show these links of course we need a parent element here I can use react fragments just like that so if there's a user we are going to show this user div and inside we are going to have our user image let me just paste here after that we are going to have the username let's say John doll and finally we will have a link and it's going to be our profile page and I will say profile link from react rouder do okay it's not here because user is false let's make this true okay let's give a style I'm going to open up my CSS file inside the right do let's create here our user as we always do display flag and font it will be bolt and the image Insight let's say 40 pixels is going to be a circle object fit and I will give margin right so I'm going to separate my image and this text and what about this button let's say button padding will be 12 and 24 from left and right background color will be our yellow color cursor pointer I'm going to delete the Border okay it's not here because it's a link let's give here class name and I will say profile just like that you might want to show here any notification let's check as you can see let's create this quickly inside our link let's say notification and after our link of course its Position will be absolute notification Position will be absolute in this case the parent should be relative and its background color will be red text color will be white and let's make this circle I'm going to give some width and height and I will Center my text Insight okay we didn't give any position we set absolute and the top will be - 8 and the right will be - 8 just just like that and let's check our responsiveness for the small page maybe we can remove this name or we can directly remove this user container it doesn't matter let's remove only this pen user image and after we have span and for the small screens I will say display n just like that okay what about our page again we have two parts user details and the chat component let's do that I will close them and inside profile page I will say details and and the chat container inside we are going to have a rupper and here because remember we are going to give some paddings here there's a space and for the chat container again we are going to have a space and for each container inside details we have some titles like that let's create them but there is something important here as you can see our title includes this test and this button so it's going to be a FX box I will say title H1 tag and let's say user information and after a button update profile let's create two more it's going to be my list create new post saved list and we are not going to have any button here okay we are going to be horizontal and after that we are going to have this user information container after this title let's say info AAR will be an image and let's paste our user image here okay another span it's going to be username John do but here is going to be Bol and one more and it's going to be email okay and after that we are going to have a list component that we can show our posts as you can see this is the card component so it's going to be easy let's open up our menu and create a new component and let's say list I'm creating new component because when we open this profile page we can use suspense for our list and during the loading process we can show any indicator I will say list as CSS jsx and let's use some cards here to do that again we are going to be needing our dummy data if you remember we have the least data here we can use it again I will say map for each item called the cart component and uni key will be item. ID and the item will be item let's import them okay it's not here cart and cart of course from and one more and it's going to be library and dummy data let's call this here after this title I'll say list and one more and it's going to be saved list okay let's take care of this info site it's going to be vertical but before let's separate our main items these details and the chat container I'm going to open my CSS file here close my menu and display Flags height 100% as we always do and details chat container flax 2 flag 3 I'm going to pass here quickly because because we are always doing the same thing here and the background color this color height will be 100% and inside we have a rer and I'm going to give a padding to left and right and what about this drer I'm going to give padding to only right side it's going to be 50 pixels and it's going to be vertical flx box and gap between each item 50 pixels and for the title again flx box align item Center justy content space between so we are going to separate them of course it's not here because our image is stretching our container let's take care of the this first and after we can handle our title so I will say user info is going to be vertical and let's say 20 pixels Gap and for user image again for the pixels and circle and object fit will be cover okay right now we can take care of our title style and this button style so I will say H1 tag font weight will be 300 and for the button I'm going to give some padding and the background color will be our yellow color cser pointer I'm going to delete the Border and perfect let's check okay let's separate those items by the way inside information we have our text and this image let's separate them so I will say span line item Center and Gap just like that and let's give space between our items here inside list I will just say column and gap between items and that's all as you can see I cannot scroll down because our page size is 100% so I'm going to come here for details I'll say if overflows scroll just like that and I can give padding here okay it's much better right now and what about this chat container inside I'm going to create a new component let's open up menu and I will say chat style and jsx let's close everything and open up this let's check what we are going to have firstly we have the messages section and this chat section let's create them messages and let's say chat box and here I will say H1 tag and messages and after that every single message that we have here we are going to have user image username and the latest message that's do that I'm going to create a message here image span and the latest message let's write here some random message and it's going to be shorter and again I'm going to paste my image here and we are going to have multiple messages like that of of course later we are going to be using map but for now it can stay like that let's open up our CSS file here firstly I will say 100% column and I can give size for my items as you can see the messages container and this chat box have exactly the same size so we can use flex one for both Flex one chat box PL one let's right here something and by the way we should import this in our profile page I will say chat okay of course I forgot again this image let's take care of this quickly inside we have message and image is here it's going to be a circle and finally object fit okay let's give a style for our messages see I'm going to give here column and I'm going to separate them and if we have many items we will be able to scroll like in the example as you can see I can scroll and after that let's decrease the font weight for the H1 tag and after we can give here a background color some padding and Border radius 10 pixels and I'm going to Center everything just like that let's give a space between them and the cursor will be pointer and for the username as you can see we have a span font we will be bolt just like this but right now our box is smaller let's add one more message here okay they are not equal let's come here background color this purple okay it's not the half of the container inside chat component we set height 100% but it's not 100% let's open up our profile page for this rer it should be 100% okay it works right now because the parent should be 100 first and after our items so we can scroll here and when we choose any item here we are going to show our chat box let's check as you can see we have three sections this top bar this Center section and the botton that we can add a new message and here we can close it and again when we open any chat we are going to see it here let's refresh and let's create our chat box let's close here for now and I'm going to create top Center and bottom inside we are going to have our user which has an image and the username let's again add our image here and after we are going to have a close button and it's going to be X again and inside Center we are going to have some chat messages so let's say chat message I'm going to write here a random message and it's going to be a date here let's say 1 hour Echo and I'm going to duplicate this as some of them will be our messages so let's say all this one this one just like that and finally inside bottom we are going to have a text area and finally a button let's say sent okay we can give our style right now let's open this here inside chat box I'm going to give background color it's going to be white and we are going to have three sections so I will say column and justy content space between I'm going to have top Center and bottom and for the top we are going to have this background color and it's going to be a flex box and we are going to separate our items user here close button is here and of course I should decrease this image size so let's say background color I'm going to give some padding F we will be bolt and I'm going to separate my items and inside we have a user again I'm going to separate them and for the image let's give 30 pixels and as always object with cover and for the close button I will just say cursor pointer just like that oops because here is user it should be outside okay perfect so what we can do here we can add our functionality and we can write here a condition to do that again we are going to be using a use State hook let's say Chat Set chat and use state is going to be null at at the beginning and if we have a chat if we choose any message here we are going to show this chat box so I can write my condition here let's choose chat box and I will say if we have a chat right now it's not here here but if I say anything positive like true we are going to see it here and when we click on this button again it's going to be null let's find close on click event set chat will be let's say null again just like that okay before the those messages let's take care of this buttom as you can see we have a border here and again they are horizontal so I'm going to give border top two pixels solid and this color let's give some height display Flags align item Center and justy content and inside we have a text area let's give size it's going to be bigger than this button so let's say three Flex one it's going to be three times bigger and I will say height 100% we need a semicolon here and I'm going to delete the border and give some padding just like that that and for this button again our yellow color and its height will be again 100% background color I'm going to delete border and cursor pointer okay so we can add a new message what about here firstly we can scroll these messages and size of each message is half of the container our messages will be on the right these users messages will be on the left side let's do that first see I'll say overflow scroll but in this case remember we need a height we can actually give here Flex one 5 1 or you can directly give here any height doesn't matter let's give for now I will give padding and it's going to be vertical and for each chat message I'll say 50% and if we are the owner of this message Alliance he will be plag and just like that and I can move this to the right side also to do that I can use text align and it's going to be right okay let's make them smaller and give this background color I will say span is going to be small background color padding will be two border radius will be 5 pixels just just like that let's check this is the biggest screen for the large screen we don't have any problem but if it's Medium as you can see it doesn't look great so what I'm going to do is make this component vertical so I'm going to move my messages under these details let's do that let's close them and open up profile I'm going to import here responsive file and here I will say include for MD screen Flex direction will be column and if it overflows we are going to scroll it's not what we want because we are using flx size for details and chat container I'm going to call copy this and I will say if it's empty Flex will be none and the height will be maximum content and I will do the same thing for this chat container and perfect our messages and our lists for the small screens by the way we can remove this image we can see only our texts here let's find out our cart import this and if it's small display will be n okay it's much better right now okay perfect so we finished our profile page list page single page and the homepage right now we are ready to create our backhand server I haven't decided yet so let me know in the comments which Technologies you want to see in the next tutorial which backend technology which database which functional we should use to upload images so let me know in the comments and I'll will start as soon as possible okay that's all I hope you liked it if you learned something new today please like the video don't forget to follow ladv social media accounts and you can support me using the link in the description below or by joining the channel I hope I'll see you in the next tutorial goodbye

Channel: Lama Dev

Views: 21,313

Keywords: react, react design, react ui, react website, react app, react project, react tutorial, react html css, web design, reservation website, lama dev, booking website, react real estate, real estate app, real estate booking app, react leaflet map, responsive design, react responsive

Id: HFj5FMb0jwY

Length: 181min 48sec (10908 seconds)

Published: Wed Mar 06 2024