How To Build An Airbnb Clone With No-Code Using Bubble

i'll then go and update the adult count to be two and the children count to be one i'll go and search for properties then over on our search results page i will click through to our san francisco loft and then if i scroll on down we'll see that the input field here has performed a calculation based on its price per night [Music] hello my name is lachlan kirkwood and today i'll be teaching you how to build an airbnb clone entirely out of no code using bubble bubble's by far one of my favorite no-code tools as it gives you complete control over creating your own custom database front-end design and also it allows you to integrate with third-party apis and plug-ins for those of you who don't know me i've spent the past year working with the bubble team to create their how to build blog series this series took a list of the top products out there on the market like uber instagram and twitter and explain the process of recreating them entirely out of no code using bubbles tool throughout this tutorial i'll be explaining the entire process you need in order to recreate your own version of airbnb without touching a single line of code this will include features like creating user accounts adding properties to our marketplace creating a custom search feature as well as displaying a list of search results on a page displaying the full information of a property on a dynamic page as well as allowing users to book a stay and then finally a feature that allows users to add reviews across our platform so grab your bubble editor and let's get right to it the first core feature we'll be working on within our build today isn't actually a feature that our users will be using across our platform instead we're going to go ahead and take the time to set up the necessary configurations for our database now i've gone ahead and actually created a list of all the data types and fields within a notion dock here i'd recommend taking the time to also create something similar just so you can keep track of where you're at throughout the setup of your database i find notion quite useful as i can tick off each item as i've added it into my database now if at any point throughout this module or even the whole tutorial you find yourself getting a bit lost i'd recommend just taking the time to either pause the video or even rewind it so you can watch it multiple times but let's go ahead and get into our build here so we'll jump on over into our bubble editor and head over into the data tab here now the first thing we'll need to do within our database is actually set up all the data types and then within these data types we'll be setting up the necessary data fields that lie within those data types and you can already see that bubble comes pre-built with a user data type ready to use and that includes the data fields of the email and it'll also store a password but you just won't be able to view that in plain text and what i love about bubbles database and it's something that i'll show you quite soon is that you can actually link these different data types between the data fields so for instance if i was to create an airbnb property and a user was to create that property i could then go and pull out the information of that particular user who's created that property at any time throughout my application this will all make a lot more sense as i actually add in all the data types and fields so let's jump ahead and get into it what i'll do first is add in all of the data types because i will in fact be linking between the different data fields and in order to do that you'll need to have your data type set up first so as you can see my bubble editor already had the user data type created so the next thing i'll need to go and create is the stay data type now in my tutorial here i'm referring to a stay as a property you could also call it that if you would like but i'm just going to call it a stay so i'll select to create that then i'll head back over into my notion doc and i can see that stay images is the next data type now you might be wondering why i've created two different data types for the stay one being called the stay itself and the other one being called the stay images the reason i've done this is because i'd like to optimize my database for speed and what i mean by that is if on our home page we were displaying an entire list of all the properties slash stays on our platform it will load all of the content within every single property that's loaded on our home page so if we had 10 properties on our home page bubble would automatically index all of the data that we need to potentially display every time each one is loaded now if we've also got a list of images linked to our initial stay data type it can quickly slow down the speed of our application as it's not only trying to load all this content here but it's also trying to load larger image files so my best advice when you're setting up a bubble database is to try and split out the image or files that you've created within a particular data type and as i mentioned before with bubbles custom database you can actually reference those at another time so let's say i'm displaying a stay with on my home page and i'd like to display an image from that stay i could always refer to call upon an image that's linked to that stay and of course later on in our tutorial i'll be showing you how we can connect those when we're creating a new property on our platform so we'll go ahead and add in these two data types to our database so there'll be a stay and then the state images i'll jump on over i'll type in stay create that and then stay images and also create that and then there's two more data types i'll be adding one is a booking and the other is a review so i'll be adding those in booking and then i'll add in a review great and now after we've added our data types we can go ahead and flesh out all of the data fields that will lie within these i can also see that i've accidentally added in two stays here so i'm just going to go ahead and delete one of those just want to iterate that you should only have one stay and also the stay images so let's jump back into my notion doc and we'll start by fleshing out the data fields that lie within the user property so i'll begin by adding in the first for on the list here which is the name the bio the photo and the profile type of the user so over in my bubble editor here i'll select my user data type i'll create a new field and the field name will be called name so this is the name of the user and this will just be a text field i'll go ahead and create that the next data field is the bio of the user which again will just be a text field and then i'll go ahead and add a profile photo for this user which of course will be an image data field and then i'm going to go ahead and also create a data field called profile type and the reason i'm creating this is because on my platform i'd like to differentiate between the users who are looking to rent out properties versus the users who are looking to host properties and the way i'll be doing this is by creating a data field called profile type and this field will be a text field and again later on in my tutorial i'll be explaining how we can use this field to our advantage now back in my notion doc i can see there's two last data fields i need to create and that is a list of all of the previous bookings a user has made and then also a list of saved properties that they might want to look at later on and you'll soon see that this is how we can actually link data types relationally across our database so we'll go and create a new field and this field will be called previous trips and this field type itself will be a booking so every time someone books a trip it will add that into a list of all the trips that they're booked and i will be selecting that this is a field with multiple entries because the user can book more than one trip in their lifetime on our platform i'll select to create that and then we'll add one last field which is a list of the saved stays so this is all the saved properties that a user might want to look at later and this of course will be a stay field type so just a property i guess if you'd like to call it that and of course this will be a list with multiple entries we'll need to tick that because a user can save as many properties as they would like within their profile so i'll go ahead and create that and then back over in my notion dock here i can see that i finish adding in all the data fields for a user so i'll tick those off next we'll move into our stay data type which has quite a few data fields so because it's a property i'll be registering multiple different data fields within this that a user might find useful up on their search so we'll start by adding in the name the description the price and the place type so i'll go ahead into our database i will select on the stay and i'll go and select to create a new field and the first one will be called name which of course will be a text field then i'll add in another field called description and this will also be a text field then below this i will add in a price and this price will need to be a number because it's a numerical value and then i'll also be adding in a place type so a place type will be whether it is a entire complex to themselves if it's a shared room or just a private room and this of course will be another text element then back in my notion doc i'll tick off that i've added in those four data fields and the next one i'll be needing to add is the images of the stay now as i mentioned before this will be linking to our separate data type called stay images so the way we'll be doing this is creating a new field i'll call this images i'll select the field type to be stay images so our separate data type and contrary to what you might think that there is multiple images i won't be selecting that this is a field of multiple images because within our data type state images it will be able to host several images within it and again this will make a lot more sense when we actually go ahead and build that feature but just for the meantime i'm going to make sure that this isn't selected as a list of multiple entries then below our images i'm going to add in a total count of how many adults children bathrooms and bedrooms this property can host so i'll go ahead and add in a field called adult count this will be a number i'll then add in a children count and this will also be a number and then i'll add in another field for bathrooms and this again will be a number and finally beds which of course will be another number field now i'll tick those off in my notion dock and the next thing we'll need to add is a range of booked dates a location and then also a list of all the amenities that the property has so we'll start off with the book dates here so if i go and create a new field i'll type in booked dates and this itself will be a date range now book dates is a way to filter out when this property has actually been booked because obviously we don't want to display this property to a user if it's been booked on the same dates that a user is searching for so by creating a date range we will then later be able to exclude that from a user search so we'll go ahead and create that then the next field was the location of the property and the location will be a geographic address i'll create this and then there's a list of all the amenities that this property has so i'll start by adding in ac and this will need to be a field set to yes or no so it either does have air conditioner or it doesn't i'll go ahead and create that and what i will also do is update the default value of this to be no and then we'll go ahead and also add in the next list of amenities so there'll be a kitchen this will be yes or no and i'll go ahead and update the default status of this to be no then there is the option to have a washing machine again this will be a yes no data field and i'll update the default to be no and then finally i'll add in wi-fi and this will be yes no and then of course i'll update the default status of this to be no now for our example today i'm only including four amenities but if there were others that you would like to add in i definitely recommend doing that within your database now and then finally within our database there's one last field that we'll need to add and that is the published status of this property now what i mean by a published status is that by the time a user creates a property they might not immediately add in all of the data fields to make it functional on our platform so what we'll do is we'll create a publish status with a default of no and then later on in our application once all of this information is filled out we can flip the publish status to be yes so that way we can then choose to display it within our application so i'll go ahead and create a new field and i'll call this published status and i will update the field to be a yes no property and of course the default of this will need to be set to no then back in our notion dock i will tick that off and the next data type is our state images and this one's nice and simple because this is a separated data type we only need to add one field to it so it will be called stay images and this will be a list of images so we'll select this as an image field and we will be taking that this is a field list with multiple entries i'll then go ahead and take that off in my notion doc and then we can focus on the booking data type so this is the data we'll be registering when someone actually books a trip so this will include the account of adults and children within it as well as the actual booking dates and then finally the property that the user is choosing to stay at so we'll go ahead into our database select the booking data type and then i'll add in a data field called adults and this will be a number data field i'll add in another field called children and this of course will be another number then i'll need to add in the booking dates so the booked dates and this will be a range of dates so it'll have a start and also an end so i'll go ahead and create that and then finally i'll need to link a property to this stay so i'll just add in a field type called stay and this will link to our stay data type now a user will only be able to stay at one property at once so i won't be selecting that this is a field of multiple entries i'll go ahead and tick those off within my notion dock here and the final data type we'll need to add is the reviews so in our database i'm going to select the review data type i'll start by adding in a data field called content so this will just be the text of a review i just call it the content i'll go ahead and create that then i'll add in a field for the rating of the review so this would be how many stars it receives so this could be a number data field then i'll add in who the receiver is for this review so this will be a particular host in this case and this will be a user data field because i'll be linking it to a user who receives this review and of course one user can receive one review at one time so this will not be a list of multiple entries and then finally i'd also like to link this review to a property so i will write that this field is a stay and then i will link this again to a particular stay within our database so if a user writes a review about a particular property that they've stayed at it will mark that review against that property and also the host of that property and just like that we've finished the last data fields that we need to add to our database as you can see it's easier than ever to create your own custom database with relational data fields and types within bubbles tool as i mentioned before within this tutorial i'll be keeping this pretty straightforward in terms of the data fields i'm adding but if you'd like to add any additional data fields across any data type i'd recommend taking the time to go and do this now we can now go ahead and start to build out the first user facing feature within our product today and that is the actual home page that allows a user to search for a property based on its location and a date range that they would like to stay from this module will also have quite a few little specific tweaks that we'll need to add so again i'd recommend following on closely and if you feel like you've missed anything at any point feel free to rewind the tutorial and watch over that clip again so let's jump on over into our bubble editor here and what we'll want to do first is go ahead and create a new page in an application and i'll be calling this page the home page once the page has been created i'm going to go ahead and just update the color of the background again and because this page will be used by our users within our mobile application i'm just going to update the size of the screen just so it roughly looks like a mobile device now again i won't be actually focusing too much on the design of the page i know airbnb has quite a few nice hero images that they use in this case today i'm just going to be keeping it quite simple and i'm just going to start by adding in a text element here and this will say where are you going i will update this to be h2 just so it's a little bit bigger and i'll move that over to the side and then below this i want to add in an input element that allows a user to determine what location they would like to visit so in this case i won't be using just an input i'll be using a search box because once again i'll be wanting to search for addresses or even cities or countries so what i can do is add in the search box i'll call this search box location and then i'll update the choices style to be a geographic place now this will automatically index any address or location or city for that matter that a user is searching within then below this i'm going to copy this heading and drag that down and i will call this heading from and then below this i'm going to add in a date time picker i'll drag that out to there and i'll update the name of this one to be called from and then i'm going to go ahead and copy both of those elements and i will update this one to be called to and of course i'll update the name of that as well to be called to now on a home page it's possible for a user to add in a location they'd like to search for and also define what dates they would like to be traveling between we will need to add one more feature and that is a function that allows a user to identify how many adults and children are going to be within their stay because we'll need to match a property based off how many beds or how many adults and children it has listed that it can take now there's a couple of ways to do this you could easily go ahead and add in a drop down menu and you could just add in a static choice of numbers so it could be the one two three four five i will show you a nice little way today and it's just gonna take a little bit longer but just to create a lot more intuitive user experience that replicates what the actual airbnb app itself does so i'll start by adding in a group element here today i'll add this below both of the date pickers and then i'm just gonna update the style of this group to have a border just so i can see its white background and i'm going to go ahead and update the name of this group to stay count now within this group i'll go ahead and add in some text elements and the first one i'll just call guess i'll update that to be a h2 i'll also just center that horizontally within the group then i'll copy that down and the next option or heading i will update to say adults and i'll copy that again and you probably guessed it but the next one will say children now what i'd like to do is create just like a manual selector that allows someone to add or minus a count of how many adults or children they'd like to take within their stay so the way i'll be doing this is selecting a icon element i will drag that's there and then i'm going to select from a minus icon i'll move that over and i will call this icon minus adult then i'm going to go ahead and copy that icon i'll move it down to the children option and this will be called minus children then i'm going to go ahead and replicate this icon again i'll move it over so there's a space in between and i'm going to update the actual icon to be a plus icon and this icon will be called plus adult and then below this i'm going to copy that icon again and this icon will be called plus children now when a user actually goes ahead and adds an account of how many adults and children they have i won't actually be storing this data within my database because they haven't yet booked a trip and i also want to avoid trying to create another data type that just stores every single request that's made because that would quickly fill up my entire database with data that i just won't be needing to use later on in our application so there is a way around this that is quite effective actually and that is by using what's called a custom state now a custom state just allows you to recognize that something is happening within your application and you can manipulate data within a particular state at any time without having to actually save anything within your database so i'll walk you through the step-by-step process of this and we'll start by actually selecting our group element and we'll be adding a state to this because all of these other smaller elements are sitting within this group so i'll go ahead and head up to the information icon here on the group element and then you'll see an option here to add a new custom state the state that i'll be adding will first be called adult count and this will be a number so you can see here that we'll be keeping a count of the number of adults then i'm going to go ahead and add another state and this one will be called children count and of course this will also be another number now what we're going to need to do is create a quick little workflow that registers the actual state of how many adults and children there are once a user selects that they want a plus or minus one of those within their potential stay so we can go on over and we'll select by creating a workflow that adds a number onto the adult count first so we'll go into our workflow editor and then within the action we will just quickly type in state and then you'll see there's an option here to set the state of an element the element that we'll be wanting to set a state of is our group and then within that we've already created two custom states and the first one we'll be wanting to change is the adult count and then the value that we'll want to change in this instance is the group itself it's current adult count so obviously it's going to be set to zero to begin with and from here what we're going to want to do is plus one so every single time this button is clicked it will add one user onto that adult account now we'll head back over and create a workflow when our minus button is clicked so we'll select to create a workflow and once again we'll be searching for state we'll set the state of an element the element will be our group stay count the custom state will be our adult count and the value of this state will need to be the group stays count its adult count and then we'll be subtracting one every time this button is selected however we're also going to need to add a condition to this element because we don't want a user to be able to minus a number when the current state is set to zero meaning we don't want to store a negative number when we're passing this data through our workflow so we'll only allow this action to trigger when the group stays count its adult count is greater than zero now we'll head back into our design tab and we'll just replicate the exact same workflows for our children count so we'll start with the plus icon we'll select an action and we'll select to set a state of an element the element will still be our group however the state will be changing is the children count and within the value here it will be the group stays count its children count and we'll be adding in an additional number then finally we'll go over to our design tab and select the minus option for children create a workflow we'll choose to set state of an element the element will be our group stay count the children count and the value will need to be the current groups children count and of course we'll be subtracting one and then once again we'll add a condition to this workflow that only allows it to run when the group's children's count is currently greater than zero because we don't want any negative numbers now what we'll need to do is actually go ahead and create a way to display the current count that each of these values holds now instead of just using a text element and inserting dynamic data i'm going to choose to use an input element and the reason i'm doing this is because input elements allow you to store and send data between pages whereas a text element doesn't now with an input element you can actually choose to disable the input so a user can't manipulate the actual content within this and you can also update the style of the input so it doesn't have a background or borders so that way it just looks more like a generic text element i won't be doing that in our tutorial today because i want to focus on the actual workflows that we need to create instead but i'll go ahead and update the name of the input to be called adult count so the way i'll be displaying the actual count is by adding in some initial content here and i'll be selecting from the group stay count so the group that this element sits within its current adult count and then i'll go ahead and copy this element drag it down into the children section i'll update the name of this to be called children count just remove the mention of copy and then i'll update the initial content i'm displaying to be the groups children count which is the custom state that we've selected now i would just like to go ahead and create a little bit of a user experience workflow where the guess field is actually hidden until a user has selected both the location and the to and from dates so what i'll do is i will go ahead and unselect that our element is visible on page load also choose to collapse this element when it's hidden and then i'm going to go ahead and create a condition on this element i'm going to go ahead and define a new condition that when the location search box its value is not empty and the date picker from so our first date picker here when its value is also not empty and when our date picker from the true value is also not empty i'm going to make this element visible so i'll check that this should change the behavior of the element the element will be visible and i'll select it that is true then below this i'm going to go ahead and add in a button element and this will just be a button that says search and this will be the button we'll be using to trigger our actual workflow and then before i go ahead and create this workflow i'm going to quickly add a condition to this button to only display it when the adult count is higher than zero now the reason i won't be selecting that the children count needs to be higher than zero as well is because there will be cases where people are only searching for a stay particularly just for adults themselves whereas there won't be cases where people are searching for stays for just children so we'll go ahead into our condition tab here i'll define a new condition and i'll say that when the input adult count so i input here storing the actual value of our custom state when its value is not empty this element will be visible and i'll select that that's true which means that i then need to go into our appearance tab and unselect that this element is visible on page load so now it will be hidden now we'll go ahead and create a workflow that stores all of the information from this query and sends it over to a search results page so we'll go ahead and select to create a workflow when our search button is selected then within this workflow i'm going to select a navigation event and i'll choose to go to a page the destination page doesn't yet exist but i'll create a new page here and i will call it search results i'll select to create that page then i'll go ahead and choose that as the destination page and i won't need to be sending any data through to this page because the page doesn't have a content type selected to it however what i will be doing is sending through what's called page parameters now page parameters are a really effective way of sending through data that isn't stored within your database and this data can just be temporary data such as our location of the search and the date range of the search as well as the adult and children count of the search so what we can do is start adding in custom parameters and i'll be explaining how we can extract this information later on on our search results page but the first parameter i'm going to add is the location of the stay so i'll create a parameter key called location and i want the value of our location to be the search box locations value whether that be an address or a city that a user is searching for then we'll go ahead and add in another parameter and i'll be calling this parameter start date and then of course i want the value of this parameter to be the from date from our date time picker then i'll go and add in another parameter and i'll call this one end date and this will be the value of our date picker two then below this i'll be adding in a parameter for our adult count and this will be the value of our input adult count and you can see here that is why i used an input field to store that data because we can now pull that data from that field whereas we couldn't do that with a normal text field and then below that i'm going to add in a final one called children count and this of course will be the input value of our children count so over on my home page you can see here that there's just the location and the date fields displaying there currently isn't the option to select a guest count or also select the search button because we'll first need to add a value to these fields i'll start by choosing a location i'll search for san francisco then i'll go and choose a date range i'll say feb 26 through to feb 28 and now you can see that our guest option is displaying i can then go ahead and add in an adult count you can see i can add i can subtract and it won't let me subtract lower than zero i can go here and select that there'll be three adults and one child and now i'll go ahead and perform that search now you can see on our url string here that we have been redirected to our search results page within that it is also storing the location which was san francisco and then also it has the start date which was feb 26 and it'll also include the end date as well as the children count and later on when we're building out our search results page i'll explain how we can extract that data from a url and then use that to display information on our search results page and just like that we've finished building out the home page of our platforms now that we have finished building out our initial search page that allows users to identify which particular properties and dates that they would like to stay at we can go ahead and build out our actual search results page that displays a list of all of the properties that match that query let's jump over into our bubble editor and we'll go to our search results page that we previously created now because this is a page that will be displayed to users we'll need to go ahead and update the size and i'll also just update the background color of it as well just so it looks roughly like a mobile dimension now the first thing i'll be doing is adding in a title to this page that displays some of the dynamic information that i can pull from the parameters that i'd sent through from my search page in this instance i can insert dynamic data and classify which particular parameters i'd like to pull information from so just start by adding in some static text so i'll say stays in and then i'm going to insert dynamic data if i scroll right down to the bottom there's an option to get data from page url and you'll see here that it's able to extract a parameter that we've sent through from our home page url and the parameter name of course we saved it as location and that was a geographic address so now it'll be able to pull that information from the parameter and display it on our page so i've just listed stays in it'll be san francisco based on my previous search before then i'll add a space and then i will put from and i'll insert the dynamic data which is the beginning date of our stay so if i add a parameter so get data from page url the parameter i called it start date and this was a date then beside this what i'm going to do is format this date just as a month with a date afterwards then below this i'm going to add in another space and i'll say to and once again i'll be inserting dynamic data which gets data from the page url and that parameter is end date and then i will update the type of this to be a date and then quickly format the way that the date is displayed to once again be the month as text and then the date after it now i'll go ahead and update the style of this font to be a h2 and i will just reduce that to a single line and it will expand downwards if it needs to display more information in that field now the next thing i'd like to do is add a map onto the page that pinpoints all of the locations of properties that are relevant to a user search query so i'll scroll down and select from our map element here i'll drag this element out to be the size of the page and then within this map i'm going to update the number of markers here to be a list and the type of markers will need to be a stay because we'll be displaying a list of all the properties then i'll need to update the data source of the list of properties that we'll be displaying so i will perform a search i'll be searching for all of these stays within our database where the location that's registered with them is within and you can add any custom distance you would like in this case i'm going to say is within 20 i'll choose kilometers so when the location of a stay is registered within 20 kilometers of and i will then be selecting the url parameter that we've sent through from our home page so i'll select get data from page url the parameter name was location and of course this was a geographic address now this map will index all of the stays that are relevant to a user's query now finally on this page i'm going to want to display a list of all of the stays properties that do actually match the user's query and are also available on the dates that the user has searched for now there is a little trick we'll be using to make sure that we can filter out properties that are available because that is a key feature of airbnb and i'll explain this in more detail as we get to that but first we'll go ahead and add in a repeating group to our page i'll also just need to extend my page down now this repeating group the type of content will be a stay because we'll be displaying properties and the data source for this repeating group will need to do a search for all of the properties that match the parameters that we've sent through from a user search query so the type of data we'll be searching for is obviously stay and then we'll begin to add some constraints that match the page parameters that we've sent through so we'll add a new constraint and the first one will be the adult count so how many adults that the host has listed this property can cater to and then i'll select when the adult count is equal or greater to and then i will scroll down to get data from page url and i will select adult count and then i'll need to update this type to be a number because we're obviously sending through a number from our home page i'll close that and then i'll need to add another constraint which is the children count so when the children count is equal or greater to i'll then select to get data from page url and the parameter i'll be searching for is the children count and that of course will be a number as well now we're only filtering stays that cater to the relevant number of adults or children that a user is searching for we will need to of course add in a parameter to filter out the location similar to what we do with our map element above so i'll go and add in a new constraint and i will once again be searching from the location and when the location of this stay is within 20 kilometers of i'll scroll down to the bottom option to get data from page url and the parameter was our location and i'll update that to be a geographic address now as it stands we're filtering all of the properties stays in our database that match the parameters of the user's query however we're not actually yet filtering the stays based on the dates that they're available now this can be quite a tricky thing to do in bubble so what we essentially want to do is exclude any properties that have a booked date that overlaps with the date that the user is searching for and the way we'll be doing this is by once again using a custom state element and i'll be explaining this as we walk through this process so within our repeating group here that's going to be displaying a list of all our stays we'll need to go ahead and select the information icon and we'll go and then add in a new custom state the name of this state will be called dates and the state type will be a date range because we'll be filtering through the beginning and end date of a stay that's been booked we'll choose to create that and so now that we've added a custom state which is a date range to this repeating group we're going to need to create a quick workflow that actually fills in the information that we need from the date range and that will of course be the range that is sent within our parameter so the beginning and end date of a user's desired stay so we'll go over into our workflow tab here and we'll choose to create a new event and we'll be choosing from the general option every time that the page is loaded because the only way that a user will get to this page is by performing a search on the initial home page which then they'll be redirected over to our search results page and every time this page is loaded we'll perform an action and we'll search for the set state of an element option and the element that we'll want to set the state of is of course our repeating group that we've just added a custom state to and you'll see here there's an option to add in a custom state which is our dates which of course is set as a date range and now we'll be adding in a value for a date range which of course will be the beginning and end dates that have been sent through our page parameters so we'll select to get data from our page url and the first parameter we'll be choosing from is the start date and this type of parameter was a date then we'll select the more option and we'll be choosing from a range so it'll be any dates that fit between the start date and the end date so now i'll select the get data from page url option and the parameter here was called end date which of course was another date now every time a page is loaded it will set the state of our repeating group to identify the particular dates that a user is searching within we can then head back over to our design tab and because we've added a custom state to our repeating group it allows us to filter down these particular stays even more so as it stands we're currently searching for all of these stays that meet these individual parameters however i would like to filter out all of those stays that do meet those parameters even further by the dates that they're actually available so i'll go ahead and select the more option i'll search for filtered and select that and then from here i can go and add my own custom filter the constraint i'll be adding i'll need to search for advanced and this allows me to create a custom filter and then within here i'll be searching for when this stay so because we're filtering a list of existing constraints it will identify each individual stay as a stay within each cell of our repeating group so when this individual stays booked dates so when a user actually goes ahead and books a airbnb we'll be registering those booked dates as a date range and i'll cover this more when we actually get to that point in our tutorial however at the moment i just want to classify it when this particular stay so this sells booked dates overlaps with the repeating group stays dates and because those dates are set as a date range it will filter anything in between and now it's registering any airbnb properties slash stays that have booked dates that overlap with the dates that a user is sent through within their query what i would like to do though is select that i don't want to display these properties if they do overlap with those dates and the way i can do this it's a little bit custom but i'll be selecting to format this option as text and it'll give me the option to say yes or no so it's creating a binary between two options i can then go ahead and close that and then i'll be selecting is and just typing in the option of no and because i have selected this is formatted as text with a yes and no binary i'll be writing that no against that particular binary i've just created so now it's searching for all of the stays with an overlapping date and when that is true i've selected that i don't want this property to be displayed within our repeating group now i know that can seem a little bit confusing particularly if you are relatively new to bubble but you will find that this will work a treat in terms of filtering out all of these stays that are already booked and now that i've set the data source of my repeating group there's one thing i would like to note and that is that at the moment it is searching for all the properties where the adult count equals or is greater than the value that has been sent through and also when the children count is equal or greater to the value that's been sent through but there will be some instances as i mentioned in our previous module where a user goes and books a stay only for adults and no children whereas you wouldn't have a child booking on the platform to only have a stay for children not adults so what i'll need to do is go ahead and create a condition that when the children count from our page parameter is zero we'll need to update the data source of this repeating group so i'll head over to my conditions tab here and define a new condition and then i'll be selecting a constraint that begins by getting data from our page url so when the children count parameter and of course that was a number and then i'll select is empty so when it's zero essentially i will then go ahead and update the data source of our repeating group and the data source of our repeating group will be the exact same as our initial data source only we won't be including a count for children here so i'll go back into my condition tab i'll perform a search i'll be searching for all of the stays within our database and i'll start by filtering when the adult count is equal or greater to i'll go ahead and get data from our page url the parameter was of course our adult count this was a number i'll close that then i'll search for the location so when the location is within 20 kilometers of i'll scroll down to get data from page url the parameter was location and the type of parameter was of course a geographic address and i'll then need to also go and replicate the advanced filter that we'd previously added so i'll go ahead and select the more option i'll search for filtered i'll add a new constraint and i'll include the same custom filter that i just added so i'll search for advanced and i'll be selecting when this stays booked dates overlaps with the repeating group stays custom state dates i will format this as text with a yes and no binary and i'll say is no and now that will just cover both bases where a user is searching for a stay with adults and children and another option where a user is only displaying a display for children themselves and then the other option where a user is only searching for a stay with adults itself now that we've configured our repeating group we can go ahead and just update the appearance of the content that will be displaying in this and i'll go ahead and start by updating the layout style to be extended vertical scrolling just so it collapses or expands based on how many properties will be displayed and then i will also update the amount of rows just to be two to begin with and then i'll go ahead and add in an image element because i'd like to display an image of this property to begin with i'll just shrink that size down a bit as well and then i'll insert dynamic data and this image will display the current cell stay so the property that it's sitting within its images and of course that's linked to the separate data type which is images and i'll also need to choose a particular image that i'd like to display i'm just going to select a random item so it'll just randomize every time that is loaded and then next to this i'll go ahead and add in a text field i'll insert dynamic data and this will be the current cell stays name then i can go ahead and close the gap in the repeating group and i'll just add a heading above this that just says available stays and i'll update that to be a h2 style font and i'll just move that repeating group so it's in line with that and then the last thing i'll need to do before i can go and preview this page is actually go and create another workflow that redirects a user to the individual property page when either of these elements is clicked because if user is interested in a state they need to be able to click through and view the full information of it so i'll select the image here i'll create a new workflow so when this image is clicked i'll create a navigation event i'll choose to go to a page and the page i'll be wanting to redirect a user to is our stay page that we previously created and of course because that stay page has a data type which is a stay i'll need to send through the data of the current cell stay now we can go ahead and preview what this whole experience looks like within our bubble development environment so over on our home page i'm going to begin by searching for a location which of course will be san francisco that's why i registered my previous property i'll select the available dates to be the 26th of feb through to the 28th of feb i will add in that there's going to be two adults and one child i'll then go and search for that property and it'll automatically pull in all the information from the page parameters so it now says stays in san francisco from my date range that i've added it'll automatically display a marker on the map based on where that stay is and i'll be able to show you in a later tutorial what this looks like with multiple stays on that map but now at the moment you can see that our repeating group has displayed at my loft it's chosen a random image to display there and then i can go ahead and click on this image here and it will redirect me through to the stay page and send with it the unique identifier for this particular stay now back on my notion doc i'm going to tick off that i've finished building out our search results page which allows us to pull information from our page parameters that were sent through from the home page and display things like the dates as well as a map with markers on it and then i've also created that advanced filter that allowed us to filter through properties that didn't have overlapped book dates and that is all i have time for in this tutorial today if you're interested in checking out the rest of the course i'd recommend clicking the link in the description to purchase the full course within the complete course i'll be walking you through the step-by-step instructions to complete the rest of our build you can also get access to a suite of bubble tutorials where you'll learn how to build other popular products if you'd like to get started building some other popular products for free i'll be sure to include some suggested links at the end of this video thanks again for taking the time to watch and be sure to hit that subscribe button if you'd like to see any other useful tutorials to help you on your bubble [Music] journey

Channel: Building With Bubble

Views: 7,692

Keywords: Bubble, Visual programming, no-code, makerpad, airbnb clone, webflow, adalo, Bubble visual programming, zeroqode, airdev, software development

Id: QTQ4D9pc-iY

Length: 56min 29sec (3389 seconds)

Published: Mon Mar 08 2021