React Native Laravel Groceries Solution With Delivery App 1.0
Following are essentials you must have before installation
The package include:
For react mobile app development, you need react development environment ready.
Please follow below official links to setup your development machine.
You must have prior experience of ionic mobile application development. Also you must know about how to compile apps for playstore and appstore.
Application build and test dependencies
Below given are the essential dependencies that are needed to build the application and also for testing purpose.
Projects are tested on following enviroment
From Where to Begin?
Well, after reaching the above-mentioned step, you need to begin with the adminpanel.zip folder. Copy this folder as it is, and paste it in some other dedicated drive and folder and extract the files from the adminpanel.zip folder. The extracted files would appear as shown below
Now you just need to enter your website domain name/public/install in any browser, as shown below, and an installation wizard would automatically pop up on the screen.
To make the installation process smooth and user friendly, we have come up with a bit more innovative manner of installation where the user would be provided with an installation wizard, user would be required to keep putting the appropriate values in the relevant fields and the installation process would not take more than just a couple of minutes.
After uploading the source code, once we click it, this would open up by default an installation wizard that would look like this,
The above-given slide with Laravel Ecommerce App title is a welcome note to the user. By clicking on the Next button, the wizard would appear like this
The above mentioned are the dependencies or extensions for the server that are essential components for installation. All the green checks would ensure the presence of all the above mentioned dependencies. In case, if the system doesn’t have any of these dependencies already installed, a red cross mark would appear in the corresponding column of the missing component. So make sure to install all the dependencies and extensions to ensure the smooth running and installation of the app.
By clicking the next, the wizard would ask for the permissions as shown below.
You need to grant the directed permissions respectively for instance.
To grant these permissions>
Open your C panel, here you will find three folders in horizontal order named as
Select the framework and logs folder, right-click on this, and now click on the change permission, enter the relevant vale 775, and click on the change permission on the bottom again.
In the same manner, grant permission to the bootstrap/cache folder by right-clicking on the folder and selecting change permission.
Once all the permissions are granted, all three folders would show a green checkmark on correspondent columns. From here click the next button.
In the next step, you need to complete the environment settings wizard.
By clicking the Wizard Text Editor next slide will show up as given below
Step 1) Give any name to your Website as you like for instance, Laravel 1 or XYZ.
Step 2) From development mode that carries the following option(s)
Select any of the above mode(s) according to your requirement.
Step 3) In App Debugging section, there are two further options that are
By clicking the true, all the errors would be shown
By clicking the false, no errors would be shown.
Step 4) In Log Type section select debug.
Step 5) In Website URL section, paste your app’s URL and click on the database on the bottom of the wizard.
In the next wizard section, you will be required to enter your database information.
Note: In any case, if you need to change your .env settings or need to change the production or any other mode, you can go to the link below and alter your settings as required. But first complete all the requirements of this wizard.
To begin with this, you need to create an empty database first in your PHPMyAdmin, enter all of the details of that empty database in the above wizard, and click on the application on the bottom of the wizard.
Note: Your predefined and created database MUST be empty.
Make sure to also configure your mail settings in the wizard shown above.
In the final phase, enter your admin details like
Your website will be live on following link.
By default laravel website run from public folder, so you need to change your server/domain document root to public. You can follow below link for it. There are different methods of remove public from url.
We have different environment in development.
Our laravel installer works perfect on every environment, However some exceptions may occur on environment to environment change .
Sometime user provide wrong credentials for database, which gives an exception. our laravel installer is handling this exception in a way, It shows message to user to restart its local server if user is providing wrong credentials once.
Note: user is deploying project on local environment like on Xamp , Wamp , Lamp etc”
But if user on live server then user should may/may not clear cache.
if user face session expire (it occurs due to providing wrong credentials many time.) page after providing wrong credentials on live server , user should must clean cache on live server.
Now navigate to the link given below to activate the application module. Upload the api.zip to activate application settings and API endpoints.
After upload api.zip, your app will be ready for setup. If you bought website item (LaravelEcommerce) too then you can upload web.zip to setup website.
This allows you to log in through your Facebook credentials. Here is the official link with the detailed demonstration of Facebook integration
After that you need to enable Facebook login and also need to put Facebook app id , secret id , Facebook app URL, to complete Facebook login process.
To enter your Facebook Credentials use below link.
This allows you to login through your Google credentials. Here is the official link with the detailed google integration.
After that you need to enable Login from back end and also put the Google app Id , Google app secret and google app URL to complete google login process.
To enter your Google Credentials use below link.
You need Firebase account and oneSignal account for documentation you can get information from link below.
First of all you need to create a project on FCM then add Firebase to your
account to get sender ID using URL below
You can get sender ID after that you can create app on one signal to get App ID using link below
Now avail this feature, put both app ID and Sender ID at back-end make this feature functional.
To enter your OneSignal Credentials use below link.
This section will help you walk through the minimum required setup to run project.
First, this is important, please make sure you have already install and run the simulator successful base on this guide with REACT-NATIVE-CLI.
It will help you install and build your first Example React Native app.
Open terminal and go to project folder and run following command
Follow above link
React Native CLI Quickstart -> macOS -> iOS
we are using node v12.14.1
Run following command if you have installed node modules from previous command.
After installation of all dependencies back to previous folder
run this command
To check the Android device is ready or not run following command from your
This section will guide how to make the app work.
Go to the Firebase Project and create a new one with new android package name
Next screen shot
Go to the Firebase Project and create a new one with new android package name
Next screen shot
Next screen shot
Next screen shot
go into android/app/src/res/mipmap(dpi,mdpi,xhdpi,xxhdpi,xxxhdpi) and replace the splashscreen image for splash screen and ic_launcher and ic_launcher_round(round shape icon) for icon (name and extension of all images should be same )
go into /RNBecrux/Images.xcassets/ and change the splashscreen and icon
Click in the Project navigator and then choose AppIcon.
Now just drag the right sized image (in .png format) from Finder onto every blank in the app
set. The app icon should be all set up now.
replace that images for intro1 slider (name and extension of all images should be same )
For Rate Us button change the google package name in /screens/RateUs.js
go to Wordpress site ReactEcommerce/General Settings and enter URL to iOS share app
go into android/app/src/main/java/com/../MainActivity.java folder and change forceRTL() to true
go into ios/RNBecrux/AppDelegate.m folder and change forceRTL() to YES
The first thing we need to do is to create a new application in Facebook’s developer dashboard, and this app is the one that Facebook will use to ask our users for their permission when we try to log them into our React Native application. For that, you’ll need to go to the Facebook developer console and create a new app.
Find the .plist file in the Supporting Files folder in your Xcode Project.
1. Right-click your .plist file and choose "Open As Source Code".
2. Copy & Paste the XML snippet into the body of your file.
Put your ONESIGNAL APP ID here with your OneSignal google project number in your android/app/build.gradle folder.
First, we need to open our Manifest file and add the app name we will want to be
referencing, in our case Becruxapp.
In android/app/src/main, open AndroidManifest.xml and change the android:host=” ” according to your link and you can also change android:scheme=” ”.
pen file android/app/src/main/res/values/strings.xml and change to your App name
Don’t forget clean cache after change app info.
This section is specified for all your media-related images if any. For instance, when you have to display and upload any image related to any product or for any other purpose, you need to upload it first to the media gallery section using give link below.
In order to add more images or media files, click on the add new option and upload images in pop up window.
Click on the middle section and upload the files existing on your computer hard drive. Any file that you upload here would be readily available in your media section.
This section is meant to select the language. The integrated by default language is English only.
You can use below link to add language.
Translation(Add New Language)
If you want to add any other language, go to add new option and define the new language you want to be implemented. For this, you will have to do the data entry in the same language.
Step 1) Name: Enter the name of the desired language i.e french
Step 2) Code: Define a certain ISO Language code that is assigned to every language. i.e fr
Step 3) Direction: Define the direction of your desired language in which manner it is written. For instance, English is written from left to right.
Step 4) Icon: Add a specific icon of the language.
Step 5) Click on Submit option on the bottom and you are done with the process. The language has been added as shown below.
US dollar is the standard integrated currency. You can add further currencies according to your desire and business pattern, this would require a bit of customization skill but one case still easily add a new currency through the Add New option.
Note: You can add as many currencies as you can but if you want to add new currency as base currency then you should have to edit base currency which is U.S.Dollar by default but value of base currency is 1 which is not changeable.
This is about all registered customers who can use store. You can click Add New for add new customers.
Use below link for Customers
Now you have full access of your customers as you can add New Customer , perform action like you can edit customer, edit address and delete customer.
The categories section allows you to create categories for your eCommerce store. For instance, if you run a clothing store, you may need to add categories like Men’s Clothing, Women, Kids etc.
Categoies Listing page Link
By clicking on Add New, you can add your defined category.
Fill the above-given columns correctly and a new category would be generated.
Step 1) Category: This is the primary name that you need to assign to a certain category. For instance, this might be kids clothing, Men’s suiting etc.
Step 2) Name: Assign here the name that you want for the subcategory i.e, jeans, shoes, scarf etc.
Step 3) Image: Assign an image that better reflects the class or type of the category.
Step 4) Icon: Add an additional icon that further elaborates the category.
Step 5) Status: Set the status as active or inactive as there might be times.
when you are not selling some specific item that you were selling previously. In this scenario, set the active status for those which are actively being sold.
Finally, click on submit and you will be done with a new category addition.
Attributes are meant to define different aspects of your products, for example, color, size, Waist, Weight etc. You can add and assign as many attributes as you like according to the nature of your business.
Click on the “Add New” option to add the desired attributes you want to assign to certain products.
Name the attribute as you want it to be displayed i.e Size, Color, Waist etc.
In this section, you can add all of your products one by one.
Here is the listing page of your all products.
By clicking on the Add New option, start adding as many products as you like by entering each product’s details separately and individually.
Note:Before adding products, make sure that you have already uploaded all the relevant media files to the media section or else you will not be able to upload images directly from your computer’ hard drive.
In the below-given link, fill each section with care one by one.
Step 1) Manufacturer: Select here the specific predefined manufacturer of a certain product that actually manufactured the product. For instance, you may have some Levis articles displayed on your application.So choose the manufacturer accordingly.
Step 2) Category: Here check the category in which a certain product falls. I.e this may fall under jeans or Snickers.
Step 3) Is Feature. Select whether the product is featured or not.
Step 4) Status: Select the status whether the product is actively ready for sold or is dormant at the current time.
Step 5) Product Price: Mention here the selling price of the product at which you are offering a certain product.
Step 6) Tax Class: Here select the certain tax class under which the product falls. For instance, a beer can may fall under the alcoholic class, a bar of chocolate may fall under the edible tax class.
Step 7) Min Order Limit: Here you can set a minimum number to be ordered for a certain product. For instance, there might be some products in batches that you do not sell in single pieces.
Step 8) Max Order Limit: Here you can set a maximum order limit.
Step 9) Product Weight: Mention here clearly the weight of the product in meters, grams or kilograms.
Step 10) Product Model: Mention here the product model number that you have assigned to each product separately. For instance, BMH109 for a certain T.shirt.
Step 11) Image: In the image section, add a clear image of the product that is identical to the actual product.
Step 12) Video EmbedCode Link: You can add your embed code link here like your youtube link.
Step 13) Flash Sale: Select yes if this certain product is to be shown in the flash sale, otherwise select no.
Step 14) Special: Choose yes if a certain product belongs to a deal or offer otherwise select no.
Step 15) Product Name: Mention here the product name in English and all other languages that you have selected in relevant columns.
Step 16) Description: Briefly define here the product with some of the details that you feel necessary to be mentioned here.
Step 17) Click on save and continue and you are all done with adding a product.
Inventory section allows you to maintain a record of the available stock category wise. You must be tackled this feature very carefully.
To add inventory of your products use below link.
Enter the details of each product separately. Enter the available units that are currently in stock, you may enter a referral purchase code as well.
Note: Here Minimum and maximum levels allow you to set a certain limit for a certain product to maintain a level of stock. I.e what minimum/maximum number of the product essentially be there in stock.
Through this option, you can choose a certain tax class for certain products that fall under a specific tax class. For instance, some products may fall under the garments class, some may fall under the edible class.
Use below link for list of tax classes
Use below link for add tax class
Here you can get all Tax rates of different zones with respect to there tax classes.
Use below link for
Through Add Tax Rate, you can define the percentage of applicable taxes specifically for certain zones.
Use below link for add tax rates
These are the incentive coupons that are offered to the customers. Customize all your coupon related settings here.
Use below link for list of coupons
Click on the Add New option and following window will pop up which has following link for add new coupon
This enables you to choose the shipping method that you allow for the delivery of ordered products. To manage shipping methods use below link.
Above given URL contain shipping methods list that are integrated with the app. You can choose any one of them according to desire.
Here you can define or specify a certain news category i.e New Arrivals, or any developments going on with your business that you want to make public.
Use below link for list of news categories
Use below link for add news category
These settings are related to sending and receiving alerts when you execute some certain act. I.e
1. Create customer welcome email: This intimates the customer through email as welcome note.
2. Create customer welcome notification: By selecting this option, the customer is intimated through a notification.
3. Order email: By selecting this option, the customer would be notified through email on placing an order.
4. Order notification: This would be an intimation through notification on placement of order.
5. Order status email: This email would intimate the customer about the status of the order placed.
6.Order status notification: This option would intimate the customer through a notification.
7. New product email: This would be an intimation through email when a new product is added to your store.
8. New product notification: This intimation would be sent through a notification on addition of new product in store.
9. Forgot password: This intimation would be sent when the customer login password is forgotten.
10. Adding news email: An email would be sent when you add a news to news section.
11. Adding news notification: This intimation would be made through a notification when some news is added to the news section.
12. Email contact us: An email would
sent when the customer click on the contact us option.
Use below link.
Choose Header: Select here your desired header styles.
Carousel: Choose from here the desired carousel style that you want to implement.
Banner section. Select from an array of already added banner styles, or you can also add further.
Tab product view. This is to enable or disable the tab product view option.
Flash sale section. This is a dedicated section for products that are added in your flash sale.
Categories. This section allows you to activate or deactivate your predefined categories section.
First Parallax banner section. There would appear an ad section on the website. The first Parallax banner section is optional. If you do not want this to be displayed, simply disable it.
Top selling. This is meant for your top selling products. Enable or disable this section according to your desire.
Second Parallax banner section. There would appear an ad section on the website. The second Parallax banner section is optional. If you do not want this to be displayed, simply disable it.
Newest product section. This displays your newest product additions. Disable it if you do not have any new products at the moment to be displayed in this section.
Third Parallax banner section. There would appear an ad section on the website. The Third Parallax banner section is optional. If you do not want this to be displayed, simply disable it.
Blog section. This section is dedicated for your recurring blogs.
Info boxes. This section is dedicated for info, select it according to your requirements.
Choose footer. The last one is for footer. Select the desired footer from all available options.
Use below link to customize your homepage.
Use the following link to Add Pages.
Here you can get
1. General settings where you may can select different styles.
2. Display In Menu/Sidebar where you may can display different pages which you want.
3. Local Notification where you can specify the notification details.
This URL allow you to add all above essentials.
Feature where you can get all the details of delivery boy.
Here is link to get details of delivery boy
Below is link wehre you can add new delivery boy
You can manage deliveryboys Personal Info, Vehicle Info, Bank Info and can set commision.
Floating cash is the cash in hand after delivery boy delivered the order. You can manage check Floating cash by given URL.
This section contain the amount to be paid to the delivery boy.
Use the following link to Add Pages.
You can manage delivery boys statses by using this section.
Use the following link to manage statuses.
This feature is related to the authentication purpose. Through this feature, you can add more admins other than you, and assign them different roles in handling the applicaton.
You can get admin roles list below
You can add Admin Through given link.
Admin type: Choose the admin type here.
You can assign different roles to specific users. This implies that you can ascertain the role that other users can play while managing the products.
Here you can add the admin type through given link below.
Admin name: Mention the admin name.
Status: set the status whether the mentioned person is an active or inactive admin.
Here you can apply bug fixes if any or updates in codes provided by us. You just upload .zip file and apply your purchase code.
Chooose Zip : Upload file provided by author for bug fixes/ updates in code
Purchase Code: Add your code caynon purchase code
For observing the responce and understanding of CMS working, we provide you demo files(SQL sample data) where can get the product, categories and much more for demo purpose.
Download our Sample SQL Dump From here.
Apply demo file here