Creating a todo app on a blockchain using Ethereum,web3 and react hooks.

Here’s a step-by-step process for building a bare minimum todo application running on top of the Ethereum blockchain.

Tools used:
1. Truffle
2. Ganache (UI and not ganache-cli)
3. React for front end
4. Metamask browser extension

First, make sure you have the following things installed

1. Node.js
2. truffle
   install by running

npm install -g truffle

to globally install truffle.

4. Ganache(for running the blockchain locally)

After all of the necessary tools are installed make an empty folder and let’s unbox a truffle box.

A Truffle box is just some pre-written boiler-plate code with various flavors.

We will be using a truffle box by BRANNANC, check it out here

Unbox it by running :

truffle unbox BrannanC/react_hooks_box

But, I ran into some issues unboxing it so I cloned the repo mentioned, either of them works.

Navigate to the client folder and install the dependencies

cd client && npm install

That’s it for setup, next is building our todo app!

folder-structure (client)

Let’s have a glance at the boiler-plate project structure.

client folder is basically react-app.

folder-structure (other)

And there’s a folder to store our contracts (solidity files) and migrations folder

Notice there are two contracts folder, one inside the client and one outside, so just to clear any confusions I renamed the client/contracts folder to client/abis

so the change needed in truffle-config.js file is as follows

from

module.exports = {
contracts_build_directory: path.join(__dirname, "client/src/contracts"),
. . . 
}

to

module.exports = {
contracts_build_directory: path.join(__dirname, "client/src/abis"),
. . . 
}

Now, Let’s write some code. :)

Create a new file Tasks.sol inside the contracts folder.

Now, as we have our contract ready, head over to client/App.js and write some frontend code to interact with the contract.

In App.js, remove everything & do the following.

created needed state hooks.

then create an async initialization function and call it using useEffect hook

init function

next step is to add some JSX and write the onClick function for add.

onAddTodo function and JSX

Notice in the onAddTodo function we have called setTasks function which is basically the same function in the contract.

And finally, deploy the contract, in the file 2_deploy_contracts.js by adding…

const Tasks = artifacts.require("./Tasks.sol");
module.exports = function (deployer) {
   deployer.deploy(Tasks)
}

Let’s fire up ganache UI and create a new ethereum workspace and click on add project and locate and add the truffle-config.js file

ganache add truffle-config.js file

Save the workspace and we are almost done.

Next step is to migrate from the cli and run our front end.

truffle migrate && npm start --prefix client

Now we can test on the browser.

VOILA, connected meta mask with local ganache and it WORKS!!!

Some side notes and some handy tips:

1. run migrate with reset flag if any issue occurs while migrating.

truffle migrate --reset 

2. make sure your ganache account is connected to metamask and localhost. here’s how to do it. skip if you know how to connect it

3. make sure you use the same solidity version in the contracts as defined in truffle-config.js file, in our case add version “0.7.0” in the compilers object.

compilers:{
  solc: {
    version: "0.7.0"
  }
}

Final notes, This was a overview for how to setup a basic decentralized app or dApp, use this as a starting point to make better dApps.

You can find the complete code on my repo here. Cheers 🍻