What you will be building, see the and . demo Sepolia Testnet 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 could be just what you need. CometChat 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, 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 . Subscribe to my YouTube channel 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> https://gist.github.com/covelitein/b35b44e4cff299fc668073ce703537e3?embedable=true Now, run on the terminal to have all the dependencies for this project installed. **yarn install** Configuring CometChat SDK Follow the steps below to configure the ; at the end, you must save these keys as an environment variable. CometChat SDK Head to Dashboard and create an account. STEP 1: CometChat Log in to the dashboard, only after registering. STEP 2: CometChat From the dashboard, add a new app called STEP 3: A2E Select the app you just created from the list. STEP 4: From the Quick Start copy the , , and , to your file. See the image and code snippet. STEP 5: APP_ID REGION AUTH_KEY .env Replace the placeholder keys with their appropriate values. REACT_COMET_CHAT REACT_APP_COMETCHAT_APP_ID=****************
REACT_APP_COMETCHAT_AUTH_KEY=******************************
REACT_APP_COMETCHAT_REGION=** The file should be created at the root of your project. .env Configuring the Hardhat script At the root of this project, open the file and replace its content with the following settings. hardhat.config.js https://gist.github.com/covelitein/f9b3d2c8012061d786980e0dda2fdc1e?embedable=true The above script instructs hardhat on these three important rules. : 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. Networks : This describes the version of the compiler to be used by hardhat for compiling your smart contract codes into and . Solidity bytecodes abi : 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. Paths Configuring the Deployment Script Navigate to the scripts folder and then to your file and paste the code below into it. If you can't find a script folder, make one, create a file, and paste the following code into it. deploy.js deploy.js https://gist.github.com/covelitein/5b4cdd0b11fe2759184ac9da79ce9b94?embedable=true 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. https://www.youtube.com/watch?v=-q_6CyGNEDw&embedable=true 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 in your project's directory. **contracts** **src** Create a new file called within this contracts folder; this file will contain all of the logic that governs the smart contract. **A**``**nswer2Earn.sol** Copy, paste, and save the following codes into the file. See the complete code below. **A**``**nswer2Earn.sol** https://gist.github.com/covelitein/c347e96adefe2783b2038e37ab377789?embedable=true 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 This contains necessary information about every question asked on the platform. QuestionStruct: This carries information about every comment on our platform. CommentStruct: State Variables This keeps track of the deployer of the contract. Owner: This holds the platform’s percentage fee on every payment made on the platform. platformCharge: This stores the number of questions that have not been deleted from the platform. totalQuestion: Mappings This checks if a question exists or has not been deleted from the platform. questionExists: This holds the total comments of a particular question. commentsOf: 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. Constructor Events and Modifiers This logs out the information of every action carried out on the platform. Action: This prevents every other user except the owner from accessing some functions in the platform. ownerOnly: Question Functions This function takes a bounty question from a user and makes it available for others to compete for the best answer. addQuestion: This function is used to edit the question supplied by the owner of the question. updateQuestion: This function is used to delete the question supplied by the owner of the question. deleteQuestion: This function is responsible for displaying all questions in the platform. The question must already be existing and is not deleted. showQuestions: This function returns a single question by its unique Id. showQuestion: This function returns true/false if a user owns a question. isQuestionOwner: Comment Functions This function allows users to supply an answer to a particular question in hopes of winning the prize on the question. addComment: This function is used to edit an answer provided that the caller is the owner of the answer/comment. updateComment: This function is used to delete a comment provided that the caller is the owner of the answer/comment. deleteComment: This function returns all comments/answers to a particular question. getComments: This returns a single comment for a particular question on the platform. getComment: This function returns true/false if a user owns a comment. isCommentOwner: Funds functions This function is used by a question owner to pay the respondent of the most preferred answer. payBestComment: This function is used for requesting a refund by a question owner provided that answers have not been submitted yet. refund: This function is used internally to make payments to the address provided. payTo: This function is used to change the platform’s fee. changeFee: With all the above functions understood, copy them into a file named in the contracts folder within the src directory. **Answer2Earn.sol** 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. https://www.youtube.com/watch?v=hsec2erdLOI&embedable=true 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 to house all of the React components for this project. **components** Header Component The Header component includes the platform logo, a search bar, and a button with the connected account address. See the code below. https://gist.github.com/covelitein/e7fe00c91f275424df806bbd1b4661b4?embedable=true QuestionTitle Component This component includes a header, a button for asking questions, and information on all other questions. Here is the code: https://gist.github.com/covelitein/97b905592fa9edc1d8edf986c85d897f?embedable=true 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: https://gist.github.com/Daltonic/f93f9ac7294a229eb14bcc7024e07ea5?embedable=true QuestionSingle Component This component includes question details such as the question owner and prize. https://gist.github.com/covelitein/0b223744609cb90e32c9fc59540bfda5?embedable=true QuestionComments Component This code shows the user's comments or answers to the question owner. https://gist.github.com/Daltonic/2815c9b66b439fc56954bc7a3838c505?embedable=true AddComment Component This component allows users to answer a specific question through an interface. See the code below: https://gist.github.com/covelitein/6e858cb22841b059ef003b05e53f2db3?embedable=true 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: https://gist.github.com/covelitein/c470f2588a96ee800f4fd38464702a30?embedable=true UpdateComment Component This code allows a user to edit comments when answering a question, but ownership will still be checked. https://gist.github.com/covelitein/525aaeaf2cf564feae03d920f21c36d1?embedable=true 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. https://gist.github.com/covelitein/7aa8bbaebfa377dfff88a22fdf3f64c7?embedable=true DeleteComment Component This component asks comment owners for confirmation before deleting comments and is modal. The accompanying code is shown below. https://gist.github.com/covelitein/3b654455e73fbf73027bdbeee34cecfd?embedable=true ChatModal Component This modal component makes use of cometChat SDK for handling chats between users.
See the code below: https://gist.github.com/covelitein/1d336826a63f90b253dea3bb576f0bf7 AuthChat Component This component handles user authentication (signup and login) before allowing them to chat. See the code below: https://gist.github.com/covelitein/7bad7ce629c722f551f58afdc518d343?embedable=true ChatCommand Component This component lets question owners create a group chat for answerers to join and earn rewards. Code: https://gist.github.com/Daltonic/642a7ff5eca6fa3231a5f695019270e9?embedable=true Views Create the folder inside the directory and sequentially add the following pages within it. views src HomePage This component creates a visually appealing interface by merging the and components. Please refer to the code below for details. QuestionTitle QuestionSingle https://gist.github.com/covelitein/5dea54179a566f82904e62b0103a82dd?embedable=true Question Page This page has many components for commenting, paying out, and chatting. See the code below. https://gist.github.com/covelitein/e20e420452fd514157dda1a6040e9f36?embedable=true The App.jsx file We'll look at the file, which bundles our and .\ App.jsx components pages https://gist.github.com/covelitein/8b50f02f8457d36547fe9532ef99263d?embedable=true Other Essential Services The services listed below are critical to the smooth operation of our application. The application relies on critical services, including the “ ” which uses the library to manage the application's state. To set up the Store Service, create a " " folder within the "src" folder and create an " " file within it, then paste and save the provided code. The Store Service Store Service react-hooks-global-state store index.jsx https://gist.github.com/Daltonic/9312a0d5c790e591256179447915807f?embedable=true Create a folder called " " inside the " " folder. Within the " " folder, create a file named " " and save the provided code inside the file. The Blockchain Service services src services blockchain.jsx https://gist.github.com/covelitein/9f2079c646eae64d4311173323ebcb99?embedable=true The Chat Service Create a file named " " within the " " folder and copy the provided code into the file before saving it. chat.jsx services https://gist.github.com/covelitein/bc018a004e49de458f8be4b85fb3fb09?embedable=true Now update the index entry file with the following codes. The Index.jsx file https://gist.github.com/covelitein/cd1db63952c2dde8a133ea9cd1e7ca44?embedable=true 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. https://www.youtube.com/watch?v=QN3wb_mXBjY&embedable=true 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, . Or to speed up your web3 learning process. watch my free videos on my YouTube channel book your private web3 classes with me 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 years of experience in the software development industry. 6+ By combining Software Development, writing, and teaching, he demonstrates how to build decentralized applications on EVM-compatible blockchain networks. His stacks include , , , , , , , , and more. JavaScript React Vue Angular Node React Native NextJs Solidity For more information about him, kindly visit and follow his page on , , , or his . Twitter Github LinkedIn website

2022 - HackerNoon Contributor of the Year - Blockchain

2022 - HackerNoon Contributor of the Year - Decentralized Internet

2022 - HackerNoon Contributor of the Year - Ethereum

2022 - HackerNoon Contributor of the Year - React

Watch My YouTube Channel

Hire Me 

Portfolio

Buy Me a Coffee

Nominated for 2022 - HackerNoon Contributor of the Year - Decentralized Internet

Nominated for 2022 - HackerNoon Contributor of the Year - Ethereum

Nominated for 2022 - HackerNoon Contributor of the Year - React

Nominated for 2022 - HackerNoon Contributor of the Year - Blockchain

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

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

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

Too Long; Didn't Read

Darlington Gospel

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

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

Too Long; Didn't Read

Darlington Gospel

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES