GitHub
Book demo
Getting Started
Introduction
Hight Level Architecture
Installation
FAQs
License
Patch Notes
Essentials
  • Getting Started

Multi-Vendor Installation

What Prerequisite knowledge do you need to run this app?

Pre-Installed Software

  • Latest or Stable version of Node Download
  • Latest or Stable version of NPM

How to Setup locally?

Customer App/ Rider App/ Restaurant App

Clone or download the source code from GitHub. To download click on the source code from github.

  • cd<Project directory> e.g. cd enatega-multivendor-app
  • npm install (or yarn install)
  • npm start

Web Application/ Admin Dashboard

You must have nodejs installed on your computer to launch the module. After installing nodejs, open the directory and type the following commands:

  • cd<Project directory>e.g cd enatega-multivendor-app
  • npm install (or yarn install)
  • npm start

Backend API

Access to the backend and API requires a license that must be purchased. Please get in touch with us using the methods listed below for more information:

If you have paid API code, to run the API enter the following commands:

  • cd<Project directory> e.g. cd enatega-api
  • npm install (or yarn install)
  • npm run dev

Scan the QR code with the Expo app (Android) or the Camera app (iOS).

How to deploy in production?

Backend API Server

Download or clone the source code, then extract it and open the extracted folder in a terminal. You must have node js installed on your computer to launch the module. After installing nodejs, open the directory and type the following commands:

  • cd <Project directory>  e.g. cd enatega-multivendor-api

After opening the code in a code editor, you need to modify the .env file. There are three .env files: .env.development, .env.staging, and .env.production. The variables in all these files are the same. ‘development’ is used for development purposes or running the app locally, ‘staging’ is used for testing purposes, and ‘production’ is used when the app is deployed. It’s up to you whether you want to create different variables for each file or keep them the same in all files.

You need to change the following credentials in the .env file. We have numbered each variable, and the explanation is provided below each number:

Every variable is explained according to the numbers associated with each variable in the image above. Certainly, here’s a concise explanation of each variable in the .env file, its purpose, and how to create it:

  1. PORT: This variable specifies the port on which the backend API will listen for incoming requests. In this case, it is set to 8001, so the API will be accessible on port 8001.
  2. CONNECTION_STRING: This variable contains the connection string for your MongoDB database. It includes the username and password needed to connect to the database, as well as the cluster URL and some connection options. You might wonder what MongoDB is. MongoDB is a flexible NoSQL database known for storing data as JSON-like documents. It’s highly scalable, supports a rich query language, and is commonly used in applications like content management systems, e-commerce, and IoT. It offers high availability, and robust security, and has both a free community edition and a commercial enterprise edition. To get more information click read more about MongoDB. Here’s how you can create the connection string for your version of this project. MongoDB Configuration Video
  3. RESET_PASSWORD_LINK: This variable defines a part of the URL used for resetting password links. It is usually a route or endpoint where users can reset their passwords.
  4. SERVER_URL: This variable specifies the base URL of your server. It’s the root URL where your backend API is hosted.
    So What is an API? An API (Application Programming Interface) is a set of rules and protocols that allows different software applications to communicate with each other. A backend API is responsible for handling data and requests on the server side of a software application.
    The Backend code of this project is the API for this project.
    To make your API accessible to the internet, you need a hosting service. A hosting service provides the infrastructure and resources to run your server, making it available 24/7. Hosting services can be cloud platforms (like Heroku, AWS, or Digital Ocean) or specialized services like Railway Cloud.
    How to Deploy to Backend API? Deploying means making your API server available and functional on the hosting service. This typically involves uploading your code, configuring the server, and ensuring it’s up and running.  Here is how you can Deploy your APi server and get the SERVER_URL for adding in .env file. Railway Cloud deployment Video
  5. STRIPE_WEBHOOK_ENDPOINT_SECRET: This variable is used for Stripe webhook verification. It’s a secret key that Stripe uses to sign webhook events, ensuring their authenticity.
    What is Stripe? Stripe is a widely used online payment platform that helps businesses accept payments securely on their websites and apps. It’s known for its simplicity, global reach, and developer-friendly tools.
    How to create a Stripe Endpoint Secret for this Project?
    Here is how You can create  Stripe endpoint Secrets
    Stripe Configuration Video
  6. DASHBOARD_URL: This variable points to the URL of a dashboard or admin panel for your application. It might be used by authorized users to access the administrative interface.
  7. WEB_URL: This variable contains the base URL for your web application. It’s where your front end is hosted and where users can access the application.
    Deploying an Admin Dashboard and Web Application
    To deploy these applications, you can use hosting platforms like Netlify and Vercel, which specialize in hosting web applications. These platforms provide an easy and streamlined deployment process.One of the simplest is to use Netlify. By looking through this documentation, you can browse through its user manual.
    Deployment Steps
    • Netlify
      • For Netlify, you would typically connect your code repository (e.g., on GitHub or GitLab) to your Netlify account.
      • Specify the build settings and configurations for your dashboard and web app. Netlify will automatically build and deploy your applications when you push changes to your repository.
      • You can set custom domains or subdomains for your applications, which will become the URLs for your dashboard and web app.
    • Vercel
      • Vercel offers a similar process. You connect your code repository and configure your settings, and Vercel handles the build and deployment.
      • Custom domains can be set up on Vercel to determine the URLs for your dashboard and web app.
  8. ORDER_DETAIL_WEB_URL: This variable might be a partial URL used to construct links to specific order details in your application.
  9. SENTRY_DSN: Sentry is an error tracking and monitoring service. This variable contains the Data Source Name (DSN) that Sentry uses to report errors and exceptions from your application.
    Here is how you can configure sentry and create SENTRY_DSN_LINK for this project
    Configuring Sentry Video
  10. TWILIO_ACCOUNT_SID: This is your Twilio account’s unique identifier, also known as the Account SID (Service ID). It is similar to a username and is used to identify your Twilio account.
  11. TWILIO_AUTH_TOKEN:  These variables(10 & 11) are used for integrating with Twilio, a cloud communications platform. The account SID and authentication token are required to send and receive messages or make phone calls.
  12. TWILIO_PHONE_NUMBER: This variable represents the Twilio phone number you will use for sending SMS or making phone calls.
    What is Twilio? Twilio is a cloud communications platform that provides developers with APIs (Application Programming Interfaces) and tools to enable them to integrate various communication features into their applications. The platform allows developers to send and receive SMS messages, make voice and video calls, handle two-factor authentication, and more.
    Usage of TWILIO_ACCOUNT_SID and TWILIO_AUTH_TOKEN:
    TWILIO_ACCOUNT_SID: This is your Twilio account’s unique identifier, also known as the Account SID (Service ID). It is similar to a username and is used to identify your Twilio account. This identifier is required for authenticating and authorizing your application to interact with the Twilio platform.
    TWILIO_AUTH_TOKEN: This is a secret authentication token or password associated with your Twilio account. It’s like a password for your Twilio Account SID. The authentication token is crucial for ensuring that only authorized applications can access and use your Twilio account to send messages, make calls, or perform other communication-related tasks.
    Here’s how you can create these variables for this project:
    Stripe Payment Configuration Video
  13. FORM_SUBMISSION_EMAIL: This is an email address where form submissions or notifications related to your application are sent.
  14. NODE_DEV: This variable specifies the environment in which your Node.js application is running. In this case, it’s set to “production,” which typically means the application is running in a production environment. After setting (.env) file, run the following commands:
    • npm install
    • npm run prod

Web Application

Clone or download source code from GitHub

Node.js must be set up on your computer to run the module. The following commands should be entered in the directory after nodejs have been installed.

  • cd<Project directory>e.g cd enatega-multivendor-web

After opening the code in a code editor, you need to modify the .env file.
There are three .env files: .env.development, .env.staging, and .env.production. The variables in all these files are the same. ‘development’ is used for development purposes or running the app locally, ‘staging’ is used for testing purposes, and ‘production’ is used when the app is deployed. It’s up to you whether you want to create different variables for each file or keep them the same in all files.
You need to change the following credentials in the .env file. We have numbered each variable, and the explanation is provided below each number:

Here’s an explanation of each variable in the .env file for your web application and its purpose:

  1. REACT_APP_SERVER_URL: This variable specifies the base URL of your backend server that the web application will communicate with. It’s essential for making API requests to your server.
  2. REACT_APP_WS_SERVER_URL: This variable defines the WebSocket server URL. WebSockets are used for real-time communication, and this URL is crucial for establishing WebSocket connections with your server.
    What is SERVER_URL?: This variable specifies the base URL of your server. It’s the root URL where your backend API is hosted.
    So What is an API? An API (Application Programming Interface) is a set of rules and protocols that allows different software applications to communicate with each other. A backend API is responsible for handling data and requests on the server-side of a software application.
    The Backend code of this project is the API for this project.
    To make your API accessible to the internet, you need a hosting service. A hosting service provides the infrastructure and resources to run your server, making it available 24/7. Hosting services can be cloud platforms (like Heroku, AWS or Digital Ocean) or specialized services like Railway Cloud.
    How to Deploy to Backend API? Deploying means making your API server available and functional on the hosting service. This typically involves uploading your code, configuring the server, and ensuring it’s up and running. 
    Here is how you can Deploy your APi server and get the SERVER_URL for adding in the .env file.
    Railway Cloud deployment Video
  3. REACT_APP_GOOGLE_CLIENT_ID:
    The REACT_APP_GOOGLE_CLIENT_ID is a unique identifier provided by Google when you register your web application with Google’s OAuth (Open Authorization) service. This ID serves as a means for your application to identify itself to Google when attempting to authenticate users through their Google accounts.
    Here is how you can create  the Google ID for the web
    Configuring Google ID for Web Video
  4. REACT_APP_STRIPE_PUBLIC_KEY: The Stripe public key is used to interact with the Stripe payment gateway. It’s necessary for handling online payments securely.
    What is Stripe? Stripe is a widely-used online payment platform that helps businesses accept payments securely on their websites and apps. It’s known for its simplicity, global reach, and developer-friendly tools.
    How to create a Stripe Endpoint Secret for this Project?
    Here is how You can create  Stripe endpoint Secrets
    Stripe Configuration Video
  5. REACT_APP_PAYPAL_KEY: This variable likely represents the PayPal API key, used for processing PayPal payments in your application.
    What is PayPal? PayPal is a widely used online payment platform that allows individuals and businesses to send and receive payments securely over the Internet. It supports a variety of payment methods, including credit cards and bank transfers, making it a convenient and trusted way to handle online transactions.
    To get more information click read more about Paypal.
    How to configure PayPal for this Project?
    Configuring PayPal for your application involves registering with PayPal and securely integrating it. Here’s a detailed breakdown:
    • Registration: Begin by registering for a PayPal Business account on the PayPal website. This account is required to accept payments for your products or services.
    • Accessing Client Credentials: After registration, PayPal provides you with two crucial credentials: the Client ID and the Client Secret. These are like a username and password for your PayPal account, but they are meant for your application to securely interact with PayPal’s servers.
    • Admin Dashboard: In the configurations area of your admin dashboard, you need to paste these credentials. This is where you configure your application to communicate with PayPal using the Client ID and Secret.
    • Secure Integration: The Client ID and Secret are used to authenticate and authorize your application with PayPal. When customers make payments, your app securely communicates with PayPal’s servers using these credentials to process transactions.
    • Payment Handling: With PayPal integrated, your application can accept payments from customers, and PayPal ensures the security and reliability of these transactions.
  6. REACT_APP_GOOGLE_MAPS_KEY: The Google Maps API key is a crucial component for integrating Google Maps and related location and mapping services into the application. This key serves as a unique identifier, granting your application access to Google’s mapping and geolocation features.
    Here’s how you can create a Google Maps key for this project
    Demonstration of google map api setup Video
  7. REACT_APP_AMPLITUDE_API_KEY: This API key is essential for integrating Amplitude, an analytics and product intelligence service, into a React application.
    The API key identifies your app when communicating with Amplitude’s servers. By using this key, you can gather data, analyze user behavior, and make data-informed decisions to optimize your application’s performance and user experience.
    Amplitude helps businesses track and analyze user behavior, such as interactions and events within the app. It’s a critical tool for enhancing user satisfaction and app success.
    To get more information click read more about amplitude.
    Here’s how you can create an Amplitude Api key for this project
    Configuring Amplitude Video
  8. REACT_APP_GOOGLE_MAP_LIBRARIES: This variable specifies which Google Maps libraries are included in your application. It can help optimize your application by only including the necessary libraries.
  9. REACT_APP_SENTRY_DSN: Similar to the backend, this Sentry DSN is used to report and monitor errors and exceptions on the front end of your application.
    This variable contains the Data Source Name (DSN) that Sentry uses to report errors and exceptions from your application. To get more information click read more about Sentry.
    Here is how you can configure sentry and create SENTRY_DSN_LINK for this project
    Configuring Sentry Video
  10. REACT_APP_GOOGLE_COLOR: This variable may be used to define a specific color associated with Google-related elements in your application.
  11. REACT_APP_ENV: It defines the environment in which the web application is running. In this case, it’s set to “prod,” indicating that the application is in production. After setting the (.env) file, run the following commands:
    • npm install
    • npm run build

How to deploy a react application?
To deploy these applications, you can use hosting platforms like Netlify and Vercel, which specialize in hosting web applications. These platforms provide an easy and streamlined deployment process.
One of the simplest is to use Netlify. By looking through this documentation, you can browse through its user manual.
Deployment Steps

Netlify

  • For Netlify, you would typically connect your code repository (e.g., on GitHub or GitLab) to your Netlify account.
  • Specify the build settings and configurations for your dashboard and web app.
  • Netlify will automatically build and deploy your applications when you push changes to your repository.
  • You can set custom domains or subdomains for your applications, which will become the URLs for your dashboard and web app.

Vercel

  • Vercel offers a similar process. You connect your code repository, configure your settings, and Vercel handles the build and deployment.
  • Custom domains can be set up on Vercel to determine the URLs for your dashboard and web app.

Admin Dashboard

Clone or download source code from Github

Node.js must be set up on your computer to run the module. the following commands should be entered in the directory after nodejs has been installed.

  • cd <Project directory> e.g cd enatega-multivendor-admin

Set environment file (.env). Following credentials you need to change.
There are three .env files: .env.development, .env.staging, and .env.production. The variables in all these files are the same. ‘development’ is used for development purposes or running the app locally, ‘staging’ is used for testing purposes, and ‘production’ is used when the app is deployed. It’s up to you whether you want to create different variables for each file or keep them the same in all files. You need to change the following credentials in the .env file. We have numbered each variable, and the explanation is provided below each number:

The above image shows the environment variables for the Admin Panel .env file. Here’s an explanation of each variable and its purpose:

  1. REACT_APP_GOOGLE_API_KEY: This is the API key for Google services. It’s used for integrating various Google services such as Maps, Geolocation, or other Google APIs in your application.
    This key serves as a unique identifier, granting your application access to Google’s mapping and geolocation features:
    Here’s how you can create a Google API key for this project
    Demonstration of google map api setup Video
  2. REACT_APP_FIREBASE_KEY: This is the Firebase API Key, used to securely connect your application to Firebase services such as the Realtime Database, Authentication, and Cloud Storage.
  3. REACT_APP_APP_ID: The Firebase App ID uniquely associates your application with your Firebase project, helping Firebase identify your specific app.
  4. REACT_APP_DB_URL: Points to the URL of your Firebase Realtime Database, allowing you to read and write data to this cloud-based database.
  5. REACT_APP_AUTH_DOMAIN: This is the Firebase Authentication Domain, required for implementing user authentication within your application using Firebase Authentication services.
  6. REACT_APP_STORAGE_BUCKET: Specifies the Firebase Storage Bucket, indicating where your application will store files and assets securely in the cloud.
  7. REACT_APP_MSG_SENDER_ID: This ID is related to Firebase Cloud Messaging (FCM), used for sending push notifications within your app, helping you keep users informed in real-time.
  8. REACT_APP_MEASUREMENT_ID: The Google Analytics Measurement ID helps track and analyze user behavior and application performance using Google Analytics, providing insights into how users interact with your app.
  9. REACT_APP_PROJECT_ID: The Firebase Project ID uniquely identifies your Firebase project, allowing you to manage and configure it within the Firebase console.
  10. REACT_APP_PUBLIC_VAPID_KEY: This is the Public VAPID key used for web push notifications. It’s crucial for enabling web-based push notifications in your application, keeping users engaged with updates and alerts.
    Point  2,3,4,5,6,7,8,9 and 10 all are related to FireBase
    What is FireBase?
    Firebase is a comprehensive platform offered by Google for building and managing web and mobile applications. It provides various cloud-based services, including databases, authentication, file storage, and more.
    The variables listed above(2,3,4,5,6,7,8,9 and 10) are related to Firebase and are essential for connecting and configuring your application to use Firebase services.
    To get more information click read more about FireBase.
    Here is how you can configure FireBase Keys for this project
    Configuring FireBase Video
  11. REACT_APP_SERVER_URL: This variable specifies the base URL of your backend server that the web application will communicate with. It’s essential for making API requests to your server.
  12. REACT_APP_WS_SERVER_URL: This variable defines the WebSocket server URL. WebSockets are used for real-time communication, and this URL is crucial for establishing WebSocket connections with your server.
    What is SERVER_URL?: This variable specifies the base URL of your server. It’s the root URL where your backend API is hosted.
    So What is an API? An API (Application Programming Interface) is a set of rules and protocols that allows different software applications to communicate with each other. A backend API is responsible for handling data and requests on the server-side of a software application.
    The Backend code of this project is the API for this project.
    To make your API accessible to the internet, you need a hosting service. A hosting service provides the infrastructure and resources to run your server, making it available 24/7. Hosting services can be cloud platforms (like Heroku, AWS or Digital Ocean) or specialized services like Railway Cloud.
    How to Deploy to Backend API? Deploying means making your API server available and functional on the hosting service. This typically involves uploading your code, configuring the server, and ensuring it’s up and running. 
    Here is how you can Deploy your APi server and get the SERVER_URL for adding in .env file.
    Railway Cloud deployment Video
  13. REACT_APP_SENTRY_DSN: Sentry DSN for error tracking and monitoring. It reports and logs errors that occur in your Admin Panel. This variable contains the Data Source Name (DSN) that Sentry uses to report errors and exceptions from your application. Read more about Sentry Here is how you can configure Sentry and create SENTRY_DSN_LINK for this project Configuring Sentry Video
  14. REACT_APP_CLOUDINARY_UPLOAD_URL: It represents the URL endpoint that your application uses to upload images to Cloudinary. It specifies the location where your application sends image files for storage and management on the Cloudinary platform.
  15. REACT_APP_CLOUDINARY_FOOD: It is a product environment provided by Cloudinary, it suggests that it’s a predefined or configured setting for using Cloudinary’s services in a manner optimized for your project-related content within your application.
    So What is Cloudinary?
    Cloudinary is a cloud-based media management platform that helps developers and businesses manage, store, and manipulate images and other media files in their applications. It offers features like image and video hosting, dynamic image transformations, and seamless delivery across different devices. To get more information click read more about Cloudinary.
    Here is how you can configure Cloudinary and create CLOUDINARY_URL  for this project
    Demonstration of Cloudnary Video
  16. REACT_APP_FIREBASE_VAPID_KEY: This variable represents a Firebase VAPID (Voluntary Application Server Identification) key, which is used in the context of Firebase Cloud Messaging (FCM) and web push notifications.
    Here is how you can configure Push Notification for this project
    Push Notification configuring Video
  17. REACT_APP_ENV: The environment variable that is set to “prod,” indicating that the Admin Panel is running in a production environment.
    With these values correctly configured, your Admin Panel should be able to interact with various services and APIs as intended in a production environment. Make sure to keep these environment variables secure and manage them responsibly.
    After setting the (.env) file, run the following commands:
    • npm install
    • npm run build

How to deploy a React application?
To deploy these applications, you can use hosting platforms like Netlify and Vercel, which specialize in hosting web applications. These platforms provide an easy and streamlined deployment process.
One of the simplest is to use Netlify. By looking through this documentation, you can browse through its user manual.
Deployment Steps

Netlify

  • For Netlify, you would typically connect your code repository (e.g., on GitHub or GitLab) to your Netlify account.
  • Specify the build settings and configurations for your dashboard and web app.
  • Netlify will automatically build and deploy your applications when you push changes to your repository.
  • You can set custom domains or subdomains for your applications, which will become the URLs for your dashboard and web app.

Vercel

  • Vercel offers a similar process. You connect your code repository, and configure your settings, and Vercel handles the build and deployment.
  • Custom domains can be set up on Vercel to determine the URLs for your dashboard and web app.

Mobile Application

Clone or download the source code from GitHub. To download click on download source code

  • cd<Project directory> e.g. cd enatega-multivendor-app

Update environment file (/environment.js files). Following are the credentials you need to change.

Here are the variables in the environment.js file for the Mobile App, along with a brief explanation of each and their purposes:

  1. GRAPHQL_URL: This variable contains the URL of the GraphQL endpoint for your API. It is essential for making GraphQL queries and mutations from your mobile app. GraphQL is a query language for APIs that allows clients to request precisely the data they need, and this URL is where your app communicates to retrieve and manipulate data from your GraphQL API.
  2. WS_GRAPHQL_URL: WS_GRAPHQL_URL specifies the WebSocket URL for the GraphQL API. WebSockets are used for real-time communication, making them suitable for applications that require live updates, such as chat applications, notifications, or dynamic content delivery.
  3. SERVER_URL: SERVER_URL is the base URL of your server. It serves as the root address for various API requests made by your mobile app. This is where your app communicates to access different endpoints and resources on your server, including the GraphQL and WebSocket services.
    What is SERVER_URL?: This variable specifies the base URL of your server. It’s the root URL where your backend API is hosted.
    So What is an API? An API (Application Programming Interface) is a set of rules and protocols that allows different software applications to communicate with each other. A backend API is responsible for handling data and requests on the server side of a software application. The Backend code of this project is the API for this project. To make your API accessible to the internet, you need a hosting service. A hosting service provides the infrastructure and resources to run your server, making it available 24/7. Hosting services can be cloud platforms (like Heroku, AWS or Digital Ocean) or specialized services like Railway Cloud.
    How to Deploy to Backend API? Deploying means making your API server available and functional on the hosting service. This typically involves uploading your code, configuring the server, and ensuring it’s up and running. Here is how you can Deploy your APi server and get the SERVER_URL for adding in the .env file.
    Railway Cloud deployment Video
  4. IOS_CLIENT_ID_GOOGLE: This is a Google OAuth client ID specifically intended for iOS applications. It is used for authenticating users and granting access to Google services within iOS-based applications.
  5. ANDROID_CLIENT_ID_GOOGLE: This is a Google OAuth client ID designed for Android applications. It serves the same purpose as the iOS client ID but is intended for Android-based applications.
    Both client IDs are used for authentication and access to Google services within their respective platforms. They allow applications to securely and efficiently connect with Google services and authenticate users using Google’s OAuth (Open Authorization) framework.
    Here’s how you can create IOS and Android Google Client ID
    Demonstration of IOS and Android Google Client ID Video
  6. AMPLITUDE_API_KEY: This API key is essential for integrating Amplitude, an analytics and product intelligence service, into a React application.
    The API key identifies your app when communicating with Amplitude’s servers. By using this key, you can gather data, analyze user behavior, and make data-informed decisions to optimize your application’s performance and user experience.
    Amplitude helps businesses track and analyze user behavior, such as interactions and events within the app. It’s a critical tool for enhancing user satisfaction and app success.
    Read more about amplitude here.
    Here’s how you can create an Amplitude Api key for this project
    Configuring Amplitude Video
  7. GOOGLE_MAPS_KEY: The Google Maps API key is a crucial component for integrating Google Maps and related location and mapping services into the application. This key serves as a unique identifier, granting your application access to Google’s mapping and geolocation features.
    Here’s how you can create Google Maps key for this project
    Demonstration of google map api setup Video
  8. EXPO_CLIENT_ID: This variable represents a Google OAuth client ID specifically intended for use within the Expo development environment. Expo is a platform for building and deploying mobile applications, and this client ID is used to enable Expo-based applications to authenticate users and gain access to Google services.
    Steps to Create an Expo Client ID:
    • Create a Google Cloud Project:
    • Enable the Google+ API:
      • In your project, navigate to the “APIs & Services” section.
      • Click on “Library” and search for “Google+ API.”
      • Enable the API for use in your project.
    • Create OAuth 2.0 Client ID:
      • In the Google Cloud Console, go to “APIs & Services” > “Credentials.”
      • Click on “Create Credentials” and select “OAuth client ID.”
      • Choose the “Web application” application type.
      • Configure the authorized redirect URIs, ensuring you specify the appropriate URIs for your Expo-based application.
      • Once created, you’ll be provided with a client ID.
    • Set Up in Expo Project:
      • In your Expo project, you can set the EXPO_CLIENT_ID variable in your configuration to the client ID obtained in the previous step. This enables Expo to use the client ID for Google OAuth authentication and access to Google services in your app.
  9. SENTRY_DSN: Sentry DSN is used for error tracking and monitoring. It reports and logs errors that occur in your mobile app.
    This variable contains the Data Source Name (DSN) that Sentry uses to report errors and exceptions from your application.
    Read more about Sentry Here
    Here is how you can configure sentry and create SENTRY_DSN_LINK for this project
    Configuring Sentry Video
  10. TERMS_AND_CONDITIONS :
  11. PRIVACY_POLICY: These are URLs(9 and 10) to your app’s terms and conditions and privacy policy pages. They are typically used for legal and compliance purposes.
  12. STRIPE_PUBLIC_KEY:The Stripe public key is a crucial component for securely processing online payments through the Stripe payment gateway. It’s a unique identifier associated with your Stripe account that is meant to be used on the client-side of your application. This key allows your application to interact with Stripe’s services, facilitating secure payment transactions without exposing sensitive information like credit card details to your server.
  13. STRIPE_IMAGE_URL: This URL likely points to an image or logo used for branding and display purposes in the Stripe payment process.
  14. STRIPE_STORE_NAME: The name of the store or business for branding purposes in the Stripe payment process.
    What is Stripe? Stripe is a widely-used online payment platform that helps businesses accept payments securely on their websites and apps. It’s known for its simplicity, global reach, and developer-friendly tools.
    How to create a Stripe Endpoint Secret for this Project?
    Here is how You can create  Stripe endpoint Secrets
    Stripe Configuration Video
  15. TEST_OTP: A test OTP (One-Time Password) that might be used during development and testing for authentication purposes.
  16. GOOGLE_PACES_API_BASE_URL: This variable contains the base URL for the Google Places API, a service by Google used for location and places-related functions. It’s the starting point for making requests to access location-based data, such as details about businesses, geographic coordinates, and nearby places. Integrating this base URL is essential for applications that rely on Google’s location data and services.
    Here is how you can configure Google places Api and create APi_LINK for this project
    Configuring Google APIs Video
    These variables are essential for configuring and customizing your mobile app, enabling integration with third-party services, and ensuring proper communication with your backend. Make sure to keep them secure and handle sensitive information, like API keys and authentication credentials, with care.
    After setting the (.env) file, run the following commands:
    • npm install
    • Npm start

How to submit your Mobile Apps in the App and Play Store?

Creation of builds

To create the builds for both Android and IOS you need to enter the following commands in your terminal.

  • npm install -g eas-cli

Create your Account in EXPO ( https://expo.dev/)

In your terminal type the following Command

  • eas login (Login with your expo credentials)

Create new project in expo account as shown below:

When a new project is created in Expo, an ID is assigned to that project

After creating a new project in Expo and pasting its ID into app.json, your project is ready to be built. In your terminal, run the following commands:

  • eas build:configure
  • eas build –profile production –-platform android
  • eas build –profile production –-platform ios
  • eas submit –platform ios (to submit your app in App Store)
  • eas submit –platform android (to submit your app in Play Store)

For OTA Updates

  • npx expo install expo-updates
  • eas update:configure
  • eas update –branch production –message “Example update”

Enrol in the Apple Developer Program

Once everything is finished and your app has been tested, you are ready to publish. You must first have the Apple developer program. If you don’t have then get the Apple developer program from here:

Every app has a special Bundle identification to identify it, and this is also used as the app store URL. The bundle identification can be changed from within the app.json To see the publishing document for Apple in detail click on this link

Enrol in the Google Developer Program

Once everything is finished and your app has been tested, you are ready to publish. You must first have a Google developer account.
If you don’t have then get a Google developer account from here
To see the publishing document for Apple in detail see this link

Buy hosting service and domain name

You can get a domain name for any domain name service for example Go Daddy
You will need a hosting service to deploy your API you can use any hosting service for example Digital Oceans
You can host your website admin dashboard and web on Netlify

On this page

    Product

    Resources

    Case Studies

    Get in Touch

    Case Studies

    Get in Touch

    Facebook-f Twitter Linkedin Instagram
    ©2023 Enatega · All rights reserved.
    Powered by: Ninjascode
    Book Demo
    View GitHub