If your destination is an address, Uber is one of the leading applications to get you there on time. If you’re on a journey to build your own no-code version of Uber, however, Bubble is the only application you’ll need.
Building a ride-share application like Uber or Lyft would traditional require an advanced background in software engineering, or cost thousands of dollars in outsourced development.
As the no-code landscape rapidly evolves, tools like Bubble have made it easier than ever for makers of all backgrounds to start building software. Our customers are using Bubble to build portfolios, marketplaces, and even social networks.
In this article, we’ll walk through the process of building your own on-demand ride-sharing platform, all without touching a single line of code. If you’ve ever wanted to replicate your own version of Uber, this tutorial is perfect for you.
Steps for building an Uber clone without code are:
To get started, you’ll need a Bubble account. Then you can follow along as we build our product together.
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 Uber 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 application. If you’re replicating a version of Uber, some of the core pages you’ll want to include are:
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 Uber clone, you’ll only need to create one page to host each trip summary. We can then write the necessary logic to display only the relevant items on each page when they’re needed.
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 building Uber as an MVP, we’ll need to create the following data types & fields:
Data type: User
Data type: Trip
Data type: Rating
Now that you’ve structured both the design and database for your application, it’s time to start stitching everything together - making your product 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.)
A powerful function within Bubble’s editor is the ability to create user accounts. Our platform can easily streamline this whole process; we go into more detail on how to create users in our previous How To guides.
The first feature we’re going to build, however, is a page that allows users to edit the details of their accounts, including their name and credit card information. This information will be instrumental when booking rides across the platform.
On our account settings page, we’ll start by adding an array of the text input elements for each data field in a users account.
Once a user has added their details, we’ll create a workflow that triggers when the update button is clicked.
Throughout this workflow, we’ll want to make changes to a thing.
The thing we’ll want to make changes to is the current user. We’ll update their current information by matching each input element with its corresponding data field.
Once we’ve created our user accounts, we can start building the core features of our product. We’ll begin with a booking function - allowing users to input their desired pick-up and destination address, then generate a trip based on this data.
On our home page, we’ll start by adding a map element and two input fields. You’ll need to begin configuring both the text input fields to an address content format.
By updating the format of the input fields, they’ll seamlessly integrate with any address on your map.
Next, we’ll need to configure our map to display each of these locations as they’re added. Start by setting the maps marker address to be the pick-up inputs address.
Next, we’ll want to display the destination marker once this address has been added.
In your Bubble workflow editor, create a new event when an items value is changed.
The input we’ll configure this to is our destination input field.
Once the user has added both these addresses, we can produce a trip forecast, detailing the total trip distance and price.
Below our map, we’ll add a dynamic text field, displaying the distance between both the address inputs.
Note: If you’d like to display the path between both addresses as a GPS route, you can use the MapBox plugin to build this feature. The plugin costs just $25.
Once the distance between both locations has been classified, we can build an algorithm to determine the price for the trip.
Using a text input field, we can add our own conditions to set price variations. Conditions make it possible to display unique elements when requirements are met throughout your app.
Our conditions for this element will identify the length between two addresses (measured in miles as per our map), then trigger a certain price if it fits between a unique threshold.
As an example; if the distance from the destinations address and pickup address is > 1, AND the distance from the destinations address and pickup address is < 5, our condition will then display the text of $15.
You can continue adding conditions to meet the different price thresholds you’d like to charge.
Note: By updating the style of an input field, it’s possible to remove the default background and border of the element.
Finally, we’ll also need to disable this input field, ensuring that users can’t edit the trips price.
Once a user is ready to book a ride, we’ll create a new workflow that triggers when the book ride button is clicked.
Within this workflow, we’ll want to create a new thing.
The thing we’ll want to create is a new trip. You’ll then match the relevant elements on your page to the data fields from the trip type in your database.
After generating a new trip within our database, we’ll also need to charge the user. 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.
To utilize the Stripe plugin, you’ll also need to add a Stripe token element next to the book ride button.
This element won’t be visible to your end-users, but is essential to powering a new transaction with Stripe.
When processing a payment, we’ll add an additional step onto our workflow that generates a new trip.
Select the event ‘convert card into Stripetoken A’. Within this event, you’ll need to configure the current users payment details 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.