Build a Decentralized To-Do List App

 📝 Project: Decentralized To-Do List dApp

✅ Overview

This dApp allows users to:

Add tasks

Mark tasks as completed

View their task list

All stored on the blockchain, ensuring transparency and immutability.

🧰 Tech Stack

Smart Contracts: Solidity

Blockchain: Ethereum (Testnet like Sepolia or Local using Hardhat/Ganache)

Frontend: React.js

Web3 Library: Ethers.js or Web3.js

Wallet: MetaMask

🛠️ Step-by-Step Guide

1. Set Up Your Environment

Install the required tools:

npm install -g hardhat

npx create-react-app todo-dapp

cd todo-dapp

npm install ethers

2. Write the Smart Contract

Create a new Hardhat project and contract:

npx hardhat

Create a file contracts/TodoList.sol:

// SPDX-License-Identifier: MIT

pragma solidity ^0.8.0;

contract TodoList {

    uint public taskCount = 0;

    struct Task {

        uint id;

        string content;

        bool completed;

    }

    mapping(uint => Task) public tasks;

    event TaskCreated(uint id, string content, bool completed);

    event TaskToggled(uint id, bool completed);

    function createTask(string memory _content) public {

        taskCount++;

        tasks[taskCount] = Task(taskCount, _content, false);

        emit TaskCreated(taskCount, _content, false);

    }

    function toggleCompleted(uint _id) public {

        Task memory _task = tasks[_id];

        _task.completed = !_task.completed;

        tasks[_id] = _task;

        emit TaskToggled(_id, _task.completed);

    }

}

3. Compile and Deploy the Contract

Create a deploy script in scripts/deploy.js:

async function main() {

  const TodoList = await ethers.getContractFactory("TodoList");

  const todoList = await TodoList.deploy();

  await todoList.deployed();

  console.log("TodoList deployed to:", todoList.address);

}

main().catch((error) => {

  console.error(error);

  process.exitCode = 1;

});

Run deployment on a local test network:

npx hardhat node

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

4. Connect the Smart Contract to React Frontend

Set up MetaMask

Add a local or test network (e.g., Sepolia).

Fund the account with test ETH.

Add Contract ABI and Address

Copy the contract's ABI and deployed address to your React project.

Example React Code (App.js)

import React, { useEffect, useState } from 'react';

import { ethers } from 'ethers';

import TodoList from './artifacts/contracts/TodoList.sol/TodoList.json';

const CONTRACT_ADDRESS = "0xYourContractAddressHere";

function App() {

  const [tasks, setTasks] = useState([]);

  const [input, setInput] = useState("");

  const [contract, setContract] = useState(null);

  useEffect(() => {

    async function loadBlockchain() {

      const provider = new ethers.providers.Web3Provider(window.ethereum);

      const signer = provider.getSigner();

      const todoContract = new ethers.Contract(CONTRACT_ADDRESS, TodoList.abi, signer);

      setContract(todoContract);

      const count = await todoContract.taskCount();

      const loadedTasks = [];

      for (let i = 1; i <= count; i++) {

        const task = await todoContract.tasks(i);

        loadedTasks.push(task);

      }

      setTasks(loadedTasks);

    }

    loadBlockchain();

  }, []);

  const addTask = async () => {

    const tx = await contract.createTask(input);

    await tx.wait();

    window.location.reload();

  };

  const toggleTask = async (id) => {

    const tx = await contract.toggleCompleted(id);

    await tx.wait();

    window.location.reload();

  };

  return (

    <div>

      <h1>📝 Decentralized To-Do List</h1>

      <input value={input} onChange={e => setInput(e.target.value)} />

      <button onClick={addTask}>Add Task</button>

      <ul>

        {tasks.map(task => (

          <li key={task.id.toString()}>

            <span style={{ textDecoration: task.completed ? 'line-through' : '' }}>

              {task.content}

            </span>

            <button onClick={() => toggleTask(task.id)}>Toggle</button>

          </li>

        ))}

      </ul>

    </div>

  );

}

export default App;

5. Test It

Start Hardhat node: npx hardhat node

Deploy contract: npx hardhat run scripts/deploy.js --network localhost

Run the app: npm start

Connect MetaMask to the local network

🔐 Optional Enhancements

Add user-based tasks (only show tasks created by current user)

Integrate IPFS for decentralized storage

Add UI/UX improvements using Tailwind or Material UI

Connect to Polygon, Arbitrum, or another testnet

🎁 Deliverables

✅ Smart contract (TodoList.sol)

✅ Deployed contract address

✅ Functional React frontend

✅ Tasks stored and retrieved on-chain

✅ MetaMask integration

Learn Blockchain Course in Hyderabad

Read More

Learning Path: From Beginner to Blockchain Pro

From Web2 to Web3: What Developers Should Know

Best Free Resources to Learn Web3

🏗️ Blockchain Project Ideas