Decentralized Blockchain-Based To-Do List Application (DApp)
This project is a modern decentralized To-Do List application built using Next.js, Ethereum smart contract integration, and Web3 wallet connectivity. Unlike traditional task managers, this system stores tasks immutably on the blockchain, ensuring data integrity, transparency, and user ownership.
The application allows users to connect a crypto wallet, interact with a deployed smart contract, create and manage tasks, and view task states directly from the blockchain. The system is production-ready, deployable on Vercel, and aligned with modern Web3 architecture standards.
- 🧩 Project Overview
- 🎯 Objectives & Goals
- ✅ Acceptance Criteria
- 💻 Prerequisites
- ⚙️ Installation & Setup
- 🔗 API Documentation
- 🖥️ UI / Frontend
- 🔢 Status Codes
- 🚀 Features
- 🧱 Tech Stack & Architecture
- 🛠️ Workflow & Implementation
- 🧪 Testing & Validation
- 🔍 Validation Summary
- 🧰 Verification Tools
- 🧯 Troubleshooting & Debugging
- 🔒 Security & Secrets
- ☁️ Deployment (Vercel)
- ⚡ Quick-Start Cheat Sheet
- 🧾 Usage Notes
- 🧠 Performance & Optimization
- 🌟 Enhancements & Features
- 🧩 Maintenance & Future Work
- 🏆 Key Achievements
- 🧮 High-Level Architecture
- 🗂️ Project Structure
- 🧭 How to Demonstrate Live
- 💡 Summary, Closure & Compliance
The project implements a decentralized task management system where each task is recorded on the blockchain via a smart contract. The frontend communicates with the blockchain using contract ABI definitions and wallet-based authentication.
Key characteristics:
- Client-side rendered Web3 DApp
- Wallet-based authentication (MetaMask)
- Immutable task storage
- No centralized backend database
- Demonstrate practical blockchain integration in a frontend app
- Ensure user data ownership and transparency
- Eliminate centralized storage dependencies
- Build a deployable, scalable Web3 UI
| Criteria | Description |
|---|---|
| Wallet Connection | User must connect wallet before interacting |
| Task Creation | Tasks must be written to blockchain |
| Task Visibility | Tasks persist across sessions |
| Network Validation | Wrong network warning must appear |
- Node.js (v16+)
- NPM or Yarn
- MetaMask Wallet
- Ethereum Test Network
- Clone repository
- Install dependencies
- Configure blockchain contract address
- Start development server
This application does not rely on traditional REST or GraphQL APIs. Instead, it uses a Blockchain-as-an-API model, where Ethereum smart contracts act as the authoritative backend. All reads and writes are executed through Web3 providers using contract ABI definitions.
| Layer | Responsibility | Details |
|---|---|---|
| Frontend (Next.js) | UI & User Actions | Collects input, triggers blockchain calls |
| Web3 Provider | Transport | Bridges UI and Ethereum network |
| Smart Contract | Business Logic | Stores, retrieves, validates tasks |
| Method | Type | Description |
|---|---|---|
| createTask | Transaction | Writes a new task to the blockchain |
| getTasks | Read-only | Fetches all tasks for a wallet |
| toggleTaskStatus | Transaction | Marks a task as completed/incomplete |
Pages:
- index.js – Main dashboard
- _app.js – Global layout and providers
Components:
- Navbar – Application header
- ConnectWalletButton – Wallet integration
- TodoList – Task container
- Task – Individual task renderer
- WrongNetworkMessage – Network guard
Styling:
- Tailwind CSS
- Global and module-scoped styles
| Status | Meaning |
|---|---|
| 200 | Successful blockchain interaction |
| 400 | User rejected wallet request |
| 403 | Wrong blockchain network |
- Fully Decentralized Storage: Tasks are persisted on-chain, eliminating centralized databases.
- Wallet-Based Identity: User identity is derived directly from Ethereum wallet addresses.
- Immutable Task History: Once written, tasks cannot be altered maliciously.
- Network Validation: Detects incorrect blockchain networks and prevents unsafe interactions.
- Transaction Lifecycle Awareness: UI reflects pending, confirmed, and failed states.
- Zero Backend Servers: Entire system operates without traditional servers.
- Production-Ready Frontend: Optimized, modular, and deployable at scale.
| Layer | Technology | Purpose |
|---|---|---|
| Frontend | Next.js, React | UI rendering and routing |
| Styling | Tailwind CSS | Utility-first responsive styling |
| Blockchain | Ethereum | Decentralized state storage |
| Web3 Layer | Ethers.js | Smart contract communication |
| Deployment | Vercel | Global edge hosting |
┌─────────────┐
│ User UI │
│ (Browser) │
└──────┬──────┘
│
▼
┌─────────────┐
│ Next.js App │
│ React Layer │
└──────┬──────┘
│
▼
┌─────────────┐
│ Ethers.js │
│ Web3 Layer │
└──────┬──────┘
│
▼
┌─────────────┐
│ Smart │
│ Contract │
└──────┬──────┘
│
▼
┌─────────────┐
│ Ethereum │
│ Blockchain │
└─────────────┘
- User opens the web application.
- Frontend initializes Web3 provider detection.
- User connects wallet (MetaMask).
- Network ID is validated against supported chains.
- Smart contract instance is created using ABI and address.
- Existing tasks are fetched via read-only blockchain calls.
- User submits a new task.
- Transaction request is sent to wallet.
- User signs transaction.
- Transaction is mined and confirmed.
- UI re-syncs state from blockchain.
| ID | Area | Action | Expected Result | Purpose |
|---|---|---|---|---|
| TV-01 | Wallet | Connect Wallet | Wallet address displayed | Auth verification |
| TV-02 | Blockchain | Create Task | Task appears on reload | Persistence check |
| TV-03 | Network | Wrong Chain | Error message shown | Safety validation |
All critical flows were validated against real blockchain interactions. No centralized failure points were observed. State consistency was verified across reloads and sessions.
- MetaMask Activity Logs
- Ethereum Block Explorers
- Browser Developer Console
- React DevTools
| Issue | Cause | Resolution |
|---|---|---|
| Wallet not detected | Extension disabled | Enable MetaMask |
| Transaction stuck | Low gas | Increase gas fee |
| Wrong network | Incorrect chain | Switch to supported network |
- No private keys stored
- Wallet signs transactions client-side
- Environment variables handled securely
- Push repository to GitHub
- Import project into Vercel
- Configure environment variables
- Build and deploy
- Verify wallet and contract interactions
- Install dependencies
- Run development server
- Connect wallet
- Create tasks
Users should note that blockchain writes are permanent and incur gas fees. This application is recommended for test networks during demonstrations.
- Minimized blockchain reads
- Client-side state caching
- Component-level re-render control
- Task categories
- Multi-chain support
- Layer-2 integration
- Upgradeable smart contracts
- Gas usage optimization
- Improved UX flows
- Zero-backend decentralized architecture
- Production-ready Web3 frontend
- Blockchain-persistent data model
User │ ▼ Web Browser │ ▼ Next.js UI │ ▼ Wallet Provider │ ▼ Smart Contract Interface │ ▼ Ethereum Network
TO_DoList_Blockchain-main/ ├── components/ │ ├── ConnectWalletButton.js │ ├── Navbar.js │ ├── Task.js │ ├── TodoList.js │ └── WrongNetworkMessage.js ├── pages/ │ ├── _app.js │ ├── index.js │ └── api/hello.js ├── styles/ │ ├── globals.css │ └── Home.module.css ├── utils/ │ └── TaskContract.json ├── config.js ├── next.config.js ├── tailwind.config.js ├── package.json
- Launch application
- Connect MetaMask
- Create a task
- Refresh page to show persistence
This project demonstrates enterprise-grade decentralized application design using modern Web3 standards. It complies with open-source norms, avoids centralized data handling, and follows secure wallet-based interaction patterns suitable for professional and commercial use.