Next.js and Django Fullstack Airbnb Clone - React, Tailwind, Django Rest Framework and more

hey guys in this video I will teach you how to build a fullstack Airbnb clone using Technologies like react nextjs and Tailwind in the front end and Jango with Django rest framework in the back end I'm going to use Docker compos for the back end project with postgressql and some other texts I will also use channels for implementing live chat and a lot of other cool things I'm going to begin with the basics of setting up everything building the templates and then building the project piece by piece at the end I'm going to deploy the project to a live server on digital ocean I've put together a little demo of the project we're going to build so as you can see here we have the front page you can hover this to get a little animation you have the menu up here for example if we go up to the search we can search for nor way set the checkin date for example from the 15th to the 17th um how many guests how many bedrooms you want how many bathrooms and when you search this auto updates you can go into one of these to get more information you have a big picture you can like or favoritee and un favoritee your House's hair and you can see information about how many guests they allow how many bedrooms there are how many bathrooms there are and you can see who the host is for this uh property and a short description very descriptive of course um here you can see that you can't book back in time and also here would be showing booked dates if there were any so here you can select the dates you want to book and then you can use the a drop down here as you can see here this stops at six because there are maximum number of six and then this calculates the number of nights it adds a 5% Airbnb fee and then you can see the total price um if you want to you can for click appear and then you can see whoa okay I'm not signed in therefore I'm presented with a login screen um and as you can see here this is also animated so things go in and out smoothly um let's try to sign up a user Stein at code with stein.com and then a password sign up and then I was logged in and if I now click Airbnb your house first I need to check or choose category then I can set the title and the description a little bit of the price per night for $100 how many bedrooms how many bathrooms number of guests uh I need to select uh location and I can upload image and similar um and also uh if I go into one of these and into the admin user which owns these two properties I can contact him and then this will have a live chat hello and then it will show up here and since this is live it will automatically update at his screen if he is in this chat and you can also reach the chat by going into the user menu and into inbox and then you will see the conversation that you have you can see your favorites you can see your own properties you can see your own reservations and you can edit your profile um so hopefully you will learn a lot of cool things if you go through this tutorial together with me anyways in of chitchat now let's start building the to-do list so that you can see what we are going to go through in this [Music] tutorial Jango B and B too list before we start coding andimar I want to create a simple to-do list over everything that we're going to do in this project so the first task will be to install and set up nextjs and create project when we have this I want to start building the menu which you can see up here this one with the logo and this search here where you can add your home to Airbnb and the user menu so uh code for nav bar so I'm going to first build this very statically and then we will Implement one and one part but it's nice to have all of the design finished at the beginning and when that is done I want to create these categories down on here so categories on the front page and when that is done I want to list properties on the front page static so we just hard code them so then this will be these ones with the heart icon an image a title and the price per night and when this is done I want to create the detail page for properties static and when that is done I want to have a land lord page static or that means that you can click on the host or the landlord and then you will see a little bit information you'll see a contact button and you'll also see all of the properties that this landlord has after that I want to create a simple page for my reservations and then my my properties um then after this we can set up the inbox page for the conversations or the chat with the users sorry all of these are going to be static like that and then the detail page for chat statically and then when this is done we can fix this one so this popup where we can register and log in so user menu menu popup we can call it that um after that I want to build a reusable model window so create reusable uh modle window and after that I want to create a log in or sign in model and then a sign up model and these are just going to be statically of course um remember error codes just so that we can show what it will look like if you have any errors when you're signing up or logging in and when this is done almost all of the front end uh design should be finished after that we can begin working on the back end so let me just create a new to-do list and then I want to set up Docker and uh create a project for Jango for Jango with post gql Etc and when this is done I want to start working on the authentication a little bit at least I want to create a user model which we going to re use throughout this whole project so create user model model and configure this um because we want special Fields like the Avatar and name instead of first name last name I want to make it possible to log in with email Etc and then when we have this we can create app for properties so that we have that and we need to create a serializer and model so create model and serializer for properties and the serializer comes from the Jango rest framework so install drf course headers Etc so you're going to handle authentication with JWT so need a few other packages at uh as well but I will come back to that when we come to this task and when we have the model and serializer for the properties then we can um get properties in the front end and list them so instead of done having the static front page we will go to this one and then after that we can um Implement authentication and log in we will begin with that and then sign up and log out so that's basically the authentication and we will come back to edit profile and similar later in this project um and then when we have auth authentication in place I want to start working on making it possible to uh add properties from the from nextjs and not just in the admin interface which we will do up here just for testing um create model we're going to have a model with navigation so we can go step by step for this uh API end point and we're also going to need to send data from front end to the back end and then in here sorry not in here but after that's done I want to work on the detail page for properties uh I want to make it possible to book a property um book property and I want to make the landlord page uh Dynamic and then we can continue with the my properties dynamic we want to create a page for my reservations which we did up here so my reservations Dynamic and when that's done we can start working on the conversations and make that Dynamic make converations [Music] Dynamic um and when we have this we can start working on the real time chat application because we want make it possible to chat real time between the people who are renting a place and the people who are renting it out so um set up web sockets in oops the back end and then we're going to make it possible to connect and I want to make it possible to send receive messages um the messages should be stored in the back end so store and load messages um start new conversation um yes so before we jump into this we can also um make it maybe not here but before we go here we can make it possible to favorite favorite favorite set property as favorite and my favorite page with listings where you can also unlike or unfavorite them if you want to do that okay so then most of this should be ready but then we should jump over to the search so when you go through ha where you want the search adding the dates and similar so if I just go back to my to-do list which is here in eraser then we can um set up search filters so I want to add some sub to there um model for search filter and I want to make it possible to search with contes cont search and then calendar for check in check out dates and a search details this will be number of uh guests bedrooms Etc uh we need an API endpoint for this and then I want to make it possible to choose between these categories choose between categories on the front page like that and when that is done then we have a simple clone of Airbnb so we will have all the functionalities here as you saw in the demo before so when this is done we can continue to the last main task which will be deploy M so I want to create a server on digital ocean and set it up I can also begin by um setting up git git G hub for the code repo so that's easier to maintain aimilar makes it easier to deploy um yes so when we have the server everything is set up we can begin with the back end and for the back end I want to create environment and maybe I going to use Ducker here as well get code from G and we need to set up supervisor and Gen X and similar so just rest of server stuff and then the front end then we need to set up everything here with node engine X Etc get code from git so that is basically it so we might do some changes to this to-do list when we go through it but in overall this is what we're going to go through in this video anyways enough chitchat now about what we're going to do let's start installing and setting up nextjs so first I want to create a folder in my project folder called Jango BNB which will be the name of this project so just run MK Jango BNB next I want to go into it and then I'm going to go into the browser in the next documentation just to see the command that I need to run to install and create my first project so you actually have it here npx create D next- app at latest so this should just start a visard for creating a new uh next project so just type Jango BMB I won't to use typescript I do not need es lint for this project and yes I want to use tailwind and no I do not need this Source folder I like to just keep everything in the app folder and yes I want to use the router and no I do not need to customize the default import alas so then I can just hit enter and this will install as you can see up here I just used the default uh values that came from next because this is what I want to do so and I can just wait for this to finish like that great so then I can go into the next project by typing CD Jango BMB and there you have it now we have a simple and empty next project so we can run it and test it and see that it is working so npm run Dev so then it's starting attention blah blah blah it says that it's ready so we just copy this go to Chrome create so open new tab and paste hit enter so then you can see the default application uh um you can see documentation if you want to do that you can read about the the template how to deploy and similar so I just want to clean up this project and remove all of this boiler plate code so if I go to visual studio code I can actually open the project here so then I have Jango BNB which was the main folder and then the sub folder which is the next project so let's open that and then we have everything here um almost everything is located inside the app folder for example you have the global CSS which holds uh Tailwind at the top here so it comes default with Tailwind because I chose in the Wizard that I wanted to use that so I can just remove everything there and save and you can see that it's Auto updated here and the background is now gone a little bit like that um the layout um it's almost like um the base of HTML in Django if you're familiar with that so you have the HTML tag the body tag which contains the children which is sort of like a block tag or where everything from the sub template is uh rendered here you can change the name of the browser tab if you want to do that so Chango BNB then it's automatically refreshed perfect and then everything here can just be like it is we don't need to do anything more here if you want to change the font you can import a different one here and use that um let just open up page. TSX which is the front page and the TSX uh is a uh the file ending that you want to use when you're using typescript and we use or the x is there just because I'm not quite sure how to explain or where the reason is but I know that when you have TSX it think it's because you have also a jsx which is the the sort of template language that is used here so then I can remove everything in here everything inside this Main I can just set this to be empty and then Jango BNB save so then you have it there perfect and I don't think there are any more boiler plate code no instead of public you can see here that they have two logos we can go ahead and delete these two move the trash and veral move to trash Okay so then it's as basic and simple as it can get inside this tail configuration um we don't need this background image here but maybe we want to extend the colors and say um uh Air BnB which is then the red color that we want to use many places uh this one let's see if I get it hash code for that oops my internet is down okay let me just close this I can go back to the color um I know what the code is so if I just go in here paste it and I also want the Air BnB dark so we have a little bit darker version of this red color um I think this should be in tles like this Airbnb dark okay so now these are then extended so we can use them in the project so we can try to do that H2 class name and use class name instead of just close since this is jsx then I can say text Air BnB Jango and next rout go to the browser now you can see here that this has the red color from Airbnb perfect okay let's go to the to-do list now and set the first task here to done because now we have installed everything that we needed we have created a project and we have cleaned up everything we have set up the color so now everything should be ready and we can start working on the navigation bar before I continue I just want to say thanks to all of my patrons if you do want to support me you will find a link in the description below by the way the reason why I like to use this program here is because um I have the to-do list here I can also draw here I can set up diagrams and similarly it's much easier for me to explain how things are connected and similar anyways let me start with working on navigation bar so let's jump back here so if I go in here now then I do not want this located on the front page and I don't need there anything more here and the globals can just be closed I want have it located here in the layout but to keep things as clean as possible it's best to have this rendered in a separate component so here in the app folder I want to create a new folder called components and components are reusable small pieces of code we're not going to reuse the navigation bar any places but it's much better to have this separated in smaller chunks and then in here nav bar and also a file in there called Navar bar. TSX so then here I can just create this first as simple as possible so const nav bar equals create the arrow function return and then here we rer HTML so nav test now just need export default nav bar and save and now this can be imported into this file and reused down here in the template so below these Imports here we can say import Navar and I can just hit enter and vs code will find this PO for me automatically um so it's in the components folder Navar Navar which is the name of this file but also what you're exporting down there um you can see here that it is declared but it's never red so I haven't used it down here that's why I get that little warning but if I go down here now fix these indentations and then above children I can just say nav bar and close it like that so if I save now go back you can see here that we get test on the top and if I inspect this then you can see here that I get the navigation bar there nice so then we can start adding a little bit more to the navigation bar if you remember from the demo um this is filling out the whole screen and it's fixed to the top it has a certain spacing and similar so inside here we can begin by saying class name and say w- full so we know that it's filling out the whole screen fixed so that it's fixed on the top on the screen when you're scrolling and similar and then we need to set something called top- Z because we want this to be zero uh pixels from the top and zero pixels from left that means that it's done up in the corner here and it will fill out the whole screen um inside here I want some space uh above and below so I can say py which is then padding in the vertical Direction six and Border B because I want to have a one pixel border at the bottom I can set the background to White and since this is now fixed uh if I didn't set the background it would be transparent and then set sorry Z 10 because I want to C index to be uh larger higher than other things so it doesn't come back in uh in behind things so now we can see um that the content from the main it's still here but now it's behind the navigation bar so we need some space on this main here so that we know that it's um below this menu and I want to just create a new div around this main that I can put this in so uh div class class name pt32 I think that should be enough and then we can wrap the children inside this div so if I save now go back you can see that I got a little bit too much space I want this to be up here somewhere so 26 maybe that is not a correct number 24 yes that's better so now we have a fixed menu and you can see when I scroll in the content here the menu doesn't move nice and then inside here I want to set the max width to, 1500 pixels and Center it on the screen so if I just go back to Navar then inside here I want to create a new div div and give this a class name and say Max Das W and pass in, 1500 pixel hardcoded but Tailwind will fix this for us and make it better so to center it on the screen we can say MX Das Auto and I want to have some spacing on the sides so as we make the screen smaller it will have always some space on the side so px-6 just add some random information here go back and you can see I to go the px6 there and when I take the screen very small it's still working yes um my screen isn't wider than 1500 pixels because I have the resolution very low now since I'm recording um and then on the left side I want to have a logo and on the right side I want to have a menu and on the middle I want to have a menu so we need to set up a flex box from Tailwind so div class name give this a class of flex and justify between so all of the um all of the spacing will be added between the logo the center menu and the right menu that what's Justified between means and items Center and I use items Center because um if the logo is a little bit big then all of the other elements on the menu here will be on the same height so then we can create a link to the front page which will hold the logo so link hrf can just be slash H Jango BMB so now I get a warning because cannot find name link so we need to import this so import link from next slash link and save so if I go back now I have a link and if I click it I will be sent to the front page but nothing happens now because yes we were already on the front page and then instead of this title I want to replace this with logo so if I go into the public folder then I can just paste in the logo so I have a file called logo.png which is the Airbnb logo um you can copy it from the front page of Airbnb or you can just go to Google and search for it or use whatever image you want there or you can go to my repository on Gib you can find a link in the description below and you can copy the Lo go from there so then I go back here and I want to insert an image here so image source sorry SRC and this is then located in SL logo.png and slash will then point to the public folder here and then we have logo.png there then I need to close this and then okay does not support blah blah blah I need to import the image so import image from next image and I still get the warning here because the alt attribute is missing alt Jango BNB logo and I also want to specify a default width and height here so I can say width and then you specify here 180 and we can specify height as well um 38 so that is is Now default sizes but um next JS will actually do some changes to us here so when the screen is smaller you can see that it will be responsive nice um I like this size on the menu but now you can see that the content here is below or behind so let's go back to layout TSX and change this to 32 yes so that's much better so then we have that um yes we have the logo we have a link to the front page perfect on the middle of the screen I want uh the search filters so I want to create the div first for this so div class name Flex space-x 6 because I want some space between the elements inside this uh Sub menu or what you want to call it search filters blah blah blah now it's all the way over there and the reason why it's there and not on the middle of the screen is because we are using this justify between so this will now take all of the space available and put it here sort of but when I create one more where this user menu will be div class name Flex uh items Center and space-x 6 because we want to here have the add property button and also the user navigation bar so I used the item Center so that I know that they are on the same height and space t six so there is some spacing between them so here you can see add property and user nav so when I save now you can see that the search filter is moved to the center and we have added property on the right side there perfect okay so if I go back now instead of adding the search filters here I want to have the search filters in a separate uh component so in the same folder as this one we can uh create one more file so new file search filters. TSX and I we do the same thing here um const search filters create the arrow function for this return search um cannot find name okay uh sorry every time you use this return function you need to put things inside an HTML element or you can use an empty fragment if you want to do that and I just say export default search filters and save now we can import it here import search filters from do search filters and it just says do search filters because we are in the same folder as this file so then in here I can just search filters and close it and now we are back to this one but the information comes from here search nice okay so let's actually Design This and add uh show information about what dates you have selected and similar so if I go back here now and into the navigation bar I want to sorry into the search filters we can begin by adding a div here instead of this empty fragment div and set the class name for this I want the specific height which is 64 pixels and I just need to add these in this brackets and I want this to be a flex box so we need to add flex and flex row because I want elements to be on the same line um I want to have them on the same height as well so items Center and justify between so that all of the space that is available will be add added between each of these um and I want the border on this one and and I going just say border it will add the one pixel border around the whole thing and the Border will be a grayish color and I want this to be have rounded Corners so rounded full um then on the next line here we can just add some text to see that it is working close the div yes you can see here that we got the specific height we have the gray color on the border and it's rounded full so it can't be any rounder than that um the first element on the left side should be um the one where we select location so we can begin by creating a new div div this can just have no CLA for now because I want to add some um uh mobile friendly closet to that in a little while but we can creating one more div in here div class name Flex Flex row because I want to have things on the same line items Center and justify between again like that okay so I can close this Dev and then we can add the wear label so div class name I want to have a fixed width on this one so 25050 pixels and as fixed height so height should be 64 pixels um px8 so have some space on each of the sides um this should also be a flex box so Flex but here I want the flex to be columns and I want the uh Corners to be rounded full here as well and when you hover this element I want the background of it to be gray so hover BG gray 100 where just save then have to wear and when I hover over this the background becomes gray nice but I want this text to be on the middle of this one as well so since we have Flex we can just say justify Center so that we then send things to the center of this one okay but this doesn't look good so we need to add some more to this label so P class name text extra small or XS font semi bolt where question mark or no just where and we want to have a subtitle here as well so class text SM small so it's a little bit larger and then um Wanted location we're going to fix this later nice so is very small and this is a little bit bigger um like that and then we can actually just make a copy of this one so copy this and replace the title there with check [Music] in wanted um add dates paste it one more time for the check out add dat and save so now we have three to choose between here nice and we also want to have a who because we want to select the guests so I can paste this one more time who question mark no add guests Okay so so it starts to look like something um I do not think that all of these should have this this width um actually it's just the first one so let me just remove this one and by the way to select multiple cursor core cursors you can just uh hold in option on my Mac not sure what it is on Windows so if I save now it looks a little bit better perfect last but not least I want uh search SVG here so we can begin by creating one more div here div um this should not be located there it needs to be outside these two divs here so div class p-2 because we want some spacing on this button and then inside there I want one more div class name p-4 so this is then sort of a border around the button and this is inside the button PG Airbnb so it's red and I want this to be rounded full so it's completely round and I want the text to be white s yes but we don't want it to say s we want to have a simple SVG here for the search icon so we can find this on for example hero icon or you can maybe just go to the Airbnb front page and take it there so for example here I can just right click this one and let's copy this addit as HTML copy everything and paste it in there so I think this might give some errors so we can remove this we don't need that uh style um the string has no properties in common we don't usually do this here in um nextjs or react so let's just remove this and see if it's if it works so save go back into there and the icon isn't there Let's Take Back The Styling and then it's not working um okay I need to convert this to a different format like that fill none this should be a comma this should be a comma and not 16 pixels but just you 16 pixels remove the semicolon we can do the same thing here 16 pixels stroke and everything here needs to be in tes if not this will not work um you need to set this with capital W and there and then I can just close that one and I can remove there so let's add these two separate lines so it's a little bit easy easier for you to see like that and if I make this full screen now you'll probably see most of this if I zoom out at least so SVG with the styling that's converted now to um TSX or jsx format okay uh there let let's just do this so if I save now go back we now have the search icon there perfect um I would have a hover effect on this as well so and there we's a BG Airbnb we can say hover EG Airbnb dark and we can say transition so we get a nice animation effect so if I take the mouse over now you can see that it's dark and it has a little bit of a transition um you can see the cursor is a little bit weird on this so we can change that as well so um cursor pointer it's because I'm using a div but now we get the typical hand and I want this to be on this this this and this as well okay um problem now is that if I make this smaller you can see here it's not working on mobile devices um on mobile devices I just want to hide these ones so that we just see the search icon that will toggle a model later so that's what I wanted this div here for so here I can just class name hidden so then it's hidden on small devices but if the device is large or greater we say block so if I save now you can see here I'm on a small screen so it's showing up like that but when I make this larger the menu comes back nice okay so now we have the search filters there as [Music] well um my to do list yes everything this is a part of this nav bar yes so then the last bits here is the user navigation bar and the button for adding the property so we can begin by the user navigation so let's go back create one more component call this usern na. TSX so const user nav return P user export default user NV I get the warning here because I forgot to add the equal sign like that so I can just close that one and then I can import this as well in to the nav bar import usern nav and replace this one like that usern nav and save so now I still have the user here but it comes from this component nice so I Can Begin by replacing this with a div give it a class name of p-2 because I want some space in here and I want to set this to be relative because I need to do that later when we are uh showing up the popup uh I want to set this to an inline block as well and I want to border here so border and rounded Dash full so if I add something in here now save go back you can see that we get the rounded and similar this does not need to be 64 pixels height or tall um in here I want to have a button and when you click that I want this menu to pop up but we're not going to build the menu right now but we want to have the button so button you a class name of flex and items Center and in here I want to have uh two different svgs close the button and I think I just want to go to Hero icons to get these two so if I go to the browser hero icons.com search up menu I want this one the bars three paste it I will fix this soon and then I want the user so we can take this one here I can just close this so if I then go back I can paste that so then I have the burger or the lines and then the user there so this needs to be fixed a little bit because um since this is jsx we do not support lower uh caps like this so we need to rename this to stroke line cap we can remove this here on both of these strike line join rename like that stroke width stroke width and let's scroll over here we can't use CLA it use class name and class name so this then get the current color just comes from up here but let's save this now and see what it looks like so then we have the lines there and the user there great and yes I think that's everything we're going to do for the user menu right now last then is the added property or the one is here L Airbnb which is Norwegian for Airbnb your home so I want this as well to be a component and as you can see here I'm very fond of using many components for smaller things and this is kind of the way react and next want you to structure a project because then you can have States and similar just for this component and it's much easier to maintain the code and similar so up here Air BnB or or no let's call it the add property button. TSX and then we can begin by creating the const for this so const add property button equals create the arrow [Music] function return and button just so no not but button and export default add property button and save I can close the user bar and import this here I can actually just say for add property button and if I hit enter now um then this was automatically imported by Visual Studio code but I need still need to close this down here um this is some very good magic that happens that I don't need to import this myself not sure which extension does this for me um here you can see a list of the extensions I have so it's not very many that I use I didn't specifically install anything so it might be just because that you can see down here that the language is typescript jsx that it understands this form me anyways let's go back to the project as see here that you see the button nice so I want some space and similar for this one so let's create a new div here give the class name of p-2 and text SM so the text is small in here I want the font to be semi bolt so font semi bolt and I want the corners to be rounded full which you will not see now but if you hover this I want the background to be BG Gray 200 Air BnB or sorry Jango BNB your home not your ho uh so if I go back now is he there and I hover it you can see that it gets the background color I just need to fix the cursor here as well so curser Dash pointer and save nice so um if I now make this smaller you can see that this is still working on smaller devices um you can customize this more if you want to do that um maybe you can have this smaller on mobile devices then you just go back here into the search filters and for example instead of um where do I have this one it's here um height height height yes instead of P4 I can just a P2 then you see here it's much smaller and then on larger screens we can say p-4 so when I now make this screen larger the button is also larger and I can make this instead of saying 64 pixels tall we can set the height to be for example 48 yes that's better and on large screens h- 64 so if I now just copy this and replace it with these three or four here paste and save then it looks a little bit better even on smaller devices yes because now it's smaller um you could also make this smaller you could make this smaller and similar anyways I hope you understand what you can do here okay like that then I can actually go to the Todo list and set the next task to done okay so the next task then is to set up the categories on the front page so that's the list of these here so let me just go back to the project and into Visual Studio code okay so once again I want this inside a separate component U but this component should be not in the nav bar uh because it's a part of the front page and not a part of the navigation bar um I'm not going to have more than one property there uh sorry more than one component I can just create it in the components folder and call it categories. TSX and and then we can say typical const categories equals create Arrow function return P categories export default categories oops like that and then to add this to the front page I open up page. TSX and here I don't need to import this anymore because we are not using it there so I can instead say import categories and then I can remove these two and say categories like that so if I save now it's there um I want this to be maximum width of, 1500 pixels as well so if I open up nav bar and just copy um these three classes there and then I can paste it in there so now it has the same spacing on the left side perfect so but I want to list them out looking like this with a little icon the title and then you have this hover effect here so then can just close this go back in here and then I go remove this paragraph that I added create a new div and here I need some space from these and up to the menu so I need this uh class name at pt3 for padding top three um you can set the cursor to be the pointer cursor pointer when you have it all over this div here cursor pointer padding bottom six so have some space at the bottom of this and I want to have is a flex box and set the items to be centered in case some of there are multiple lines and similar we are still having them on the same line when you use this items Center space- X12 so there's a space between each of the categories so let's create one category first uh sorry uh class name and then here I want some um padding bottom on this as well so pb-4 and the reason I want a padding bottom here is because the space between the title and this uh hover line or active line so pb-4 we can set this to be a flex box and flex call because we don't want these to be on a row we want them above below like this above each other um items Center because I want to Center everything inside this div space- y-2 so that we get the space between the icon and the title and Border B Das Cho a border but set to be 2 pixel height or thick as you can see there and the color default color can be white so border white and I want the um opacities to be set to 60 but when you hover this element we can set the opacity to be 100 so let's just add some random thing in there for testing you can see here that it's a little bit Gray because it has some low opacity but if I take the mouse over you can see that it becomes dark perfect and then I want the icon on top there so maybe I can just copy this this actually image address okay let me save this icon so I can find out where I want this so documents project Jango DMB Jango DMB public and then we can say ICN category and save and then we can insert it saying image oops SRC and the path for this will be just like the logo if you remember there we just say slash logo so the same thing is here slash ICN category. PNG and ALT um category Beach I want this to be the beach category close it and I get error because we haven't imported this so import image from next SL image and save so let's see what's going on here now image with source is missing required with property okay width say 20 and height can also be 20 maybe that's okay um that did not work um I category okay let me just try again I think it was because I didn't have internet but take Poston which is Norwegian for on the beach so let me save this again I see category Beach and yes then I can go back here and just rename this I category bit so if I then go back here again so if I go back again I can see I still get an error and it's because it's a JPEG and not PNG so jpeg save automatically refresh and then we have the category image there perfect so then we just want the title below this so to get the title we just say span class name and text- Xs and beach so then we have that one perfect um when we hover this one I want the underscore or the line to be Gray so I need to add that as well so we have already fixed the opacity and the border is set to be white there but it was a hover border border gray 200 so then we get the line there perfect so then I can go back and make a copy of this one paste it paste it um four categories so we have the beach um we can have Villas and we can have cabins and Tin homes save so now we have four different categories here that you can hover and look at nice so if I then go to to-do list I can set this to done and this is of course just static um nothing happens when we click on them but we will come back to that later I can maybe Zoom a little bit here so it's easier for you to see okay so the next St done is to set up the list of properties on the front page so since we like to have things in components we can begin by creating a new folder inside components here called properties and then a new file called property list. TSX and the typical const property list equals create the arrow function return P property list BL export default oops default property list and save and then we add this to the page. TSX which is located in the app folder so now we can begin by importing it import property list and then just below here we can just say property list so if I save now and go back to the project here you can see that we get this text here but it doesn't make any sense but also so for each of the properties I want to have a separate component so we create one more file property list item. TSX then we create it and just copy everything there paste list item list item and item save so if I now save nothing happens but let's import this into this file here and say import property list item and then we can insert a few of these so property list item property list item and property list item I get a warning here now because jsx expression must have one parent element so we can add an empty fragment here close the empty fragment like that it could be a div if you wanted to but this will not render anything in the browser so it's kind of better to just have it like this okay so then we have the three items like this but we want them in a grid so um on the so if I go back here now and into page. TSX and around this property list here I want to have a new div so div class and we can say mt-4 so we get some space up to the different categories and I want this to be a grid and I want to uh when we have on the mobile phone we have one column of properties so grid calls one so this is mobile first as it always is with Tailwind um on medium devices we can say grid calls three and on large devices we can say LG grid calls five so we get five properties next to each other now at Gap to six and then Tailwind will automatically add space in there for us so then me just paste this in there and save and if I go back now we can see here that this fills out uh 1/5 of the screen5 and 1/5 nice okay so um I can just close this file because I'm not going to do anything more there but for each of these property list items I want to show an image and I want to show a title Etc so we can begin by removing this creating new div and calling it or sort giving it the class name of cursor Das pointer and then in here I want one div for the top um up here where you see the image and this one so a div class name relative sorry that's not add relative quite yet but we can say overflow Das hidden and aspect aspect Square so now Tailwind will automatically generate a square Forest based on the width and rounded D XL because we want rounded corners on the image and then is a image and here we can add a property called fill so it fills out this whole Square automatically um Source can be um slash I have prepared a few images if you go to Gib Link in the description below you can find images there in my repositories or you can just go to unsplash or similar and find some images there yourself so I have um profile pictures and I have uh images for all of the houses Etc so I just want to take one image now because this is just hardcoded so I don't want more images than I need so Beach one. jpeg P dore1 JPEG and then we need to set the sizes for this so that Tailwind can generate and make this more optimized for mobile phones Etc so sizes sorry um like that with tles and Max WID so for small devices that will say all the devices that has a max width of 768 pixels we want the width of the image to be 400 pixels or we can say 768 pixels just to keep this clean and simple if the max width is um 1200 pixels then we can also use 768 pixels and the default one can also be um 768 pixels um I'm not very familiar with why we need to do this but yes Tailwind or TS jsx says so and we need to add some class names to this so hover and when we hover this we want to scale this up to 110% so it a little bit bigger inside the square object cover so it uh talks with this one and and fills out the whole box transition so we get a nice effect h- full and v- full just so to know that image fills out the whole um of this square and we need an ALT tag so alt beach house we can close the image we just need to import image again so import image from next image image save so if I go back here now you can see that this fills out the whole screen um and that's because we didn't add a relative here and that's needed in order for this fill attribute to work so now we have this and we have the cool hover effect where it scales up the image a little bit nice so um for example the Overflow hidden prevents it from going out of this Square the aspect Square makees this a square box and then you have the scale when you hover it with mouse Etc um here we also want a simple heart icon um I will come back to that soon um but below here we can add one more div for the title so div class name margin top two I want this to be a flat FX it fills out the whole screen actually it doesn't need to be a flex box and in here P class name text LG so it's a little bit big and font bold property name save we get the property name here in a little bigger font than other places and then below there I want to show the prices so div class empty 2 p class name text um SM so it's a little bit smaller and we can say uh Str for the price sole $200 and in the regular uh with per night okay great maybe this can be a little bit gray as well so text Gray 7 100 maybe even a little bit brighter yes perfect okay so now we have a simple uh component for this everything here is still hardcoded but we will make it Dynamic later in this course so I think I can just go to the too list and set this task as well to done okay so next step then is to set with the detail page for a project sorry a property so we can begin by creating the page so close these two and then uh to handle routing and similar um nextjs wants us to put uh pages in folders so we can create a folder call um uh not in the components sorry in the app folder we create a folder called properties and then um um that will be for example the list of properties or just the front page but if you want a dynamic URL we need to create a folder like this so then we have the ID then this is a parameter that we can get inside the file and then in this folder we created one more called page TSX so now um next will fix everything here for us with the routing and the URLs and similar so the URL for this page Cana be /properties slab CD slash and when we go to that page this template will load so here we can say const property detail page equals create the arrow function return oops B property blah export default property detail page so I like to add a page at the end of all of my pages just so it's easier to separate them from the components and then um this actually exists already now so if I just go for to properties slash just some random things then I will see this there awesome um so just like we have a main Clause here we can copy this main you can see here just copy this from the front page and paste it in there fix the indentation close the main and then it's indented as everything else here great and on the top of this page I want to begin with an image of a property okay so we can begin with the image on the top inside the code so if I just remove this paragraph that to add just for testing then we can say div class name and pass in w- full so it fills out the whole screen the h- 64 sorry we need to curl the brackets 64 V 64 VH so it's a little bit tall and uh we can set overflow hidden because we need to do that to get rounded Corners rounded DXL and set this to be relative as well just like we did on the other place where we used an image inside a div so then I can um say image to import this again import image from next SL image and the source can be/ beach-1 jpeg um I want this to fill out the screen again and set the class name CL name to be object D cover w- full and h- full and the last but not least the alt 10 so beach house and close the image so if I save now and go back you can see that it fills out the whole screen because the W Das full the height is 64 VH I'm not 100% sure what that stands for but it's based on the height of your screen overflow and around the corners like you see there object cover so it fills out the whole thing nice um below this image I want the screen to be separated I want one part of the screen to be information about the property and on the right side I want the booking form as similar so I want to introduce and use grid again so D class name mt-4 so I get some space up to this image grid grid calls one on smaller devices and on large device s or medium and above you can md- grid calls 5 so the Gap to be before so we get some automatic spacing between these now we can begin with the one on the left side the class name uh call span three so that it takes three of these five available and I want some spacing above and below this so py- 6 and I want some more spacing on the right side so PR 6 um sorry like that uh left side and then we can create the one on the left side as well div close um empty D4 no that is not correct um div right I will come back to that because that's going to be a separate um separate component so anyways let's continue with this one we want the title at the top of this one so age1 Class M b-4 text for Excel and then we can just say property name close it so that's the title of this house below here I want some information about how many guests you can have how many bedrooms there are and similar so span class name MB das6 block text XL or LG might be big enough text Gray 600 now we can say guests how many guests can we have here four or maybe four guests Dash two bedrooms one bathroom save nice a little bit information there um below this one I want the HR just for separation between this and the uh landlord information so we can create a div just for this one and say class oops oops div class name py- 6 set this to be a flex box and I want the items to be next to each other and on the same height so items Center and space- X4 so we get some automatic space between these on the left side here I want the image of the landlord or the host so image SRC slash uh user profile image I haven't added this yet and then I want to add a profile pick so I just need to add this to the project uh Jango PNP demo images then I have a profile pick there and we can paste it like that profile P 1. jpeg again if you want these you can find them in the my repository uh set the width to be 50 width like that 50 set the height to be 50 uh give this a class name of rounded D full so it's completely round and ALT the user name now we can close the image and save so we can just go and see here that to see the profile picture of this landlord and on the right side here I just want to say the name uh is your host so we can add a new paragraph here P strong for the name uh John do is your host and later I want to make this clickable so that you can go into the landlord page see if there has more properties and even Conta DET them um yes so below this one HR again so we get the horizontal ruler and then below here I want the description of the house or the property so P class name mt-6 and text LG LM blah blah blah blah blah blah just add some random information here save go back and then you can see here the description of the house perfect and then on the right side I want a component for the reservation sidebar as I wanted to call it so I Can Begin by just adding it here like this reservation Side Bar close it so if I save it now I will get an error reservation head is not defined so let's try to Define it reservation so it can't be found because you haven't created it so let's create it Um this can also be inside properties so new file reservation sidebar. TSX const reservation sidebar equals create this Arrow function return P export defa def reservation sidebar then we can try to import it again import reservation Side Bar yes Save and then we got it here on the right side perfect so then we can code it um if I go here I can see that I have a margin top four there and just remove it and on this image you can rather say m-4 nice um and then here I want to replace this with an HTML element called as side which is typically used for side bars can close it like that and we want some styling on this one so close name and we want spacing uh above and below and on the left side and right side so just say p-6 and we can say call span two so it takes two of these five here when they are available if not it will just fill out the whole screen um you can set the rounded uh corner to be rounded D XL and I want the Border here and I want the border to be border D gray 300 Shadow DXL so as we get some Shadow on this nice um should maybe go a little bit further down so mt-4 that's better maybe we can say mt-6 so there are more on the same line nice can see here that it goes all the way down to the bottom of the screen so I want some space for this as well you can add a to this main pb6 so we can have some spacing at the bottom there it's a little bit better um on the top here I want to show the price per night so we can use the H2 element Class M b-5 so we get some space below this and down to the calendar which we will come back to uh text 2 * XL and 200 per night save then you see the price per night perfect um then we can create a very simple select list so create a div which you want to wrap around this form div class name mb-6 padding three so we get this under all around border and Border gray 400 so we get the bordered color on this one rounded XL just save it you see what it looks like this will be then around the guests and the dates um just go back here and insert the select so select close name w- full so it fills out this whole box um margin left one but we had minus here because we want to pull it a little bit more to the left side and text SM and then we can add some dummy options here so option one oops 2 3 4 let's look at it yeah then we have the select list here great um we should have a label above this so that we know what we actually are selecting so inside this div we can say label label class name block and font bold and text access so it's not too big so guest space between this like that then you can see here that we are now selecting guests great and maybe we should have a little bit spacing between these so on this here we can mb-2 nice um and then below here I want the simple booking button that will only be showing if you are not visiting your own properties but we will come back to that later so below this div we can say div close name w- full m b-6 i space below it py 6 so I have space inside it set the text to be Center and I want the text to be white the BG should be Air B and B so we get a nice red color rounded D XL book oh yes so there we have the book button we can also have a hover effect on this hover BG airb and B dark nice and then below this one here again I want to show just a little summary of what you're are going to pay how many nights and similar so we can hard code that for now div class mb-4 and I want to have a flex here because I want to show information on the left side and on the right side in this Dev justify between and align Center so then I just add sorry a paragraph Without classes here and then we simp 200 * 3 kns and then one more paragraph and then we can say um 800 nice um below here we can show the total and I also want to have a fee here so um just copy this and then instead of saying this we can say a Chango BNB fee um $40 which should be 5% I will do a calculation on this later and then we can have a HR for some separ separation oops to self close it like that and then below here let's copy one of these and instead saying margin bottom four now we can say margin top four and these closes can be the same but it can be font Bol now we just say total and total price be of course 840 so all of this will be automatically calculated said the same when we change this this will aut to update and I want to implement the calendar here but that will come later when you're actually going to do the booking anyways now we actually have the reservation sidebar it's very simple for now but it will become much more complicated when we start to implement the selection of the date range booked dates and similar so let's go to the to-do list and set this to done and that was it for this time if you have any questions about today's code feel free to leave a comment below and I'll answer as soon as I can see you in the next video

Channel: Code With Stein

Views: 17,409

Keywords: code with stein, nextjs, react, tailwind, nextjs tutorial, airbnb clone, react and nextjs

Id: AnhKSBTWCWc

Length: 94min 51sec (5691 seconds)

Published: Mon Feb 12 2024