How to Build an Answer-to-Earn Platform with React, Solidity, and CometChat
Tags: solidity, react, blockchain, dapp
Published: 2023-02-27 00:11:32

What you will be building, see the [demo Sepolia Testnet](https://answer-to-earn.web.app/) and [git repo](https://github.com/Daltonic/a2e).

![Paying out the winner of the right answer](https://paper-attachments.dropboxusercontent.com/s_CD139B145A13EB00E90A2B7DA9139BF068DF485C31AB8EDD93A0749CA26CFDC3_1677399518158_Proper+Payment.gif)

![Live Chat with CometChat SDK](https://paper-attachments.dropboxusercontent.com/s_CD139B145A13EB00E90A2B7DA9139BF068DF485C31AB8EDD93A0749CA26CFDC3_1677455495200_chat+chat.gif)

# Introduction

If you're looking to create an innovative platform that motivates users to share their knowledge and skills, this tutorial on developing an Answer-to-Earn platform using React, Solidity, and [**CometChat**](https://try.cometchat.com/oj0s7hrm5v78) could be just what you need. 

This tutorial combines blockchain technology, real-time communication, and user-generated content to create an interactive platform that rewards users for their contributions and encourages engagement and cooperation. 

Whether you're a seasoned developer or a beginner, this step-by-step guide will help you bring your vision to life and transform the way people share information. So why not begin building your own Answer-to-Earn platform today and revolutionize learning and information sharing?
 
By the way, [**Subscribe to my YouTube channel**](https://www.youtube.com/@dappmentors?sub_confirmation=1) to learn how to build a Web3 app from scratch. I also offer a wide range of services, be it private tutorship, hourly consultancy, other development services, or web3 educational material production, you can [**book my services here**](https://www.buymeacoffee.com/dappmentors/commissions).

Now, let’s jump into this tutorial.


## Prerequisites

You will need the following tools installed to build along with me:


- Nodejs (Important)
- Ethers js
- Hardhat
- Yarn
- Metamask
- React
- Tailwind CSS
- CometChat SDK


## Installing Dependencies

Clone the starter kit and open it in VS Code using the command below: 


    git clone https://github.com/Daltonic/tailwind_ethers_starter_kit <PROJECT_NAME>
    cd <PROJECT_NAME>


{% gist https://gist.github.com/covelitein/b35b44e4cff299fc668073ce703537e3 %}


Now, run `**yarn install**`  on the terminal to have all the dependencies for this project installed.


## Configuring CometChat SDK

Follow the steps below to configure the [**CometChat SDK**](https://try.cometchat.com/oj0s7hrm5v78); at the end, you must save these keys as an environment variable.

**STEP 1:**
Head to [**CometChat**](https://try.cometchat.com/daltonic) Dashboard and create an account.

![Register a new CometChat account if you do not have one](https://paper-attachments.dropboxusercontent.com/s_18F919CF342FE8E73E0AD49E9E78FF0ACA571AAC3162DDAD3A0ECD910AB17F79_1677075897462_comet1.png)


**STEP 2:**
Log in to the [**CometChat**](https://try.cometchat.com/daltonic) dashboard, only after registering.

![Log in to the CometChat Dashboard with your created account](https://paper-attachments.dropboxusercontent.com/s_18F919CF342FE8E73E0AD49E9E78FF0ACA571AAC3162DDAD3A0ECD910AB17F79_1677076487911_comet2.png)


**STEP 3:**
From the dashboard, add a new app called **A2E****.**

![Create a new CometChat app - Step 1](https://paper-attachments.dropboxusercontent.com/s_18F919CF342FE8E73E0AD49E9E78FF0ACA571AAC3162DDAD3A0ECD910AB17F79_1677076465882_comet3.png)

![Create a new CometChat app - Step 2](https://paper-attachments.dropboxusercontent.com/s_18F919CF342FE8E73E0AD49E9E78FF0ACA571AAC3162DDAD3A0ECD910AB17F79_1677076553153_comet4.png)


**STEP 4:**
Select the app you just created from the list.

![Select your created app](https://paper-attachments.dropboxusercontent.com/s_18F919CF342FE8E73E0AD49E9E78FF0ACA571AAC3162DDAD3A0ECD910AB17F79_1677076686947_comet5.png)


**STEP 5:**
From the Quick Start copy the `APP_ID`, `REGION`, and `AUTH_KEY`, to your `.env` file. See the image and code snippet.

![Copy the the APP_ID, REGION, and AUTH_KEY](https://paper-attachments.dropboxusercontent.com/s_18F919CF342FE8E73E0AD49E9E78FF0ACA571AAC3162DDAD3A0ECD910AB17F79_1677076796161_comet6.png)


Replace the `REACT_COMET_CHAT` placeholder keys with their appropriate values.


    REACT_APP_COMETCHAT_APP_ID=****************
    REACT_APP_COMETCHAT_AUTH_KEY=******************************
    REACT_APP_COMETCHAT_REGION=**

The `**.env**` file should be created at the root of your project.


## Configuring the Hardhat script

At the root of this project, open the `hardhat.config.js` file and replace its content with the following settings.


{% gist https://gist.github.com/covelitein/f9b3d2c8012061d786980e0dda2fdc1e %}


The above script instructs hardhat on these three important rules.


- **Networks**: This block contains the configurations for your choice of networks. On deployment, hardhat will require you to specify a network for shipping your smart contracts.


- **Solidity**: This describes the version of the compiler to be used by hardhat for compiling your smart contract codes into `bytecodes` and `abi`.


- **Paths**: This simply informs hardhat of the location of your smart contracts and also a place to dump the output of the compiler which is the ABI.


## Configuring the Deployment Script

Navigate to the scripts folder and then to your `deploy.js` file and paste the code below into it. If you can't find a script folder, make one, create a **deploy.js** file, and paste the following code into it.


{% gist https://gist.github.com/covelitein/5b4cdd0b11fe2759184ac9da79ce9b94 %}


When run as a Hardhat deployment command, the above script will deploy your specified smart contract to the network of your choice.

Check out this video to learn how to properly set up a web3 project with ReactJs.


<a href="http://www.youtube.com/watch?feature=player_embedded&v=-q_6CyGNEDw" target="_blank">
 <img src="http://img.youtube.com/vi/-q_6CyGNEDw/mqdefault.jpg" alt="Watch the video" width="1400" height="600" border="10" />
</a>

## The Smart Contract File

Now that we've completed the initial configurations, let's create the smart contract for this build. Create a new folder called `**contracts**` in your project's `**src**` directory.

Create a new file called `**A**``**nswer2Earn.sol**` within this contracts folder; this file will contain all of the logic that governs the smart contract. 

Copy, paste, and save the following codes into the `**A**``**nswer2Earn.sol**` file. See the complete code below.


{% gist https://gist.github.com/covelitein/c347e96adefe2783b2038e37ab377789 %}


I have a book to help your master the web3 language (Solidity), [**grab your copy here**](https://www.buymeacoffee.com/dappmentors/e/103755).


![Capturing Smart Contract Development](https://paper-attachments.dropboxusercontent.com/s_CD139B145A13EB00E90A2B7DA9139BF068DF485C31AB8EDD93A0749CA26CFDC3_1677456057175_book+cover.png)


Now, let's go over some of the details of what's going on in the smart contract above. We have the following items:

**S****tructs**

- **QuestionStruct:** This contains necessary information about every question asked on the platform.
- **CommentStruct:** This carries information about every comment on our platform.

**S****tate Variables**

- **O****wner:** This keeps track of the deployer of the contract.
- **platformCharge:** This holds the platform’s percentage fee on every payment made on the platform.
- **totalQuestion:** This stores the number of questions that have not been deleted from the platform.

**Mappings**

- **questionExists:** This checks if a question exists or has not been deleted from the platform.
- **commentsOf:** This holds the total comments of a particular question.

**Constructor**
This is used to initialize the state of the smart contract variables and other essential operations. In this example, we assigned the deployer of the smart contract as the owner.

**Events and Modifiers**

- **Action:** This logs out the information of every action carried out on the platform.
- **ownerOnly:** This prevents every other user except the owner from accessing some functions in the platform.

**Question Functions**

- **addQuestion:** This function takes a bounty question from a user and makes it available for others to compete for the best answer.
- **updateQuestion:** This function is used to edit the question supplied by the owner of the question.
- **deleteQuestion:** This function is used to delete the question supplied by the owner of the question.
- **showQuestions:** This function is responsible for displaying all questions in the platform. The question must already be existing and is not deleted.
- **showQuestion:** This function returns a single question by its unique Id.
- **isQuestionOwner:** This function returns true/false if a user owns a question.

**Comment Functions**

- **addComment:** This function allows users to supply an answer to a particular question in hopes of winning the prize on the question.
- **updateComment:** This function is used to edit an answer provided that the caller is the owner of the answer/comment.
- **deleteComment:** This function is used to delete a comment provided that the caller is the owner of the answer/comment.
- **getComments:** This function returns all comments/answers to a particular question.
- **getComment:** This returns a single comment for a particular question on the platform.
- **isCommentOwner:** This function returns true/false if a user owns a comment.

**Funds functions**

- **payBestComment:** This function is used by a question owner to pay the respondent of the most preferred answer.
- **refund:** This function is used for requesting a refund by a question owner provided that answers have not been submitted yet.
- **payTo:** This function is used internally to make payments to the address provided.
- **changeFee:** This function is used to change the platform’s fee.

With all the above functions understood, copy them into a file named `**Answer2Earn.sol**` in the contracts folder within the src directory. 

Next, run the commands below to deploy the smart contract into the network.


    yarn hardhat node # Terminal #1
    yarn hardhat run scripts/deploy.js --network localhost # Terminal #2


![Activities of Deployment on the Terminal](https://paper-attachments.dropboxusercontent.com/s_18F919CF342FE8E73E0AD49E9E78FF0ACA571AAC3162DDAD3A0ECD910AB17F79_1677077820235_terminal1.png)


If you need further help configuring Hardhat or deploying your Fullstack DApp, watch this video.

<a href="http://www.youtube.com/watch?feature=player_embedded&v=hsec2erdLOI" target="_blank">
 <img src="http://img.youtube.com/vi/hsec2erdLOI/mqdefault.jpg" alt="Watch the video" width="1400" height="600" border="10" />
</a>

## Developing the Frontend

Now that we have our smart contract on the network and all of our artifacts (bytecodes and ABI) generated, let's get the front end ready with React.


## Components

In the src directory, create a new folder called `**components**` to house all of the React components for this project.

**Header Component** 


![The header  component](https://paper-attachments.dropboxusercontent.com/s_18F919CF342FE8E73E0AD49E9E78FF0ACA571AAC3162DDAD3A0ECD910AB17F79_1677084047373_screenshoteasy+98.png)


The Header component includes the platform logo, a search bar, and a button with the connected account address. See the code below.


{% gist https://gist.github.com/covelitein/e7fe00c91f275424df806bbd1b4661b4 %}


**QuestionTitle Component**

![](https://paper-attachments.dropboxusercontent.com/s_18F919CF342FE8E73E0AD49E9E78FF0ACA571AAC3162DDAD3A0ECD910AB17F79_1677084746561_screenshoteasy+100.png)


This component includes a header, a button for asking questions, and information on all other questions. Here is the code:


{% gist https://gist.github.com/covelitein/97b905592fa9edc1d8edf986c85d897f %}


**AddQuestion Component**

![Asking Questions](https://paper-attachments.dropboxusercontent.com/s_CD139B145A13EB00E90A2B7DA9139BF068DF485C31AB8EDD93A0749CA26CFDC3_1677398856372_asking+questions.gif)


This is a modal that lets users create questions on the platform. To successfully submit a question, users will need to provide a title, bounty prize, tag, and question description. Here are the relevant codes:

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


**QuestionSingle Component**

![Single Question Component](https://paper-attachments.dropboxusercontent.com/s_CD139B145A13EB00E90A2B7DA9139BF068DF485C31AB8EDD93A0749CA26CFDC3_1677400077292_Screenshot+2023-02-26+at+9.27.52+AM.png)


This component includes question details such as the question owner and prize.


{% gist https://gist.github.com/covelitein/0b223744609cb90e32c9fc59540bfda5 %}


**QuestionComments Component**

![Question Respondent View](https://paper-attachments.dropboxusercontent.com/s_CD139B145A13EB00E90A2B7DA9139BF068DF485C31AB8EDD93A0749CA26CFDC3_1677180527171_Screenshot+2023-02-23+at+8.28.41+PM.png)

![Question Owner View](https://paper-attachments.dropboxusercontent.com/s_CD139B145A13EB00E90A2B7DA9139BF068DF485C31AB8EDD93A0749CA26CFDC3_1677180581540_Screenshot+2023-02-23+at+8.29.35+PM.png)


This code shows the user's comments or answers to the question owner.

{% gist https://gist.github.com/Daltonic/2815c9b66b439fc56954bc7a3838c505 %}


**AddComment Component**

![Adding Comments](https://paper-attachments.dropboxusercontent.com/s_CD139B145A13EB00E90A2B7DA9139BF068DF485C31AB8EDD93A0749CA26CFDC3_1677399618671_Adding+Comment.gif)


This component allows users to answer a specific question through an interface. See the code below:


{% gist https://gist.github.com/covelitein/6e858cb22841b059ef003b05e53f2db3 %}


**UpdateQuestion Component**

![](https://paper-attachments.dropboxusercontent.com/s_18F919CF342FE8E73E0AD49E9E78FF0ACA571AAC3162DDAD3A0ECD910AB17F79_1677239103434_screenshoteasy+-+2023-02-24T124443.330.png)


This component allows the question owner to make edits to their question. It is a modal component that applies adjustments. Here's the code:


{% gist https://gist.github.com/covelitein/c470f2588a96ee800f4fd38464702a30 %}


**UpdateComment Component**

![](https://paper-attachments.dropboxusercontent.com/s_18F919CF342FE8E73E0AD49E9E78FF0ACA571AAC3162DDAD3A0ECD910AB17F79_1677239384600_updatecomment.png)


This code allows a user to edit comments when answering a question, but ownership will still be checked.


{% gist https://gist.github.com/covelitein/525aaeaf2cf564feae03d920f21c36d1 %}


**DeleteQuestion Component**

![](https://paper-attachments.dropboxusercontent.com/s_18F919CF342FE8E73E0AD49E9E78FF0ACA571AAC3162DDAD3A0ECD910AB17F79_1677246972454_screenshoteasy+-+2023-02-24T144912.928.png)


This component asks for confirmation from the question owner before deleting a question, and it is designed as a modal component. Please refer to the code below.


{% gist https://gist.github.com/covelitein/7aa8bbaebfa377dfff88a22fdf3f64c7 %}


**DeleteComment Component**

![](https://paper-attachments.dropboxusercontent.com/s_18F919CF342FE8E73E0AD49E9E78FF0ACA571AAC3162DDAD3A0ECD910AB17F79_1677247025625_deleteComment.png)


This component asks comment owners for confirmation before deleting comments and is modal. The accompanying code is shown below.


{% gist https://gist.github.com/covelitein/3b654455e73fbf73027bdbeee34cecfd %}


**ChatModal Component**

![Chats](https://paper-attachments.dropboxusercontent.com/s_CD139B145A13EB00E90A2B7DA9139BF068DF485C31AB8EDD93A0749CA26CFDC3_1677399698908_Screenshot+2023-02-26+at+9.21.22+AM.png)


This modal component makes use of cometChat SDK for handling chats between users.
See the code below:


{% gist https://gist.github.com/covelitein/1d336826a63f90b253dea3bb576f0bf7 %}


**AuthChat Component**

![Chat Authentication Component](https://paper-attachments.dropboxusercontent.com/s_CD139B145A13EB00E90A2B7DA9139BF068DF485C31AB8EDD93A0749CA26CFDC3_1677403097781_Screenshot+2023-02-26+at+10.18.12+AM.png)


This component handles user authentication (signup and login) before allowing them to chat. See the code below:


{% gist https://gist.github.com/covelitein/7bad7ce629c722f551f58afdc518d343 %}


**ChatCommand Component** 

![Creating Groups](https://paper-attachments.dropboxusercontent.com/s_CD139B145A13EB00E90A2B7DA9139BF068DF485C31AB8EDD93A0749CA26CFDC3_1677402517211_Screenshot+2023-02-26+at+10.08.28+AM.png)

![Joining Groups](https://paper-attachments.dropboxusercontent.com/s_CD139B145A13EB00E90A2B7DA9139BF068DF485C31AB8EDD93A0749CA26CFDC3_1677403045761_Screenshot+2023-02-26+at+10.17.17+AM.png)


This component lets question owners create a group chat for answerers to join and earn rewards. Code:

{% gist https://gist.github.com/Daltonic/642a7ff5eca6fa3231a5f695019270e9 %}



## Views

Create the **views** folder inside the **src** directory and sequentially add the following pages within it.

**HomePage**

![Listing out the questions](https://paper-attachments.dropboxusercontent.com/s_CD139B145A13EB00E90A2B7DA9139BF068DF485C31AB8EDD93A0749CA26CFDC3_1677400406591_Screenshot+2023-02-26+at+9.33.21+AM.png)


This component creates a visually appealing interface by merging the **QuestionTitle** and **QuestionSingle** components. Please refer to the code below for details.


{% gist https://gist.github.com/covelitein/5dea54179a566f82904e62b0103a82dd %}


**Question Page**

![The single question page with comments](https://paper-attachments.dropboxusercontent.com/s_CD139B145A13EB00E90A2B7DA9139BF068DF485C31AB8EDD93A0749CA26CFDC3_1677400513613_Screenshot+2023-02-26+at+9.35.05+AM.png)


This page has many components for commenting, payingout, and chatting. See the code below.


{% gist https://gist.github.com/covelitein/e20e420452fd514157dda1a6040e9f36 %}



## The App.jsx file

We'll look at the **App.jsx** file, which bundles our **components** and **pages**.


{% gist https://gist.github.com/covelitein/8b50f02f8457d36547fe9532ef99263d %}



## Other Essential Services

The services listed below are critical to the smooth operation of our application.

**The Store Service**
The application relies on critical services, including the “**Store Service**” which uses the [react-hooks-global-state](https://www.npmjs.com/package/react-hooks-global-state) library to manage the application's state. To set up the Store Service, create a "**store**" folder within the "src" folder and create an "**index.jsx**" file within it, then paste and save the provided code.


{% gist https://gist.github.com/Daltonic/9312a0d5c790e591256179447915807f %}


**The Blockchain Service**
Create a folder called "**services**" inside the "**src**" folder. Within the "**services**" folder, create a file named "**blockchain.jsx**" and save the provided code inside the file.


{% gist https://gist.github.com/covelitein/9f2079c646eae64d4311173323ebcb99 %}


**The Chat Service**
Create a file named "**chat.jsx**" within the "**services**" folder and copy the provided code into the file before saving it.


{% gist https://gist.github.com/covelitein/bc018a004e49de458f8be4b85fb3fb09 %}


**The Index.jsx file**
Now update the index entry file with the following codes.

{% gist https://gist.github.com/covelitein/cd1db63952c2dde8a133ea9cd1e7ca44 %}


To start the server on your browser, run these commands on two terminals, assuming you have already installed Metamask.


    # Terminal one:
    yarn hardhat node
    # Terminal Two
    yarn hardhat run scripts/deploy.js
    yarn start

Running the above commands as instructed will open your project on your browser. And there you have it for how to build a blockchain voting system with React, Solidity, and [CometChat](https://try.cometchat.com/oj0s7hrm5v78).

If you're confused about web3 development and want visual materials, here's one of my videos that will teach you how to create an NFT Minting website.

<a href="http://www.youtube.com/watch?feature=player_embedded&v=QN3wb_mXBjY" target="_blank">
 <img src="http://img.youtube.com/vi/QN3wb_mXBjY/mqdefault.jpg" alt="Watch the video" width="1400" height="600" border="10" />
</a>

## Conclusion

In conclusion, the decentralized web and blockchain technology are here to stay, and creating practical applications is a great way to advance your career in web3 development. 

The tutorial showed how to create an answer-to-earn system using smart contracts to facilitate payments, along with the CometChat SDK for group discussions.

If you are ready to dive deeper into web3 development, [**watch my free videos on my YouTube channel**](https://youtube.com/@dappmentors?sub_confirmation=1). Or [**book your private web3 classes with me**](https://www.buymeacoffee.com/web3classes/e/74614) to speed up your web3 learning process.

That being said, I'll see you next time, and have a wonderful day!


## About the Author

Gospel Darlington is a full-stack blockchain developer with `6+` years of experience in the software development industry.

By combining Software Development, writing, and teaching, he demonstrates how to build decentralized applications on EVM-compatible blockchain networks.

His stacks include `JavaScript`, `React`, `Vue`, `Angular`, `Node`, `React Native`, `NextJs`, `Solidity`, and more.

For more information about him, kindly visit and follow his page on [Twitter](https://twitter.com/idaltonic), [Github](https://github.com/Daltonic), [LinkedIn](https://www.linkedin.com/in/darlington-gospel-aa626b125), or his [website](https://daltonic.github.io/).