React Native Multi Vendor

Created At: 2023-11-03 04:11:06 Updated At: 2024-05-11 15:59:08

Foodly food delivery app based on react native boasts a dynamic backend crafted with Node.js and Express, providing a solid foundation for high-performance operations. MongoDB is employed for efficient data handling, and Firebase Admin is seamlessly integrated to enhance backend management capabilities.

Take the course on Udemy(If you buy the source you get free access to Udemy)

Youtube React Native Food App

React Native Complete User End App

React Native Complete Restaurant App

React Native Complete Delivery Boy App

The frontend, developed with the latest version of React Native and Expo, features a sleek, cutting-edge user interface. Google Maps APIs are deftly incorporated for location-based services such as routes, directions, and geocoding, ensuring precise localization of users and restaurants. This geolocation accuracy allows for personalized recommendations and accurate delivery pricing. Additionally, the Distance Matrix is utilized to accurately calculate delivery costs, distances, and time estimates, ensuring a smooth and efficient user experience in our food delivery app.

Basic App Features

  1. Getting Google Api Key
  2. Hooking Context Providers to the app
  3. Getting user location with expo-location, accessing data using useContext hook
  4. Creating Home Header
  5. Reverse Geocode coordinates to get location and time function
  6. Category List using Flatlist and Image Component
  7. Pick Restaurant List Using Flatlist and Text Component
  8. Reusable Heading Component
  9. Nearby Restaurant Recommendations
  10. New foods recommendations and fastest near you component
  11. Food Stack Navigator
  12. Explanation on passing data to a screen inside of a stack
  13. Creating Food Page Buttons, Text Components and styling
  14. FoodTags flatlist and good additives list with BounceCheckBox
  15. Count for increasing the quantity
  16. Cart and orders functions and data prep
  17. Handle additives and price increment according to changes in additives
  18. TabView in react native
  19. Restaurant Page Image, Buttons and rating using rating package
  20. Restaurant rating page
  21. Delivery time, cost and distance using google distance matrix
  22. Passing data to page inside TabView using useContext hook
  23. Google maps and linking app to native maps
  24. Fetch directions using the Google direction api
  25. Displaying polyLines and markers on the map
  26. Restaurant food menu
  27. Login and passing data to Login Context
  28. Persistent CartCount using CartCount Context
  29. Category Food Component

Backend System  Overview

1. Authentication and Authorization

Integration with Firebase Admin: Implement backend services using Firebase Admin SDK to manage users, roles, and permissions.

Role-Based Authentication: Define four distinct roles: Admin, Vendor, Client, and Driver.

Advanced Middleware: Create middleware functions to verify user roles and enforce access control for protected routes.

2. User Management

Registration and Profiles: Enable registration for different user roles, each with a unique set of data fields and validation rules.

Implement JSON Web Tokens (JWT) for secure, token-based user authentication.

Use password encryption techniques (such as bcrypt) to ensure the safety of user credentials.

User CRUD Operations: Allow for adding, updating, and retrieving user information.

Address Management: Provide functionality for users to add, update, and retrieve addresses.

Implement logic to maintain a single default address per user, with the ability to change the default setting.

3. Vendor-Specific Features

Vendor Registration: Set up a registration process for vendors, including the collection of necessary information and validation.

Vendor Middleware: Ensure that only vendors can access routes for managing their restaurant and food items.

Food Management: Develop endpoints for vendors to upload and manage their food items.

4. Recommendations and Dynamic Content

Location-Based Restaurant Recommendations: Create endpoints that suggest restaurants to clients based on their current location.

Dynamic Food Recommendations: Develop algorithms to recommend food items to users also based on user location.

Preparation and Delivery Time: Introduce logic to recommend food that can be prepared and delivered in the shortest possible time, considering user location.

5. Shopping Cart and Order Processing

Cart Management: Allow users to add and remove items from the cart.

Enable users to adjust the quantity of cart items.

Update and return the cart count whenever changes are made to the cart.

Order Creation and Management: Provide functionality for users to create orders and customize them with add-ons.

Update orders based on payment and delivery status.

6. Categories and Recommendations

Category Management: Allow admins to add, update, and delete categories of food.

Category Recommendations: Use aggregation pipelines to offer random category recommendations to users.

7. Driver-Specific Functionality

Driver Registration and Restrictions: Establish registration for drivers and ensure middleware restricts them to driver-related tasks.

React Native Frontend - Feature Overview

Main Hooks and Libraries

Expo: A framework and platform for universal React applications.

useState: To manage component states such as form inputs and toggles.

useContext: To provide and consume React context for global state like user auth.

useRoute & useNavigation: For accessing the route and navigation objects from React Navigation.

expo-location: An Expo library to access location information.

useEffect: To perform side effects in function components like data fetching.

UseFonts: An Expo hook for loading custom fonts.

useRef: To reference DOM elements or store mutable values across renders.

Custom Hooks: For abstracting reusable logic into custom functions.

TabView: For tabbed navigation.

React Navigation: For screen navigation management.

react-native-maps: For integrating maps into the app.

react-native-shimmer-placeholder: To display placeholder content while data is loading.

react-native-stock-rating: For displaying and handling stock ratings.

User Management and Authentication

User registration with email and password.

Login with email and persistent storage of the login state using Async Storage.

Display user-specific content based on the time of day in the home header.

Location Services

Fetch user location using Google Maps Geocoding API.

Reverse geocode the user's location to display the current address in the home header.

Dynamic Recommendations

Provide dynamic restaurant recommendations based on user location.

Suggest new foods in the user's current district.

Recommend the nearest food options.

Restaurant Page Features

Calculate distance and cost from the restaurant to the user using Google Distance Matrix API.

Rate restaurants and display ratings.

Show restaurant menus and locations with direction polylines on maps.

Ability to launch native maps for directions.

Recommend dishes from nearby restaurants in the explore tab.

Food Page Features

Detail view for food items with options to add/remove additives and adjust quantity.

Add items to the cart with dynamic cart count updates.

Modal for ordering food with default delivery address.

Cart Management

Add and delete items from the cart, including those with additives.

Update CartCount context on any change in the cart.

Installation guide

Run the app quickly

Here I will show you how to run the app without much effort once you get the source code. Watch the video and do as follow.

Run the app locally

Run the application with food schema. Learn step by step how to create a schema and make it up and running.

Connect with firebase

Firebase admin sdk

Our app depends on Firebase admin sdk. You need to make sure you have connected your app to firebase project.

Google map and api

Here we will see how to connect to our own google map and use our own api key.

Upload schema to your own mongodb

Here we will see how to upload the schema to our own mongodb. Watch the video and make sure you have already created a schema. Here we just show how to upload a given schema to your own mongodb.

Set up database name correctly

Once data has been uploaded make sure you have set the database name in the connection string.

Running both frontend and backend

Here once you uploaded your schema to mongodb, now you can run your own code locally. Make sure you set up the database name in the string.

Enable food search

Here we will see how to enable food search. To do that follow the video.

Change log

13. 08-05-2024 Added new features on reastaurant side (vendor app)

12. 03-05-2024 Added rating for restaurants 

11. 01-05-2024 Upgraded to V2.0.0 with new features

10. 23-04-2024 Bug fix on update user info on login

9. 22-04-2024 Bug fixes on restaurant creation and show the restaurants correctly on user app

8. 14-04-2024 Updated UI bottom bar and category overflow issue

7. 18-01-2024 Changed baseUrl configuration

6. 16-01-2024 Added map adding and changing address 

5. 12-01-2024 Added email verification

4. 22-11-2023 bug fix restaurant incomplete data

3. 18-11-2023 released delivery boy app

2. 11-11-2023 solve login bug

1. 03-11-2023 first release version 1.0


  • d

    2024-05-12 08:09:50

    Send me your buymeacoffee link email

  • t
    toan tran

    2024-05-12 01:41:44

    Can you send to me a new features on reastaurant side (vendor app).

  • t
    toan tran

    2024-04-01 02:37:30

    No native ExpoFirebaseCore module found, are you sure the expo-firebase-core module is linked properly? How to fix it?

  • a

    2024-03-30 22:47:58

    Thank you very much, I wish there is tutorials for the delivery boy app as well.

Add Reviews