In this tutorial, Dave walks through how to build an Airbnb clone using Bubble

Set up your homepage

Add a group with a nice image in it that will be the top of the homepage (I use https://tinypng.com to make the images smaller so they load faster)

Create a group inside the header that will be the search widget to search homes

Add a search input that searches GEO locations

Add 2 date pickers from & until

Add this workflow to your date picker

Should look something like this now

Create a group that looks like an input inside the group that will open the selection group

Now add a focus group to create the custom select group Download this plugin for good looking icons

Add states to save the guest count in

Should look something like this:

Add this dynamic data to the text box for all types

Add a delete that will set every selection at 0, and save button that will close the group

Add a floating group up top to create the menu

Add the ‘reusable element: sign up / login pop up that shows when you click sign up and design it so it fits your app

Create a new page /become-a-host so we can start adding houses to the platform

Create a custom form to let people submit or later edit their place Data:

The form data should be the user’s house

Create auto binding for the selections and a privacy rule that the user needs to be logged in to change

Add this workflow to the page

And add input fields to your form to complete the listing

Add to collect info from the user that posts the listing

Add a repeating group to the homepage to start showing the listings

Create a blank page /listing To show a single listing

Make the type of content ‘house’

When you click on a listing on the homepage

Add this workflow for the image sider

Add a favourites button to the page

Add a group that will show the description of the listing and calculate the price.. copy the date & guest qty focus group (with workflows) from the homepage.. you’ll get a lot of error codes most of them you have to add the ‘focus group’ to the data calculations

Set this state when one of the date inputs change

Add a button to the form that calculates the total price

******************changed some things for the data picker******************

Download the plugin

With this plugin you can select a range of dates and block dates that are booked.. so we change the data inputs to this plugin with these settings:

You can also keep the 2 separate dates selectors… and skip this part

Same for the homepage

You can copy the guest selection group and place the picker inside to make it look like an input :)

Set this state when the data pickers value changes

Add a description to the listing form

So users can add a description to the listing that should look something like this now:

Add the plugin stripe to create actual bookings

Set up test API keys

When a user clicked booked first check if they ‘re logged in if not show the signup pop up

Add this button to the add/ edit listing form

And add this workflow

Add this rule to the booking button on the listing page

Charge the user if logged in and take a cut of the booking

In this case, $5 you could make this dynamic based on the nights booked or % of the total

After this, we can create an order and block the dates booked in the listing

Dates will be blocked from the date picker now

Add a name to your signup pop up you’ll need it for bookings

Create a new page called /orders

Copy the /dashboard page from the Uberpad template

Modify all data to fit the Makerbnb app

When you click the order group set the current order show you can show the details group

Now when a user orders a booking send them to the /orders page

Add a pop up that will be the profile settings and opens when you click the ‘my account’ button

Add a reusable menu that we can use on every page Add a focus group linked to an icon that will show it Also add the signup pop up to handle signups

Then add the menu to all pages

You can style your 404 page with an image from undraw.co

Create a pop up in /orders to contact the owner or the customer

Use these rules to determine which user is contacting and contacted

Add a contact button that will open the pop up and set the current order to the /orders page

Go to the homepage and change the repeating group data source

You can add icons to the listing page to make it more clear what kind of features the listing has

Add an image to your dashboard that shows if you don’t have any orders yet…

Download the plugin ‘toolbox’ we need to get the dates in between the from and the till date so we can block them in the agenda

Copy this blue box on the /listing page

The output are the dates booked

On the listing page before charging the user set this state so we can show on the page that its loading and make the buttons unclickable to exclude errors

‍