How To Build A Decentralized eCommerce Platform with React and Solidity: (PART TWO)
Tags: decentralizedweb, solidity, blockchain, react
Published: 2022-03-25 16:18:00

What you will be building, see the [live demo](https://fresher-a5113.web.app/) and [GitHub repo](https://github.com/Daltonic/freshers) for more info.

![Add New Product](https://paper-attachments.dropbox.com/s_D720F64E38BC9DEB85A924EA9228240E9E0724DBBDD5C2A1518C2F4F4FE8CAB0_1647957013361_freshers-add-product.gif)



![Pay With Ethers](https://paper-attachments.dropbox.com/s_D720F64E38BC9DEB85A924EA9228240E9E0724DBBDD5C2A1518C2F4F4FE8CAB0_1647957404131_freshers-pay-with-eth.gif)



![Chat With Seller](https://paper-attachments.dropbox.com/s_D720F64E38BC9DEB85A924EA9228240E9E0724DBBDD5C2A1518C2F4F4FE8CAB0_1647957929071_freshers-chat.gif)

## Introduction

In the [PART-ONE](https://dev.to/daltonic/how-to-build-a-decentralized-ecommerce-platform-with-react-and-solidity-part-one-21o6) of this tutorial, we built the smart contract that powers our application. Now let’s build the frontend for interacting with it as you can see above.

Not much talking, let’s get coding… We’ll begin by installing the rest of the dependencies for this application.

[Check out my YouTube channel for FREE web3 tutorials now](https://www.youtube.com/channel/UCQteXYZ5mC-cuTxplzM4Hlw?sub_confirmation=1).


## Installing App Dependencies

On your terminal, run the following commands…


    yarn add firebase #Database SDK
    yarn add @cometchat-pro/chat #Chat SDK 
    yarn add @material-tailwind/react #UI Kit

If you have successfully executed the above commands, let’s move to creating some private keys for Firebase and CometChat.


## Creating Private Keys

To utilize the Firebase or CometChat SDK, we need to create an app with their services. Don’t worry, this won't cost you a dime. Firebase is limited but free, it's more than enough to help you learn full-stack development. CometChat offers its users a trial version for testing out their SDK and getting acquainted with how their technology works.

**Creating an App with Firebase**
Use this example If you do not already have a Firebase account, create one for yourself. After that, go to Firebase and create a new project called **freshers**, then activate the Google authentication service, as detailed below.


![Firebase Projects page](https://paper-attachments.dropbox.com/s_0CD8CF1F8D288F8B67E35429489539F2DEF742656388B21AFE423365DCE87673_1639828562449_screenshoteasy+6.png)

![Step 1](https://paper-attachments.dropbox.com/s_0CD8CF1F8D288F8B67E35429489539F2DEF742656388B21AFE423365DCE87673_1639828654829_screenshoteasy+7.png)
![Step 2](https://paper-attachments.dropbox.com/s_0CD8CF1F8D288F8B67E35429489539F2DEF742656388B21AFE423365DCE87673_1639828654775_screenshoteasy+9.png)
![Step 3](https://paper-attachments.dropbox.com/s_0CD8CF1F8D288F8B67E35429489539F2DEF742656388B21AFE423365DCE87673_1639828654724_screenshoteasy+10.png)


Firebase supports authentication via a variety of providers. For example, social authentication, phone numbers, and the traditional email and password method. Because we'll be using the Google authentication in this tutorial, we'll need to enable it for the project we created in Firebase, as it's disabled by default. Click the sign-in method under the authentication tab for your project, and you should see a list of providers currently supported by Firebase.


![Firebase Authentication Service](https://paper-attachments.dropbox.com/s_52E0591A3F34FCACA6806EE6ACA69150A91780C910B4BF05FF192DA50DA23706_1642939379597_screenshoteasy+8.png)



![Step 1](https://paper-attachments.dropbox.com/s_52E0591A3F34FCACA6806EE6ACA69150A91780C910B4BF05FF192DA50DA23706_1642939407189_screenshoteasy+9.png)
![Step 2](https://paper-attachments.dropbox.com/s_52E0591A3F34FCACA6806EE6ACA69150A91780C910B4BF05FF192DA50DA23706_1642939422868_screenshoteasy+10.png)
![Step 3](https://paper-attachments.dropbox.com/s_52E0591A3F34FCACA6806EE6ACA69150A91780C910B4BF05FF192DA50DA23706_1642939448868_screenshoteasy+11.png)


Super, that will be all for the firebase authentication, lets generate the Firebase SDK configuration keys.

You need to go and register your application under your Firebase project. 

![Project Overview Page](https://paper-attachments.dropbox.com/s_52E0591A3F34FCACA6806EE6ACA69150A91780C910B4BF05FF192DA50DA23706_1642939587877_screenshoteasy+4.png)


On the project’s overview page, select the add app option and pick **web** as the platform.


![Registering a Firebase SDK Step 1](https://paper-attachments.dropbox.com/s_52E0591A3F34FCACA6806EE6ACA69150A91780C910B4BF05FF192DA50DA23706_1642939610677_screenshoteasy+5.png)
![Registering a Firebase SDK Step 2](https://paper-attachments.dropbox.com/s_52E0591A3F34FCACA6806EE6ACA69150A91780C910B4BF05FF192DA50DA23706_1642939643415_screenshoteasy+6.png)


Return to the project overview page after completing the SDK config registration, as shown in the image below.

![Project overview page](https://paper-attachments.dropbox.com/s_52E0591A3F34FCACA6806EE6ACA69150A91780C910B4BF05FF192DA50DA23706_1642939734348_screenshoteasy+7.png)


Now you click on the project settings to copy your SDK configuration setups.

![Project Setups](https://paper-attachments.dropbox.com/s_0CD8CF1F8D288F8B67E35429489539F2DEF742656388B21AFE423365DCE87673_1639909446593_screenshoteasy+12.png)


The configuration keys shown in the image above must be copied to the **.env** file. We will later use it in this project.

Create a file called **firebase.js** in the **src** folder of this project and paste the following codes into it before saving.


{% gist https://gist.github.com/Daltonic/23249a1f844861216ea90af6c17030cf %}


You are awesome if you followed everything correctly. We'll do something similar for **CometChat** next.

**Creating an App with CometChat**
Head to [CometChat](https://app.cometchat.com/app/) and signup if you don’t have an account with them. Next, log in and you will be presented with the screen below.

![CometChat Dashboard](https://paper-attachments.dropbox.com/s_52E0591A3F34FCACA6806EE6ACA69150A91780C910B4BF05FF192DA50DA23706_1642939920698_screenshoteasy+26.png)


Use this as an example to create new app with the name **freshers** by ****clicking the **Add New App button**. You will be presented with a modal where you can enter the app details. The image below shows an example.


![Add New App Modal](https://paper-attachments.dropbox.com/s_52E0591A3F34FCACA6806EE6ACA69150A91780C910B4BF05FF192DA50DA23706_1642939907089_screenshoteasy+27.png)


Following the creation of your app, you will be directed to your dashboard, which should look something like this.


![API Key Here](https://paper-attachments.dropbox.com/s_52E0591A3F34FCACA6806EE6ACA69150A91780C910B4BF05FF192DA50DA23706_1642940299680_screenshoteasy+28.png)
![Rest API Key Here](https://paper-attachments.dropbox.com/s_52E0591A3F34FCACA6806EE6ACA69150A91780C910B4BF05FF192DA50DA23706_1642940299625_screenshoteasy+29.png)


You must also copy these keys to the .env file.

Finally, delete the preloaded users, and groups as shown in the images below.


![Users List](https://paper-attachments.dropbox.com/s_52E0591A3F34FCACA6806EE6ACA69150A91780C910B4BF05FF192DA50DA23706_1642940871741_screenshoteasy+30.png)
![Group List](https://paper-attachments.dropbox.com/s_52E0591A3F34FCACA6806EE6ACA69150A91780C910B4BF05FF192DA50DA23706_1642940871690_screenshoteasy+31.png)


Awesome, that will be enough for the setups. Use this template to ensure your **.env** file is following our convention.


    ENDPOINT_URL=<PROVIDER_URL>
    SECRET_KEY=<SECRET_PHRASE>
    DEPLOYER_KEY=<YOUR_PRIVATE_KEY>
    
    REACT_APP_COMET_CHAT_REGION=<YOUR_COMET_CHAT_REGION>
    REACT_APP_COMET_CHAT_APP_ID=<YOUR_COMET_CHAT_APP_ID>
    REACT_APP_COMET_CHAT_AUTH_KEY=<YOUR_COMET_CHAT_AUTH_KEY>
    
    REACT_APP_FB_AUTH_KEY=<YOUR_FIREBASE_AUTH_KEY>
    REACT_APP_FB_APP_ID=<YOUR_FIREBASE_APP_ID>


Lastly, create a file name cometChat.js in the **src** folder of this project and paste the code below into it.


{% gist https://gist.github.com/Daltonic/2b98ef6e8f70ed5fd7baae92d4b130f9 %}


Cool, let’s start integrating them all into our application, we will start with the components.

## Building The Components

Let’s start crafting out all the components one after the other, always refer to the [**git repo**](https://github.com/Daltonic/freshers) if you have any challenges.

**The Register Component**

![Register Component](https://paper-attachments.dropbox.com/s_CE80037D72EC7D0ADB341D1AE61FC9E1762F13D1F63E9BB49627D2E9F0180DBE_1648210791106_screenshoteasy+38.png)


This component is responsible for saving new users into Firebase. Navigate to the **src >> components** and create a file named **Register.jsx**. 


{% gist https://gist.github.com/Daltonic/12aab5d00d7eafa39cf934e59a582567 %}


Awesome!!!

**The Login Component**

![The Login Component](https://paper-attachments.dropbox.com/s_CE80037D72EC7D0ADB341D1AE61FC9E1762F13D1F63E9BB49627D2E9F0180DBE_1648210904258_screenshoteasy+39.png)


Let’s also create another component called **Login.jsx** in the **src >> components** folder and paste the code below in it.


{% gist https://gist.github.com/Daltonic/4ae3bbab2a0aa92f21111f6667d2275a %}


Cool, these two components make up the authentication aspect of this application. We will later fuse them into their respective views.

**The Header Component**

![Header Component](https://paper-attachments.dropbox.com/s_CE80037D72EC7D0ADB341D1AE61FC9E1762F13D1F63E9BB49627D2E9F0180DBE_1648210694749_screenshoteasy+37.png)


This component encapsulates the pages on our application. It was crafted with the free **Creative TIm Tailwind-Material UI Kit**. Create a file named **Header.jsx** inside the **src >> components** directory and paste the codes below in it.

{% gist https://gist.github.com/Daltonic/e2bbd12e0652aecac275c1d0afd69bf0 %}


**The Food Component**
This component renders the particular food properties to screen in a beautifully crafted card from tailwind CSS and Material design. Create a file called **Food.jsx** still in the **components folder** and paste the following codes in it.

![](https://paper-attachments.dropbox.com/s_CE80037D72EC7D0ADB341D1AE61FC9E1762F13D1F63E9BB49627D2E9F0180DBE_1648211052015_screenshoteasy+40.png)


Each card renders the name, image, description, price, and the remaining stocks of a food product. Here is the code for it.


{% gist https://gist.github.com/Daltonic/8852a760c4d6a9965522f433d5a34f49 %}


Next, let’s look at the foods component.

**The Foods Components**
This component is responsible for rendering the entire collection of food data in our database. Let’s look at its code snippet.

![The Foods Component](https://paper-attachments.dropbox.com/s_CE80037D72EC7D0ADB341D1AE61FC9E1762F13D1F63E9BB49627D2E9F0180DBE_1648211327222_screenshoteasy+41.png)


Still, in the **components directory**, create another file called **Foods.jsx** and paste the codes below in it.


{% gist https://gist.github.com/Daltonic/e3471d409b381b591c19a8146c2058f5 %}


Lastly, let’s look at the **CartItem** component.

**The CartItem Component**

![CartItem Component](https://paper-attachments.dropbox.com/s_CE80037D72EC7D0ADB341D1AE61FC9E1762F13D1F63E9BB49627D2E9F0180DBE_1648212019412_screenshoteasy+42.png)


This component is responsible for showing a single item in our cart collection. Here is the code responsible for it.


{% gist https://gist.github.com/Daltonic/ca70eddff96a2e4009a63d8e8eb2e894 %}


Congratulations, you just finished coding the components, let’s move on to creating the views…


## The Views

Now that we’ve created the components supporting the various views, let’s proceed next by creating the individual pages.

**The Home View**

![The Home View](https://paper-attachments.dropbox.com/s_CE80037D72EC7D0ADB341D1AE61FC9E1762F13D1F63E9BB49627D2E9F0180DBE_1648213395903_screenshoteasy+43.png)


This view renders the Food component structure. This is to say, the home view retrieves all the food collection from firebase and shows them on screen. Let’s take a look at the codes responsible for it.

Navigate to the **views directory** and create a file named **Home.jsx**, then, paste the code below inside of it. In fact, you will create all these files in the views folder.


{% gist https://gist.github.com/Daltonic/cd63cbf8e2be1b52b24487073fed07eb %}


**The Product View**

![The Product View](https://paper-attachments.dropbox.com/s_CE80037D72EC7D0ADB341D1AE61FC9E1762F13D1F63E9BB49627D2E9F0180DBE_1648214140329_screenshoteasy+44.png)


This view is responsible for showcasing in detail the information about a product. From this page, users can view, edit, and delete products as well as chat with the seller, or quickly purchase the food item with Ethereum.

Here is the code for it…


{% gist https://gist.github.com/Daltonic/19fb52ef977595a1ae1e83b696e1e0fd %}


**The AddProduct View**

![Add Product View](https://paper-attachments.dropbox.com/s_CE80037D72EC7D0ADB341D1AE61FC9E1762F13D1F63E9BB49627D2E9F0180DBE_1648214501516_screenshoteasy+45.png)


As the name implies, this view is responsible for storing new food items into our Firestore collection. Observe the code snippet below…


{% gist https://gist.github.com/Daltonic/7a3d68d5e194267a803d7e45be1d99ac %}


Awesome, we are moving forward, let’s see the edit product view…

**The Edit Product View**

![Edit Product](https://paper-attachments.dropbox.com/s_CE80037D72EC7D0ADB341D1AE61FC9E1762F13D1F63E9BB49627D2E9F0180DBE_1648214952534_screenshoteasy+46.png)


This view enables us to edit our existing food items. Of course, you need to be the one who initially added the food product to the shop before you can edit. Only product owners can edit, let’s look at the codes performing this action.


{% gist https://gist.github.com/Daltonic/dfe0ed0132a8108124d8bff3a5384b12 %}


Lastly, for the cases relating to products, let’s look at the cart view…

**The Cart View**

![The Cart View](https://paper-attachments.dropbox.com/s_CE80037D72EC7D0ADB341D1AE61FC9E1762F13D1F63E9BB49627D2E9F0180DBE_1648215208169_screenshoteasy+47.png)


In this view, you can modify and place your orders. Once you place your order, it is immediately saved in Firestore. Below is how the code is written.


{% gist https://gist.github.com/Daltonic/eea5161f7f47328375ed9ccdf3f8628a %}


Next, let’s take care of the last four views in our tray…

**The ChatList View**

![The Chat List View](https://paper-attachments.dropbox.com/s_CE80037D72EC7D0ADB341D1AE61FC9E1762F13D1F63E9BB49627D2E9F0180DBE_1648218361257_screenshoteasy+48.png)


This view simply lists out the recent conversations you’ve had with your customers so far. This is possible with the help of CometChat SDK, the codes below show you how it was implemented.


{% gist https://gist.github.com/Daltonic/8aeaf22cef4f36af9f4fbe7b91384fcf %}


**The Chat View**

![The Chat View](https://paper-attachments.dropbox.com/s_CE80037D72EC7D0ADB341D1AE61FC9E1762F13D1F63E9BB49627D2E9F0180DBE_1648218759136_screenshoteasy+49.png)


This is a one-on-one chat view for a seller and a buyer to communicate. The CometChat SDK makes this easier for us. The following code demonstrates how it works pretty well.


{% gist https://gist.github.com/Daltonic/34b81e3dda47b78288fc5537fb39abef %}


**The SignUp View**
Create a new file named **SignUp.jsx** and paste the codes below inside of it.

{% gist https://gist.github.com/Daltonic/f7da1b58302fa784f30f8221f66cdb1c %}


**The SignIn View**
Let’s do the same for the SignIn view, create a new file called **SignIn.jsx** and paste the codes below inside of it.


{% gist https://gist.github.com/Daltonic/ec05ed4439ad0302a25b597c6c8fda19 %}


Amazing, we’ve just added all the essential views in our application, let’s tidy up the rest of the code…

## The App.jsx File

This is the first file that runs before every other view and component in our application. In your App.jsx file, paste the following codes inside of it.


{% gist https://gist.github.com/Daltonic/0fe4fc3e786b46cda2bac3e310b954c8 %}



## The AuthGuard.jsx File

This file contains the logic for bouncing out unauthenticated users from accessing secured routes in our application. Create a new file in the **src** folder and name it **AuthGuard.jsx**, then paste the following codes within it.


{% gist https://gist.github.com/Daltonic/c32419999452d825027e3a6bbd1fb2d9 %}

## The Index.jsx File

Paste the following codes inside of the **index.jsx** file and save…

{% gist https://gist.github.com/Daltonic/ba784273345369b7838c5705d8f99961 %}

## The Store

Using the power of the react-hooks-global-state library, let's create a store to manage some of our global state variables. In the **src directory**, >> **store** create a file named **index.jsx** and paste the codes below inside of it.


{% gist https://gist.github.com/Daltonic/7322ff4b0ce47ae8a7bf436834b7ef14 %}

## The ABI Connector File

Lastly, we have the **fresher.jsx** file that serves as an interface between our smart contract’s Abi and the frontend. All the codes needed to interact with our smart contract are stored in this file, here is the code for it.


{% gist https://gist.github.com/Daltonic/d2b1aceff070c10f10f7fa5e9a4b87ad %}


Within this shared folder, we have another folder called ***abis*** that contained the generated ABI code for our deployed store. Truffle generated these codes for us when we deployed the smart contract in the [PART-ONE](https://dev.to/daltonic/how-to-build-a-decentralized-ecommerce-platform-with-react-and-solidity-part-one-21o6) of this article.

Make sure you have included the **.env** file in the **.gitignore** file, this is very important so you don’t expose your private keys online.

If that’s all taken care of, then you should know that you have completed this project.

Congratulations!!!

[Watch my FREE web3 tutorials on Youtube now](https://www.youtube.com/channel/UCQteXYZ5mC-cuTxplzM4Hlw?sub_confirmation=1).


## Conclusion

Blockchain technology has come to stay, in this new world of smart contracts, DAO, NFTs, and DeFi applications, it is very important to arm yourself with blockchain development skills.

Can’t wait to see you in the next article, check the [live demo](https://fresher-a5113.web.app/) and [GitHub repo](https://github.com/Daltonic/freshers) for more info.

Till next time, all the best!


## About the Author

Gospel Darlington kick-started his journey as a software engineer in 2016. Over the years, he has grown full-blown skills in JavaScript stacks such as React, ReactNative, VueJs, and more.

He is currently freelancing, building apps for clients, and writing technical tutorials teaching others how to do what he does.

Gospel Darlington is open and available to hear from you. You can reach him on [LinkedIn](https://www.linkedin.com/in/darlington-gospel-aa626b125/), [Facebook](https://www.facebook.com/darlington.gospel01), [Github](https://github.com/Daltonic), or on his [website](https://daltonic.github.io/).