Todo List

Manage your tasks easily with a to-do list app that utilizes Ethereum smart contracts via ethers.js

Projects

Smart contracts have been deployed on the Sepolia testnet

Features

Connect/Disconnect to metamask wallet.
View all Tasks (Grid / List)
Add a new todo item.
Delete a todo item.
Toggle completion status of todo item.
Search todo item with title.
Edit a description of todo item.

Get started

Install the Dependency:

npm i

After that you can deploy smart contract locally using Truffle and Ganache

Install Truffle and Ganache

npm i -g truffle
truffle version

Once it is done, you can go to tufflesuite.com/ganache to install ganache.

Now that we have Truffle and Ganache installed, we can start deploy a TodoList contract start by change to smart-contracts directory.

cd smart-contracts

Compiling and deploy a smart contract in Truffle

To compile the contracts, we use the command below

truffle compile

And to deploy the contract to Ganache, we use the command

truffle migrate

Make sure Ganache is open and running. As this is our first migration, Truffle will deploy both contracts: Migrations and Storage.

If everything went well, we can make sure in Ganache that the contract has been sent to the blockchain.

On Ganache, select the Contracts tab and link Truffle projects to view useful data such as contracts and stored data

Here what it shows

You can get contract address here as it will be use to connect from front-end

Now that we have deploy and get contract address we can go back from smart-contracts directory and go to libs/constants.ts to set a contract address

// constants.ts
import TodoList from "@/smart-contract/build/contracts/TodoList.json";

export const contractAddress = "0x3F2C6Db0b13a119eDA82bAbE18cBd68FbAaE10c3";
export const contractAbi = TodoList.abi;

After that we can save and run the project locally

npm run dev

WE DONE!

One last thing

We can import an account from Ganache and use it for testing purposes.