If you’re planning a dream vacation, Tripadvisor is the one-stop travel platform to compare and book travel experiences. If you’re planning to build your own travel comparison product, however, Bubble is the one-stop platform to streamline the development process - all without having to touch a single line of code.
Bubble’s powerful visual programming tool empowers makers of any background to build beautiful software. Whether you’re building a marketplace, a social network, or a mobile app, our customers use our suite of tools to create rich product experiences.
Throughout this post, we’ll uncover the process of using Bubble to build your version of a site like Tripadvisor or Lonelyplanet. When building our MVP, we’ll walk you through the workflows required to showcase cities and a list of their featured activities.
As Tripadvisor hosts a myriad of additional features - like booking hotels, flights, and restaurant experiences - you can easily replicate the same workflows to complete a full version of the product.
The steps to building a Tripadvisor clone with no code include:
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 product together.
Register your account on Bubble
New to Bubble? Follow along on our Crash Course introductory videos to get familiar with the basics of Bubble.
We also recommend completing our introductory lessons, which will guide you through the step-by-step process of the most common Bubble features. This will help you get a running start when building your Tripadvisor clone.
When kickstarting your project, you can choose to begin by wireframing your product design, or building the necessary fields within your database.
In this case, we’ll start by using Bubble’s visual design tool to shape the user-interface of our platform. If you’re replicating a version of Tripadvisor, some of the core pages you’ll want to include are:
- Upload page - A portal where you can add new activities/things to do on the platform
- Home page - Allowing users to search for cities
- City page - A page to display an overview of each city on your platform
- Things to do page - A summary of all the activities available in each city
- Individual activity page - A dedicated page to host each activity
A major feature within Bubble is the ability to send data between pages. This allows you to create one generic version of a page, then dynamically display the relevant content from your database when it’s required.
In the case of your Tripadvisor clone, you’ll only need to create one page to host each individual city. We can then write the necessary logic to display only the relevant content on each page when it’s needed (we’ll cover this in more detail soon).
Configure your database
Once you’ve mapped out the display of your product, you can focus on creating the necessary data fields to power your application. We’ll rely on these fields to connect the workflows behind your product.
Bubble’s pre-built database makes it easy to create different data types with unique fields. When creating a database, we recommend splitting larger items into separate data types to enhance the speed of your application.
For example, instead of storing user-generated photos and reviews within each city, we’ll create these as separate data types, but link them back to a unique city.
By forking these as separate data types, it allows us to only load the necessary content when it’s needed, reducing the amount of data the Bubble editor will need to render.
When building a no-code Tripadvisor in Bubble, we’ll need to create the following data types & fields:
Data type: User
- Booked activities - List of things to do. Note: Creating a field as a list based on a separate data type allows you to seamlessly integrate all of its relevant data fields.
Data type: City
Data type: Thing to do
- City - City
- Booked users - List of users
Data type: Review
- Thing-to-do - Thing to do
Data type: Photo
- City - City
Build your workflows
Now that you’ve structured both the design and database of your application, it’s time to start stitching everything together and making your app functional.
In Bubble, the main way to do this is with workflows. Each workflow happens when an event occurs (e.g. a user clicks on a button), and then runs a series of “actions” in response (e.g. “sign the user up”, “make a change to the database”, etc.)
Adding new things to do
The first feature we’ll build is a back-end portal to add new things to do/activities to our platform. Although these items can be manually added into your database, creating a front-end interface will allow any admin to easily add new content.
On the upload page, you can start building this process by using a combination of input fields, including; free-text fields, image uploaders, dropdown selections, or multiple selection fields.
When using a dropdown menu to select a relevant city for this entry, you’ll need to need to configure the element to display a list of dynamic options from your database.
Start by setting the type of choice to be a city, then search for all of the cities within your database. Finally, select the caption option to display the cities name.
Once an admin has added the relevant details within each input, they’ll click the create button to trigger a new entry in your database. This button click will be the necessary action to create 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 thing to do.
You’ll then need to start matching the on-page elements with their corresponding fields in your database.
Create a search function
To allow users to search and click-through to a specific city, you can utilize a search element on your home page that will index all of the current cities you’ve added to your database.
By configuring the search field to a dynamic list, you can once again display a list of all the available cities you’ve created. Once configured, this search box will index all the available entries and even offer search suggestions as they are typed.
To send a user to the relevant city page, navigate to your workflow editor, then create a new event that is triggered when the value of an input is changed.
You’ll then create a navigation event, setting the destination page as your city page, and sending the data source of the search box’s current value.
Display dynamic content on a cities page
When a user is directed to a specific city page, you can easily pull this event data and display the relevant content for each location.
In order to build this function, you’ll first need to ensure that the destination page type matches the data property that you’re sending within the workflow. In this case, you’ll need to set the city page to a city property.
By classifying the type of content on a page, Bubble can easily pull and send relevant data from existing sources.
You can now start adding dynamic content into the fields that display information from an individual city.
On this page, we’ll also add a repeating group element to showcase a variety of photos from a city.
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 of content as a photo.
You’ll also need to configure the data source to identify which content will be shown within the grid. For this repeating group, we’ll search our database for all of the photos where the photos listed city is the same as the current pages city.
Discover things to do
Once a user has unearthed a city they’d like to discover, we can start building the front-end experience to list all the activities within the location.
On our city page, we’ll start by creating a navigation event from the things to do button.
Within this workflow, we’ll be sending the data of the current pages city.
Next, on our things to do page, we’ll configure the page type to also be a city.
Now, we’ll start adding individual repeating groups to display all of the activities available in this city.
The type of content for these repeating groups will be set as things to do, and the data source will search all of the things to do where the city equals the current pages city.
Finally, we’ll also add an additional constraint to each repeating group - only displaying a segment of activities based on their unique categories.
Once again, we’ll then map out the content we’d like to display within each grid of our repeating group.
Within repeating groups, it’s also possible to create events based on the elements in each grid.
When an activities featured image is clicked, we’ll create a new workflow, sending the user to a dedicated page for that specific activity.
In this workflow, we’ll direct the users to our activities page, sending with it the current cells thing to do.
Hosting individual activities
On our activities page, we’ll once again need to configure the page type, this time as the thing to do property.
Next, you’ll need to map out the dynamic content displayed on this page.
Processing payments with Stripe
When a user decides to book an activity, we’ll need to process this payment on our platform.
Using Bubble, it’s then 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.
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.
Within our payment experience, we’ll also need to include a date/time picker element, as well as dropdown menu to select how many travelers a user would like to book for.
Finally, we’ll need to create a condition to our total activity price, multiplying it by the total number of travelers a user is booking for.
Conditions are an effective way for elements to behave in a specific way when pre-configured rules are met.
In this instance, our condition will identify when the dropdowns value is not empty. When this condition is met, we’ll update the dynamic text of this element.
The text will need to calculate the current thing to do’s cost, multiplied by the travelers dropdown value.
This will now update the pricing in real-time according to a users selection.
Once we’ve built this condition, we can create the remaining workflow to process a users payment. This workflow will be triggered when the book now button is clicked.
In this workflow, we’ll start by selecting the event ‘convert card into Stripetoken’. 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).
Once a payment has been processed, we’ll then need to add an additional step to this workflow, adding the booking to a users account.
Start by creating an action that makes changes to a thing.
The thing we’ll want to change is the current users booked activities, adding to it the current pages thing to do.
Finally, we’ll create one last action within this workflow, adding the current user to the current pages thing to do’s list of users booked.
If you’d like additional guidance when building your payment processing workflow, you can watch a full tutorial in the video below.
Creating & displaying user-generated reviews
The final feature we’ll build in our MVP is a function to support user-generated reviews for each activity.
On our activity page, we’ll need to add an additional repeating group. This will be used to display a list of all the relevant reviews.
The data type will be set as reviews, and the data source will search for all the reviews where the thing to do matches the current pages thing to do.
After mapping out the dynamic content in each row of the repeating group, we’ll add an array of input fields below, allowing users to create and submit new reviews.
The workflow for creating and displaying user-generated reviews is similar to the process of creating an activity. When the publish button is clicked, we’ll create a new thing.
The thing we’ll want to create, is of course, a review.
When creating a review, we’ll also separate the photo content into an additional event. This featured photo won’t be displayed directly within a review, but will instead be used to populate the photos on the overall city’s page.
Each time this workflow runs, the content displayed within a repeating group will automatically be updated in real-time.
Now that you’re familiar with creating custom data fields and displaying dynamic content, you can start getting creative with the experiences you build within your product. As Tripadvisor is quite a large platform, there’s plenty of additional features you can add, including;
- Adding additional content for hotels, restaurants, etc
- Allowing users to bookmark activities
- Create user profiles to display bookings, reviews, and saved activities
Privacy & Security
Now that you have the basics of your app, don't forget to start setting some privacy rules and conditionals to keep your data secure - starting with roles in the 'Privacy' section of your Data tab. You can also check if you're unintentionally exposing any data with an API checker.
Hiring a developer or dev team to build this application would cost thousands, if not tens-of-thousands of dollars. As you launch and grow in users, our paid plans allow you to host the product on your own custom domain, starting from as low as $25 per month. Some templates and plugins may cost more, but you can build all the functionality of Tripadvisor without any additional costs.
If you didn’t want to build your Tripadvisor clone from scratch, you can purchase one of the templates made by our community members. Some similar templates include:
Bubble can help you build a Tripadvisor clone or any other product you choose! It’s never been easier to build something incredible without having to code.
Ready to join the no-code movement? Register your free account here and get started today.
If you’d like additional help when building your product, our thriving community forum is a great place to source actionable advice and resources. Any maker is also encouraged to ask questions within the community to help streamline their no-code journey.