██FR█████ █INTELL███████████

Entering Web3: Build Your First dApp on Ethereum in 30 Minutes


This content originally appeared on DEV Community and was authored by pinkman


Problem: The Web3 Entry Barrier
Web3 is a revolutionary technology where users own their data. But beginners face:

Tooling complexity (MetaMask, Hardhat, RPC nodes)

Lack of up-to-date examples with current library versions

Transaction errors leading to fund loss (especially in Mainnet)

Why does this matter? Demand for Web3 developers grew 300% in 2024 (source: Electric Capital). Building dApps is your ticket to a high-paying niche.

Solution: Creating a “Crypto Piggy Bank” dApp
Concept: Users deposit ETH into a smart contract, and the owner withdraws funds.

Step 1: Environment Setup
bash

# Install Hardhat (Ethereum framework)
npm init -y
npm install --save-dev hardhat
npx hardhat init

Tip: Choose the “TypeScript” template—it reduces runtime errors.

Step 2: Write the Smart Contract (PiggyBank.sol)
solidity

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

contract PiggyBank {
    address public owner;
    event Deposit(uint amount);
    event Withdraw(uint amount);

    constructor() {
        owner = msg.sender;
    }

    receive() external payable {
        emit Deposit(msg.value);
    }

    function withdraw() external {
        require(msg.sender == owner, "Not owner!");
        emit Withdraw(address(this).balance);
        payable(owner).transfer(address(this).balance);
    }
}

Explanation:

receive() handles ETH deposits

event logs blockchain actions

require prevents unauthorized access

Step 3: Test the Contract
javascript

const { expect } = require("chai");
const { ethers } = require("hardhat");

describe("PiggyBank", () => {
  it("Should allow owner to withdraw", async () => {
    const [owner, user] = await ethers.getSigners();
    const PiggyBank = await ethers.getContractFactory("PiggyBank");
    const piggyBank = await PiggyBank.deploy();

    // Deposit 1 ETH from a user
    await user.sendTransaction({
      to: piggyBank.address,
      value: ethers.utils.parseEther("1.0")
    });

    // Check balance
    expect(await ethers.provider.getBalance(piggyBank.address))
      .to.equal(ethers.utils.parseEther("1.0"));

    // Withdraw funds (owner only!)
    await piggyBank.connect(owner).withdraw();
    expect(await ethers.provider.getBalance(piggyBank.address)).to.equal(0);
  });
});

Step 4: Connect Frontend (React)
javascript

import { ethers } from "ethers";

async function connectWallet() {
  if (window.ethereum) {
    await window.ethereum.request({ method: "eth_requestAccounts" });
    return new ethers.providers.Web3Provider(window.ethereum);
  } else {
    alert("Install MetaMask!");
  }
}

async function deposit(contractAddress, amount) {
  const provider = await connectWallet();
  const signer = provider.getSigner();
  await signer.sendTransaction({
    to: contractAddress,
    value: ethers.utils.parseEther(amount)
  });
}

Critical: Always specify amounts in wei (1 ETH = 10¹⁸ wei). Use parseEther for conversion.

Step 5: Deploy to Testnet
Get test ETH from faucet.paradigm.xyz
Add to hardhat.config.js:

javascript

module.exports = {
  networks: {
    sepolia: {
      url: "https://rpc.sepolia.org",
      accounts: [process.env.PRIVATE_KEY]
    }
  }
};

Deploy:
bash

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

Alternative Approaches
Tool When to Use
Truffle Complex projects with migrations
WalletConnect Mobile dApps instead of MetaMask
Polygon For low fees ($0.01)
Fix “Gas estimation failed” Error:

Increase gas limit in MetaMask
Check require conditions in the contract
Use estimateGas in code:
javascript

const gasLimit = await contract.estimateGas.withdraw();
await contract.withdraw({ gasLimit: gasLimit.mul(2) });

Outcome

You’ve built a functional dApp:
✅ Smart contract with deposit/withdraw functions
✅ Hardhat tests
✅ MetaMask frontend integration
✅ Ethereum testnet deployment

Next Steps:

  1. Use ERC-20 tokens instead of ETH
  2. Implement DAO voting for withdrawals
  3. Use The Graph for off-chain data

Web3 seems complex until you take the first step. Start small—experiment in testnets!

One tech forum known as bfd.cash discusses the details of working with web3 application development, much of it was taken from there

Tags: #web3 #blockchain #ethereum #solidity #dapp


This content originally appeared on DEV Community and was authored by pinkman