🚀 Counter DApp

A simple decentralized Counter Application built using React, Ethers.js, Solidity, and MetaMask. Users can increase, decrease, and reset a counter stored on the Ethereum blockchain.

---

📌 Features

• Connects to Ethereum using MetaMask
• Reads counter value directly from a smart contract
• Increase counter value
• Decrease counter value
• Reset counter to zero
• Real-time UI updates after blockchain transactions

---

🛠️ Tech Stack

Frontend

• React.js
• Tailwind CSS
• Ethers.js

Blockchain

• Solidity
• Ethereum
• MetaMask
• Remix IDE

---

📂 Project Structure

src/
│
├── Components/
│   └── Counter.jsx
│
├── Contract/
│   ├── ABI.js
│   └── ContractAddress.js
│
├── App.jsx
└── main.jsx

---

📜 Smart Contract

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.20;

contract Counter {

    uint256 public counter;

    constructor() {
        counter = 0;
    }

    function onclickincrease() public {
        counter++;
    }

    function onclickdecrease() public {
        require(counter > 0, "Counter is already zero");
        counter--;
    }

    function onclickzero() public {
        counter = 0;
    }
}

---

⚙️ Installation

Clone Repository

git clone https://github.com/yourusername/counter-dapp.git
cd counter-dapp

Install Dependencies

npm install

Start Development Server

npm run dev

---

🔗 Smart Contract Deployment

Deploy Using Remix

1. Open Remix IDE.
2. Create Counter.sol.
3. Paste the smart contract code.
4. Compile using Solidity 0.8.20.
5. Connect MetaMask.
6. Select Sepolia Testnet.
7. Deploy the contract.
8. Copy the Contract Address.
9. Copy the Contract ABI.

---

🔧 Configure Frontend

Contract Address

export const contractAddress = "YOUR_CONTRACT_ADDRESS";

Contract ABI

export const contractABI = [
  // Paste ABI here
];

---

🦊 MetaMask Setup

1. Install MetaMask.
2. Create or import a wallet.
3. Switch to Sepolia Testnet.
4. Get Sepolia ETH from a faucet.
5. Connect your wallet to the DApp.

---

🚀 How It Works

Increase Counter

await contract.onclickincrease();

Increases the counter value by 1.

Decrease Counter

await contract.onclickdecrease();

Decreases the counter value by 1.

Reset Counter

await contract.onclickzero();

Resets the counter to 0.

Read Counter

await contract.counter();

Fetches the current counter value from the blockchain.

---

📸 Preview

      10

[-]   [Reset]   [+]

Decrease Reset Increase

---

🎯 Learning Outcomes

This project helped me learn:

• Solidity Smart Contract Development
• Smart Contract Deployment with Remix
• MetaMask Integration
• Ethers.js Fundamentals
• Reading Blockchain Data
• Sending Transactions
• React State Management
• Web3 Frontend Development

---

🔮 Future Improvements

• Wallet Connect Button
• Event Logging
• Transaction History
• User-Specific Counters
• Counter Ownership
• Better UI/UX
• Dark Mode Support

---

👨‍💻 Author

Kartik Singh

Aspiring Web3 Developer focused on React, Solidity, and Blockchain Development.

---

⭐ Support

If you found this project useful, consider giving it a ⭐ on GitHub.

It helps support future Web3 and Blockchain projects.

---

---

#Web3 #Solidity #React #Ethereum #Blockchain #EthersJS #MetaMask #DApp