Join Makerpad today

Makerpad is home to over 9,000 folks. Access members-only content, build real projects & get expert support
Tutorials
/
🏡 Airbnb clone with Bubble
Categories
Tools USEd
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

🏡 Airbnb clone with Bubble

Link to Demo

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

You must be a member to view the full lesson

Join Makerpad today

Makerpad is home to over 9,000 folks. Access members-only content, build real projects & get expert support

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






If you'd like this template, message @bentossell on Slack with your email for the account to send this template.

Ready to get started?

Join the community and start turning your ideas into solutions