How to build an Uber clone without using code

With

Bubble

https://nocode.b-cdn.net/nocode/tools/Bubble-logo.jpeg Logo

Made By

Bubble

Bubble Logo

For

Intermediates

IntermediatesIntermediatesIntermediates
Reading this Lesson will take Approximately: 
17m

Lesson Content:

How To Build An Uber Clone Without Writing Code

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:

  1. Get Started
  2. Configuring your database
  3. Building workflows
  4. Updating user account details
  5. Planning a trip
  6. Generating prices
  7. Generating a new ride
  8. Processing payments
  9. Building a portal for drivers
  10. Marking a trip as complete
  11. Creating a summary of user trips
  12. Rating a trip
  13. Additional features
  14. Launch
  15. Templates
  16. Start Building

Get Started

To get started, you’ll need a Bubble account. Then you can follow along as we build our product together.

Register your account on 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 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:

  • Account settings page - where users can update their account information
  • Home page - used to select the pick-up and destination address of a trip
  • A driver portal - a page where drivers can view all available trips
  • A trip summary page - displaying a summary of each trip once a trip has been accepted
  • User account - showcasing a list of all a users previously booked trips
  • Rating page - where users can leave ratings for a drive

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.

Configuring 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 building Uber as an MVP, we’ll need to create the following data types & fields:

Data type: User

Fields:

  • Name
  • Driver - yes/no with no default
  • Previous trips - list of trips. Note: Creating a field as a list based on a separate data type allows you to seamlessly integrate all of its relevant data fields without having to create additional fields
  • Card number
  • Card CVC
  • Card expiry (month)
  • Card expiry (year)
Bubble Uber Clone Tutorial User Data Type and Fields

Data type: Trip

Fields:

  • Rider
  • Rating - rating
  • Price
  • Pick-up location
  • Destination location
  • Driver - user
  • In-progress - yes/no with no default
  • Complete - yes/no with no default
Bubble Uber Clone Tutorial Trip Data Type and Fields

Data type: Rating

Fields:

  • Trip - trip
  • Star rating
  • Driver - user
  • Content
Bubble Uber Clone Tutorial Rating Data Type and Fields

Building workflows

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

Updating user account details

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.

Bubble No Code Uber Clone Tutorial Settings Page

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.

Bubble No Code Uber Rideshare App Workflow Walkthrough

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.

Bubble Uber Clone Make Changes To Current User Tutorial

Planning a trip

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.

Bubble Uber Clone App Template Example

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.

Bubble No Code Uber Clone Map Element Tutorial

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.

Bubble Workflow Uber Clone App Tutorial

The input we’ll configure this to is our destination input field.

Bubble Uber Clone App Destination Workflow Input

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.

Bubble No Code Uber Rideshare App Destination Tutorial

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.

Generating prices

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.

Bubble Uber Clone Conditional Pricing Tutorial

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.

Bubble Uber Clone Tutorial Disable Input Trip Pricing

Generating a new ride

Once a user is ready to book a ride, we’ll create a new workflow that triggers when the book ride button is clicked.

Bubble Uber Clone App Workflow Book Ride Feature

Within this workflow, we’ll want to create a new thing.

Bubble No Code Uber Clone Workflow for Booking Rideshare

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.

Create a new trip in Bubble workflow

Processing payments

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.

Bubble Stripe Token when Booking Ride in Uber Clone App

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.

Bubble Stripe token Charging Credit Card Tutorial

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 charge credit card workflow

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