The video tutorial titled "How To Build An Uber Eats Clone With No-Code Using Bubble" demonstrates how to create an on-demand food delivery app similar to UberEats using Bubble, a no-code tool. The tutorial covers setting up and configuring a custom database, creating separate data types for user accounts, restaurants, food items, checkout items, orders, and reviews. It emphasizes the importance of using option sets to control data input and avoid inconsistencies. The tutorial also covers building the home page, including key elements such as a list of food categories, icons, and a search bar, using a column layout. It demonstrates how to build a search box and a repeating group to display a list of restaurants. The video provides step-by-step instructions for setting up and styling these elements, ensuring they are fully responsive.
00:00:00 In this section, the video introduces the process of creating an on-demand food delivery app similar to UberEats using Bubble, a no-code tool. The narrator provides a quick preview of the application, showcasing features such as browsing food categories, searching for restaurants, adding items to a cart, making payments through Stripe, managing orders as a restaurant owner, and accepting and delivering orders as a driver. The video emphasizes the power of Bubble as a no-code tool that allows users to build fully functional apps without any coding knowledge.
00:05:00 In this section, the speaker discusses the importance of setting up and configuring a custom database in Bubble for building an Uber Eats clone. They explain the difference between data types and data fields, using a checklist to outline the different features that will be added. The speaker also provides a link to the checklist for viewers to follow along. They demonstrate how to navigate the data tab in the Bubble editor and highlight the pre-existing user data type. The importance of the email field is emphasized.
00:10:00 In this section, the instructor discusses the process of building a database in Bubble. They explain the importance of creating separate data types for user accounts, restaurants, food items, checkout items, orders, and reviews. They also introduce the concept of option sets, which are pre-existing data types that allow admins to control the information stored in the database. By distinguishing between singular and plural forms of data types, the instructor ensures clarity and avoids confusion when referencing data types in the future.
00:15:00 In this section, the importance of having control over certain aspects of the application is emphasized. One example is the profile types, which help determine if a user is a delivery driver, restaurant owner, or consumer. By creating an option set with predefined values for the account types, it avoids inconsistencies and errors that users might make if given the freedom to type their own options. This ensures a consistent and accurate experience for users. Option sets are powerful tools to display lists of items for users to select from, and they should be used instead of allowing users to create their own options.
00:20:00 In this section, the video tutorial focuses on building out the data fields for the user and restaurant data types in the Uber Eats clone. For the user data type, fields such as name, profile photo, and account type are added. The profile photo field is given a default value of a stock user profile image, while the account type field is linked to the existing option set list. Moving on to the restaurant data type, fields like name, logo, featured image, address, category, and description are created. The logo field requires each restaurant to upload their own logo, while the featured image is the banner image displayed on the restaurant's profile page.
00:25:00 In this section, the speaker discusses the data fields that need to be added to the restaurant, food item, and checkout item data types in order to build an Uber Eats clone. For the restaurant data type, fields such as restaurant name, address, categories, and description are added. The speaker explains that the categories field is set to allow restaurants to select multiple relevant categories, and the description field is a plain text field. Moving on to the food item data type, fields like name, image, price, and description are added. The speaker also creates a link between the food item and the restaurant it belongs to. Lastly, for the checkout item data type, fields for the food item and quantity are added to allow users to select and purchase items.
00:30:00 In this section, the video explains the process of adding data fields for the checkout item and order data types. For the checkout item, fields such as quantity, cost, OG restaurant (linking it back to the original restaurant), and purchase status (to determine if an item should be shown in the checkout or already purchased) are created. Moving on to the order data type, fields like customer (linked to the user data type), items (linked to the checkout item data type, allowing multiple entries), total price (calculating the cost of all checkout items), restaurant field (referencing the restaurant where the order is placed), delivery driver (linked to the user data type), and delivery address (the address for the delivery driver) are added.
00:35:00 In this section, the speaker explains how to track the status of each order in the Uber Eats clone using data fields. They demonstrate how to create fields such as "in progress," "searching for driver," "in transit," and "delivered" with default values set to "no" to indicate the initial status of an order. They also discuss creating a review data type with fields for review content, rating, and the original restaurant. Finally, they mention removing the default privacy rule for the user data type to ensure that all users can see the data they create.
00:40:00 In this section, the focus is on building the home page of the Uber Eats clone using Bubble. The instructor breaks down the process into separate modules to make it more manageable. The first step is to add the key elements to the home page. The container layout is set to a column since most modern applications and websites follow this structure. The width of the UI Builder is adjusted to 380 pixels to create a mobile application. However, the instructor assures that the page will be fully responsive for different device sizes. The bottom half of the page, featuring a list of food categories, icons, and a search bar, is built first to simplify the process of building the top half.
00:45:00 In this section, the video tutorial demonstrates how to build a search box using an input field in the Bubble platform. The input field allows users to input information, in this case, the name of a restaurant they want to search for. To ensure clarity and easy reference in the future, the name of the input field is updated to "input home search." The tutorial also shows how to update the placeholder text within the input field to prompt users to type in the restaurant name. The styling of the input field is modified to have curved edges, and the element is made fully responsive by setting the minimum width to zero and the maximum width to infinite. Additionally, the height is kept fixed at 48 pixels, and margins are added for spacing. These settings are explained as important steps for building a fully responsive app in Bubble.
00:50:00 In this section, the speaker explains how to use a repeating group element in Bubble to display a list of restaurants in an Uber Eats clone. The repeating group is used to fetch and display a list of items from the database, and it is compared to a spreadsheet with cells. The speaker also mentions that a repeating group can be used in real-world examples like building a feed for an application like Instagram. The data source for the repeating group is set to fetch a list of restaurants within a certain distance from the user's location. The number of rows and columns displayed in the repeating group can be customized, and the speaker chooses to keep the number of columns fixed as one to display one restaurant per line.
00:55:00 In this section, the video covers how to set up a repeating group in Bubble, which allows for a dynamic display of elements. The first element to be displayed in the repeating group is the featured image of each restaurant. With Bubble's ability to replicate elements across all cells, only one design of the image is needed. The image will pull data from the current restaurant and resize it to fit the desired dimensions. The video also suggests adding a solid border color to the image for better visibility during the construction phase. The next element to be added is the name of the restaurant, also utilizing dynamic data. The video provides step-by-step instructions on setting up the elements within the repeating group and making them fully responsive.
In this section, the video explains how to design the overall page layout for the Uber Eats clone. The speaker demonstrates adding a heading element and making it responsive. They also add a search box on the left side of the page for users to search for specific listings. The search box is also made responsive with a maximum width setting. The video provides step-by-step instructions on how to create and customize these elements to achieve the desired layout.
01:00:00 In this section, the focus is on displaying the name of the restaurant and the average star rating within a repeating group. The font size of the restaurant name is increased to 16 for better visibility. The text element is made responsive by setting the minimum and maximum widths to adjust according to the content. The height of the text element is also adjusted to collapse and fit around the text. Margins are added to the text element to match the layout of the image. To display the star rating, a plugin called "bootstrap star rating input" is installed. The star size is set to double XS and the input field is disabled to only display the existing star rating. The average star rating is calculated using the initial content field, which acts like a placeholder text but remains a permanent value until changed by the user. The calculation is based on all the reviews submitted for each restaurant, using the original restaurant field and the rating field from the review data type in the database.
01:05:00 In this section, the video explains how to display average star ratings for each restaurant in a repeating group. By referencing the reviews for a restaurant and calculating the average rating, Bubble can display the average star rating. The video also covers adjusting the layout of the repeating group, including updating the height settings, adding margins, and condensing elements. Additionally, the video introduces building a horizontally scrolling repeating group to display categories across the top of the page. The horizontally scrolling repeating group allows users to swipe through a long list of categories.
01:10:00 In this section, the narrator explains how to configure a repeating group to scroll horizontally instead of vertically. They mention that horizontal repeating groups can be more complex to set up, but with some tinkering, they can achieve the desired dimensions and settings. They start by updating the container layout of the repeating group to be a column since they will be displaying two elements stacked on top of each other in each cell. They make the element fully responsive by unselecting the fixed width option and setting the minimum width to zero and the maximum width to infinite. Next, they focus on adding elements inside the repeating group. They add an image element to display the relevant icon for each category. They explain how to store the icons as attributes within the category options, upload the custom icons, and then reference the current cell's category icon image as the dynamic image data source for the image element.
01:15:00 In this section, the creator explains how to customize the appearance of the image and text elements within a repeating group. They show how to resize and style the image, as well as how to align and format the text. They also demonstrate how to set the dimensions of the repeating group itself to achieve a horizontal scrolling effect. The creator advises tinkering with different settings to achieve the desired layout, and mentions that there are more scientific methods available for calculating exact dimensions. Overall, this section provides a step-by-step guide for customizing the elements within the repeating group.
01:20:00 In this section of the video, the creator continues to build out the home page of the Uber Eats clone using Bubble. They add a repeating group displaying a list of categories, a search field, and explain how to create a new restaurant in the database. Next, they move on to creating navigation menus, one for the header and one for the footer of the page. They explain how to use group elements to display elements horizontally and introduce the concept of reusable elements in Bubble, specifically for the navigation menus. They demonstrate how to create a reusable element and explain its benefits in saving time and effort.
01:25:00 In this section, the tutorial focuses on building the header menu for the Uber Eats clone. The group element is used to create separate sections for the Uber Eats logo and the checkout icon with the item count. The Uber Eats logo is added by uploading a static image and setting its width to 150 pixels. The logo is vertically aligned in the center of the group and given a margin of 10 pixels on all sides. In the checkout group, a black background color is applied and an icon element for the cart is added. The icon is aligned vertically in the center of the group and given specific margins.
01:30:00 In this section, the video discusses how to display a text element that shows the total number of items a user has added to their checkout cart. The database is structured in a way that creates a checkout item for each item added to the cart, including details like the food item, quantity, and purchase status. A dynamic search is performed to find all checkout items created by the current user that have not been purchased. The count of these items is then displayed in a text element within a black group. The styling of the text element is adjusted to have white color and a font size of 60. The element is made responsive by setting its width to fit the content and adding margins. The black group's minimum height and width are set to zero to collapse nicely around the elements.
01:35:00 In this section, the video explains how to create a header menu using Bubble. The process involves using a group element and adjusting its position and alignment properties. The video then demonstrates how to make the header menu a reusable element, allowing it to be added to any page in the application. The video also introduces the concept of a floating group, which is used to create a footer menu that stays positioned at the bottom of the page. The floating group is explained as an alternative to a normal group, ensuring that the footer menu is always visible even when scrolling down the page. The video highlights the power of reusable elements in Bubble, emphasizing that changes to a reusable element must be made in a separate editor. Overall, the section provides a comprehensive guide to creating and implementing header and footer menus in a Bubble application.
01:40:00 In this section, the tutorial explains how to create a floating group for a navigation menu. The floating group will always be positioned within the user's viewport, allowing it to hover over other content on the page. The tutorial demonstrates how to set the floating group at the bottom of the page and add a solid border to clearly distinguish it from the rest of the page. Additionally, the tutorial covers setting up the layout for the navigation menu, which includes adding icon and text elements. The tutorial uses a light shade of red to highlight the position of the elements within the floating group. Overall, the tutorial provides step-by-step instructions on how to create a reusable floating group for a navigation menu using Bubble.
01:45:00 In this section of the video, the creator demonstrates how to design and create the navigation menu for the app using Bubble. They start by aligning the elements within a group, updating the minimum height and width of the group, and adding margin to the elements. They then duplicate the group to create additional menu options, update the names and icons, and distribute them evenly across the page. Next, the creator adds workflows to the menu options, specifying the destination pages for each option. They also color-coordinate the workflows for easy identification. Finally, they create a new page for the activity option and link it in the workflow.
01:50:00 In this section of the video, the creator demonstrates how to create a navigation menu and a footer menu for an Uber Eats clone using Bubble. They walk through the process of setting up the workflow triggers and updating the event colors for each menu item. They also show how to add the footer menu as a floating group at the bottom of the page. The creator explains how to preview the application and remove the debugger menu. Finally, they discuss the benefits of building reusable elements for the menus and how it simplifies the process of adding them to other pages.
01:55:00 In this section of the video, the speaker discusses the design of the overall page and demonstrates an example of what it will look like. They start by adding a heading element and make it responsive. Then, they add two elements side by side within a group, setting the container layout to be a row. On the left side, they add a search box for restaurant owners to search for specific listings. They make the search box responsive and set a maximum width to prevent it from becoming too long on larger screens.
In this video tutorial on building an Uber Eats clone using Bubble, the creator explains how to style and layout the input field and button elements for creating restaurant listings. They also cover setting up a repeating group to display a list of restaurants and customizing the elements within the group. The tutorial shows how to add buttons to the repeating group and create a main button for managing orders. Additionally, the video covers adding conditions to display elements only to restaurant owners and creating a pop-up form for adding restaurant listings. The tutorial also demonstrates adding various input fields and describes the process of creating the workflow for creating a new restaurant listing. Finally, the video covers building the search functionality and search results page for the app.
02:00:00 In this section, the speaker discusses the styling and layout for the input field and button elements that will be added to the page. They set the maximum width of the input field to 400 pixels and the height to 48 pixels. They add a margin of 20 pixels on the right side of the input field. Next, they add a button element with the text "create listing" and set its width to a fixed 150 pixels. They update the minimum height of the button to match the input field, set the margin for the red group container, and ensure the button is always positioned on the right side of the screen. Moving on to displaying a list of restaurants, they add a repeating group and set the type of content to "restaurant". They configure the data source to display restaurants created by the current logged-in user. They also add a constraint to update the search results of the repeating group based on the keywords typed in the search field.
02:05:00 In this section, the speaker explains how to set up a repeating group in Bubble to display a list of restaurants. They select the option to ignore empty constraints, allowing the list to remain unaffected until a user adds a value to the search field. They adjust the number of rows and columns to be variable, based on the number of restaurants created by the owners. They set the container layout for the repeating group to be a column and make it fully responsive. The speaker then adds elements inside the repeating group, starting with the featured image of the restaurant. They process the image with mgx to resize and fit the dimensions by cropping. They set the dimensions of the image to be a fixed aspect ratio of 2:1. Next, they add the name of the restaurant using a text element and make it fully responsive. Finally, they add two buttons side by side using a row container to allow users to edit or view the restaurant details.
02:10:00 In this section, the video demonstrates how to add buttons to a repeating group in order to build an Uber Eats clone. The buttons are customized to have a flat background color and a black border, with one displaying the word "edit" and the other displaying the word "view." The video also shows how to create a new style for the buttons and update their dimensions. Additionally, a main button is added outside of the repeating group, which will redirect users to a dashboard page to manage incoming orders. The button is labeled "manage orders" and will display the number of orders that need to be managed.
02:15:00 In this section, the video tutorial covers how to add a button that allows users to view and manage orders for a restaurant. The tutorial demonstrates how to perform a search in the database for orders linked to the current restaurant and with an "in progress" status. Then, a count of the matching orders is displayed on the button. The style of the button is also updated, and it is positioned at the bottom of a repeating group. Additionally, the tutorial shows how to add a menu option in the footer that redirects users to the page where they can manage their restaurant listings. A workflow is created for the menu option to navigate to the listing page, and a condition is set to ensure that only restaurant owners can see and access this option.
02:20:00 In this section, the video tutorial explains how to create conditions in Bubble to display certain elements only to users who are restaurant owners. By setting a condition based on the account type of the logged-in user, the tutorial demonstrates how to make an element visible or invisible. This feature is essential for the app's functionality, even though it may not be a core user-facing feature. The tutorial also moves on to creating a pop-up form for restaurant owners to add their restaurant listings, which will then be displayed in a repeating group on the page. The pop-up form includes fields for the restaurant name, address, categories, description, logo, and featured image. The tutorial explains how to layout the elements in the pop-up and make it responsive. The next steps will involve adding more elements and functionality to complete the process of creating a restaurant listing.
02:25:00 In this section, the creator demonstrates how to streamline the process of adding text elements and input fields to the Uber Eats clone app. They start by making a copy of an existing heading and updating the text to display "restaurant name." They then adjust the font size and spacing of the text elements. After that, they add an input field for restaurant names and customize its appearance. Next, they make a copy of the heading and change the text to "address". Instead of a standard input field, they use a search box that integrates with Google Maps to fetch and display real-world addresses. They mention the need to set up Google Maps API keys in Bubble's settings tab and provide a link to a video tutorial on how to obtain the keys. They emphasize the importance of setting up the API keys to ensure the proper functioning of address-related features in the app.
02:30:00 In this section, the video creator continues building the search box by updating the appearance and layout of the input field. They make the input field's borders curved and set the width and margins to match the previous input field. The creator then moves on to adding a multi-drop down field that allows restaurant owners to select multiple categories for their listings. They install a free plugin called "multi-select drop down" and configure it to display dynamic choices from the option set list of categories. The appearance and layout of the multi-drop down field are also adjusted to match the existing input fields. The creator mentions that the maximum height of the field is set to infinite to accommodate multiple selected options, and adds margins to align it with the other fields. Finally, the creator adds a description field using a multi-line input field instead of a standard input field.
02:35:00 In this section, the video tutorial focuses on adding a multi-line input field to the Uber Eats clone. The multi-line input field is used for long-form descriptions or bios and continuously expands as more text is added. The tutorial also demonstrates how to horizontally align two picture uploader elements using groups. The groups are stacked within a main group, with the container layout set to a row. The tutorial then adds a new group inside the main group, with the container layout set to a column to stack the text element and picture uploader element vertically. The text element is updated to display the word "logo", and the picture uploader dimensions are adjusted to be 100 pixels by 100 pixels.
02:40:00 In this section, the video explains how to add groups and elements to the Uber Eats clone app using no-code platform Bubble. The instructor shows how to create two groups, one for the logo and another for the featured image of a restaurant listing. They also demonstrate how to add spacing between the groups and adjust the layout. Next, they add a button element called "create listing publish" and set up a workflow to display a pop-up when the button is clicked. The instructor then explains the process of creating the workflow that will show the pop-up, which is not visible by default. Finally, they update the workflow trigger to be associated with the creation of a restaurant listing.
02:45:00 In this section, the creator demonstrates how to build the workflow for creating a new restaurant listing on the Uber Eats clone. They show how to connect the input fields on the pop-up with the corresponding data fields in the database. They also add steps to close the pop-up and reset the input fields after submitting the listing. The workflow is then visually distinguished with a different color. The creator then previews the page and creates a new listing to show how it looks and functions. They mention that this feature completes the process of creating a restaurant listing, which is an important step towards building the application.
02:50:00 In this section, the instructor explains how to build a search functionality for a restaurant search box in the Uber Eats clone. The instructor demonstrates how to create a workflow in Bubble that triggers whenever a user types something into the search field. The workflow then directs the user to a search results page and displays a list of relevant restaurants. To send the user's search query to the search results page, the instructor explains the concept of URL parameters in Bubble and how they can be used to store and retrieve data. By using URL parameters, the clone app can display all listings that match the user's search query, instead of just one specific item from the database.
02:55:00 In this section, the speaker discusses building the search results page for the Uber Eats clone. They start by updating the container layout and adding the header and footer menus. Then, they add a heading element that displays the user's search query at the top of the page. They extract the search query from the URL parameter and display it using dynamic data. The speaker also explains the importance of spelling the parameter correctly for a successful match. Finally, they discuss making the text element responsive and add margin to it. They mention that they will add a repeating group to display a list of restaurants that match the search query in the next step.
The video tutorial demonstrates how to implement a search feature and search by category functionality in an Uber Eats clone app using Bubble's no-code platform. It explains how to update the data source of a repeating group and extract search queries from the URL parameter. The video also highlights the value of accessing the full course for a comprehensive guide on building the app.
03:00:00 In this section, the video tutorial demonstrates how to update the data source of a repeating group in order to display specific restaurants based on a search query. The data source is updated to include an additional constraint that filters the restaurants based on the search query sent through the URL parameter. The contains keywords option is used to make the search query case-insensitive. The keywords are obtained from the URL using the "get data from page URL" function. Additionally, the tutorial explains how to create a workflow that runs when a category is selected, sending the user to the search results page and displaying only the restaurants that fit that specific category. The data source of the repeating group on the search page is then updated to reflect this search.
03:05:00 In this section, the video explains how to create a search feature in the Uber Eats clone app using Bubble's no-code platform. The tutorial shows how to extract the search query from the URL parameter and update the display accordingly. It also demonstrates how to implement the search by category functionality by modifying the data source of the repeating group. Overall, the video provides a step-by-step guide on creating a custom search feature for the app.
03:10:00 In this section, the speaker highlights the importance of accessing the full course to build a comprehensive Uber Eats clone using Bubble. While the course comes with a cost, it is believed to save users months of time by providing detailed instructions on various features. These features include creating restaurant listings, allowing restaurant owners to list food items for sale, implementing a dynamic restaurant page, custom search and checkout features, payment processing, a restaurant dashboard, a driver's dashboard, and more. The speaker encourages viewers to subscribe to stay updated on additional Bubble resources and expresses gratitude for their time spent watching the tutorial.