How To Build An Uber Eats Clone With No-Code Using Bubble (2024 FLEXBOX)
Vložit
- čas přidán 28. 07. 2024
- In this video, you’ll learn how to build an on-demand food delivery app - just like DoorDash, Instacart, and Uber Eats - all without having to write a single line of code 🤯
Utilizing Bubble.io’s no-code platform, it explains the exact design and workflows you’ll need to replicate when bringing your app to life.
✍️ You can access the working Notion doc and create a duplicate from this template: lachlan-kirkwood.notion.site/...
🖼️ Access the image assets used in this tutorial here: drive.google.com/drive/folder...
---
🚀 Interested in the full course? 🚀
Ready to save months having to build your app from scratch? If you'd like to uncover the full tutorial, you can purchase the complete course here: buildingwithbubble.com/how-to...
🔥 The full course covers: 🔥
1. Getting started with Bubble
2. Setting up your custom database
3. Designing the Uber Eats home page
4. Building a navigation menu
5. Registering user accounts
6. Creating a login feature
7. Building a user settings page
8. Managing restaurant listings
9. Creating restaurant listings
10. Editing the details of an existing restaurant
11. Listing food items for a restaurant
12. Editing the details of an existing food item
13. Building a custom search feature
14. Building a dynamic restaurant page
15. Building a custom checkout
16. Processing payments
17. Creating an account activity page
18. Building a dashboard for restaurants to manage orders
19. Building a dashboard for delivery drivers to accept orders
20. Creating & displaying reviews
21. Additional tips & insights
---
👨💻 About me 👨💻
In 2020, I worked directly with the Bubble team to write their 'How-to build' blog series. Each installment shared written instructions on how to recreate popular products using their no-code tool. To simplify the building process, I've created my own video series to help guide you in a more engaging way.
Note: This video series has no direct affiliation with Bubble itself. This is something I've created on my own.
---
⏱ Timeline ⏱
00:00 - Uber Eats clone product demo
04:10 - Course overview
05:18 - Setting up your database
39:45 - Designing the home page
1:21:17 - Building a navigation menu
1:52:56 - Managing restaurant listings
2:21:23 - Creating a restaurant listing
2:49:44 - Building a search feature - Věda a technologie
I've trying to build an app with bubble and your channel is one of my main sources.
Thank you for all of these helpful videos!
I am wondering if you have any idea how to build something like glassdoor's review and salary system which gives visibility on the salary ranges and prospective companies.
Glad to hear the content has been helpful so far!
And a Glassdoor clone is definitely on my to-do list. Be sure to keep an eye out 👀
Man!!! You are good. You have changed my bubble journey.
Stoked to hear I could help 🙏
@@BuildingWithBubbleHello boss please let me know how to contact you.. Need to talk to you something seriously
@@aromalprakash6832 You can shoot me an email at lachlan@buildingwithbubble.com
hello! first i thank you for the great work you're doing!
and i would like to ask what plan of bubble are you using for the "uber eatss" project? (free plan or starter or else?)
Glad it could help!
And this whole product was built using the free Bubble plan 👌
most informative
Thanks for the tutorial
My pleasure 😎
Thank you, You're awesome
My pleasure 😎
This video is amazing. I would like to see a video of a project Management app integrated with a messaging app and leads project
Appreciate it 🙏
And although it's not exactly what you're looking for, I do have separate tutorials that cover how to build a Trello clone, as well as a tutorial on building a WhatsApp clone. Both of these could be merged together to create what you're looking for
@@BuildingWithBubble thanks alot..i appreciate the work you doing
Thanks for the great tutorial. I am running into an issue with the create popup. When I preview and click in one of the fields, the pop up closes. Any ideas what might cause this?
That does seem strange. Can you try and delete the field, then re-add it. Let me know if it still causes the same issue.
Thanks for this truly amazing, I will try it. Can I include pick up points on the app
Instead of delivery to door buy deliver to pick up points
Glad it could help!
And yes, this would be possible. You could easily set the drop-off location as an address of a pickup point instead of their home address.
Hope this helps!
Hey brother, thanks for the amazing course!! It really saved alot of my time building the app. Although there's one problem I'm facing.
In any page wherever I placed the footer navigation menu, it hides the content behind it. For eg. In the index page if there are many restaurant listings, while scrolling through them, the last restaurant's info/featured image always gets hidden by the floating group in the bottom.
I tried searching for solutions regarding this over youtube but none of the videos helped, it would be great if you could tell me how can I solve that
So glad this course could help!
And a solution to this could be adding a bottom margin to the last element on each of your pages.
For example, if your floating navigation menu is 150px in height, just add 150px of margin to the last element on your page. This will then create room for your menu to comfortably sit below it.
Hope this helps!
Hello, excellent video, I am working on it but I ran into a problem in the view listing part, and that is that after creating the workflow where it says conditional - define another condition, in the last part after (is) Restaurant owner does not appear, And I do not understand why, can you help me?
Happy to help. Could you shoot me an email (lachlan@buildingwithbubble.com) with a screenshot of the error you're seeing. This will help give me some more context around a potential solution
For the Zoc Doc app. Is there a way to alert clients when a new appointment is available for a service they wanted? Kind of like the Notify Me alert message to a once out of stock item?
Yes, this would be possible. You'd need to use what's known as a backend workflow though. Backend workflows are a more advanced feature, but they would allow you to monitor your database to see when a new appointment becomes available.
Hope this helps point you in the right direction!
@@BuildingWithBubble thank you. Would they be offered under one of your courses anytime soon?
@@thespliffway6174 I'm hoping to create an updated version of my Zocdoc app in the next 1-2 months. I'd be happy to try and include this feature within that!
Hello, congratulations for the content. I'm a beginner and I'm learning a lot from your classes. I would like you to make a video of a multiple choice question and answer game. themes and when choosing the answer. if i could i would be very grateful
Glad the content can help!
And I'd be happy to add something like this to my list. I'd previously wanted to build a Duolingo clone, which has a lot of similar characteristics
Hey Laughlan. Great Tutorial bud! - I am having trouble adding the paramater Key (Query) with the value = this input's value. This option does not exist for me? Any ideas? - Thank you!
Jack Anthony
Hey Jack, happy to help. I'm under the impression Bubble might have removed the option for 'this input's value'
From the dropdown menu, you can just search for the name of the input itself and reference it there. It'll do the exact same thing 👍
i didnt get the 'all list' option at the categories. pls help me out tot get it
Happy to help. Could you just share some more context on this. What timestamp of the tutorial are you referring to?
I bought one of your courses to create an UBER clone, but in the course you do not show the steps on how the passenger (user) can make the payment in cash and then the driver can deposit the app commission to a bank account. Would you be so kind as to show me how to do that?
Happy to help. Feel free to shoot me an email (lachlan@buildingwithbubble.com) and I can point you in the right direction 👍
Ready, I sent you a message friend, I hope you can help me
hello I have just started using bubble and following your video. but I faced one problem that though i followed the same method for horizontal scroll,still data is not showing horizontally ,please if you could help
Happy to help. Can you just double-check that within the layout tab of your repeating group, it has a maximum height. If you don't manually add a value for the maximum height, it'll allow the repeating group to scroll vertically instead of horizontally
Hope this helps!
When I want to know the breed of a differentpet and pets are different types so I created a option set for pets and for breed for one particular pet How should I add it
Good question. I'd look at creating an attribute under your pet option set that links back to your breed option set. This will then allow each pet to store a breed
What about navigation for the rider and also, ETA for the customer? How would we set that up?
If you're looking to build a navigation feature on a map, I'd recommend checking out the Google Maps extended plugin. This will help you bring this to life. I'm under the impression the same plugin would be able to provide you with an ETA as well
Hope this helps point you in the right direction!
@@BuildingWithBubble awesome! And is there any tutorial you can reccomend that will assist be in building the interface the the driver, customer and merchant to see the progress?
I can't thank you enough, i got two of your courses at udemy and i finish one, then i thought i want to contact you, and see if you have tutorial for multiple warehouse and multiple restaurant app; as that's what i want to build. Any help for that is highly appreciated. I would be honored to be consulted by you. Again, thank you.
Great to hear the content has been helpful so far!
And yes, this Uber Eats app will allow you to create multiple locations for each restaurant 👍
I've been working for about 6 months on a business and Im building an app. I need some help. Selling my truck and starting something that doesn't exist. If I caught a bus to SF would you take a look it?
Yeah
Do i have to upgrade my bubble plan to use the api keys??
If you're pulling data from another service into your own Bubble app, you can use the free Bubble plan
Thanks for great videa.
Can you tell me how we're going to upload this app to Google play and app store.
Thanks
Glad it could help!
And when it comes to publishing your app in either app store, I'd recommend checking out this great guide from Bubble: bubble.io/blog/bubble-mobile-apps/
Hope this helps!
Will the full course be updated to use flexbox?
Great question. This whole course is built using the flexbox responsive engine 👍
I'm wondering if a user orders a meal from your website it will automatically send the order to a restaurant (for example McDonald's) and deliver it? Is there an API for that?
Good question. In my product, we create a backend within the app itself that allows the owners of restaurants to view and manage all of their incoming orders.
If you wanted, you definitely could connect this kind of data with a third-party system using an API in Bubble.
@@BuildingWithBubble Do you recommend any APIs or services that offer that?
Amazing job bro ! But can you Help me i just want the consumer to chose beetween : home delivery and click and collect. Where should i add this option set ? In the checkout, food item or order ? And i want that the consumer choose a delivery time or pick up time
Glad it could help! And if I were you, here's a few quick steps I'd follow:
1. Create an option set called 'delivery type'. Inside this list, add the options you mentioned e.g. home delivery, or click & collect
2. Under your 'order' data type add a data field called 'delivery type' and link this to your option set list
3. When a user places the order, give them the option to choose between either option. Whatever they select, store those accordingly in the database
4. When it comes to the time, you'll also just need to create an additional data field to store this. Set this field type to be a 'date'
Hope this helps point you in the right direction!
@@BuildingWithBubble thank you so much for your help !
i have a question. I am at the end of the course and when i want search like u did for example mcdonal i will get a varning in bottom right corner where is says: User denied Geolocation. any advice how to fix it ? Thank you for answer. btw amazing tutorial
Glad the tutorial could help!
When it comes to the Geolocation error, could you just double-check that you have an active payment method within your Google developer account.
While Google is quite generous with how many API requests you can make for free, they do still require you to have a credit card on file to make the APIs functional.
Let me know if this helps.
@@BuildingWithBubble yes after giving all my card details i recevied 300$ which i can use how I want but it isnt working anyway i will have to go back to this lesson and try again. Question about your 300$ course if I will purchase it, is step by step tutorial focused on uber eats or its more general
@@yourvictoriousmind The full course is focused on Uber Eats specifically. The finished product will look exactly the same as the product demo product you see at the beginning of this tutorial.
Hope this helps!
Thank u so much for sharing this with us. Can you please make a video next time about car rental and booking system for the rental.
Thank u again🙏👍🏻
Glad it could help! And happy to add this one to my list. Are there any key features you'd like to see me cover?
Please can you make a video for app like Tinder. Thank you sharing.
I already have a course that explains how to build a Tinder clone. You can check this out here: czcams.com/video/9oLsBBZtuaI/video.html
My app will work in several countries. How do I enter different languages, different currencies and the country where Km is and the country where Miles is?
Great question. There's some helpful plugins that streamline this process for you.
I'd recommend checking out the Bubble community forum here to learn about these: forum.bubble.io/search?q=multilingual
@@BuildingWithBubble Ok, thanks for the information.
I'd love to have something like this to facilitate orders from Dark Kitchens (motivated by my sister in law who runs one)--By taking this course of yours, should it be close enough to have a working project to launch for people to use? Thank you
Yes, this will get you up and running with a working MVP (minimum viable product) 👍
Hello, everytime i try to create a new listing, nothing happens, could you tell what might be wrong please. Thanks very much :)
I'm under the impression this might be caused by a default privacy setting that Bubble recently added to the user data type.
Could you just double-check you followed the steps at 39:29 of this video to see how to remove these.
Let me know if this helps!
@@BuildingWithBubble thanks very much for your fast reply. 'll check it and get back to you asap!
@@BuildingWithBubbleStill not working any other tip?
I am also getting a geocoding service error it may be the prob?
@@liveshowsandmore3343 The geocodign error should be an easy fix. Could you just double-check that you have an active payment method within your Google developer account.
While Google is quite generous with how many API requests you can make for free, they do still require you to have a credit card on file to make the APIs functional.
is it all for free? or in the free plan or do you have to update?
Good question. Everything I build in this course uses the free Bubble plan
oh ok thank you @@BuildingWithBubble I was just starting and I stopped bc I needed to know that thank you so much you just made my day thank you again
Amazing
Appreciate it 🙏
is there an admin panel in the paid course ?
Yes, it covers how restaurant owners can manage all of their listings & orders through a dashboard/panel.
Let me know if this is what you were looking for.
@@BuildingWithBubble I'm asking about admin panel that manages all of the 3 applications
@@youssefashrafnader3139 Good question. Unfortunately, I don't cover that type of admin panel within the full course.
@@youssefashrafnader3139 Good question. Unfortunately, I don't cover that type of admin panel within the full course.
Is this a web app or mobile app?
This is technically a web app. It does have the ability to be converted into a PWA. This would allow it to be published on the app store.
Can you please explain how to set up reset password in a single page app :D
Happy to add this to my list ✌
@@BuildingWithBubble Awesome! I will be looking forward to that! :D
Can this be PWA?
Yes 👍 Bubble has a great guide that explains the process of converting any app into a PWA here: bubble.io/blog/bubble-mobile-apps/
welldone
Thanks 🙌
pls any dating apps
I have a tutorial that explains how to build a dating app like Tinder here: czcams.com/video/9oLsBBZtuaI/video.html
Hope this helps!
Please make a video on how to build a turo clone.
Happy to add this to my list. Are there any specific features you'd like to see me cover?
Great one again. I hope Zocdoc comes next.
I've got one more I'm currently recording now, then it' straight onto Zocdoc 👌
@@BuildingWithBubblelove you bro... God bless you for the value you are creating. I am still preparing to buy your courses, I must do it.
Hello boss please let me know how to contact you.. Need to talk to you something seriously