Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/rohitroy-github/vite-personal-todo-planner-dapp

A decentralized day-to-day personal todo planning application made using ViteJS and deployed on blockchain.
https://github.com/rohitroy-github/vite-personal-todo-planner-dapp

blockchain dapp ethersjs hardhat reactjs solidity tailwindcss vitejs web3

Last synced: about 2 months ago
JSON representation

A decentralized day-to-day personal todo planning application made using ViteJS and deployed on blockchain.

Awesome Lists containing this project

README 

          
Personal Todo Planner (EVM Based)



A decentralized, on-chain todo management application built with Vite, React, and Solidity.



This project demonstrates a complete Web3 stack implementation, featuring a smart contract backend for persistent task storage and a responsive frontend for managing daily todos. Each user's todos are stored securely on the blockchain, ensuring data ownership and transparency.



Currently supports: Sepolia Testnet (and configurable for localhost testing via Hardhat)



Snapshots from the project :






Features :



    

        
  • 

    Decentralized Storage: All todos are stored on-chain in a Solidity smart contract
    • 

        
  • 

    User-Specific Data: Each wallet address maintains its own independent todo list
    • 

        
  • 

    Full CRUD Operations: Create, read, update, and delete todos with blockchain transactions
    • 

        
  • 

    Completion Tracking: Mark todos as complete with immutable status tracking
    • 

        
  • 

    Metamask Integration: Seamless wallet connection and transaction signing
    • 

        
  • 

    Real-Time Updates: Instant reflection of blockchain state changes in the UI
    • 

        
  • 

    Responsive Design: Mobile-friendly interface with Tailwind CSS
    • 




Tech Stack :



Frontend :



    

        
  • 

    Vite JS - Lightning-fast build tool and dev server
    • 

        
  • 

    React 18 - Component-based UI framework
    • 

        
  • 

    Tailwind CSS - Utility-first CSS framework for responsive design
    • 

        
  • 

    Ethers.js - Lightweight Ethereum library for wallet interaction and contract calls
    • 




Backend/Blockchain :



    

        
  • 

    Solidity ^0.8.20 - Smart contract programming language
    • 

        
  • 

    Hardhat - Ethereum development environment with testing and deployment tools
    • 

        
  • 

    Node JS - JavaScript runtime for backend scripts and deployment
    • 

        
  • 

    Metamask - Browser wallet for secure transaction signing
    • 

        
  • 

    Alchemy - RPC endpoint provider for blockchain interaction
    • 

        
  • 

    Sepolia Testnet - EVM-compatible test network for deployment and testing
    • 




Prerequisites :



    

        
  • Node.js v16 or higher
    • 

        
  • npm or yarn package manager
    • 

        
  • MetaMask wallet extension installed in your browser
    • 

        
  • Some Sepolia ETH test tokens (get from Alchemy Sepolia Faucet)
    • 




Project Setup :



Step 1: Clone and Install Dependencies




git clone https://github.com/rohitroy-github/vite-personal-todo-planner-dapp.git

cd vite-personal-todo-planner-dapp



# Install backend dependencies

cd blockchain-hardhat

npm install



# Install frontend dependencies (from root directory)

cd ../frontend-vite

npm install




Step 2: Environment Configuration



Inside the blockchain-hardhat folder, create a .env file. Use the template from .env.example:




ALCHEMY_API_KEY=your_alchemy_api_key_here

PRIVATE_KEY=your_metamask_private_key_here




Guide for Testing on Local Hardhat Network :



Terminal 1 - Start Local Hardhat Node:




cd blockchain-hardhat

npx hardhat node




This will start a local Ethereum node at http://localhost:8545 with pre-funded test accounts.



Terminal 2 - Deploy Smart Contract:




cd blockchain-hardhat

npx hardhat run scripts/deploy[Todo_Contract_Main].js --network localhost




Copy the deployed contract address from the output.



Terminal 2 - Run Tests (Optional):




npx hardhat test




Update Configuration:



After deployment, update frontend-vite/src/backend-config.json with the contract address under the "31337" network:




{

  "31337": {

    "contract": {

      "address": "0x5FbDB2315678afecb367f032d93F642f64180aa3"

    }

  }

}




Terminal 3 - Start Frontend Development Server:




cd frontend-vite

npm run dev




Open your browser to http://localhost:5173 and connect your MetaMask wallet to the localhost network.



Deploying to Sepolia Testnet :



1. Update .env file in blockchain-hardhat:



Ensure your Alchemy API key and Sepolia-funded wallet private key are configured.



2. Deploy contract to Sepolia:




cd blockchain-hardhat

npx hardhat run scripts/deploy[Todo_Contract_Main].js --network sepolia




3. Update backend-config.json:



Add the Sepolia deployment address under the "11155111" network (already configured in the file).



4. Configure MetaMask:



    

        
  • Switch MetaMask network to Sepolia
    • 

        
  • Ensure your wallet has Sepolia ETH for gas fees
    • 




5. Run frontend:




cd frontend-vite

npm run dev




Smart Contract Overview :



The Todo_Contract_Main smart contract provides the following functions:



    

        
  • 

    addNewTodo(string _text) - Create a new todo item
    • 

        
  • 

    updateTodoText(uint _index, string _newText) - Update existing todo text
    • 

        
  • 

    markTodoAsCompleted(uint _index) - Mark a todo as completed (immutable)
    • 

        
  • 

    deleteTodo(uint _index) - Remove a todo from the list
    • 

        
  • 

    viewTodos() - Retrieve all todos for the connected wallet (read-only, no gas cost)
    • 




Each wallet address maintains its own independent todo list stored in the todosByOwner mapping, ensuring data privacy and ownership.



Available Scripts :



Frontend:




npm run dev      # Start development server

npm run build    # Build for production

npm run preview  # Preview production build locally

npm run lint     # Run ESLint




Backend:




npx hardhat node                                                     # Start local Hardhat network

npx hardhat test                                                     # Run contract tests

npx hardhat run scripts/deploy[Todo_Contract_Main].js --network localhost  # Deploy to localhost

npx hardhat run scripts/deploy[Todo_Contract_Main].js --network sepolia    # Deploy to Sepolia




Project Status :



✅ Core functionality complete  

✅ Smart contract deployed and tested  

✅ Frontend UI fully functional  

✅ Multi-network support (localhost & Sepolia)  

🚀 Ready for further enhancements and scaling



The project remains under active development with continuous improvements and optimizations.







⭐ If you find this project helpful, please consider giving it a star!