DApp Development

DApp Development

A Decentralized Application (DApp) combines a smart contract backend with a traditional frontend. The frontend talks to the blockchain through a provider (like MetaMask), sending transactions and reading state from smart contracts.

DApp Architecture

  ┌──────────────────────────────────────────────┐
  │               DAPP ARCHITECTURE               │
  ├──────────────────────────────────────────────┤
  │                                              │
  │  ┌─────────────┐     ┌──────────────────┐   │
  │  │   Frontend   │     │   Smart Contract  │   │
  │  │  React/Vue/  │────►│   (Solidity on    │   │
  │  │  vanilla JS  │◄────│    Blockchain)    │   │
  │  └──────┬───────┘     └──────────────────┘   │
  │         │                                     │
  │         ▼                                     │
  │  ┌─────────────┐                              │
  │  │  Web3 Library│  (ethers.js / web3.js)      │
  │  └──────┬───────┘                              │
  │         │                                     │
  │         ▼                                     │
  │  ┌─────────────┐                              │
  │  │  Provider    │  (MetaMask, WalletConnect)  │
  │  └──────┬───────┘                              │
  │         │                                     │
  │         ▼                                     │
  │  ┌─────────────┐                              │
  │  │  Blockchain  │  (Ethereum / Polygon / ...) │
  │  └─────────────┘                              │
  └──────────────────────────────────────────────┘

Frontend with ethers.js

  import { ethers } from "ethers";
  import contractABI from "./abi.json";

  const CONTRACT_ADDRESS = "0x1234...abcd";

  async function connectWallet() {
    if (!window.ethereum) {
      alert("Install MetaMask!");
      return;
    }

    const provider = new ethers.BrowserProvider(window.ethereum);
    await provider.send("eth_requestAccounts", []);
    const signer = await provider.getSigner();

    const contract = new ethers.Contract(
      CONTRACT_ADDRESS,
      contractABI,
      signer
    );

    return { provider, signer, contract };
  }

  async function getCount() {
    const { contract } = await connectWallet();
    const count = await contract.getCount();
    console.log("Count:", count.toString());
  }

  async function increment() {
    const { contract } = await connectWallet();
    const tx = await contract.increment();
    await tx.wait();  // Wait for confirmation
    console.log("Incremented!");
  }

Project Structure

  my-dapp/
  ├── contracts/
  │   └── MyContract.sol
  ├── src/
  │   ├── App.jsx
  │   ├── components/
  │   ├── hooks/
  │   └── abi.json
  ├── test/
  │   └── MyContract.test.js
  ├── hardhat.config.js
  ├── package.json
  └── .env

Development Tools

Hardhat: Development environment for compiling, testing, and deploying contracts.

Foundry: Fast, Rust-based toolkit for smart contract development.

Remix: Browser-based IDE for writing and deploying Solidity.

MetaMask: Browser wallet that provides the provider interface for DApps.

IPFS: Decentralized storage for frontend assets and NFT metadata.