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