Build ToDo Application in React and Solidity

Prerequisites

Please make sure you have knowledge about the following:

• Node.js installed on your machine.
• Metamask wallet extension installed.
• Knowledge about how ETH Blockchain works.

Resources

• Solidity overview
• Follow my YouTube channel for upcoming courses

Project Overview

In this article, we will first write our own Solidity-based Smart Contract, Deploy theSmart Contract on ETH blockchain and then build a ToDo application using React.

• To view a detailed video about the project:

• To view the full source code for this project, here is the repository.

Backend Project Setup

To get started we need to create a hardhat project. To do so, open your terminal. Create or change into a new empty directory and run the following command:

npm install ethers hardhat @nomiclabs/hardhat-waffle \
ethereum-waffle chai @nomiclabs/hardhat-ethers \
@openzeppelin/contracts dotenv

Next, let’s initialize a new development environment, for this, we will be using the hardhat command:

npx hardhat

After running this command, we will get a bunch of setup questions, just Select Create a basic sample project option and for other options press yes .

Now you should see the following files and folders created for you in your root directory:

hardhat.config.js — The entirety of your Hardhat setup (i.e. your config, plugins, and custom tasks) is contained in this file.

scripts — A folder containing a script named sample-script.js that will deploy your smart contract when executed.

test — A folder containing an example testing script.

contracts — A folder holding an example Solidity smart contract.

Get Ethereum API key using Alchemy

Alchemy is a blockchain developer platform focused on making blockchain development easy. They’ve built a suite of developer tools, enhanced APIs, and superior node infrastructure to make building and running blockchain applications seamless.

To create an API follow the steps:-

1. Sign up at Alchemy.

2. Go to Dashboard.

3. Select the network as rinkeby.

4. After this, copy the HTTP key after the creation of the app on alchemy.

Once the above steps are completed, create a .env file in your project root and store this HTTP key as:

ALCHEMY_RINKEBY_URL = "ALCHEMY_HTTP_API_KEY"

Get your account Private key from Metamask

This private account key is required by our Smart contract deploy script, in order to execute it and take gas fees in ether from our wallet.

1. Click on the identicon
2. Select the account you’d like to export
3. On the Account page, click on the menu (three dots) at the upper right corner:

4. Click on the “Account Details” button

5. Click “Export Private Key”:

6. Enter your password and click “Confirm”

7. Your private key is revealed. Click to copy it, and save it somewhere safe.

8. Click “Done” to close the screen:

Now once you have your private key with you, copy and paste this in your .env file.

ACCOUNT_KEY = "YOUR_ACCOUNT_PRIVATE_KEY

Important: Do not push the .envfile to GitHub as it contains your private data.

Updating hardhat.config.js

After this, update the configuration at hardhat.config.js with the following:

require("@nomiclabs/hardhat-waffle");
require('dotenv').config()module.exports = {
  solidity: "0.8.4",
  networks: {
    rinkeby: {
      url: process.env.ALCHEMY_RINKEBY_URL,
      accounts: [process.env.ACCOUNT_PRIVATE_KEY],
    }
  }
};

Creating Smart Contract logic

Next, we’ll create our smart contracts! We’ll create a Smart contract forTwitter in order to save our Tweets on ETH blockchain.

Create a new file in the contracts directory named TaskContract.sol. Here, add the following code:

I won’t go over in detail how to code in solidity but soon I am going to make video tutorials on solidity . Stay tuned!

Contract Details

1. We first create a struct called Task, which stores 4 fields for us:-
   (i) id (stores the tweet id)
   (ii) username (stores the wallet address of the person who tweets)
   (iii) taskText (stores the actual Task of the person)
   (iv) isDeleted (this keeps track of the flag whether the Tweet is deleted or not).
2. The function addTask(), takes in two arguments taskText and isDeleted. We basically add the Task to our List keeping track of all the tweets and also a global map storing taskId => Task owner. After that, we emit an event called AddTask, which basically adds a new Block to the Blockchain.
3. The function getMyTasks(), is pretty straightforward, it returns us with all the tasks taken place till now. One thing we check here is, whether a task is deleted or not and also is the owner correct or not.
4. The last function deleteTask() takes in two arguments, taskId and isDeleted flag, we check whether the task belongs to the current person trying to delete it or not and then we emit a DeleteTask event to make a change at the blockchain level.

Testing the Smart Contracts

Now the smart contract code is complete and we can try testing it out using unit tests .

To create a unit test, create and open test/TaskContractTest.jsand update it with the following code:

Now we can run the unit test using the following command:-

npx hardhat test

All the unit test are self explanatory, so I won’t go in detail. Check out the video for more in depth understanding.

Deploy Smart Contract on the Rinkeby Network

Now that we have created our Smart Contract and it’s been unit tested, we are confident to deploy it on our ETH blockchain.

To deploy the contract, create a file called deploy.js inside of scripts folder and add the following contents:-

To run the script, use the below command:-

npx hardhat run scripts/deploy.js --network rinkeby

Now, the console command in our script will display the address where our contract is deployed.

console.log("Contract deployed to: ", contract.address)

Copy and paste that contract address in a safe place, as we will be using that in our Frontend file.

Frontend Setup

Now, we need to create a new React.js project for the frontend of the Dapp. To do so, run the following command in your terminal:

npx create-react-app client

This will create a new React project in a folder client.

After this install dependencies for the frontend inside the client folder. To do this run the following command in your terminal:

cd client 
npm install axios ethers 
npm install @emotion/react @emotion/styled @mui/icons-material @mui/material

Constructing the Frontend

Now that the smart contract is working, we can commence building out the UI.

First, we require to make a connection between frontend to the smart contract, so it can interact with the data from the blockchain utilizing the functions in the contracts.

Now, in order for the frontend to know what functions to call based on user interaction, we would need to import a TaskContract.json file from the folder artifacts/contracts/TaskContract.sol and place this file inside a new utils folder inside client folder.

Next, create a config.js file at the root of client folder and paste the contract deployed address as:-

export const TaskContractAddress = "DEPLOYED_CONTRACT_ADDRES"

App.js

For the full client side code, refer to this link, everything is pretty straightforward.

To test the dapp in the browser, run the following command in your terminal:

cd client
npm run dev

Conclusion

Congratulations! on deploying your Twitter Smart Contract to ETH blockchain and also creating a Dapp to display and create new Tweets.

Connect with me on:-

Twitter 👦🏻:- https://twitter.com/kmmtmm92

Youtube 📹:- https://www.youtube.com/channel/UCV-_hzlbVSlobkekurpLOZw/about

Github 💭:- https://github.com/Kavit900

Instagram 📸:- https://www.instagram.com/code_with_kavit/