Decentralised Applications (DApps)

A decentralised application (DApp) combines a traditional front-end user interface with smart contract backends running on a blockchain. DApps inherit the properties of the underlying blockchain — transparency, censorship resistance, and trustlessness.

---

What Makes an Application a DApp?

Property	Traditional App	DApp
Backend	Centralised server	Smart contracts on a blockchain
Data storage	Centralised database	On-chain state + decentralised storage (IPFS, Arweave)
Authentication	Username/password, OAuth	Wallet signature (e.g. MetaMask)
Downtime	Server can go offline	Smart contracts are always available (as long as the network runs)
Censorship	Can be taken down by the operator	Cannot be taken down (code is immutable on-chain)
Trust model	Trust the operator	Trust the code (verifiable on-chain)

---

DApp Architecture

+------------------+     +------------------+     +------------------+
|                  |     |                  |     |                  |
|   Front-end      |<--->|   Web3 Library   |<--->|   Blockchain     |
|   (React, Next)  |     |   (ethers.js,    |     |   (Smart         |
|                  |     |    wagmi, viem)  |     |    Contracts)    |
+------------------+     +------------------+     +------------------+
        |                                                  |
        v                                                  v
+------------------+                            +------------------+
| Decentralised    |                            |  Indexing Layer   |
| Storage (IPFS,   |                            |  (The Graph,     |
| Arweave)         |                            |   Alchemy)       |
+------------------+                            +------------------+

---

Web3 Libraries

Web3 libraries connect your front-end to the blockchain:

Library	Language	Description
ethers.js	JavaScript/TypeScript	Lightweight, widely used Ethereum library
viem	TypeScript	Modern, type-safe alternative to ethers.js
wagmi	React	React hooks for Ethereum (built on viem)
web3.js	JavaScript	The original Ethereum JavaScript library
web3.py	Python	Python library for Ethereum interaction

Connecting to a Contract with ethers.js

import { ethers } from "ethers";

// Connect to the user's wallet (e.g. MetaMask)
const provider = new ethers.BrowserProvider(window.ethereum);
const signer = await provider.getSigner();

// Contract ABI (Application Binary Interface)
const abi = [
  "function balanceOf(address) view returns (uint256)",
  "function transfer(address to, uint256 amount) returns (bool)"
];

// Create a contract instance
const contract = new ethers.Contract(
  "0x1234...contract_address",
  abi,
  signer
);

// Read data (no transaction, no gas)
const balance = await contract.balanceOf(signer.address);

// Write data (sends a transaction, costs gas)
const tx = await contract.transfer("0xRecipient...", 1000);
await tx.wait(); // Wait for confirmation

---

Wallet Integration

Most DApps interact with users through browser wallet extensions:

Wallet	Type	Features
MetaMask	Browser extension + mobile	Most widely used; supports multiple networks
WalletConnect	Protocol	Connects mobile wallets to desktop DApps via QR code
Coinbase Wallet	Browser extension + mobile	User-friendly; integrated with Coinbase
Rainbow	Mobile	Beautiful UI; Ethereum-focused
Rabby	Browser extension	Multi-chain; security-focused

Wallet Connection Flow