How to Build an Answer-to-Earn Platform with React, Solidity, and CometChat

What you will be building, see the demo Sepolia Testnet and git repo.

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 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 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.

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>

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; at the end, you must save these keys as an environment variable.

STEP 1:
Head to CometChat Dashboard and create an account.

STEP 2:
Log in to the CometChat dashboard, only after registering.

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

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

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

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.

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.

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.

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.

I have a book to help your master the web3 language (Solidity), grab your copy here.

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

Structs

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

State Variables

• Owner: 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

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

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 includes the platform logo, a search bar, and a button with the connected account address. See the code below.

QuestionTitle Component

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

AddQuestion Component

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:

QuestionSingle Component

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

QuestionComments Component

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

AddComment Component

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

UpdateQuestion Component

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

UpdateComment Component

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

DeleteQuestion Component

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.

DeleteComment Component

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

ChatModal Component

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

AuthChat Component

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

ChatCommand Component

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

Views

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

HomePage

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

Question Page

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

The App.jsx file

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

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 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.

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.

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

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

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.

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.

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. Or book your private web3 classes with me 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, Github, LinkedIn, or his website.