Vegi – The Ultimate Grocery – Food – Milk Ordering app : Frontend Documentation

Hey there, We are happy to see you as our valuable customer of Vegi – The Ultimate Grocery – Food – Milk Ordering web app. Here is the easy documentation to set the app and ready to launch. Please follow all the instructions carefully and don’t skip any step. Feel free to contact us if you face any problem while set-up.

Prerequisites

PHP 8.0 and above and it will work on any kind of hosting packages
Hostings can be purchased from here if you don't have any,
Linux based hosting (We have created this project on cPanel, So we can solve server issues only with cPanel)
memory_limit should be 120M

If you face any issue in video upload or it takes time in uploading video to the server that might be because of your server. Sometimes server gives this error if you check your error log file

The Allowed memory size of 33554432 bytes exhausted (tried to allocate 15756752 bytes)

If you see this error then you would need to upgrade your server or increase PHP memory limit by going into php.ini file. you need to google about where this file is. This file resides in different locations in different servers

Setting up backend URLs

Extract the downloaded file and get the vegi_frontend.zip file
Extract that vegi_frontend.zip file again, that is the main project for the website
Open that extracted folder and then find .env File.
.env file is the file where all of our credentials stays. In that file, we will change the URLs to the backend to connect with the backend of the app. Those credentials can be available while setting up the backend using the documentation here on this link. (If you have not setup the backend yet, please follow the link and setup that first)

There in the imageUrl and baseUrl : Replace the yourBackendDomin.com to Your backend Domain Targeted Directory Like the example below.

baseUrl = https://yourBackendDomin.com/api
imageUrl = https://yourBackendDomin.com/public/storage/
appUrl = https://yourFrontendDomin.com/ (Your Frontend Domain where you are going to make your website public)

Now go the path: public/asset/js/env.js and open that file and Change URL variables as shown in the image and the examples below

var baseUrl = "https://yourBackendDomain.com/api/";
var fimageUrl = "https://yourBackendDomain.com/public/storage/";
var appUrl = "https://yourFrontEndDomain.com/";

Google Sign In and Email Sign In Setup Using Firebase

Go to the firebase website, here
Check the video below and follow the steps to create a firebase project

Click on web icon shown in the red circle on the main dashboard of firebase console to add your website in the firebase project

add your website name for your reference and then press that "Register App" button to continue

Once you click on it, you will fine something like shown in the below image

Copy the credentials listed below from there
apiKey
authDomain
projectId
storageBucket
messagingSenderId
appId
measurementId

Open the public/assets/js/env.js file which we have opened before
and replace them in the env.js file (apiKey is a fireapiKey).

Also don't forgot to save it.

Now come back to the firebase console again and follow the steps below the image reference to the numbers in the image
1. Go to Authentication section of firebase console
2. Click on Sign-in method.
3. Click on the Google option
4. Enable the switch as shown in the image below
5. Set the support email for this project
6. Click on the blue save button

Let's Enabled Email Password sign in:
Go to Authentication section of firebase console and click on Sign-in method.
Click on that Email/Password option
Enable both of the switches as shown in the image below
Click on that blue save button once it's done

Now the sign-in options set-up has been done. and it should be working fine.

Setting Up The Google Map API Key to the project

We are using google map in this project to get the location from the users while they are adding their address. So that delivery boy can get the location while making the delivery. And for that, we will need Google Map API key to use the map in our project.

Follow the official link here by Google listed below to check the steps to create Google Map API key
There you will find the steps as shown in the image below
Red options are the steps to follow one by one
Green options are the step by step instruction in particular step
After following those steps, you will be able to get the API key

Open the .env file again
Copy your API key from google developer account and paste it in .env file, as "mapkey" (shown in the image below)

The Map is supposed to work fine now as we setup each and every steps.

Configure Stripe As a Payment Gateway

Create account in Stripe (https://dashboard.stripe.com/login)
Login with your stripe account.
Go to Developers section
Click on API keys under the Developers section

Open the public/assets/js/env.js file
Copy Stripe Publishable Key and paste in file show as below image.
Don't forgot to save it.

Now the stripe has been configured successfully and then you will be able to accept the payment from your customers while they are placing orders and choose the Card as a payment gateway.

Changing the Favicon of the website

You can create your .ico file here on this website from .png or .jpg image
You will be able to download the zip file from there and extract it
Get the favicon.ico file from there
go to the project folder again and go to this path "public/assets/image"
Replace the favicon.ico to your favicon.ico file
Make sure this file name is favicon.ico and file type is .ico

Going live

Create a zip of the project folder
Upload that folder to your domain targeted directory on the cPanel and extract there
Make sure that your targeted directory have the project files directly, and not wrapped in a folder
Cheers ! Now try accessing your domain, the website should be live there on your domain

Miscellaneous Settings Once the website goes live

Prefixes : Changing the prefix or Orders and Complain IDs. Like Currently orders IDs are being generated like VEGI5676PK. So there is a "VEGI" at the starting of the ID and the same will be for complains.

Those things are dynamic and can be changed from backend admin panel.
Go to the settings section in the admin dashboard and change the values like shown in the image below

In that settings page, you can change all the required values listed below which is available in the website like App store app URL, etc. Please check the list below, and find them on the settings page and update accordingly.

Slogan
Shipping Charge
Currency Of the Platform
Maximum Quantity Of Product Unit per Order
Support Mobile Number and Email
Play store app URL and App store app URL
Terms of Use
Privacy Policy
About Us URL
Contact US URL
Instagram, Facebook, Twitter and Linked In URLs
Short description of the platform
Long description of the platform

For the complete Installation Service

Gmail: retrytech@gmail.com
Skype : RetryTech

Page updated

Google Sites

Report abuse