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.

Before you start, you’ll need to first register your free Bubble account. Click the button below to get started, then you can follow along as we build our app together.

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:

Fields:

Fields:

​Fields:

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.

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:

To better understand how to create and edit user accounts, check our how we previously covered this in more detail in our How to Build Quora article.

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 plugin to process credit card payments.
​

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 create a function for users to select their total amount of nights for a stay, then display the final price of this booking.

Using a dropdown menu, we’ll add a static choice to select a number of nights.

We can then display the final price of the booking by multiplying the price per night by the number of nights selected.

To process the payment for this booking, we’ll create a new workflow when the finalize booking button is clicked.

Within this workflow, we’ll create a payment event, charging the current user.

When using this event, you’ll need to input the dynamic purchase data based on the current page rooms price and the number of nights selected.
​

After configuring this payment workflow, the Stripe plugin will now automatically display a form and process a users card payment.

If you’d like additional guidance when building your payment processing workflow, you can watch a full tutorial in the video below.

Once we’ve finished processing this payment, we’ll need to create one last step to our workflow - adding the current user to the rooms list of booked stays and vice versa.

Start by creating a step that makes changes to a thing.

The thing we’ll want to change is the current pages room, adding the current user to its list of users booked.

Finally, we’ll then make changes to the current user, adding the current pages room to their list of rooms booked.

Once a user enjoys their stay (thanks to your no-code platform 👏), they may want to leave a review and share their experience with users across the platform.

We’ll start building this function by first adding a repeating group on our room page. This repeating group will be used to display a list of all reviews.

Configure your repeating group as a review data type, then update its data source to be only the reviews from the current pages room.

Once again, we’ll map out the top cell of the repeating group to display the relevant content - including the review’s content, the review’s creator’s profile photo, and the date the review was created.

Now that we’ve created a repeating group to support our room reviews, we’ll add an input below this element, allowing users to submit new reviews.

Next, we’ll create a workflow when the submit button is clicked. The purpose of this workflow will be to create a new thing.

The thing that we’ll want to create, is of course, a review. Once again, you’ll make the on-page elements with the necessary fields in your database.

When a new review is created, the on-page repeating group will automatically update with the latest content.

Here are some fun next feature ideas to add more functionality to your no code Airbnb clone. These are not only features your users will love, but building these will help you practice designing pages, structuring the database, and building workflows in Bubble.

Hiring a developer or dev team to build this app would cost thousands, if not tens-of-thousands of dollars. Well, now you can treat yourself to a night away at one your community members rooms.

As you launch and grow in users, paid plans allow you to host the app on your own custom domain, and these start as low as $29 per month. Some templates and plugins may cost more, but now you can build all the functionality for an Airbnb, validate your idea faster with potential customers and start a tech business without needing to code. There are literally thousands of Bubble users doing this! Me included!

If you don’t want to build your Airbnb clone from scratch, you can purchase one of the templates made by our community members. Some templates that demonstrate specific kinds of social networks include:

Bubble can help you build a home or room rentals platform with custom features of your choosing! You can build your idea without code. To get started for free, sign up here.

You can also connect with other passionate makers building with Bubble on our community forum.