In this tutorial, Dave walks through how to build an Uber clone using Bubble

Set your page settings for /index

Grab the icons from uber.com

Get a photo from Unsplash and recreate the top part with the icons

First create one so you can later copy this one 8 times total

When you click the ‘earn’ group set a state /index show top = earn

Add this rule to the black group under Earn. Use a hide rule instead of a show because then you always see what things you have on your page when you edit.

Copy this (with workflows) for the 7 others

When page is loaded set one of the ‘show top’ to show first Should look something like this now:

Now you can add the groups bellow the icons that will show based on the selection made

You can stack them op top of each other and use the

And add this as default value to the search input

This will ask the user to agree to give their location when they visit the site

Add for both search boxes when input changes: first empty the list of locations

Then

Do this for both searchboxes When pick up search box changes

Add this bellow later we can use this to calculate the price.. x km x $

Since the other groups like eat, freight have all the same text, button fields we can use the index show top states to show different data in those groups.

You can do this for all except ‘ride’

Add this rule to the first group since it only won’t show with ‘ride’ selected

You can also change the image based on the ‘show top’ state

You can now design the rest of the homepage or move on to the booking & sign up process

We’re going to add pop up that looks like this to handle the sign up Download the plugin ionic icons

Later we can add the work flows to the 2 button. First we’re adding a top menu bar with the link to open the pop up.

Do the same for ‘login’

Create a new blanco page ‘signup-ride’ And design it like this:

Add this workflow to the sign up button

And make sure to add this to the user

Type of account is ‘ride’

After signing up send to home and give this data:

On loading the /index create a flow for when ‘show’ is not empty

add this to the pick up location

Now we can clone the sign up page for ride and create the same but different page for drivers ‘signup-drive’

Bellow the sign up you can add some extra info to show it’s a driver & change the colors a bit

Change the type of account:

On the /index you can now connect the sign up pop up buttons to the right pages

You can add the workflow if a user isn’t signed op to open de signup-ride page

The custom workflow event opens the page

Create a new page called /looking Set the page background to ‘none’

Add a floating group

I this group we’re going to add a map like on the homepage Page should look like this:

Add a floating group with 2 search boxes like the homepage with a pick up & a destination and design it like this:

In the blue you can add from? And to? when the inputs are filled in change to the location street

Add this calculation to the button

Add this as the data source to the map:

Upload a custom car ;)

add this rule to the map and copy paste the app

Make the copy visible when this rule is true Change the icon of map B

Add the same workflow as you did on the /index for the search boxes

Data for map B

Download the Stripe plugin to handle the payments Add a workflow to the order button and create a order

Add the orders to the driver and rider

Cancel the order if there is no driver available

If not cancelled charge the user

Change the order to paid if the user was charged

Create a blanco page called; /status we we’ll later use that

We’re now going to build a simple satus page

When page is loaded

Create a page with info about the driver that is coming

You can add different rules to the page to show if the order is cancelled because there is no drive or which driver is coming.

Page could look something like this when we found a driver

Or something like this when no driver was found

The basics are working now. We can send the filled in locations from the homepage to the /looking page

When you go to the page use these parameters

On the /looking page create a workflow that will fire when the page is loading setting the state of /looking for from & to

And add them as a condition to the search location fields

We can start building the dashboard so we can see the trips we’ve booked :) Create a new page /dashboard

Add these 3 groups to the page and add the same settings (also check in the responsive tab)

Add a repeating group to the middle group

Add to groups to a cell. One with only the date and price And the other one with more info about the trip

When you click on the top one set state of the /dashboard

Then make this rule for the group with the more info

Add this rule to the repeating group so a driver sees their past rides.. also add rules to the text inside the repeating group

*to needs to be destination

Create a pop up that will show when you click the ‘profile’ button where the user can change their profile settings

Create these fields and enable auto-binding

Add a pop up to open when the user clicks ‘free ride?’

Add this to the /index page

And this one

Add this line to the sign up flow

And this action to the sign up work flow