Join Makerpad today

Makerpad is home to over 9,000 folks. Access members-only content, build real projects & get expert support
Tutorials
/
🚗 Uber clone with Bubble
Categories
Tools USEd

🚗 Uber clone with Bubble

Link to Demo

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

You must be a member to view the full lesson

Join Makerpad today

Makerpad is home to over 9,000 folks. Access members-only content, build real projects & get expert support

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




If you'd like this template, message @bentossell on Slack with your email for the account to send this template.

Ready to get started?

Join the community and start turning your ideas into solutions