Please follow the steps mentioned on the left side bar for easy setup
Introduction
Foodie is a revolutionary food delivery app designed to bring a variety of delicious cuisines from multiple restaurants straight to your doorstep. Built with Laravel & Flutter. Foodie offers a seamless and intuitive user experience, making it easier than ever to discover, order, and enjoy your favorite meals from local eateries.
Key Features:
1. Wide Selection of Restaurants: Explore a vast array of restaurants, from local favorites to popular chains, all available at your fingertips.
2. User-Friendly Interface: Enjoy a sleek and intuitive design that makes browsing menus, placing orders, and tracking deliveries effortless.
3. Real-Time Order Tracking: Stay updated with real-time tracking of your order from preparation to delivery, ensuring you know exactly when your food will arrive.
4. Customizable Orders: Personalize your meals with special instructions and dietary preferences to suit your taste and dietary needs.
5. Secure Payment Options: Choose from multiple secure payment methods, including credit/debit cards, digital wallets, and cash on delivery.
6. Exclusive Deals and Discounts: Take advantage of exclusive offers, promotions, and discounts available only through the Foodie app.
7. Easy Reordering: Quickly reorder your favorite meals with just a few taps, thanks to a user-friendly reorder feature.
8. Ratings and Reviews: Make informed decisions with access to detailed ratings and reviews from other Foodie users.
9. 24/7 Customer Support: Receive dedicated support anytime you need assistance, ensuring a smooth and satisfying food delivery experience.
10. Multi-Platform Accessibility: Enjoy Foodie on both Android and iOS devices, with a consistent and optimized performance across platforms.
Why Choose Foodie?
Foodie stands out as a top-tier food delivery app by combining an extensive restaurant selection with a user-centric design, reliable delivery service, and secure payment options. Whether you’re craving a gourmet meal, a quick bite, or something in between, Foodie makes it easy to satisfy your hunger with convenience and style.
Setting up Flutter#
2. Setup Setting up Flutter involves several steps. Here’s a basic guide to get you started:
2.1. System Requirements:
Ensure your system meets the minimum requirements for Flutter development. Flutter supports development on Windows, macOS, and Linux. Make sure your system has the necessary hardware and software requirements as specified by Flutter documentation.
Extract the downloaded file to a location on your system. For example, on macOS or Linux, you can extract it to /usr/local and on Windows to C:\.
Add the Flutter bin directory to your system PATH to run Flutter commands from the command line. This step is important for executing Flutter commands globally in your system.
2.3. Install Development Tools:
For Android: Install Android Studio and configure the Flutter plugin. Android Studio provides the Android SDK, which Flutter uses to develop for Android. Ensure you have the Android SDK and the necessary tools installed through Android Studio.
For iOS: You need a macOS system with Xcode installed to develop and deploy Flutter apps for iOS.
2.4. Set up Android Emulator or iOS Simulator:
For Android development, set up an Android Virtual Device (AVD) using Android Studio’s AVD Manager.
For iOS development, use the iOS Simulator provided by Xcode.
Run flutter doctor:
Open a terminal and run flutter doctor. This command checks your system for any dependencies needed for Flutter development.
It will provide feedback on any missing or outdated components and instructions on how to resolve them.
2.5. Install Flutter and Dart plugins for your preferred IDE:
If you’re using VS Code, install the Flutter and Dart plugins to enhance your development experience.
Android Studio also has built-in support for Flutter, but make sure to install the Flutter plugin if it’s not already installed.
2.6. Create your first Flutter project:
Use the flutter create command to create a new Flutter project.
Navigate to the project directory and explore the file structure. You’ll find the main Dart file (main.dart) in the lib directory, where you’ll write your Flutter code.
2.7. Run your Flutter app:
Connect a device or start an emulator/simulator.
Navigate to your Flutter project directory in the terminal and run flutter run.
This will compile your Flutter app and launch it on the connected device or emulator.
2.8. Start Developing:
Once your app is running, you can start developing your Flutter UI and logic. Flutter’s hot reload feature allows you to see your changes instantly without restarting the app.
2.9. Learn and Explore:
Flutter has an extensive set of widgets and libraries. Explore the official Flutter documentation and community resources to learn more about Flutter development.
Customer Application Setup#
Flutter Android Setup#
3. Flutter Android Setup
3.1 Changing the package name:
Navigate to the android directory within your Flutter project.
Open the AndroidManifest.xml file located in the app/src/main directory.
Find the package attribute in the tag and change its value to your desired package name.
3.2 Update Android source code references:
Open the MainActivity.java file located in android/app/src/main/java/com/your_old_package_name.
Replace occurrences of the old package name with the new package name.
3.3 Change the launcher icon :
3.3.1. Prepare Your New Icons:
First, prepare the new launcher icon images in the required sizes. Android and iOS have different size requirements. You typically need icons in various sizes to support different screen densities.
For Android, you need to replace the existing launcher icon files with your new ones. The launcher icons for Android are stored in the mipmap folders inside the android/app/src/main/res directory.
Replace the existing icon files (ic_launcher.png) in the mipmap folders with your new icon files. Make sure to maintain the same file names and sizes.
You may need to replace icons in various drawable folders for different screen densities (e.g., mipmap-hdpi, mipmap-mdpi, mipmap-xhdpi, mipmap-xxhdpi, mipmap-xxxhdpi).
3.4. Change the app name
3.4.1. For Open the android/app/src/main/AndroidManifest.xml file.
3.4.2. Locate the tag.
3.4.3. Change the value of the android:label attribute to your desired app name.
3.5. Change the Google Maps API key :
3.5.1. Navigate to your Flutter project’s android/app/src/main/AndroidManifest.xml file.
3.5.2. Inside the element, locate the tag with the name com.google.android.geo.API_KEY.
3.5.3. Replace the android:value attribute with your new Google Maps API key.
3.6.2.1.-keystore: The path where the .jks file will be created (~/my-release-key.jks for Unix/macOS, C:\Users\YourName\my-release-key.jks for Windows).
3.6.2.2. -keyalg RSA: Algorithm used.
3.6.2.3. -keysize 2048: Key length.
3.6.2.4. -validity 10000: Validity in days (~27 years).
3.6.2.5. -alias my-key-alias: Name of the key within the keystore.
3.6.3. Enter Required Info
3.6.3.1. Keystore password
3.6.3.2. Key password
3.6.3.3 Your name, organization, city, state, and country code
3.6.4. Configure key.properties in Flutter Project
3.7.1.3. Replace path-to-your-keystore-file with the path to your keystore file (usually debug.keystore for debug builds and a custom keystore for release builds) and your-alias-name with the alias name used to generate the keystore.
3.7.1.4. Similarly, execute the following command to generate the SHA-256 key:
3.7.2.1. Open your Flutter project in Android Studio.
3.7.2.2. In the Android view, navigate to app -> Gradle Scripts -> build.gradle (Module: app).
3.7.2.3. Add the following lines to the android block
3.7.2.4. Replace path-to-debug.keystore, password, and key-alias with your keystore file path, password, and key alias respectively. 3.7.2.5. Sync your project to apply changes. 3.7.2.6. Run the following Gradle task in the terminal to get the SHA-1 and SHA-256 keys
3.7.3. Adding Keys to Firebase Console:
3.7.3.1. Go to the Firebase Console.
3.7.3.2. Select your project.
3.7.3.3. For Android:
Click on the Android icon to add an Android app.
Follow the setup instructions, including adding the google-services.json file to your Flutter project’s android/app directory.
During setup, you’ll be asked for your SHA-1 key. Paste the SHA-1 key you generated earlier.
After setup is complete, you’ll have the option to download the google-services.json file again. Replace the existing file in your project if needed.
3.7.3.4. For IOS:
Click on the iOS icon to add an iOS app.
Follow the setup instructions, including downloading the GoogleService-Info.plist file.
There’s no need to add SHA-1 or SHA-256 keys for iOS.
Add the downloaded GoogleService-Info.plist file to your Flutter project’s ios/Runner directory.
Flutter IOS Setup#
4.Flutter IOS setup
4.1. Change the iOS bundle identifier:
Navigate to the ios directory within your Flutter project.
Open the Runner.xcodeproj project file using Xcode.
In Xcode, select the Runner project from the project navigator.
Go to the Runner target’s settings.
Under the General tab, find the Bundle Identifier field and change it to your desired bundle identifier.
4.2. To change the launcher icon
4.2.1. For iOS, you need to replace the existing icon files with your new ones. The icons for iOS are stored in the Assets.xcassets directory in the ios/Runner directory.
4.2.2. Open your Flutter project in Xcode by navigating to the ios directory and opening the .xcworkspace file with Xcode.
4.2.3. In Xcode, navigate to Runner > Assets.xcassets.
4.2.4. Replace the existing AppIcon with your new icon files. You’ll typically find different sizes labelled for various devices (e.g., iPhone, iPad).
4.3. Change Application Name in IOS.
4.3.1. Open the ios/Runner/Info.plist file.
4.3.2. Locate the CFBundleDisplayName entry.
4.3.3. Change the value associated with to your desired app name.
4.4. To change the Google Maps API key.
4.4.1. Open your Flutter project in a text editor or IDE.
4.4.2. Navigate to the ios/Runner directory within your Flutter project.
4.4.3. Locate the AppDelegate.swift file.
4.4.4. In the didFinishLaunchingWithOptions method, set the Google Maps API key.
Replace “YOUR_NEW_API_KEY_HERE” with your actual Google Maps API key.
After updating the API key in the AppDelegate.swift file, rebuild your Flutter app for iOS to apply the changes.
By following these steps, your Flutter app will use the new Google Maps API key specifically for iOS. Make sure you’ve also updated the API key in the Android configuration as described earlier if you want to apply changes to both platforms.
Flutter Firebase Setup#
5. Flutter Firebase Setup
5.1. Setting up Firebase for a Flutter project using the Firebase CLI involves several steps. Below is a detailed guide on how to do it:
5.1.1. Install Firebase CLI:
First, you need to install the Firebase CLI if you haven’t already. You can install it via npm (Node Package Manager) by running the following command in your terminal or command prompt:
5.1.2. Login to Firebase:
After installing the Firebase CLI, log in to your Firebase account by running the following command:
This will open a browser window prompting you to log in to your Google account associated with Firebase.
5.1.3. Create a Firebase Project:
If you haven’t already created a Firebase project, you can create one using the Firebase CLI by running:
Follow the prompts to create a new project.
5.1.4. Initialize Firebase in Your Flutter Project:
Navigate to your Flutter project directory in the terminal.
Initialize Firebase in your project by running:
This command will prompt you to select the Firebase features you want to set up. Choose the Firebase services you intend to use, such as Authentication, Firestore, etc.
5.1.5. Configure Firebase:
During the initialization process (firebase init), you’ll be asked to select the Firebase project you created or configured earlier. Choose the appropriate project from the list.
5.1.6. Install Required Dependencies:
After selecting the Firebase features, Firebase CLI will generate the necessary configuration files for your project.
Next, you need to install the required Firebase packages in your Flutter project. You can do this by adding the dependencies to your pubspec.yaml file:
Replacelatest_versionwith the actual version numbers of the Firebase plugins you want to use. You can find the latest versions on pub.dev.
5.1.7. Initialize Firebase in Your Flutter App:
5.1.8. Using Firebase Services:
Now you can use Firebase services in your Flutter app. Import the necessary Firebase packages and follow the respective documentation for each service you want to use (e.g., Firebase Authentication, Cloud Firestore).
5.1.9. Testing:
Run your Flutter app on a device or emulator to verify that Firebase services are correctly integrated and working.
5.2. Configuring and setting up FlutterFire in your Flutter project involves several steps. Here’s a detailed guide on how to do it:
Click on “Add Project” and follow the instructions to create a new project.
Once your project is created, you’ll be redirected to the project dashboard.
5.2.2. Add an App to Your Firebase Project:
In the Firebase console, select your project.
Click on the “Add app” button (usually represented by an Android or iOS icon).
Follow the setup instructions to register your app with Firebase.
Download the google-services.json file for Android or GoogleService-Info.plist file for iOS. These files contain your Firebase project configuration details.
5.2.3. Flutter Project Setup:
Open your Flutter project in your preferred editor.
Navigate to the android/app directory for Android or ios/Runner directory for iOS, and paste the google-services.json (for Android) or GoogleService-Info.plist (for iOS) file that you downloaded earlier.
5.2.4. Add Firebase SDK to Your Flutter Project:
Open your Flutter project’s pubspec.yaml file.
Add the following dependencies:
Replacelatest_versionwith the latest version numbers of the Firebase plugins you want to use. You can find the latest versions on pub.dev.
5.2.5. Using Firebase Services:
You can now use Firebase services in your Flutter app. Import the necessary Firebase packages and follow the respective documentation for each service you want to use (e.g., Firebase Authentication, Cloud Firestore).
5.2.6. Testing:
Run your Flutter app on a device or emulator to verify that Firebase services are correctly integrated and working.
Restaurant Application Setup#
Flutter Android Setup#
3. Flutter Android Setup
3.1 Changing the package name:
Navigate to the android directory within your Flutter project.
Open the AndroidManifest.xml file located in the app/src/main directory.
Find the package attribute in the tag and change its value to your desired package name.
3.2 Update Android source code references:
Open the MainActivity.java file located in android/app/src/main/java/com/your_old_package_name.
Replace occurrences of the old package name with the new package name.
3.3 Change the launcher icon :
3.3.1. Prepare Your New Icons:
First, prepare the new launcher icon images in the required sizes. Android and iOS have different size requirements. You typically need icons in various sizes to support different screen densities.
For Android, you need to replace the existing launcher icon files with your new ones. The launcher icons for Android are stored in the mipmap folders inside the android/app/src/main/res directory.
Replace the existing icon files (ic_launcher.png) in the mipmap folders with your new icon files. Make sure to maintain the same file names and sizes.
You may need to replace icons in various drawable folders for different screen densities (e.g., mipmap-hdpi, mipmap-mdpi, mipmap-xhdpi, mipmap-xxhdpi, mipmap-xxxhdpi).
3.4. Change the app name
3.4.1. For Open the android/app/src/main/AndroidManifest.xml file.
3.4.2. Locate the tag.
3.4.3. Change the value of the android:label attribute to your desired app name.
3.5. Change the Google Maps API key :
3.5.1. Navigate to your Flutter project’s android/app/src/main/AndroidManifest.xml file.
3.5.2. Inside the element, locate the tag with the name com.google.android.geo.API_KEY.
3.5.3. Replace the android:value attribute with your new Google Maps API key.
3.6.2.1.-keystore: The path where the .jks file will be created (~/my-release-key.jks for Unix/macOS, C:\Users\YourName\my-release-key.jks for Windows).
3.6.2.2. -keyalg RSA: Algorithm used.
3.6.2.3. -keysize 2048: Key length.
3.6.2.4. -validity 10000: Validity in days (~27 years).
3.6.2.5. -alias my-key-alias: Name of the key within the keystore.
3.6.3. Enter Required Info
3.6.3.1. Keystore password
3.6.3.2. Key password
3.6.3.3 Your name, organization, city, state, and country code
3.6.4. Configure key.properties in Flutter Project
3.7.1.3. Replace path-to-your-keystore-file with the path to your keystore file (usually debug.keystore for debug builds and a custom keystore for release builds) and your-alias-name with the alias name used to generate the keystore.
3.7.1.4. Similarly, execute the following command to generate the SHA-256 key:
3.7.2.1. Open your Flutter project in Android Studio.
3.7.2.2. In the Android view, navigate to app -> Gradle Scripts -> build.gradle (Module: app).
3.7.2.3. Add the following lines to the android block
3.7.2.4. Replace path-to-debug.keystore, password, and key-alias with your keystore file path, password, and key alias respectively. 3.7.2.5. Sync your project to apply changes. 3.7.2.6. Run the following Gradle task in the terminal to get the SHA-1 and SHA-256 keys
3.7.3. Adding Keys to Firebase Console:
3.7.3.1. Go to the Firebase Console.
3.7.3.2. Select your project.
3.7.3.3. For Android:
Click on the Android icon to add an Android app.
Follow the setup instructions, including adding the google-services.json file to your Flutter project’s android/app directory.
During setup, you’ll be asked for your SHA-1 key. Paste the SHA-1 key you generated earlier.
After setup is complete, you’ll have the option to download the google-services.json file again. Replace the existing file in your project if needed.
3.7.3.4. For IOS:
Click on the iOS icon to add an iOS app.
Follow the setup instructions, including downloading the GoogleService-Info.plist file.
There’s no need to add SHA-1 or SHA-256 keys for iOS.
Add the downloaded GoogleService-Info.plist file to your Flutter project’s ios/Runner directory.
Flutter IOS setup#
4.Flutter IOS setup
4.1. Change the iOS bundle identifier:
Navigate to the ios directory within your Flutter project.
Open the Runner.xcodeproj project file using Xcode.
In Xcode, select the Runner project from the project navigator.
Go to the Runner target’s settings.
Under the General tab, find the Bundle Identifier field and change it to your desired bundle identifier.
4.2. To change the launcher icon
4.2.1. For iOS, you need to replace the existing icon files with your new ones. The icons for iOS are stored in the Assets.xcassets directory in the ios/Runner directory.
4.2.2. Open your Flutter project in Xcode by navigating to the ios directory and opening the .xcworkspace file with Xcode.
4.2.3. In Xcode, navigate to Runner > Assets.xcassets.
4.2.4. Replace the existing AppIcon with your new icon files. You’ll typically find different sizes labelled for various devices (e.g., iPhone, iPad).
4.3. Change Application Name in IOS.
4.3.1. Open the ios/Runner/Info.plist file.
4.3.2. Locate the CFBundleDisplayName entry.
4.3.3. Change the value associated with to your desired app name.
4.4. To change the Google Maps API key.
4.4.1. Open your Flutter project in a text editor or IDE.
4.4.2. Navigate to the ios/Runner directory within your Flutter project.
4.4.3. Locate the AppDelegate.swift file.
4.4.4. In the didFinishLaunchingWithOptions method, set the Google Maps API key.
Replace “YOUR_NEW_API_KEY_HERE” with your actual Google Maps API key.
After updating the API key in the AppDelegate.swift file, rebuild your Flutter app for iOS to apply the changes.
By following these steps, your Flutter app will use the new Google Maps API key specifically for iOS. Make sure you’ve also updated the API key in the Android configuration as described earlier if you want to apply changes to both platforms.
Flutter Firebase Setup#
5. Flutter Firebase Setup
5.1. Setting up Firebase for a Flutter project using the Firebase CLI involves several steps. Below is a detailed guide on how to do it:
5.1.1. Install Firebase CLI:
First, you need to install the Firebase CLI if you haven’t already. You can install it via npm (Node Package Manager) by running the following command in your terminal or command prompt:
5.1.2. Login to Firebase:
After installing the Firebase CLI, log in to your Firebase account by running the following command:
This will open a browser window prompting you to log in to your Google account associated with Firebase.
5.1.3. Create a Firebase Project:
If you haven’t already created a Firebase project, you can create one using the Firebase CLI by running:
Follow the prompts to create a new project.
5.1.4. Initialize Firebase in Your Flutter Project:
Navigate to your Flutter project directory in the terminal.
Initialize Firebase in your project by running:
This command will prompt you to select the Firebase features you want to set up. Choose the Firebase services you intend to use, such as Authentication, Firestore, etc.
5.1.5. Configure Firebase:
During the initialization process (firebase init), you’ll be asked to select the Firebase project you created or configured earlier. Choose the appropriate project from the list.
5.1.6. Install Required Dependencies:
After selecting the Firebase features, Firebase CLI will generate the necessary configuration files for your project.
Next, you need to install the required Firebase packages in your Flutter project. You can do this by adding the dependencies to your pubspec.yaml file:
Replacelatest_versionwith the actual version numbers of the Firebase plugins you want to use. You can find the latest versions on pub.dev.
5.1.7. Initialize Firebase in Your Flutter App:
5.1.8. Using Firebase Services:
Now you can use Firebase services in your Flutter app. Import the necessary Firebase packages and follow the respective documentation for each service you want to use (e.g., Firebase Authentication, Cloud Firestore).
5.1.9. Testing:
Run your Flutter app on a device or emulator to verify that Firebase services are correctly integrated and working.
5.2. Configuring and setting up FlutterFire in your Flutter project involves several steps. Here’s a detailed guide on how to do it:
Click on “Add Project” and follow the instructions to create a new project.
Once your project is created, you’ll be redirected to the project dashboard.
5.2.2. Add an App to Your Firebase Project:
In the Firebase console, select your project.
Click on the “Add app” button (usually represented by an Android or iOS icon).
Follow the setup instructions to register your app with Firebase.
Download the google-services.json file for Android or GoogleService-Info.plist file for iOS. These files contain your Firebase project configuration details.
5.2.3. Flutter Project Setup:
Open your Flutter project in your preferred editor.
Navigate to the android/app directory for Android or ios/Runner directory for iOS, and paste the google-services.json (for Android) or GoogleService-Info.plist (for iOS) file that you downloaded earlier.
5.2.4. Add Firebase SDK to Your Flutter Project:
Open your Flutter project’s pubspec.yaml file.
Add the following dependencies:
Replacelatest_versionwith the latest version numbers of the Firebase plugins you want to use. You can find the latest versions on pub.dev.
5.2.5. Using Firebase Services:
You can now use Firebase services in your Flutter app. Import the necessary Firebase packages and follow the respective documentation for each service you want to use (e.g., Firebase Authentication, Cloud Firestore).
5.2.6. Testing:
Run your Flutter app on a device or emulator to verify that Firebase services are correctly integrated and working.
Driver Application Setup#
Flutter Android Setup#
3. Flutter Android Setup
3.1 Changing the package name:
Navigate to the android directory within your Flutter project.
Open the AndroidManifest.xml file located in the app/src/main directory.
Find the package attribute in the tag and change its value to your desired package name.
3.2 Update Android source code references:
Open the MainActivity.java file located in android/app/src/main/java/com/your_old_package_name.
Replace occurrences of the old package name with the new package name.
3.3 Change the launcher icon :
3.3.1. Prepare Your New Icons:
First, prepare the new launcher icon images in the required sizes. Android and iOS have different size requirements. You typically need icons in various sizes to support different screen densities.
For Android, you need to replace the existing launcher icon files with your new ones. The launcher icons for Android are stored in the mipmap folders inside the android/app/src/main/res directory.
Replace the existing icon files (ic_launcher.png) in the mipmap folders with your new icon files. Make sure to maintain the same file names and sizes.
You may need to replace icons in various drawable folders for different screen densities (e.g., mipmap-hdpi, mipmap-mdpi, mipmap-xhdpi, mipmap-xxhdpi, mipmap-xxxhdpi).
3.4. Change the app name
3.4.1. For Open the android/app/src/main/AndroidManifest.xml file.
3.4.2. Locate the tag.
3.4.3. Change the value of the android:label attribute to your desired app name.
3.5. Change the Google Maps API key :
3.5.1. Navigate to your Flutter project’s android/app/src/main/AndroidManifest.xml file.
3.5.2. Inside the element, locate the tag with the name com.google.android.geo.API_KEY.
3.5.3. Replace the android:value attribute with your new Google Maps API key.
3.6.2.1.-keystore: The path where the .jks file will be created (~/my-release-key.jks for Unix/macOS, C:\Users\YourName\my-release-key.jks for Windows).
3.6.2.2. -keyalg RSA: Algorithm used.
3.6.2.3. -keysize 2048: Key length.
3.6.2.4. -validity 10000: Validity in days (~27 years).
3.6.2.5. -alias my-key-alias: Name of the key within the keystore.
3.6.3. Enter Required Info
3.6.3.1. Keystore password
3.6.3.2. Key password
3.6.3.3 Your name, organization, city, state, and country code
3.6.4. Configure key.properties in Flutter Project
3.7.1.3. Replace path-to-your-keystore-file with the path to your keystore file (usually debug.keystore for debug builds and a custom keystore for release builds) and your-alias-name with the alias name used to generate the keystore.
3.7.1.4. Similarly, execute the following command to generate the SHA-256 key:
3.7.2.1. Open your Flutter project in Android Studio.
3.7.2.2. In the Android view, navigate to app -> Gradle Scripts -> build.gradle (Module: app).
3.7.2.3. Add the following lines to the android block
3.7.2.4. Replace path-to-debug.keystore, password, and key-alias with your keystore file path, password, and key alias respectively. 3.7.2.5. Sync your project to apply changes. 3.7.2.6. Run the following Gradle task in the terminal to get the SHA-1 and SHA-256 keys
3.7.3. Adding Keys to Firebase Console:
3.7.3.1. Go to the Firebase Console.
3.7.3.2. Select your project.
3.7.3.3. For Android:
Click on the Android icon to add an Android app.
Follow the setup instructions, including adding the google-services.json file to your Flutter project’s android/app directory.
During setup, you’ll be asked for your SHA-1 key. Paste the SHA-1 key you generated earlier.
After setup is complete, you’ll have the option to download the google-services.json file again. Replace the existing file in your project if needed.
3.7.3.4. For IOS:
Click on the iOS icon to add an iOS app.
Follow the setup instructions, including downloading the GoogleService-Info.plist file.
There’s no need to add SHA-1 or SHA-256 keys for iOS.
Add the downloaded GoogleService-Info.plist file to your Flutter project’s ios/Runner directory.
Flutter IOS Setup#
4.Flutter IOS setup
4.1. Change the iOS bundle identifier:
Navigate to the ios directory within your Flutter project.
Open the Runner.xcodeproj project file using Xcode.
In Xcode, select the Runner project from the project navigator.
Go to the Runner target’s settings.
Under the General tab, find the Bundle Identifier field and change it to your desired bundle identifier.
4.2. To change the launcher icon
4.2.1. For iOS, you need to replace the existing icon files with your new ones. The icons for iOS are stored in the Assets.xcassets directory in the ios/Runner directory.
4.2.2. Open your Flutter project in Xcode by navigating to the ios directory and opening the .xcworkspace file with Xcode.
4.2.3. In Xcode, navigate to Runner > Assets.xcassets.
4.2.4. Replace the existing AppIcon with your new icon files. You’ll typically find different sizes labelled for various devices (e.g., iPhone, iPad).
4.3. Change Application Name in IOS.
4.3.1. Open the ios/Runner/Info.plist file.
4.3.2. Locate the CFBundleDisplayName entry.
4.3.3. Change the value associated with to your desired app name.
4.4. To change the Google Maps API key.
4.4.1. Open your Flutter project in a text editor or IDE.
4.4.2. Navigate to the ios/Runner directory within your Flutter project.
4.4.3. Locate the AppDelegate.swift file.
4.4.4. In the didFinishLaunchingWithOptions method, set the Google Maps API key.
Replace “YOUR_NEW_API_KEY_HERE” with your actual Google Maps API key.
After updating the API key in the AppDelegate.swift file, rebuild your Flutter app for iOS to apply the changes.
By following these steps, your Flutter app will use the new Google Maps API key specifically for iOS. Make sure you’ve also updated the API key in the Android configuration as described earlier if you want to apply changes to both platforms.
Flutter Firebase Setup#
5. Flutter Firebase Setup
5.1. Setting up Firebase for a Flutter project using the Firebase CLI involves several steps. Below is a detailed guide on how to do it:
5.1.1. Install Firebase CLI:
First, you need to install the Firebase CLI if you haven’t already. You can install it via npm (Node Package Manager) by running the following command in your terminal or command prompt:
5.1.2. Login to Firebase:
After installing the Firebase CLI, log in to your Firebase account by running the following command:
This will open a browser window prompting you to log in to your Google account associated with Firebase.
5.1.3. Create a Firebase Project:
If you haven’t already created a Firebase project, you can create one using the Firebase CLI by running:
Follow the prompts to create a new project.
5.1.4. Initialize Firebase in Your Flutter Project:
Navigate to your Flutter project directory in the terminal.
Initialize Firebase in your project by running:
This command will prompt you to select the Firebase features you want to set up. Choose the Firebase services you intend to use, such as Authentication, Firestore, etc.
5.1.5. Configure Firebase:
During the initialization process (firebase init), you’ll be asked to select the Firebase project you created or configured earlier. Choose the appropriate project from the list.
5.1.6. Install Required Dependencies:
After selecting the Firebase features, Firebase CLI will generate the necessary configuration files for your project.
Next, you need to install the required Firebase packages in your Flutter project. You can do this by adding the dependencies to your pubspec.yaml file:
Replacelatest_versionwith the actual version numbers of the Firebase plugins you want to use. You can find the latest versions on pub.dev.
5.1.7. Initialize Firebase in Your Flutter App:
5.1.8. Using Firebase Services:
Now you can use Firebase services in your Flutter app. Import the necessary Firebase packages and follow the respective documentation for each service you want to use (e.g., Firebase Authentication, Cloud Firestore).
5.1.9. Testing:
Run your Flutter app on a device or emulator to verify that Firebase services are correctly integrated and working.
5.2. Configuring and setting up FlutterFire in your Flutter project involves several steps. Here’s a detailed guide on how to do it:
Click on “Add Project” and follow the instructions to create a new project.
Once your project is created, you’ll be redirected to the project dashboard.
5.2.2. Add an App to Your Firebase Project:
In the Firebase console, select your project.
Click on the “Add app” button (usually represented by an Android or iOS icon).
Follow the setup instructions to register your app with Firebase.
Download the google-services.json file for Android or GoogleService-Info.plist file for iOS. These files contain your Firebase project configuration details.
5.2.3. Flutter Project Setup:
Open your Flutter project in your preferred editor.
Navigate to the android/app directory for Android or ios/Runner directory for iOS, and paste the google-services.json (for Android) or GoogleService-Info.plist (for iOS) file that you downloaded earlier.
5.2.4. Add Firebase SDK to Your Flutter Project:
Open your Flutter project’s pubspec.yaml file.
Add the following dependencies:
Replacelatest_versionwith the latest version numbers of the Firebase plugins you want to use. You can find the latest versions on pub.dev.
5.2.5. Using Firebase Services:
You can now use Firebase services in your Flutter app. Import the necessary Firebase packages and follow the respective documentation for each service you want to use (e.g., Firebase Authentication, Cloud Firestore).
5.2.6. Testing:
Run your Flutter app on a device or emulator to verify that Firebase services are correctly integrated and working.
Payment Methods#
6. Payment Methods Configuration
Path:
Administration Settings > Payment Methods
1. Stripe
Enable Stripe: Checkbox to activate the Stripe payment gateway.
Stripe Key: Field for entering the public API key provided by Stripe.
Stripe Secret: Field for entering the secret API key for secure server communication.
Steps to Configure:
Go to Administration Settings > Payment Methods > Stripe.
Check Enable Stripe.
Enter the Stripe Key and Stripe Secret.
Click Save.
2. COD (Cash on Delivery)
Enable COD: Checkbox to activate the COD payment method.
Steps to Configure:
Go to Administration Settings > Payment Methods > COD.
Check Enable COD.
Click Save.
4. Razorpay
Enable Razorpay: Checkbox to activate the Razorpay payment gateway.
Razorpay Key: Field for entering the Razorpay API key.
Razorpay Secret: Field for entering the Razorpay secret key.
Steps to Configure:
Go to Administration Settings > Payment Methods > Razorpay.
Check Enable Razorpay.
Enter the Razorpay Key and Razorpay Secret.
Click Save.
5. PayPal
Enable PayPal: Checkbox to activate the PayPal payment gateway.
Client ID: Enter the PayPal Client ID.
Client Secret: Enter the PayPal Secret Key.
Steps to Configure:
Go to Administration Settings > Payment Methods > PayPal.
Check Enable PayPal.
Enter the Client ID and Client Secret.
Click Save.
6. Wallet
Enable Wallet: Checkbox to activate the internal wallet system.
No additional configurations required beyond enabling the wallet feature.
7. PayFast
Enable PayFast: Checkbox to activate the PayFast gateway.
Merchant ID: Enter the PayFast Merchant ID.
Merchant Key: Enter the PayFast Merchant Key.
Steps to Configure:
Go to Administration Settings > Payment Methods > PayFast.
Check Enable PayFast.
Enter the Merchant ID and Merchant Key.
Click Save.
8. PayStack
Enable PayStack: Checkbox to activate the PayStack gateway.
PayStack Key: Enter the PayStack API Key.
PayStack Secret: Enter the PayStack Secret Key.
Steps to Configure:
Go to Administration Settings > Payment Methods > PayStack.
Check Enable PayStack.
Enter the PayStack Key and PayStack Secret.
Click Save.
9. FlutterWave
Enable FlutterWave: Checkbox to activate the FlutterWave payment gateway.
Public Key: Enter the FlutterWave Public Key.
Secret Key: Enter the FlutterWave Secret Key.
Steps to Configure:
Go to Administration Settings > Payment Methods > FlutterWave.
Check Enable FlutterWave.
Enter the Public Key and Secret Key.
Click Save.
10. MercadoPago
Enable MercadoPago: Checkbox to activate the MercadoPago payment gateway.
Public Key: Enter the MercadoPago Public Key.
Access Token: Enter the MercadoPago Access Token.
Steps to Configure:
Go to Administration Settings > Payment Methods > MercadoPago.
Check Enable MercadoPago.
Enter the Public Key and Access Token.
Click Save.
11. Xendit
Enable Xendit: Checkbox to activate the Xendit payment gateway.
API Key: Enter the Xendit API Key.
Steps to Configure:
Go to Administration Settings > Payment Methods > Xendit.
Check Enable Xendit.
Enter the API Key.
Click Save.
12. OrangePay
Enable OrangePay: Checkbox to activate the OrangePay gateway.
API Key: Enter the OrangePay API Key.
Steps to Configure:
Go to Administration Settings > Payment Methods > OrangePay.
Check Enable OrangePay.
Enter the API Key.
Click Save.
13. MidTrans
Enable MidTrans: Checkbox to activate the MidTrans payment gateway.
Merchant ID: Enter the MidTrans Merchant ID.
API Key: Enter the MidTrans API Key.
Steps to Configure:
Go to Administration Settings > Payment Methods > MidTrans.
Check Enable MidTrans.
Enter the Merchant ID and API Key.
Click Save.
FAQ#
7. Frequently Asked Questions
7.1. What should I do if I get the error message “Missing project_info object” in my Flutter project?
The error message you’re encountering, “Missing project_info object,” typically arises in Flutter projects when there’s a misconfiguration or missing information related to Firebase services. Here’s how you can troubleshoot and potentially resolve this issue
Solution :
1. Check google-services.json: If you’re using Firebase services in your Flutter app, ensure that you have the google-services.json file placed in the correct location within your Android project. This file contains important configuration information for Firebase services. It should be located in the android/app directory of your Flutter project.
2. Verify Firebase Setup: Double-check that you’ve completed all the necessary steps to set up Firebase for your Flutter project. This includes adding your app to the Firebase project using the Firebase Console, downloading and adding the google-services.json file to your Android project, and configuring Firebase services in your Flutter app’s code (if applicable).
3. Update Google Services Plugin: Ensure that you’re using the latest version of the Google Services Gradle plugin in your Android project. You can check the latest version on the Google Services Gradle Plugin page and update the version number in your android/build.gradle file accordingly.
4. Check Flutter and Firebase Versions Compatibility: Make sure that you’re using compatible versions of Flutter and Firebase. Sometimes, using outdated versions of either can lead to compatibility issues. Refer to the Firebase Flutter documentation and ensure compatibility with your Flutter version.
5. Sync Gradle Files: After making any changes to your Android project configuration, such as updating the google-services.json file or modifying the Gradle build files, make sure to sync your Gradle files in Android Studio. This can be done by clicking on the “Sync Project with Gradle Files” button.
6. Rebuild the Project: After ensuring all configurations are correct, try rebuilding your Flutter project. You can do this by running flutter clean followed by flutter pub get and then rebuilding the project (flutter run or flutter build).
7. Check for Error Logs: Look for more detailed error messages or stack traces in the console output or build logs. These can provide additional clues about the underlying issue causing the “Missing project_info object” error.
Web Documentation#
1. Introduction
Foodie is a revolutionary food delivery app designed to bring a variety of delicious cuisines from multiple restaurants straight to your doorstep. Built with Laravel & Flutter. Foodie offers a seamless and intuitive user experience, making it easier than ever to discover, order, and enjoy your favorite meals from local eateries.
Key Features:
1. Wide Selection of Restaurants: Explore a vast array of restaurants, from local favorites to popular chains, all available at your fingertips.
2. User-Friendly Interface: Enjoy a sleek and intuitive design that makes browsing menus, placing orders, and tracking deliveries effortless.
3. Real-Time Order Tracking: Stay updated with real-time tracking of your order from preparation to delivery, ensuring you know exactly when your food will arrive.
4. Customizable Orders: Personalize your meals with special instructions and dietary preferences to suit your taste and dietary needs.
5. Secure Payment Options: Choose from multiple secure payment methods, including credit/debit cards, digital wallets, and cash on delivery.
6. Exclusive Deals and Discounts: Take advantage of exclusive offers, promotions, and discounts available only through the Foodie app.
7. Easy Reordering: Quickly reorder your favorite meals with just a few taps, thanks to a user-friendly reorder feature.
8. Ratings and Reviews: Make informed decisions with access to detailed ratings and reviews from other Foodie users.
9. 24/7 Customer Support: Receive dedicated support anytime you need assistance, ensuring a smooth and satisfying food delivery experience.
10. Multi-Platform Accessibility: Enjoy Foodie on both Android and iOS devices, with a consistent and optimized performance across platforms.
Why Choose Foodie?
Foodie stands out as a top-tier food delivery app by combining an extensive restaurant selection with a user-centric design, reliable delivery service, and secure payment options. Whether you’re craving a gourmet meal, a quick bite, or something in between, Foodie makes it easy to satisfy your hunger with convenience and style.
Server Requirement#
To run Foodie smoothly, your server must meet the following minimum requirements:
2.1. Prerequisites
Web Server: Apache or NGINX
PHP: Version 8.0 or above
Database: MySQL 5.7+
Composer: For managing PHP dependencies
Domain: Specify your domain name (e.g., example.com) for the application to function properly.
SSL Certificate: Required for secure connections (HTTPS)
FTP: Used for transferring files between local and server environments.
Cron Job: Required for running Laravel scheduled tasks automatically.
2.2. APIs & External Services
Google Maps API Key for Accurate Search Result Required for map display, geolocation, and business search Enable Places, Maps JavaScript, and Geocoding APIs
Google Firebase Account with Upgraded (Blaze) Plan
3.2 : Click on “Go to console” in the top right corner.
3.3 : Click on “Add project”, it will redirect you to the new project creation page Enter your project name and click on “Continue” again click on “Continue” after that select “Default Account fo firebase” and then click on “Create Project”
3.4 : After successfully creating a new project, you will be directed to the overview page. From there, simply navigate to the icons link to proceed further.
Upon redirection, you’ll land on the ‘Add Firebase to your web app’ page. Here, input your app’s nickname and proceed by clicking ‘Register app’. Afterward, scroll down to find detailed information as outlined below.
All of these details will be incorporated into both the app and admin panel documentation for comprehensive reference and seamless integration.
3.5 : Next, navigate to ‘Firestore Database’ in the left sidebar. Select your project name from the drop-down menu, and then proceed by clicking on ‘Create database’.
3.6 : Choose your preferred option and click on the ‘Next’ button. Subsequently, proceed by clicking on “Enable”
3.7 : Following that, locate “Realtime Database” in the left sidebar. Select your project name from the drop-down menu, and proceed by clicking on “Create Database”
3.8 : Choose your preferred option and proceed by clicking the “Next” button, then click on “Enable” to activate the selected feature.
3.9 : Firstore Database Rules Update.
3.10: Upgrade your firebase plan.
See Video:
Admin Panel Setup#
4. Admin Panel Setup (Laravel)
Ensure that your server meets the requirements outlined in the documentation’s Server Requirement section. Upon downloading the code, upload the admin zip file to your server and extract it. The admin panel can be installed on either a domain or a subdomain.
4.1 Connect to FTP and Setup
Follow these instructions to connect to your server using FTP and complete the application setup:
4.1.1. Connect to the server using FTP: Use an FTP client like FileZilla to connect to your server. Enter the server’s IP address, username, and password. Use port 21 for FTP or port 22 for SFTP.
4.1.2. Transfer the ZIP file: Upload your admin panel’s ZIP file to the server’s local path (e.g., /var/www/html).
4.1.3. Unzip the file: Navigate to the file’s location on the server and run the following command to extract the ZIP file: “sudo unzip your-application.zip” or you can do it from cpanel directly.
4.1.4. Update the .env file with your configuration: Modify the database and application settings which are mentioned in the .env file. Below is an example configuration:
4.1.5. Run the following command from the root directory of your admin panel terminal to install Firebase dependency modules required for scheduler functions.
4.1.6. Setup Node Js Path
To get the Node path from the terminal, you typically want to determine the location of Node.js or a specific file related to Node. Here are common ways to do this from the terminal:
To find out where Node.js is installed on your system, you can use the which command (on Linux/macOS):
which node
This will return the full path to the Node.js binary. For example:
/usr/local/bin/node
See this example: In our case, the Node.js path is something like the one below.
Copy this path and update it in your NODE_PATH variable.
4.2. CRON Job Setup
A cron job is a scheduled task in Unix-based operating systems that runs scripts or commands at specified intervals. Here’s how to set up a cron job on a server:
Steps to Set Up a Cron Job:
4.2.1. Log in to cPanel or in your web server 4.2.2. Navigate to the “Cron Jobs” Section 4.2.3. Add a New Cron Job
In the command field, enter the command or the path to the script you want to run.
Ensure the script you’re running has the correct permissions and is executable. You need to specify the correct PHP path (/usr/local/bin/php is common but may vary depending on your server setup) and please use your admin panel path in the CRON JOB command.
4.3 Map Configuration
Please choose your preferred map by navigating to the Admin Panel > General Settings > Map Tracking Options.
Please Note:
Recommended Google Map for accurate location and mapping results.
4.4 Notifications Settings
To work firebase push notification feature functions correctly, please upload your Firebase credentials file in the Admin Panel by navigating to General Settings > Notifications Settings.
Navigate to your Firebase Project Settings > Cloud Messaging. Under Firebase Cloud Messaging API, you will find the Sender ID.
Go to Firebase Project Settings > Service accounts, scroll down and click on the ‘Generate new private key’ button. A JSON file will be downloaded.
Steps to Configure:
To enable real-time push notifications for customers and drivers, you need to connect your application with Firebase Cloud Messaging (FCM).
1.Generate Firebase Credentials File
Go to the Firebase Console.
Select your project.
Navigate to Project Settings > Service Accounts.
Click Generate New Private Key (e.g., firebase-adminsdk-xxxxx.json).
Keep this file safe, as it contains your Firebase API keys and credentials.
2.Upload Firebase Credentials in Admin Panel
Log in to your CabMe Admin Panel
Go to General Settings > Notifications Settings.
Upload the JSON file you downloaded from Firebase
3.Save & Apply Settings
Once uploaded, click Save/Update Settings.
The system will now connect to Firebase for sending push notifications.
4.Verify Push Notifications
Test by creating a new booking from the user app.
The assigned driver should instantly receive a push notification.
Customers will also get updates (ride accepted, driver arriving, ride started, ride completed).
4.5 AI Settings
Please set up your AI settings by navigating to Settings > AI Settings menu
This AI feature enables automatic generation of product information by analyzing the product image along with the provided title and description. It extracts meaningful details and creates structured product data such as enhanced descriptions, specifications, variations and other relevant attributes to help streamline product listing and improve accuracy.
Please add your API Secure Key used in the application for AI features by navigating to Settings > Global Settings menu
4.6 Accessing the Admin Panel
Default Admin User Credentials
URL: Your desired URL where the admin panel is set up. Email: admin@foodie.com Password: 12345678
Admin Panel Menus#
5. Admin Panel Menus Overview
5.1. Dashboard
Provides an at-a-glance overview of the business. Displays analytics such as total customers, registered drivers, completed rides, latest rides, top drivers, and overall earnings overview. Helps admins quickly monitor performance.
5.2. Point of Sale
Point of Sale
Manage in-person or counter sales using the Point of Sale system. This feature allows staff to quickly create orders, add products or services, apply taxes, and process payments in real time. It’s ideal for handling walk-in customers, improving checkout efficiency, and keeping all transactions synchronized with platform order records.
View and manage all orders generated through the Point of Sale system. This section provides access to order details, item breakdowns. It helps track sales activity, resolve disputes, generate reports, and maintain accurate records
5.3. Live Monitoring
Live Tracking
Monitor drivers and vehicles in real time on the map. Useful for managing rides, ensuring driver accountability, and providing live support.
Zone
Service zones allow you to define the exact areas where your platform operates, such as specific cities, regions, or neighborhoods. Within each zone, Additionally, zone-based policies give you flexibility to apply different operational rules for each area, ensuring a more accurate, efficient, and localized service experience.
5.4. Access Management
Access Control
Create and manage admin permission groups (e.g., Super Admin, Editor, Dispatcher). Control what each admin role can view or edit within the system.
5.5. Customer & Vendor Management
Customers / Users
The Customers page allows administrators to view and manage all customer accounts registered through the mobile application. Each profile displays essential details such as personal information, contact data, and account status. Admins can review a customer’s complete ride history, including completed, canceled, and ongoing bookings, to monitor activity and resolve issues quickly. Ensuring better coordination and customer support. This page also provides the ability to edit or deactivate accounts, helping maintain a secure and well-managed user base.
Owners / Vendors
This section enables administrators to manage all restaurant owners or vendors on the platform. You can view, add, edit, or remove vendor profiles and verify their business details such as name, contact information, address, and commission setup. The module includes submenus like Approved and Pending, allowing admins to easily review new vendor requests and approve or reject them based on verification. Approved vendors are fully active on the platform, while pending ones await admin confirmation. This structure ensures smooth onboarding and efficient vendor management.
5.6. Restaurant & Driver Management
Restaurant
This section allows administrators to manage the food menus associated with each vendor. It displays all menu items added by vendors, including details such as item name, category, price, description, and availability status. Admins can add, edit, or remove items and ensure that each menu complies with platform standards. The menu list is organized by vendor, making it easy to manage specific restaurants individually. This helps maintain accurate and up-to-date menu information across all vendors.
Drivers
This section allows administrators to manage all delivery drivers associated with the platform. It includes options to view, add, edit, or remove driver profiles and verify essential details such as contact information, vehicle type, and license documents. Admins can monitor driver availability, track their activity, and manage their approval status. The module may also include submenus like Approved and Pending for easy driver verification and onboarding. This ensures a reliable and efficient delivery network for all orders.
Documents
The Driver Documents page allows administrators to define and manage the documents required for verification of individual drivers and fleet owners. Admins can add new document types, such as Aadhaar Card, PAN Card, Driver License, or other ID proofs, and specify which documents must be uploaded during verification. This ensures that all necessary documentation is collected to maintain compliance, authenticity, and safety on the platform.
5.7. Report & Analytics
Reports
The Reporting and Analytics section in the admin panel provides comprehensive insights into platform activity, allowing administrators to monitor performance, make data-driven decisions, and identify trends. Reports can be customized using various filters and options to generate precise and actionable information. Key options include:
Restaurant: Filter reports by the restaurant.
Driver: Filter reports by the driver.
Date Options: Quickly generate reports based on preset time frames like Today, This Week, This Month, or This Year.
File Format: Export reports in multiple formats such as XLS, CSV, or PDF for offline analysis, record-keeping, or sharing with stakeholders.
Sales Reports
This section provides a detailed overview of the platform’s sales performance and transaction history. Administrators can track total orders, revenue, commissions, and payment summaries over specific date ranges. Reports can be filtered by vendor, customer, or delivery type for deeper insights. It helps analyze business trends, monitor growth, and identify top-performing vendors or menu items. The data can also be exported for accounting or financial analysis, ensuring complete transparency and accurate record-keeping.
Tax Reports
This section provides a comprehensive overview of all taxes collected across the platform. Administrators can track taxes on orders, products, delivery fees, packing charges, platform fees, admin commissions, and vendor subscriptions over specific date ranges. Reports can be filtered by tax type for more detailed insights. It helps analyze tax liabilities, monitor compliance, and ensure accurate calculation of taxes owed for admin income. The data can also be exported for accounting or regulatory reporting, providing complete transparency and precise record-keeping.
5.8. Menu & Food Management
Categories
This section allows administrators to manage all food categories displayed on the platform. Admins can create, edit, or delete categories and assign them to specific vendors or menu items. Each category can include details such as name, image, and description to help organize the menu structure. Proper category management ensures a smooth browsing experience for users and helps vendors list their items under the right sections. It maintains consistency and easy navigation across all restaurant menus.
Foods
This section enables administrators to manage all food items added by vendors across the platform. Admins can view, add, edit, or delete food items and verify details such as name, category, price, description, and availability. Each item can be linked to a specific vendor and category for better organization. The section ensures that all listed foods meet quality and platform standards. It helps maintain accurate, updated, and well-structured menus for users to browse and order from.
Attributes
This section allows administrators to manage both Food Attributes and Review Attributes used across the platform. Food Attributes define item variations such as size, flavor, spice level, or add-ons that enhance customization for customers. Review Attributes help categorize feedback criteria like taste, packaging, delivery, or service quality for more detailed user reviews. Admins can add, edit, or delete these attributes and assign them to specific food items or categories. This ensures better menu flexibility and more structured, insightful customer feedback.
Bulk Import Foods
This section allows administrators to upload multiple food items at once using a CSV file, streamlining the process of adding products to the platform. Restaurants can quickly import their menu items, including details like name, price, category, and attributes, without manually creating each entry. Admins can manage the import process, ensure data accuracy, handle errors, and make it easier for restaurants to keep their stores updated efficiently.
5.9. Business Setup
Subscription Plan
This section allows administrators to manage subscription plans specifically designed for vendors. Admins can create, edit, or delete plans and define details such as plan name, duration, price, and included features. Each plan may offer different benefits, such as the number of items a vendor can list, priority in search results, or reduced commission rates. This helps create a structured and scalable business model while giving vendors flexible options to choose from based on their needs.
5.10. Order & Promotions Management
Orders
This section allows administrators to view and manage all customer orders placed through the platform. It provides detailed information such as order ID, customer details, vendor name, driver assignment, payment status, and delivery progress. Admins can track order statuses like pending, accepted, preparing, on the way, and completed. The section also includes options to update or cancel orders if necessary. This centralized order management ensures smooth coordination between vendors, drivers, and customers for timely and accurate deliveries.
Deliveryman
This section is dedicated to managing delivery personnel assigned directly by individual restaurants using the self-delivery feature. Admins can view, add, edit, or remove deliverymen linked to specific vendors. Each deliveryman profile includes details like name, contact information, and delivery status. This feature allows restaurants to handle their own deliveries instead of relying on platform-wide drivers. It ensures flexibility for vendors who prefer managing their own delivery operations while still maintaining visibility and control through the admin panel.
Giftcards
This section allows administrators to manage digital gift cards available on the platform. Admins can create, edit, or delete gift cards and set details such as card value, validity period, and usage limits. Customers can purchase these cards and use them as a payment method or share them with others. The system tracks each gift card’s balance and redemption history for transparency. This feature helps boost customer engagement, encourage repeat purchases, and provide users with a convenient gifting option.
Coupons
This section enables administrators to create and manage discount coupons that customers can apply during checkout. Admins can define coupon codes, discount types (percentage or fixed amount), validity dates, usage limits, and applicable vendors or categories. Coupons can be used to promote sales, attract new customers, or reward loyal users. The system automatically validates coupon eligibility during order placement. This feature helps improve customer retention and boost overall sales through targeted promotional offers.
Cashback
This section allows administrators to manage cashback offers and rewards for customers based on their orders or specific promotions. Admins can set cashback percentage or fixed amounts, define eligibility criteria, and configure minimum order values or vendor-specific campaigns. Once an order qualifies, the cashback amount is automatically credited to the customer’s wallet. This feature encourages repeat purchases, enhances user satisfaction, and helps drive customer loyalty through rewarding incentives.
Advertisements
This section allows administrators to manage promotional advertisements displayed across the platform. Admins can create, edit, or remove ads and define details such as title, banner image, duration, and display position (e.g., homepage). Advertisements can be linked to specific vendors, offers, or products to drive visibility and engagement. This feature helps generate additional revenue and provides vendors with opportunities to promote their businesses effectively.
Documents
This section allows administrators to manage and verify the documents required from vendors for account approval. Admins can define mandatory document types such as business licenses, ID proofs, tax certificates, or food safety permits. Vendors must upload these documents during registration or verification. Admins can review, approve, or reject submissions to ensure compliance with platform standards. This process helps maintain authenticity, trust, and regulatory compliance among all registered vendors.
5.11. Notifications Management
This section allows administrators to manage and send notifications to users, vendors, or drivers across the platform. Admins can create, edit, or schedule notifications for important updates, promotions, or system alerts. Notifications can be sent via push, email, or in-app messages, ensuring timely communication. The module also allows filtering by user type or region for targeted delivery. This feature helps keep all participants informed and engaged with the latest announcements and offers.
5.12. Help & Support
This section provides a centralized space for managing user inquiries, complaints, and support requests. Admins can view, respond to, and resolve tickets submitted by customers, vendors, or drivers. It may include categories such as general queries, order issues, payments, or technical assistance. The system helps track the status of each request to ensure timely resolutions. This feature enhances user satisfaction by maintaining effective communication and reliable customer support across the platform.
5.13. Disbursements
This section allows administrators to manage and track payment disbursements made to vendors and drivers. Admins can view payout details such as total earnings, commission deductions, payment status, and transaction history. The system supports both manual and automated payouts, ensuring accurate and timely settlements. Separate records for vendors and drivers help maintain clear financial tracking. This feature ensures transparency, simplifies financial management, and builds trust among platform partners.
5.14. Design and Content Management
Banner Items
This section allows administrators to manage promotional banners displayed across the platform, such as on the homepage or category pages. Admins can create, edit, or delete banner items and define details like title, image, link type (vendor, food item, or custom URL), and display order. Banners help highlight featured restaurants, special offers, or seasonal promotions. This feature enhances the platform’s visual appeal and drives user engagement by directing customers toward key deals and listings.
CMS Pages
This section allows administrators to create and manage static content pages across the platform, such as About Us, Privacy Policy, Terms & Conditions, or FAQs. Admins can easily add, edit, or delete pages using a built-in editor and control where each page appears on the website or app. The system ensures that important informational content remains up-to-date and consistent. This feature helps maintain transparency, improve user trust, and provide essential details for customers, vendors, and drivers.
Onboarding Screens
This section allows administrators to manage the introductory screens displayed to users when they first open the app. Admins can create, edit, or delete onboarding slides and define content such as titles, descriptions, and images. These screens help introduce key features, explain app functionality, and guide new users through the platform. The section ensures a smooth and engaging first-time experience, helping users understand the app’s value and navigation before they start using it.
Email Templates
This section allows administrators to manage predefined email templates used for automated communication across the platform. Admins can create, edit, or customize templates for various events such as user registration, order updates, password resets, vendor approvals, or promotional offers. Each template can include dynamic variables to personalize the content. This feature ensures consistent, professional, and efficient communication with users, vendors, and drivers, enhancing engagement and maintaining a unified brand tone.
5.15 Settings
Global Settings
The Global Settings page allows administrators to configure all core settings for the app and overall platform operations. These settings ensure the platform runs smoothly, maintains consistent branding, and meets operational requirements.
Admins can define the basic platform appearance and identity:
Title & Footer: Customize the platform’s name and footer text.
App Color, Admin Panel Colors: Set color schemes for both mobile app and admin panel for consistent branding.
Radius: Configure service coverage radius for rides.
Logo: Upload platform or company logo for display across app and admin panel.
etc.
Currencies Settings
This section allows administrators to manage the currency configuration used across the platform. Admins can add, edit, or delete currencies and define details such as currency code, symbol, exchange rate, and default status. The system ensures that all prices and transactions are displayed in the correct currency format. This feature is especially useful for platforms operating in multiple regions, ensuring accurate and consistent financial representation throughout the system.
Payment Method
The Payment Methods page allows administrators to configure and manage the payment options available on the platform. Admins can enable or disable various gateways, including Cash, Stripe, PayPal, Razorpay, and Wallet payments, ensuring flexibility for both customers and drivers. This page ensures secure and seamless transactions, helps accommodate user preferences, and provides control over which payment methods are active for rides. Proper configuration also enables smooth reconciliation of payments and supports accurate financial reporting.
Business Model Settings
The Business Model Settings page allows administrators to define how the platform generates revenue from drivers and fleet owners. Admins can choose between different earning models:
Commission Model: The platform earns a percentage of each completed ride transaction.
Subscription Model: Drivers or fleet owners pay a recurring subscription fee to access the platform’s services.
Hybrid Model: Combines both commission and subscription-based earnings, allowing flexible revenue strategies.
This page ensures that the platform’s revenue model aligns with business objectives and provides flexibility to adapt to market demands or strategic changes. Administrators can adjust settings easily to implement the chosen model across all services.
Radius Configurations
This section allows administrators to define the delivery and service radius settings for vendors and drivers. Admins can set the maximum distance within which orders can be accepted or deliveries can be made. This helps control service coverage areas and ensures efficient delivery operations. The configuration can also be adjusted based on vendor location or city requirements. This feature optimizes order management, reduces delivery delays, and maintains a smooth user experience by limiting service to feasible distances.
Dine-In Feature Settings
This section allows administrators to configure and manage the dine-in option for restaurants that offer on-premise dining. Admins can enable or disable the dine-in feature for specific vendors, set table booking preferences, and define time slots or seating limits. It may also include settings for QR-based menu access or in-restaurant order management. This feature provides flexibility for restaurants to manage both online and offline dining experiences efficiently, ensuring better control and customer convenience.
Schedule Order Notification
Schedule Notification Settings allow administrators to configure automated notifications for upcoming rides. They can set the timing of alerts to be sent to users and drivers, such as 1 day, several hours, or minutes before the ride. This ensures timely reminders, reduces missed bookings, and enhances overall communication and service reliability.
Tax Settings
The Tax Settings page allows administrators to configure taxes applicable across all services. Admins can define tax types such as GST, VAT, or other local taxes and specify rates for each service category. This page ensures that all fare calculations include accurate tax amounts, maintains compliance with local tax regulations, and provides transparency for customers and drivers. Proper tax configuration also helps in generating accurate financial reports and simplifies accounting and regulatory reporting. Now supports scope options: Product Level, Order Level, Tax on Delivery Fee, Tax on Packing Charge, and Tax on Platform Fee, along with country-wise tax.
Please Note:
Admin Commission Tax and Vendor Subscription Tax is used only for admin tax reports to calculate taxes on income.
Admins can also select which tax scope applies for users, allowing flexibility to apply taxes at either the product level or order level. Also Platform Fee and Packing Charge is enabled, the configured tax will also apply to these components. This setting located under Settings > Global Settings
Delivery Charge
This section allows administrators to configure how delivery charges are calculated across the platform. Admins can set fixed delivery fees, distance-based rates, or vendor-specific charges depending on business needs. Additional options may include minimum order value for free delivery. These settings help maintain fairness and flexibility in pricing for both customers and vendors. This feature ensures transparent delivery cost management while optimizing logistics and profitability.
AI Settings
This section allows administrators to manage AI-powered features integrated into the platform using OpenAI. It enables the automatic generation of complete product details — including descriptions, keywords, and specifications — based on the product title and an uploaded image. Admins can configure the API key, control AI usage limits, and adjust feature availability. This feature streamlines the product creation process, saving time for vendors while ensuring high-quality and consistent product data across the platform.
Document Verification
This section allows administrators to enable or disable the document verification requirement for vendors and drivers. When enabled, vendors and drivers must upload mandatory documents such as ID proof, licenses, or certifications before their accounts can be approved. Admins can configure verification rules separately for each user type and review uploaded files from the admin panel. This feature ensures platform authenticity and compliance while offering flexibility to simplify onboarding when verification is not required.
Languages
The Languages page allows administrators to manage the languages available in the admin panel. Admins can add new languages, edit existing translations, and update labels or messages to ensure the interface is accessible to a diverse team. This page helps maintain consistency across the admin panel, supports multi-lingual operations, and ensures that administrators can efficiently manage the platform in their preferred language.
Special Offer
This section allows administrators to manage promotional offers and limited-time deals available to customers. To manage special offers and define details such as discount percentage, validity period, and applicable vendors or menu items. This feature helps boost sales, promote specific restaurants or products, and enhance customer engagement through exclusive discounts and time-sensitive promotions.
Cashback Offer Setting
This section allows administrators to configure cashback offers and promotional reward settings for customers. Admins can define cashback type (percentage or fixed amount), minimum order value, maximum cashback limit, and eligible vendors or categories. The system automatically credits the cashback to the customer’s wallet after a successful order. This feature helps increase user retention, encourage repeat purchases, and drive more engagement by rewarding customers with attractive cashback incentives.
Terms & Conditions
The Terms & Conditions page allows administrators to create, update, and maintain the legal agreements displayed to users within the app. Admins can edit content to reflect company policies, service rules, and regulatory requirements, ensuring that users are informed about their rights and obligations. This page helps maintain legal compliance, provides transparency, and protects both the platform and its users by clearly communicating the terms of service.
Privacy Policy
The Privacy Policy page allows administrators to create, update, and maintain the privacy policy content displayed to users within the app. Admins can ensure the policy complies with regulations such as GDPR and local data protection laws, clearly explaining how user data is collected, stored, and used. This page helps build trust with users, maintain legal compliance, and provide transparency regarding data privacy and security practices.
Landing Page Template
The Landing Page Template page allows administrators to manage and customize the public-facing landing page of the web panel. Admins can update banners, text content, images, and branding elements to reflect current promotions, company identity, or seasonal campaigns. This page provides control over the look and feel of the landing page, ensuring it is visually appealing, informative, and aligned with marketing objectives. It helps attract new users, communicate key messages effectively, and maintain a professional online presence.
Footer Template
Footer Template allows administrators to customize the bottom section of the web application. This includes configuring links, contact information, social media icons, copyright text, and other elements visible to users. It ensures a consistent, branded interface and provides easy access to important information and resources across the website.
Firestore Database Collection Import / Export#
Firestore Database Collection Import / Export
To perform Firebase Collection Import Export, follow these straightforward steps:
6.1. To set up NPM on your computer, download Node.js from the following link: https://nodejs.org/en/download/ Node.js Download Page.
6.2. Unzip the source code file named “Firebase Import Export Collections.zip”
6.3. If you haven’t already created a Firebase project, set it up now.
6.4. Configure the credentials.json file, which you can obtain from your Firebase Project settings. Then navigate to the Service account, then select Node.js. Generate a new private key and wait until the key is created. It will automatically download and replace the current credentials.json file.
6.5. Navigate to the extracted Firebase Import Export Collections zip file path and then press and hold the Ctrl+Shift buttons. While holding them, right-click the mouse button, and select “Open PowerShell window here” from the context menu. This will open a PowerShell window where you can run the import/export command.
6.6. Execute the following commands to perform import/export operations for collections:
To import all collections, execute the following command:
To export all collections, execute the following command:
Once the export command is executed, the collections.json file will be downloaded.
Important Notes:
Prior to executing the above command, ensure that you have correctly updated your Firebase credentials in the credentials.json file.
See Video:
Deploy Firebase Cloud Functions#
7. Deploy Firebase Cloud Functions
All the necessary Firebase Functions have been initially coded by us, you just need to deploy these functions to your own Firebase account. This means that you need to upload the source code inside the Firebase Functions folder to your account. If a Firebase account has been created, find a Firebase project, and 2 apps (iOS and Android)
7.1. Setting up Node.js and the Firebase CLI
For comprehensive guidance, refer to the official Firebase documentation on getting started: “Write, test, and deploy your first functions” in Cloud Functions for Firebase.
You’ll need Node.js and the Firebase CLI to write functions and deploy them to Cloud Functions.
To set up NPM on your computer, download Node.js from the following link: Node.js download. Once Node.js is installed, proceed to install the Firebase CLI.
Use the following command to install the CLI via npm:
npm install -g firebase-tools
If you’ve already set up the Firebase tools, you can simply run the following command:
npm install
These steps will ensure you’re ready to start writing and deploying functions with Firebase. If you encounter any issues, consult the Firebase documentation for troubleshooting assistance.
7.2. Initialize your project
To initialize the project, authenticate the Firebase tool by running the following command. You’ll be prompted to log in to your account via your web browser:
firebase login
7.3. Implementing Cloud Functions
Since we’re providing the complete source code for your Firebase Cloud Functions:
Extract the zip file Order Tracking Firebase Function.zip
Fill in the necessary credentials in the following files located within the zip:
.firebaserc (Add your Firestore Project ID)
index.js (Add your Firestore database URL)
serviceAccountKey.json (Add your Firebase service account credentials)
With these steps, you’ve successfully set up the required credentials.
7.4. Deploy Firebase Functions
Simply run the following command in the Order Tracking Firebase Function > functions directory.
firebase deploy --only functions
Now you can go to your Firebase Console and check, as the functions have been deployed. It is possible to see the logs for each function, understand the output, and know when it gets called.
8.2. Unzip the source code file named “Firebase Indexing.zip” here.
8.3. Navigate to the extracted directory of “Firebase Indexing” zip file. Press and hold the ctrl+shift buttons, then right-click the mouse button. From the context menu, select “Open PowerShell window here” to launch Windows PowerShell and execute import/export commands.
8.4. Execute the command firebase login to log in to Firebase, if you haven’t already done so.
8.5. Execute the command firebase init
8.6. Proceed with Y and press the enter button.
8.7. Choose the Option > Firestore: Configure security rules and index files for Firestore.
Important Notes:
Choose the arrow down key to navigate and select options, and press the space button to confirm your selection.
8.8. Choose the Option > Use an existing project.
8.9. Choose your project
8.10. Press Enter > ? What file should be used for Firestore Rules? firestore.rules
8.11. Press Enter > ? What file should be used for Firestore indexes? (firestore.indexes.json)
8.12. Now, the firestore.indexes.json file will be downloaded. Open this file and copy all the code from firestore_indexes.json file, then paste it into firestore.indexes.json file.
8.13. Now execute the command firebase deploy --only firestore:indexes to import indexing in firestore.
See Video:
Restaurant Panel Setup#
9. Restaurant Panel Setup
9.1 Connect to FTP and Setup
Follow these instructions to connect to your server using FTP and complete the application setup:
9.1.1. Connect to the server using FTP: Use an FTP client like FileZilla to connect to your server. Enter the server’s IP address, username, and password. Use port 21 for FTP or port 22 for SFTP.
9.1.2. Transfer the ZIP file: Upload your restaurant panel’s ZIP file to the server’s local path (e.g., /var/www/html).
9.1.3. Unzip the file: Navigate to the file’s location on the server and run the following command to extract the ZIP file: “sudo unzip your-application.zip” or you can do it from cpanel directly.
9.1.4. Update the .env file with your configuration: Modify the database and application settings which are mentioned in the .env file. Below is an example configuration:
Please Note:
Add Your Google Client ID for Google Login Functionality To enable Google login, you need to provide your Google Client ID.
Steps to find your Google Client ID:
Go to your Firebase Project in the Firebase Console.
Navigate to Authentication > Sign-in Method.
Click on Google under the list of providers.
Scroll down to Web SDK configuration.
Copy the Web Client ID.
Paste this Client ID in the env file of the restaurant panel.
GOOGLE_CLIENT_ID=
Steps to Check/Add Authorized Domains for OAuth 2.0 Client ID
Provides an at-a-glance overview of the vendor’s business operations. Displays analytics such as total drivers, active orders, completed orders, ongoing orders, latest orders, top-performing drivers, and overall earnings summary. Helps vendors quickly monitor performance, track fleet efficiency, and make informed operational decisions.
9.2.2. Point of Sale
Manage in-person or counter sales using the Point of Sale system. This feature allows staff to quickly create orders, add products or services, apply taxes, and process payments in real time. It’s ideal for handling walk-in customers, improving checkout efficiency, and keeping all transactions synchronized with platform order records.
9.2.3. POS Orders
View and manage all orders generated through the Point of Sale system. This section provides access to order details, item breakdowns. It helps track sales activity, resolve disputes, generate reports, and maintain accurate records
9.2.4. Document Verification
Document Verification allows vendors to securely upload and submit required documentation for approval. This can include identity proof, business licenses and other necessary certificates. The system ensures that all submitted documents are verified before activating the vendor’s account, helping maintain compliance, safety, and trust on the platform.
9.2.5. Change Subscription
The Change Subscription feature allows vendors to upgrade, downgrade, or switch their current subscription plan. It provides details of available plans, pricing, features, and renewal options. This helps vendors select the most suitable plan for their business needs, ensuring access to desired features and optimal platform usage.
9.2.6. My Subscriptions
The My Subscriptions section allows owners to view and manage their active subscription plans on the platform. It displays details such as subscription type, start and expiry dates, features included, payment history, and renewal options. This helps owners keep track of their plan benefits, ensure uninterrupted access to platform services, and manage upgrades or renewals efficiently.
9.2.7. My Restaurant
This section allows restaurant owners to manage all key details of their own restaurant from the vendor panel. Owners can update basic information such as name, logo, address, contact details, operating hours, and delivery settings. It also includes options to configure tax details, delivery radius, and restaurant status (open/closed). This section ensures that vendors can easily keep their restaurant information accurate and up to date, helping maintain consistency across listings and improving customer trust.
9.2.8. Foods
This section allows owners to manage all the food items listed under their restaurant. Vendors can add, edit, or delete menu items and define details such as name, category, price, description, image, and availability status. They can also manage add-ons or variations like size and flavor. This section helps restaurants keep their menus organized, accurate, and appealing to customers, ensuring that available dishes are always up to date for online ordering. Additionally, vendors can access and add food items imported by the admin through the Import Foods from Global Menu, allowing them to quickly populate their store with pre-created products.
9.2.9. Orders
This section allows owners to view and manage all customer orders received by their restaurant. Vendors can track order details such as customer information, order items, total amount, payment status, and delivery type. They can update order statuses — for example, accepted, preparing, ready for pickup, or delivered — in real time. The section also supports order cancellation and delivery assignment. This feature ensures smooth order processing, efficient communication, and timely service for customers.
9.2.10. Book Table / DINE IN History
This section allows restaurant owners to manage all table booking and dine-in requests made by customers. Vendors can view booking details such as customer name, contact information, number of guests, date, and time slot. They can confirm, modify, or cancel reservations directly from this panel. The history view helps track past and upcoming dine-in bookings for better management. This feature ensures organized table scheduling, reduces overlaps, and enhances the overall dine-in experience for customers.
9.2.11. Book Table / DINE IN History
This section allows restaurant owners to manage all table booking and dine-in requests made by customers. Vendors can view booking details such as customer name, contact information, number of guests, date, and time slot. They can confirm, modify, or cancel reservations directly from this panel. The history view helps track past and upcoming dine-in bookings for better management. This feature ensures organized table scheduling, reduces overlaps, and enhances the overall dine-in experience for customers.
9.2.12. Coupons
This section allows restaurant owners to create and manage discount coupons for their customers. Vendors can define coupon codes, discount types (percentage or fixed), minimum order values, validity periods, and usage limits. Coupons can be applied to specific menu items or the entire restaurant. This helps attract new customers, boost repeat orders, and promote special offers or events. The system automatically validates coupons during checkout, ensuring a smooth and rewarding experience for users.
9.2.13. Advertisements
This section allows restaurant owners to create and manage advertisements to promote their restaurant or specific menu items. Vendors can upload banner images, set titles, add links, and choose where the ads will appear on the platform (such as homepage or category sections). They can also define the duration and visibility of each advertisement. This feature helps restaurants increase visibility, attract more customers, and highlight special offers or new dishes effectively.
9.2.14. Deliveryman
This section allows restaurant owners to manage their own delivery staff when using the self-delivery option. Vendors can add, edit, or remove deliverymen and assign them to specific orders. Each deliveryman profile includes details such as name, contact information, and current status (available, busy, or inactive). Restaurant owners can track delivery performance and ensure timely order completion. This feature provides flexibility for restaurants that prefer to handle deliveries independently rather than relying on the platform’s driver network.
9.2.15. Payments
This section allows restaurant owners to view and manage their earnings and payout history. Vendors can track total revenue, completed payouts, pending balances, and commission deductions. The system provides detailed transaction records, including payout dates, amounts, and payment methods. Restaurant owners can also request withdrawals if manual payouts are enabled. This feature ensures full transparency of financial transactions and helps vendors monitor their income efficiently.
9.2.16. Withdrawal Methods
This section allows restaurant owners to set up and manage their preferred payment methods for receiving payouts. Vendors can add or edit withdrawal options such as bank transfer, PayPal, or other supported methods by providing the necessary account details. Admins may review and approve these methods for security purposes. Having multiple withdrawal options ensures flexibility and convenience for vendors, allowing them to receive their earnings quickly and securely.
9.2.17. Wallet Transactions
This section allows restaurant owners to view all wallet-related activities within their account. Vendors can track credit and debit transactions such as received payments, cashback, order adjustments, and withdrawals. Each transaction includes details like date, description, amount, and balance updates. This transparent record helps vendors monitor their financial flow in real time. The feature ensures accurate accounting and provides a clear overview of all wallet movements for better financial management.
Website Panel#
10. Website Panel Setup
10.1 Connect to FTP and Setup
Follow these instructions to connect to your server using FTP and complete the application setup:
10.1.1. Connect to the server using FTP: Use an FTP client like FileZilla to connect to your server. Enter the server’s IP address, username, and password. Use port 21 for FTP or port 22 for SFTP.
10.1.2. Transfer the ZIP file: Upload your web panel’s ZIP file to the server’s local path (e.g., /var/www/html).
10.1.3. Unzip the file: Navigate to the file’s location on the server and run the following command to extract the ZIP file: “sudo unzip your-application.zip” or you can do it from cpanel directly.
10.1.4. Update the .env file with your configuration: Modify the database and application settings which are mentioned in the .env file. Below is an example configuration:
Important Notes:
Add Your Google Client ID for Google Login Functionality To enable Google login, you need to provide your Google Client ID.
Steps to find your Google Client ID:
Go to your Firebase Project in the Firebase Console.
Navigate to Authentication > Sign-in Method.
Click on Google under the list of providers.
Scroll down to Web SDK configuration.
Copy the Web Client ID.
Paste this Client ID in the env file of the web panel.
GOOGLE_CLIENT_ID=
Steps to Check/Add Authorized Domains for OAuth 2.0 Client ID