GroceryHub: 10 Minute Demo App App | React Native + Web | Admin Panel + Seller Panel

Introduction

Overview of GroceryHub: 10 Minute Demo App | The Ultimate Multi Vendor Grocery Solution

GroceryHub: 10 Minute App is a is a complete Quicke Commerce & eCommerce multi-vendor grocery solution designed for seamless online shopping and efficient order management. With location-based ordering, a smart multi-cart system, and admin-controlled cart restrictions, GroceryHub: 10 Minute App ensures a smooth shopping experience. It features a flexible return system, multiple payment gateways, and diverse delivery options, including scheduled delivery, standard delivery, and self-pickup. Whether you're launching a grocery marketplace or optimizing operations, GroceryHub: 10 Minute App is your all-in-one eCommerce solution.

This documentation offers a comprehensive overview of the system, outlining key processes for easy comprehension. The platform features a user-friendly admin panel and landing page, ensuring seamless operation without the need for coding skills. Additionally, it supports multiple automated online payment gateways, enabling effortless global transactions.

Thank you for choosing GroceryHub: 10 Minute App! If you have any questions not covered in this documentation, feel free to contact us via email(support@apksoftwaresolution.com). We’re always here to help and will respond as quickly as possible. Thanks again!

React Native App Installation Requirements

Below are the requirements needed to set up and install a React Native app.

The installation requirements outlined below are essential for developing and running React Native apps seamlessly. Ensuring these prerequisites are met will help maintain optimal performance and compatibility. Please verify that your environment meets these requirements before proceeding.

Node Js (LTS version-> 22.13.1)
VS Code (for Android development-> Ladybug Feature Drop | 2024.2.2)
Xcode (for iOS development-> 16)
VS Code (Recommended IDEs)
Java JDK 17 or later (for Android builds)
Internet connection (for package and plugin downloads)
Sufficient storage (at least 10GB free space)
Minimum 8GB RAM (16GB recommended)

Installation

Application installation process

Setting up React Native and VS Code is straightforward and can be completed in a few simple steps. Our setup guide is designed to make the process seamless and efficient, ensuring a smooth start for your development environment.

Installation Steps:

Download and Install Node.js (v20): Visit the official Node.js website and download the latest LTS version (v20). Install it and verify the installation using:
```
node -v
```
```
npm -v
```
Download and Install Java 17: Visit the official AdoptOpenJDK website and download Java 17. After installation, set the JAVA_HOME environment variable:
- For Windows: Open the System Properties → Advanced → Environment Variables → click New under System Variables, then add:
```
JAVA_HOME=C:\Program Files\AdoptOpenJDK\jdk-17
```
  (Ensure the path matches where your JDK is installed).
- For macOS/Linux: Add the following line to your `.bash_profile` or `.zshrc` file:
```
export JAVA_HOME=$(/usr/srcexec/java_home -v 17)
```
  Then run:
```
source ~/.bash_profile
```
After setting it, verify by running:
```
java -version
```
Download and Install VS Code (Ladybug): Visit the official VS Code website and download the latest version. During the installation, ensure you install Android SDK and Android Virtual Device (AVD).
Set up the following Android SDK environment variables:
- For Windows: Open System Properties → Advanced → Environment Variables → click New under System Variables, then add:
```
ANDROID_HOME=C:\Users\YourName\AppData\Local\Android\Sdk
```
  (Ensure the path matches where your Android SDK is installed).
- For macOS/Linux: Add the following lines to your `.bash_profile` or `.zshrc` file:
```
export ANDROID_HOME=$HOME/Library/Android/sdk
```
```
export PATH=$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools:$PATH
```
  Then run:
```
source ~/.bash_profile
```
Once installed, you can verify the SDK by running:
```
android-sdk --version
```
Download and Install Xcode (macOS only): Visit the official Xcode website or open the Mac App Store, search for "Xcode," and install it. After installation, verify by running:
```
xcode-select --version
```
Also, ensure that the command line tools are installed by running:
```
xcode-select --install
```
Download and Install Visual Studio Code (VSCode): Visit the official VSCode website and download the version for your operating system. After installation, open VSCode and install the following extensions:
- React Native Tools
- ESLint
Install React Native CLI: Open a terminal/command prompt and install React Native CLI globally using the following command:
```
npm install -g react-native-cli
```
Install Watchman (macOS only): Watchman is necessary for React Native to efficiently watch for file changes on macOS. Install it with Homebrew:
```
brew install watchman
```
Initialize a New React Native Project: Run the following command to create a new React Native project:
```
npx react-native init ProjectName
```
Once the project is created, navigate to the project folder:
```
cd ProjectName
```
Run the Project on Android and iOS:
For Android: Run the following command to start the Android emulator and launch your app:
```
npx react-native run-android
```
For iOS (macOS only): Run the following command to start the iOS simulator and launch your app:
```
npx react-native run-ios
```

Folder Structure

Important details about the application folder structure

After installation, your project folder will contain essential directories and files necessary for the proper functioning of the React Native application.

src
- assets
  - fonts
  - images
- constant
- context
- navigation
- screens
- store
  - action
  - reducer
- Root.js
- styles.js
app.js
index.js

The assets folder contains all essential assets such as images and fonts. This is the folder to use if you need to add or update any images or custom fonts.

The src folder is the main directory for all Dart code in the application. It is typically organized into subfolder such as core for utility files and dependencies, data for managing API calls and local data sources, and view for UI components and screens.

The main.dart file is the entry point of the React Native application where the app's root widget and initial setup are defined.

Change App Name

App name change overview

For Android:
- Open the Android project in VS Code.
- Update the package name in the `AndroidManifest.xml` file located at android/app/src/main/res/values/strings.xml.
For iOS:
- Update the bundle identifier in the `Info.plist` file located at ios/Runner/Info.plist.

Change Google Map API Key

Steps to update the Google Map API key for both Android and iOS platforms.

You can update the Google Map API key for both Android and iOS by following these steps:

For Android:
- Open the android/app/src/main/AndroidManifest.xml file.
- Locate the <meta-data> tag with the name com.google.android.geo.API_KEY.
- Update the android:value attribute with your new Google Maps API key.
- Save the file and rebuild your Android project to apply the changes.
For iOS:
- Open the ios\Runner\AppDelegate.swift file.
- Locate the GMSServices.provideAPIKey and update its value with your new Google Maps API key.
- Save the file and rebuild your iOS project to apply the changes.

Change App Icon

App icon change overview

For Android:
- Prepare the icon images in various sizes (e.g., 48x48, 72x72, etc.).
- Navigate to the `res` directory at android/app/src/main/res/.
- Replace the default icons in the `mipmap-*` directories with your new app icon files (e.g., mipmap-hdpi/ic_launcher.png).
- Ensure that you follow the required naming conventions for different densities (e.g., `mipmap-mdpi`, `mipmap-hdpi`, `mipmap-xhdpi`, etc.).
- Update the icon in the AndroidManifest.xml file if necessary.
For iOS:
- Prepare the app icon images in multiple sizes (e.g., 60x60, 120x120, 180x180, etc.).
- Open the iOS project in Xcode.
- Navigate to the Assets.xcassets folder in the project navigator.
- Locate the `AppIcon` set and drag your new icon images into the appropriate boxes for different sizes (e.g., 60pt, 120pt, etc.).
- Ensure that the icon set includes all required sizes for both iPhone and iPad.

Change Base URL

Overview of how to change the base URL for your app's API requests.

For Both Android and iOS:
- Open the `src` directory of your React Native project.
- Locate the file src\constant\url.js.
- In this file, define the domain URL for your API requests (e.g., static const String domainUrl = 'https://admin.yourdomain.com/';).
- Ensure all network calls use this base URL for making API requests throughout the app.

Change Package Name

Overview of how to change the package name for both Android and iOS in your React Native app.

Open only Customer project in VS Code. (make sure there is no other project is open in smae vs code window)
Press CTRL + Shift + h in window or Press Alt + Shift + h in Mac:
In search tab enter com.apksoftwaresolution.grocerycustomer
In replace tab enter YOUR_PACKAGE_NAME
Then click on replace all button

How to Change App Logo in src code

Learn how to change the logo of your React Native app by updating the logo image in the assets directory.

Step 1: Add Your Logo to the Assets Directory
- Place your logo image files inside the `src/assets/images` folder. For example: - `src/assets/images/logo.png` - make sure file is in png format.

Firebase Installation for React Native

Open official Firebase link to install Firebase in your React Native Android app:
- Official Firebase Link
Go to console
Open a firebase project we created during customer app installation
Create Android App here
Enter your package name here
Download google-services.json file
Move downloaded google-services.json file into these path delivery_app_project/android/app

After installing firebase for android lets install Firebase for iOS app:
Create iOS App here
Enter Package name here
Download GoogleService-Info.plist file from here
Move downloaded GoogleService-Info.plist file into these path delivery_app_project/ios
Now Firebase is installed for Android and iOS both App

Keystore Setup and Retrieving SHA-1/SHA-256 Keys

Learn how to generate a keystore and retrieve the SHA-1 and SHA-256 keys for your React Native app.

Step 1: Generate Keystore

Follow the official React Native documentation to Build and release an Android app:
- Build and release an Android app
Or Open a terminal or command prompt and navigate to a folder where you want to save your keystore.

Run the following command to generate a keystore:

keytool -genkeypair -v -storetype PKCS12 -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

You will be prompted to enter the following details:
- Your name and organization details
- A password for the keystore
- A password for the key alias (can be the same as the keystore password)
After successfully running the command, you will have a file named `your_keystore_name.jks`.

Step 2: Add Keystore to Your React Native App

Place the keystore file (`your_keystore_name.jks`) in the `android/app` directory of your React Native project.
Edit the `android/app/build.gradle` file and add the keystore configuration under the `android {}` block:

android { ... signingConfigs { release { keyAlias 'your_key_alias' keyPassword 'your_key_password' storeFile file('your_keystore_name.jks') storePassword 'your_keystore_password' } } buildTypes { release { signingConfig signingConfigs.release minifyEnabled false shrinkResources false } } }

Step 3: Retrieve SHA-1 and SHA-256 Keys

Open a terminal or command prompt.
Run the following command to get the SHA keys:
keytool -list -v -keystore your_keystore_name.jks
Enter the keystore password when prompted.
The output will include the SHA-1 and SHA-256 keys under the certificate details. For example:
Certificate fingerprints: SHA1: 12:34:56:78:90:AB:CD:EF:12:34:56:78:90:AB:CD:EF:12:34:56:78 SHA256: AB:CD:EF:12:34:56:78:90:AB:CD:EF:12:34:56:78:90:AB:CD:EF:12:34:56:78:90:AB:CD:EF

Support

How to get assistance

Thank you for purchasing our product! For any support or assistance, feel free to reach out to us via the provided email address. Our dedicated support team is available 24/7, ready to help with any questions, technical issues, or inquiries you may have. We are committed to providing prompt and reliable assistance to ensure a seamless experience with our product. Your satisfaction is our priority, and we are here to support you every step of the way.