1. Home
  2. Docs
  3. UberEats Clone
  4. Setting Up Firebase Tables

Setting Up Firebase Tables

As you already know, our React Native apps are using Firebase as the default backend. The app fetches and writes data from and to Firebase Firestore. Firestore is the database, containing several tables to structure all the data needed for the UberEats clone, such as users, drivers, orders, etc.

In src/Configuration.js you can find the names of the UberEats data tables:

export const VENDOR = 'vendors';
export const VENDOR_ORDERS = 'restaurant_orders';
export const VENDOR_DELIVERIES = 'restaurant_deliveries';
export const VENDOR_REVIEWS = 'vendor_reviews';
export const VENDOR_PRODUCTS = 'vendor_products';
export const RESERVATIONS = 'reservations';
export const VENDOR_CATEGORIES = 'vendor_categories';

While many of these tables get populated automatically as your users (consumers) are using the app, there are a few things you need to set up so that users can see restaurants and food menu items in the app.

You can rename these tables as you wish. But make sure you properly replace all the occurrences in the source code, otherwise your app will break.

There are tables that get populated automatically (orders, reviews) and tables that you need to populate upfront (vendors, categories and food items). Let’s see how we can populate the ones that are mandatory.

In order for the app to correctly display your data, you need to add your data into the right Firebase tables, with precise field names.

1. Importing Restaurant Data Seed Automatically

You can import all of our test restaurant data into your own Firebase automatically. This would save you a lot of time, since you don’t need to add each entity manually. You can edit the fields later, to add your own photos, names, locations, etc.

  1. Locate DataSeed folder included in your download
  2. Clone this Github repo (this is a script that lets you import and export json data into Firestore)
  3. In Firebase Console -> Project Settings -> Service Accounts -> Generate a Node Private Key -> Download it -> Rename it to “serviceAccountKey.json” and place it into the firestore-import-export folder
    food delivery firebase
  4. Place the four data seed files into the firestore-import-export folder
  5. Within the firestore-import-export folder, run the following three commands
    node import.js vendor_filters.json
    node import.js vendor_categories.json
    node import.js vendors.json
    node import.js vendor_products.json

That’s it. Now all the data is there, and your app should be usable. Re-run the React Native mobile app, and make sure that all the mock data is there (multiple restaurants, food menu items, etc).

To add your own data, simply open the json files from DataSeed and modify them directly, with your own photo URLs, restaurants, locations, etc. Make sure you copy the files again into the script folder, and re-run the script on all the files, every time you want to modify something.

You can also directly modify this data into Firebase Console. Take a look at the Firestore structure in your Firebase Console, and make sure it looks like this:

ubereats clone firebase

By the end of this section, when you are running the app, you are supposed to get all the restaurants and food menu items that you see in the screenshots on our product page. Those should be coming from your own Firebase Firestore database, and changing anything there, will directly be reflected into the app right away.

2. Add Your Own Restaurants and Food Items

As mentioned in the previous section, you can add your own restaurants and food items in the json files of DataSeed, and simply import them again in Firestore using the script and steps outlined above.

3. Set Up Drivers & Restaurant Admins

Since a multivendor food delivery app there are multiple parties involved, as the admin / owner of the business, you need to do some extra configuration steps for each restaurant manager and driver that you add to your fleet.

Adding a Restaurant

When adding a new restaurant, you can decide what users can access the dashboard for the orders placed with that restaurant. This will give access to those users for accepting and rejecting incoming orders, as well as for viewing the orders history on that restaurant.

To do this, follow the next steps:

  1. Have the restaurant owner/manager create a new account in the app
  2. In Firestore, find the ID of the restaurant, in the “vendors” table (this is the restaurant data that you added in the previous section)
  3. In Firestore (Firebase Console), find the account in the “users” table (you can filter by e-mail address to make it easier) and add two additional fields to this entry (both of type string):
    1. vendorID with the value of the restaurant ID identified at step 2 above
    2. role: “vendor

That’s it. Now, when the restaurant owner will log into your Restaurant Owner app, they will be able to see the historical list of orders and accept/reject incoming orders.

Adding a Driver

Since drivers are a special type of users, you’ll need to do some customizations every time you add a new driver to your fleet. To do this, follow the next steps:

  1. Have the driver create a new account in the app
  2. In Firestore (Firebase Console), find the account in the “users” table (you can filter by e-mail address to make it easier) and add the next additional fields to this entry (all of them of type string):
    1. role: “driver
    2. carNumber – the license plate (e.g. 7WFXAS)
    3. carName – the name of the car model (e.g. Tesla S)
    4. carPictureURL – the URL of the car photo (e.g. https://instamobile.io/tesla.png)

Once done, the new driver will be able to log into the driver app, and start accepting delivery orders.