What Prerequisite knowledge do you need to run this app?
Pre-Installed Software:
For Mobile Apps:
- Latest or Stable version of Node Download
- Latest or Stable version of NPM
For Admin Dashboard:
- Nodejs version 14.0
- A stable version of NPM
How to Setup locally?
Mobile Application:
Clone or download the source code from Github. To download the source code Click on download source code.
Install expo-cli globally using npm install -g expo-cli before trying to run the apps.
- cd<Project directory> e.g. cd enatega-singlevendor-app
- npm install (or yarn install)
- npm start
Scan the QR code with the Expo app (Android) or the Camera app (iOS).
Admin Dashboard:
Clone or download source code from Github
- To download Admin Dashboard Click on download Admin Dashboard.
To run the module, you need to have node js installed on your machine. Once nodejs is installed, go to the directory and enter the following commands
- cd<Project directory>e.g cd enatega-singlevendor-admin
- npm install (or yarn install)
- npm start
Backend API:
The API and backend are proprietary and can be accessed via a paid license. For further information, please contact us using the channels provided below:
- Email: info@enatega.com
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
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 in order to launch the module. After installing nodejs, open the directory and type the following commands:
- cd<Project directory> e.g. cd enatega-singlevendor-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:
- PORT: This variable specifies the port on which the backend API will listen for incoming HTTP requests. In this case, it is set to 8000, so the API will be accessible on port 8000.
- 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, robust security, and has both a free community edition and a commercial enterprise edition.
You can read more about MongoDB here
Here’s how you can create the connection string for your own version of this project.
MongoDB Configuration Video - RESET_PASSWORD_LINK: This variable defines the link for resetting passwords. When users request a password reset, this link is sent to them, and they can click it to reset their password.
- 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 - NODE_ENV: This variable specifies the environment in which your Node.js application is running. In this case, it’s set to “production,” indicating that the application is running in a production environment.
After setting (.env) file, run the following commands:- npm install
- npm run prod
Admin Dashboard:
Clone or download source code from Github
- To download Admin Dashboard Click on download Admin Dashboard.
Node.js must be set up on your computer in order 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-singlevendor-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:
Above image shows the environment variables for the Admin Panel .env file. Here’s an explanation of each variable and its purpose:
- NODE_PATH: This variable specifies the path to the source directory in your project. It’s used to set the base directory for your application’s source files.
- SKIP_PREFLIGHT_CHECK: This variable is set to true and is typically used with Create React App. It skips preflight checks when you start your development server, which can be helpful when certain warnings or errors are not critical for your application.
- 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.
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.
Read more about Cloudinary Here
Here is how you can configure Cloudnary and create CLOUDINARY_URL for this project
Demonstration of Cloudnary Video - 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.
- 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 - REACT_APP_CLOUDINARY_CATEGORY: This variable is used for categorizing or tagging images within Cloudinary. It’s a category identifier.
- REACT_APP_CLOUDINARY_FOOD: t 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.
- REACT_APP_ENV: The environment variable that is set to “prod,” indicating that the Admin Panel is running in a production environment.
These variables are essential for configuring and customizing the behavior of your Admin Panel, enabling integration with third-party services, and ensuring proper communication with your backend and image management services. Make sure to keep sensitive information, such as API keys and authentication credentials, secure and handle them with care.
After setting (.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.
Mobile Application
Clone or download the source code from Github. To download click on download source code.
- cd<Project directory> e.g. cd customerapp
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:
- 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.
- WS_GRAPHQL_URL: WS_GRAPHQL_URL specifies the WebSocket URL for the GraphQL API. WebSockets are used for real-time communication, making it suitable for applications that require live updates, such as chat applications, notifications, or dynamic content delivery.
- 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 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 - 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.
- 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 - 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 Amplitude Api key for this project
Configuring Amplitude Video - 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.
- STRIPE_IMAGE_URL: This URL likely points to an image or logo used for branding and display purposes in the Stripe payment process.
- 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
After setting (.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 –platform android –profile production
- eas build –platform ios –profile production
- 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
