If you are interested in building your own version of AirBnB, finding a whitelabel Airbnb that you can customize, or building a similar type of housing or short-term rental marketplace–but you do not know how to code–then we’ve got a solution for you.
Using Bubble, a no-code visual programming platform, you can easily build and customize any web app for your exact needs and visions, without hiring an engineer or having any background in programming. In this guide, we will walk through the basic setup and structure for building your very own no-code version of AirBnB on Bubble.
This guide to building a "NoCodeBnB" platform that lets users find places to stay, or rent out their spare rooms will cover the following topics:
Steps to building your own AirBnB clone with no code include:
What is Bubble?
Bubble is a no-code tool that empowers our users to design, develop and host fully functional web applications without writing a line of code. Applications built on Bubble can range from simple prototypes to complex marketplaces and platforms, completely replacing the programming languages and frameworks traditionally used for web development. Bubble’s powerful point-and-click editor gives users the complete power and ability to design fully customizable applications and workflows, handling the infrastructure, DevOps, and scaling automatically.
To get started, you’ll need a Bubble account (sign up here - it’s free). You won’t need any server environments, AWS setup or technical teams - Bubble does all the hosting and heavy lifting for you.
Before starting on this app, we recommend completing the introductory lessons, which will guide you step-by-step through some of the most common Bubble features. This will help you get a running start on building your no-code AirBnB clone.
How do people even begin building their apps?
The short answer is that this comes down to personal preference. Some Bubblers like to start by designing their pages so that they can visualize what the user interactions are like, then move on to hook up their pages to the database and workflows. Other Bubblers like to start by defining their app’s database, which influences how they think about page design and workflows. There’s no right answer, so give the different approaches a try over time to see what fits best with your style of thinking.
We’ll start off by thinking about the main pages that a no-code AirBnB needs in order to provide the features your users will expect from a short-term rental marketplace. These pages will act as the primary user interface your users will view the rooms to rent or make bookings on, so it’s important to get them right.
If you come from a web design or Wordpress background, Bubble lets you design stunning dashboards and pages that will make your users feel at home. If you have no idea about design, no problem! You can easily kickstart your project by choosing from one of the hundreds of our templates.
One of the advantages of Bubble is the ability to send data to a page. This means that you only need to create one generic version of a page with one simple design. Bubble will automatically populate the elements on the page with the data fields from the data stored on the page. This means you won’t need thousands of different pages for each room in your no-code AirBnB app!
To build a vacation rental marketplace MVP, we’ll build the following pages:
Bubble has abstracted away a lot of the technical awkwardness in interacting with databases, but a lot of the same core concepts are there. In databases you have tables; in Bubble, you have a table for each “data type.” Bubble’s data types have fields, represented as columns, and you define what type of data a field has, like text, number or yes/no (binary). One difference is with database joins; Bubble simplifies a lot of that by allowing you to define a field type as a data type you have in the app. If this doesn’t make sense to you right now, don’t worry - it becomes clearer after you see an example.
Some users find it easier to start with setting up their data types, which is essentially setting up the database. Every Bubble app comes with a built-in database that you can configure however you need, meaning no setup hassle for you.
We want one data type for each type of ‘thing’ we want in the app. Think of a ‘thing’ as exactly that - a thing that you will be showing, storing data on or using in the app.
Each of these data types should have fields within it that hold properties of that thing. As we continue building the pages, elements on the page will draw upon different fields of different data types.
When building Airbnb as an MVP, we’ll need to create the following data types & fields:
Data Type: User
Data Type: Booking - the booking that a user will make when they want to rent a room
Data Type: Room - the room that is on offer to rent by the public. A user might make a ‘Booking’ on this room if they want to stay there.
These are the bare minimum fields we’d need to get the app working. As we build more features, we would likely add more data types and fields. For example, we can add an address for the room, or a “Draft” boolean field to indicate if the room is in draft mode and not yet published. We can then hide and show different design elements or change the way the app behaves based on those bits of data.
How do you build features in Bubble?
Along with the page designer and the built-in database, an equally important core Bubble feature is “workflows.” Workflows allow you to define pieces of logic in the form of “When X happens, do actions A, B, C, etc.”. In reality, “if X, then A, B, C” statements are the basic building blocks for most features in websites - they connect what users see on the page with the database behind the scenes.
Now that we have some blank pages and the database set up, we’re going to give the web app some actual functionalities by connecting everything together and performing some basic actions. In Bubble, the main way to do this is with a list of “actions” grouped in a “workflow.”
Each workflow happens when an “event” happens (e.g. a user clicks on a button or the page is fully loaded), and then runs a series of “actions” in response (e.g. “sign the user up,” “make a change to the database” or “hide/show an element” etc.)
To get you started with the basics of the workflows, you’ll need to build the following features:
Once a user has created a profile, we’ll build a feature that allows them to create a room for rent - becoming a host on our platform.
On our create room page, start by using a combination of input fields, including; free-text fields, image uploaders or multi-line inputs fields.
Once a user has added their relevant details within each input, they’ll click the list room for rent button to create a new entry in your database. This button click will be the necessary action to trigger your workflow.
Using the workflow editor, you can select to create a new thing within your database. In this instance, we’ll be creating a new product.
You’ll then need to start adding data to the relevant fields within your database. Map each input field you’d like to create against its corresponding data field.
Once users have started submitting rooms to the platform, you’re ready to display each item in a feed on the homepage. This can be achieved by utilizing our repeating group element.
Repeating groups integrate with your database to display and update a list of dynamic content.
When using a repeating group, you’ll need to first link the element to a data type within your database. In this instance, you’ll classify the type as a room.
You’ll also need to set the data source as a list of all the submitted rooms from your database.
Now you’re ready to start structuring the dynamic content that will be displayed within this grid. Simply map out the first column with the relevant content you’d like to show, then this powerful element will populate the remaining columns based on your existing data.
Within a repeating group, it’s also possible to create events within each individual column.
This feature will become useful when building navigational features across your platform. As Airbnb’s homepage only displays an overview of each listing (including its name, image and price), you’ll want to display the full rooms details for each unique item on a separate page.
This additional content will need to be hosted on your individual room page.
To power this event, you’ll need to start by creating a workflow that redirects a user to your product page when the rooms image is clicked.
When creating this workflow, use a navigation event to send a user to another page. From here, select the destination page type to be the room page.
You’ll then need to send additional data to this page so the Bubble editor knows which specific room listing to display. The data you’ll need to display is that of the current cell’s room.
When a user is directed to a specific room page, you can easily pull this event data from your workflow to display the relevant content.
Before we create this function, you’ll first need to ensure that the page type matches the data property that you’re sending through the workflow. In this case, you’ll need to set the room page to a room property.
You can now start adding dynamic content into your page elements, displaying the information from the room that has been sent in your workflow.
One of the core features of Airbnb is the ability for users to book and pay for rooms. Using Bubble, it’s possible to harness the power of several plugins to easily accept payments and process orders.
In this guide, we’ll be using the Stripe.js plugin to process credit card payments through Stripe.
Note: After integrating this plugin, you’ll need to first configure your API keys within the plugin settings.
When building your payments experience, you can begin by creating an additional page called checkout. The type of page should also be configured as a room.
Once you’ve created this page, we’ll go back to our room page and create a workflow when the book room button is clicked.
Within this workflow, we’ll create a navigation event, redirecting the user to our new checkout page. We’ll also want to send the data of the current pages room.
On our checkout page, we’ll then need to create a payments form using the necessary inputs to charge a credit card.
When building this payment form, you’ll also need to include a Stripe token element next to the payment form.
This element won’t be visible to your end-users, but is essential to powering a new transaction in Stripe.
When the book room button is clicked, we’ll then create a new workflow that triggers a Stripe payment.
You’ll begin by selecting the event ‘convert card into Stripetoken A’. Within this event, you’ll need to configure your input fields to match Stripes payment structure.
Once a card has been converted into a Stripe token, you’ll then need to create an additional workflow that automatically processes this token from a user's bank account.
Using the ‘Stripe.js - charge - create’ event, you’ll verify the Stripe token, as well as the final amount to be paid (including the currency).
If you’d like additional guidance when building your payment processing workflow, you can watch a full tutorial in the video below.