Outline of Features

Single Page Application (SPA)

The system fits on a single web page with dynamic actions without refreshing the page. Since single-page applications don’t update the entire page but only required content, they significantly improve a website’s speed. Most resources (HTML/CSS/Scripts) are only loaded once throughout the lifespan of an application. Only data is transmitted back and forth. This is a great advantage, and according to Google research, if a page takes more than 200 milliseconds to load it can have a potentially high impact on business and sales.

Responsive Web Design (RWD)

Built using the latest version of Bootstrap 4, the system offers a simple yet beautiful user interface that enables users to easily navigate to different pages and filter content.

Product Catalogue System

Enable sellers to upload products in less time and helps the owner run the marketplace without compromising on speed with increasing number of sellers or products.

Multivendor System

Managing your ecommerce store or marketplace becomes much easier. Our system enables you to manage users, orders, payments and more, in a streamlined way.

Lifetime License

To buy our award-winning ecommerce system, you just have to pay once and license is yours for the lifetime. Once purchased, you can modify the system as per your requirements be it design or functionalities.

Built using 100% open source technologies

Our multi-vendor e-commerce solution can be easily installed on your website (hosting server) to help you handle multiple suppliers. And due to open source code, hook-based modular architecture and impressive flexibility, you are able to change the look and feel of your web store in a matter of a few steps.

Database and Server is hosted by Google

Speed is very important when it comes to delivering a successful online store. Cloud Firestore is built on Google infrastructure — it scales automatically, for even the largest apps. So rest assured that it will deliver a consistent performance at any time of the day.

Realtime Data

Realtime has become a popular strategy that big companies use to deliver the most updated data to their users. The system ensures that users viewing information on the site will get updated in realtime when changes are made.

Minimal Queries

Cloud Firestore bills you for ever query operation you perform, so it’s important to keep amount of queries to minimal. The application is designed in a way that only the necessary queries are executed.

Detailed Features

Login, Registration and Account

• Login using your Email and Password, or social media accounts: Twitter, Facebook and Google. You can also manage your sign-in methods from your account page.
• Seamless account registration. You can register as seller or customer.
• Includes a Forgot Password and Reset Password.

Product Management

• Create, Update and Delete products seamlessly.
• Manage product gallery images. There’s no limit on the number of images you can upload. You can also set a featured image for each product.
• Ability to add a Sale Price. If set, the sale price will be the value of the product the user will pay when checking out the product.
• Ability to set the Shipping Method (per item). Currently there are 3 shipping methods included— Free Shipping, Shipping Options and Local Pickup. Simply select the type of shipping you want to offer for your product. Shipping options have 3 methods included — Standard shipping, Expedited Shipping and Same Day Delivery, users will be able to select one from any of these methods only if you make them available.
• Ability to search and filter your products by Category, Price, and Sale Items.
• Ability to restock — you can input the number of items you have in your inventory. The stock is automatically deducted when user buy products.
• Any change made to the products are reflected to the customer screen right away.

Order Management

Sellers

• Ability to manage orders in real time, orders will automatically appear on your screen as soon as they are placed by the buyer.
• Only one order is created when customers buy products from multiple sellers all at once. And when sellers view the order, only the products they own will show.
• Sellers can add their personal notes and set a status for their orders — these information are only visible to the seller.
• Get notified when the customer cancels the order.
• When an order is cancelled, the quantity purchased is added back to the stock of the product.

Customers

• View past orders which includes all the actual information at the time of the purchase, such as Billing Address, Payment Option selected, and the products purchased.
• Orders can be cancelled by the customer only if the order is in “Pending” or “On Hold” state. If multiple sellers are involved in the order, the order can no longer be cancelled if one of the sellers set the status of the order to “Pending” or “On Hold”.

Administration

• Delete user accounts including their data — orders, cart items and products.
• Set user permissions.
• Update site general settings such as Site Name, Site Logo and Currency.
• Modify product settings — pagination display count and manage product categories
• Update checkout settings which includes instructions for Bank Transfer and Cash On Delivery that will show up on the Thank you page after the customers place their order.

Setup and Installation

Extract the contents of the zip file on your preferred directory, then navigate to it using your command prompt. Then at the root of the project folder, run the following command:

1
npm install

After the installation completed, we can now setup our credentials. Open the file /.env  file found on the root.

Since this app is built with CRA (Create React App), the environment variables should be be prefixed with REACT_APP_

Setup Firebase

REACT_APP_API_KEY=xxx
REACT_APP_AUTH_DOMAIN=xxx
REACT_APP_DATABASE_URL=xxx
REACT_APP_PROJECT_ID=xxx
REACT_APP_STORAGE_BUCKET=xxx
REACT_APP_MESSAGING_SENDER_ID=xxx

Let’s populate these variables.

To start, sign up on the official Firebase website. After you have created a Firebase account, you should be able to create projects and be granted access to the project dashboard. We’ll begin by creating a project for this application on their platform whereas the project can have any name. In the case of this application, run it on the free pricing plan. If you want to scale your application later, you can change the plan.

Next, go to Storage section and click the Get Started button. Follow the on-screen instructions to successfully initialize your Storage Bucket.

Next, go to Database section and click the Get Started button. Follow the on-screen instructions. Make sure that you are creating an Cloud Firestore database.

Next, find the project’s configuration in the settings on your project’s dashboard.

Then navigate to the General tab and locate and click the </> symbol to create an app:

Then after your app is created, you’ll have access to all the necessary information: secrets, keys, ids and other details to set up your application.

Finally, go back to the /.env  file and replace each matching environment with the provided Firebase config values.

Setup Paypal

In the /.env there are 3 environment variables:

REACT_APP_PAYPAL_ENV=sandbox
REACT_APP_PAYPAL_CLIENT_ID_SANDBOX=xxx
REACT_APP_PAYPAL_CLIENT_ID_PRODUCTION=xxx

You can get the client IDs by creating a PayPal REST API application from this link: https://developer.paypal.com/developer/applications/

Your “App Name” can be any name. It’s only for yourself to identify your application in case you have more than one PayPal REST API app. After you have created the app on the PayPal dashboard, you should find your Client IDs for your sandbox and live application. You will need both in order to test your PayPal payment in development mode but also to use it in production mode in your React application. You can set REACT_APP_PAYPAL_ENV to either production (for live) or sandbox (for development).

Setup Authentication

The system currently supports 4 ways of authentication: Email Password, Google, Facebook, and Twitter

There are a few errors that could show up for while setting up Google, Facebook or Twitter social logins for your application. First, understand the error message yourself and try to figure out the fix for it. However, I want to document a few things I have noticed myself and how I fixed them. If you encounter any of these issues, check again this troubleshooting area. Let’s see what kind of errors we have and how to fix them:

On your Firebase dashboard, you will find an Authentication tab to get a list of all your authenticated users, sign up methods and other configuration. Click the Authentication tab and scroll down to “Authorised domains” and add “localhost” there. Then your development domain should be authorized to perform the Auth operations with third-parties.

It’s a mandatory configuration for most of Firebase’s sign in methods. However, it can be that this alone doesn’t help and you need to perform further configuration. Therefore, visit Google’s Developer Console and select your Firebase project in the top-level navigation and navigate to “Credentials” afterward.

There you will see configuration for “API keys” and “OAuth 2.0 client IDs”. In “API keys”, edit “Browser key (auto created by Google Service)” and add both locahost and the value of the REACT_APP_AUTH_DOMAIN variable from your project’s .env file to the “Website restrictions” section, see bellow:

Next, in “OAuth 2.0 client IDs”, edit “Web client (auto created by Google Service)” and add localhost and the value of the REACT_APP_AUTH_DOMAIN variable from your project’s .env file to the “Authorized JavaScript origins” section, see bellow:

It can take some time until the changes are propagated through Google’s services (e.g. Firebase). But then all third-parties should be authorized to access your Firebase project.

Sign In Providers

In the following steps, you will be enabling each method on our Firebase project’s dashboard. You can find all your sign in methods under the “Authentication” tab.

Email / Password

Enable the sign in method on your Firebase dashboard for Email / Password. Simply click on the Enable toggle button to enable it.

Google Social Login

By default, the Project public-facing name field is already populated, leave it as is, then on the Project support email field just select your email from the drop down. Refer to image bellow:

There are cases where Google does not reflect to your Firebase Authentication right away, which causes problems with the Sign In with Google feature. I’ve found out that you can trigger a forced update by changing any information, such as logo, in the Google Cloud API page. Simply navigate to this page: https://console.developers.google.com/apis/credentials and then click on the OAuth consent screen tab, do some changes, like change the application logo, and then click the Save button when you’re done. This will ensure that the latest OAuth settings are reflected in Firebase.

Facebook Social Login

Enable the sign in method on your Firebase dashboard for Facebook. The Facebook social login expects an App ID and and App Secret. You can get these by creating a new Facebook App with your Facebook Account for this Firebase in React application. Afterward, you can find the App ID and App Secret for your new Facebook App.

In addition to the tutorial, you will also need to turn ON the status to make the app publicly accessible. Simply click on the toggle button, refer to the image bellow:

Twitter Social Login

Enable the sign in method on your Firebase dashboard for Twitter. The Twitter social login expects an API key and API secret. You can get these by creating a new Twitter App with your Twitter Account for this Firebase in React application. Afterward, you can find the API key and API secret for your new Twitter App.

Create Indexes

In order for queries to behave as expected, we need indexes. Go to Database -> Indexes -> Add Index button. Make sure to select Collection under the Query scopes for every index you create.

Cloud Firestore currently does not offer a way to import all indexes, so you will have to manually register each index bellow:

╔══════════════╦══════════════════════════════════════════════════╗
║ Collection ID║                   Fields indexed                 ║
╠══════════════╬══════════════════════════════════════════════════╣
║ products     ║ keywords Arrays salePrice Ascending              ║
║ products     ║ category Ascending price Ascending               ║
║ users        ║ keywords Arrays createdAt Ascending              ║
║ products     ║ keywords Arrays price Descending                 ║
║ products     ║ author Ascending price Descending                ║
║ products     ║ category Ascending salePrice Ascending           ║
║ orders       ║ customerID Ascending createdAt Descending        ║
║ orders       ║ customerID Ascending createdAt Ascending         ║
║ products     ║ author Ascending price Ascending                 ║
║ users        ║ roles Arrays createdAt Ascending                 ║
║ products     ║ keywords Arrays price Ascending                  ║
║ orders       ║ sellers Arrays createdAt Descending              ║
║ products     ║ keywords Arrays category Ascending price Ascending
║ products     ║ author Ascending salePrice Ascending             ║
║ products     ║ category Ascending price Descending              ║
║ orders       ║ sellers Arrays createdAt Ascending               ║
║ users        ║ roles Arrays createdAt Descending                ║
║ users        ║ keywords Arrays createdAt Descending             ║
╚══════════════╩══════════════════════════════════════════════════╝

Create an administrator

Currently, the admin must be created manually for better security. On your Firebase Console navigate to Database -> Users table, select the user you want to make admin and then click on the + sign button on the roles array then add a new string value: “ADMIN”. Refer to the image bellow:

If you haven’t already, you may now run npm start from the command prompt to run the app on your browser.

Now login as that user, you should be able to see a new navigation item called “Admin” as seen bellow:

Add Categories

Before you can add products, you need to create Categories. From the app, navigate to Admin -> Settings -> Product, then start adding some categories.

After adding categories, sellers will then be able to create products.