How to build an AirBnB clone without code


Bubble Logo

Made By


Bubble Logo



Reading this Lesson will take Approximately: 

Lesson Content:

How To Build An AirBnB Clone Without Code

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:

  1. Get Started
  2. Designing your app
  3. Configuring your database
  4. Core Features
  5. User Signup
  6. Adding a property to the platform
  7. Display available rooms for rent
  8. Send data between pages
  9. Display dynamic content on a rooms page
  10. Book a room
  11. Adding user reviews
  12. Additional features
  13. Launch
  14. Templates
  15. Start BuildingBubble 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.

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.

Get Started

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.

Designing your app

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:

  • A login page - allowing users to register or login to your application
  • Property backend - a portal where users can create property listings
  • Home page - displaying a list of all the rooms listed on the platform
  • Individual room page - providing the full information about a room, including user reviews
  • Checkout - allowing users to pay for room bookings

Configuring your database

How is the Bubble database different from normal databases?

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


  • Email (included by default);
  • First name
  • Last name
  • Profile picture
  • Phone number
  • List of bookings they have made. Note: the type of data is also set, so we (and Bubble) know what type of data each field is. For example, a first name is a piece of text, so text’ is the data type. ‘Bookings Made’ are a list of Bookings.
Bubble No Code AirBnB Clone Walkthrough

Data Type: Booking - the booking that a user will make when they want to rent a room


  • Date of Leave (the date when the guest’s booking ends)
  • Date of Stay (the move in date)
  • Price Per Night of the stay
  • Room that the booking is made for (note: this field type is Room so we can correctly link it to the right Room)
Bubble no code AirBnb clone tutorial walkthrough

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.


  • Title
  • Description
  • Photos - list of photos
  • Price/night
  • Reviews - list of reviews
  • Users booked - List of users
Bubble No Code AirBnB tutorial walkthrough

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.

Core Features

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:

User Signup

  • Create a Button element with the text "Sign up." Click "Start/Edit Workflow" and build the workflow: Account > “Sign the user up” to use the built-in Bubble signup.
Bubble User Signup Tutorial
  • You can also use Account > “Signup/login with a social network” for Google or Facebook login (“OAuth”) if desired (refer to our Manual on authentication service plugins)
Bubble Sign Up Oauth Tutorial
Supporting materials: Manual on the User data type; Reference on the “Sign the user up” workflow action; Lesson on “Building a signup system” after signing up.

Adding a property to the platform

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.

Bubble no code AirBnb clone tutorial walkthrough

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.

Bubble no code AirBnb clone tutorial walkthrough

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.

Bubble no code AirBnb clone tutorial walkthrough

Display available rooms for rent

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.

Bubble no code AirBnb clone tutorial walkthrough

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.

Bubble no code AirBnb clone tutorial walkthrough

Send data between pages

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.

Bubble no code AirBnb clone tutorial walkthrough

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.

Bubble no code AirBnb clone tutorial walkthrough

Display dynamic content on a rooms page

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.

Bubble no code AirBnb clone tutorial walkthrough

You can now start adding dynamic content into your page elements, displaying the information from the room that has been sent in your workflow.

Bubble no code AirBnb clone tutorial walkthrough

Book a room

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.

Bubble no code AirBnb clone tutorial walkthrough

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.

Bubble no code AirBnb clone tutorial walkthrough

On our checkout page, we’ll then need to create a payments form using the necessary inputs to charge a credit card.

Bubble no code AirBnb clone tutorial walkthrough

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.

Bubble no code AirBnb clone tutorial walkthrough

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.

Bubble no code AirBnb clone tutorial walkthrough

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).

Bubble Stripe Plugin Tutorial Walkthrough

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