How to build an Airbnb CLONE in Bubble! [Part 1] - Bubble Tutorial

hi i'm jason and i teach non-technical people like myself how to build apps without writing one line of code today i have kids sleeping upstairs so you're going to get my late night fm dj voice today we're building an airbnb clone on a tool called bubble pretty stoked let's get started we're looking at a blank canvas in bubble good place to start let's actually take a look at airbnb though get some inspiration beautiful site ours won't be quite as nice but uh see effort that counts let's go over some of the functionality though that we're going to work on today number one we're going to have a home page like this with search we're going to be able to put in a location a check-in date a checkout date add some guests just me tonight and then we're going to build a page that looks something like this a search results page gonna have properties listed on the left that are near the location that we put in maybe we'll add a map um we'll also need a property page which we can do today so if you click on one of these property page would look something like this where you have property images and more details about about the property and the option to book it so the first thing we need to think about is what types of data do we need if we go back to our home page here just scrolling through i mean one type of data we'll need is a property list list of properties pretty obvious one another one we'll probably need is a bookings list because there could be many bookings per one property some others we might need are users a user could be a host or a renter and maybe even reviews you can have many reviews per one property so we'll need a list of those as well so let's start building that database i'm going to go back over to bubble and click on the data section here and we'll start with properties so i'm going to build a add a new type here for property and let's head back to our gravenhurst check out this find here some of the fields we'll need our name which is this number of guests number of bedrooms number of bathrooms we'll probably need a price per night um maybe a rating number of reviews description lots of stuff here so let's start adding those in our name will be a text field we have description in there which will also be a text field what else did we have we had the location which is important where is this place and here we can actually use this geographic address for location we need number of beds this field type is just going to be a number number of bathrooms also a number price per night [Music] a couple more if we look here if we scroll down you'll see there's this here what does this place offer free parking backyard most of these are yes or no does it have a hairdryer or does it not have a hairdryer does it have a patio or not uh so we'll add two of those to start maybe we can add more later if we want but two that i can think of is ac usually when i have a field that's either yes or no i started with is so that i know and i'll choose yes no so is it is there ac yes or no that's what's going to go in that field and we'll do one more um wi-fi very important how am i supposed to do these bubble videos if i don't have wi-fi also yes no cool i think that is good to start and we can add our other data types later because i want to start building so let's go to design so let's start on the home page we have a nice image here in the background maybe we'll find one for ours i'm going to start with this this location search and check in check out this this ability to search for a property or stay that's what we're going to work on right now so the first thing i'm gonna do here is grab a group and um we're gonna make this actually gonna make this uh maybe like 320 should be good size and we'll make it uh the full height here of our page and we're going to center it so i put that right in the center because i'm going to build inside of this here um next thing i'm actually going to turn on um show element border so i can see that there and we're going to call that group group center and one more thing i'm going to do to start here is to just put a background color so i can see a little more of what i'm doing because if i look at airbnb here if we put a background on that's dark we might have white captions that should work all right we need a location input and we can use a search box for that so if you look on the left side here in input forms there's one called search box and there's some cool functionality here where it's already built in the bubble um where you can choose geographic places here and that'll let you search for cities or addresses and we're just going to change the placeholder here to where are you going all right kind of similar to to this one and if we preview that you can see that i can search here for grabenharst or any other address or place one more thing i want to do is put a caption that actually says that that's the location so i can use a text where is that text here i can use this and we're going to call this location and i already have some styles set up so i have a white one here that i'm going to use but you could go to the styles section here to set up your own styles we're not going to go over that today though so we'll throw the location on there and next up we need a check-in date and checkout date so i can use a date time picker for that in the input forms here um so we're gonna make this a little smaller and we are going to just update the style and throw a caption on there oh it's called chicken and we need check out so i can actually just if i hold ctrl or command i can duplicate that call this checkout and here we'll call this daytime picker check out this one was daytime pickard check in it's good to name these so we can find them later and this one was we'll just call this location all right so we got the location we got the check-in we got to check out now we need guests so we're going to make a little box kind of like this one we'll do adults and children um we'll leave out infants for now but we could always add that in later if we needed to so i'm going to put in another group throw it here one thing actually i'll show you is if i just select group here i can just draw it in that makes it a little easier i could draw it right where i want it and i'm going to put this underneath i'm going to give this a white background kind of like this here i see how that's white so i'm going to remove this default style i have here and add a flat white color there we go make it nice and round too nice and round it's looking good um so we'll need one more group i'll throw in there just so i can have a bit of a margin and don't forget to name these this one will name what is this group guests guests margin this one i think um i'll put we'll put a 20 pixel margin on to start see how that goes so here i can just say x and y is 20 and 20. and then i'm just going to guess here you could see this is 22. it's almost there there's 20. and that's about that's about 20 there now i'm going to throw in a couple of text objects here adults i'll have adults we'll have children cool now if we head back over here adults children and this allows you to add plus or minus and you can increase or decrease the number of adults or children that you are searching with or booking for so let's set up something similar i'm going to grab an icon and we'll throw it right around here this is going to be a minus cool and uh we'll need two of those and we'll need a plus on the upside now we need a number in the middle so i'm just going to grab a text icon here or a text element i mean and throw it here and um i'll start this at zero and let's call it text adult account text children account all right so we have location we have check in we have check out and we have adults and children now how do we get that number to go up and down because right now it's not doing anything it's just showing zero well one thing we can do here is use a custom state a custom state is a way to hold temporary data that doesn't exist in our database so we need to store this number somewhere but not necessarily in our database so that's what you can use a custom state for so what i'm going to do is on the page this is my main index page here i'm going to put those custom states here if i click on the i i can say add new custom state so we'll need one for adult count which will be a number default value zero and we'll need one more children count so those now that those states are set we're going to start a workflow that happens when you click on these plus or minus buttons so if you click plus then it's going to add one if you click minus it's going to minus 1. so let's do that if i click on the plus we can start here and say start edit workflow so i'm going to look for the state action there sets data element and the element is index that's where i put the custom states and here they are out count children count so this one we're going to add one to whatever the current count is so if i go to index again here i can find my states again so whatever it is currently we're going to plus one cool let's try that out so now i got the little finger cursor here doesn't seem to be working because this isn't actually showing our custom state yet this is just showing zero so let's go back and this will actually be dynamic data we're going to put find that custom state again idle account and this as well will be dynamic data child count so let's try that one more time see now when i press the plus the number goes up we haven't set up the other three though so i'm going to do that now and i will brb plus minus plus minus works great all right let's get rid of this gray this gray is kind of ugly um we're gonna throw an image on here cool so we need a search button we'll work on that next and i already set up a style for the coral airbnb coral we'll call this search so what's the search you're going to do one it's going to send us to our search results page so if we go head back to airbnb once we choose where we want to go when we want to check in hate casts when we press search it sends us here so this is what we want to do we want to come here so heading back over to bubble we'll set up a workflow here and the action is going to be go to page because we're going to go to a different page now destination we don't have a page yet for search results so we're going to create a new one called search results and there it is now when we go there we need to um set some parameters on the page so we're going to use this function right here sorry this one here um we want to send the location we want to send the start date and the end date and the ad count and the child count everything that the user selected on the previous page we want to send over to this new page so we know how to search our results search our properties so here i'm going to add a few parameters one's going to be location this is going to come from our search box and we're going to keep going here we need a start date which is the check-in date time picker we need the end date which is the checkout daytime picker we need the adult count which is on the end that's index page it's the custom state we made and we need a children count again custom state on the index page so let's try that out stick with our grave and her selection choose a date in the future here and search now this takes us to a new page this page is blank at this point because we haven't built it yet but one thing one thing i want to show you here is the parameters that we sent or here in the url location equals gravenhurst you can see that start date equals november 27th there's end date you keep going there's adult account and there's children count so that's where those parameters are sent and then when we build this page we're going to extract those values from the url and use them in our search results all right i'm going to stop here for this video because the kids are stirring i can hear them upstairs but tune into the next one where we're going to be working on the search results page that we just talked about and the property page i appreciate you watching if you liked the video please subscribe tune in to the next one also feel free to leave a comment with your questions or video requests thanks and i'll see you on the next one peace

Channel: Build Apps Without Code

Views: 188

Keywords: No-Code, Bubble

Id: 02XAurky0dA

Length: 21min 57sec (1317 seconds)

Published: Tue Oct 26 2021