Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
139 changes: 139 additions & 0 deletions docs/examples/build-a-minimal-dapp.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
# Building a Minimal dApp on Base

This guide walks through creating a very small decentralized application deployed on the **Base Sepolia Testnet**.
It includes a Solidity contract, deployment script and a minimal HTML/JS frontend.

---

## 1. Prerequisites

- Node.js 18+
- npm or yarn
- Foundry or Hardhat
- A wallet (Metamask, Rabby, etc.)
- At least 0.001 BASE Sepolia testnet ETH
(from https://faucet.circle.com or https://www.alchemy.com/faucets/base-sepolia)

---

## 2. Create a Basic Solidity Contract

Create a file:

`contracts/Counter.sol`

```solidity
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.21;

contract Counter {
uint256 public count;

function increment() external {
count += 1;
}
}
```

---

## 3. Deployment Script (Hardhat)

Create a file:

`scripts/deploy.js`

```javascript
const hre = require("hardhat");

async function main() {
const Counter = await hre.ethers.getContractFactory("Counter");
const counter = await Counter.deploy();

await counter.waitForDeployment();
console.log("Counter deployed to:", await counter.getAddress());
}

main().catch((error) => {
console.error(error);
process.exitCode = 1;
});
```

Run the deployment:

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

---

## 4. Minimal Frontend (HTML + JS)

Create a file:

`index.html`

```html
<!DOCTYPE html>
<html>
<head>
<title>Base Minimal dApp</title>
</head>
<body>
<h1>Base Counter dApp</h1>

<button id="inc">Increment</button>
<p id="count">Loading...</p>

<script type="module">
import { ethers } from "https://cdn.jsdelivr.net/npm/ethers@6.7.1/dist/ethers.min.js";

const contractAddress = "YOUR_DEPLOYED_CONTRACT_ADDRESS";
const abi = [
"function count() view returns (uint256)",
"function increment()"
];

const provider = new ethers.BrowserProvider(window.ethereum);
const signer = await provider.getSigner();
const contract = new ethers.Contract(contractAddress, abi, signer);

async function update() {
const c = await contract.count();
document.getElementById("count").innerText = c;
}

document.getElementById("inc").onclick = async () => {
await contract.increment();
update();
};

update();
</script>

</body>
</html>
```

---

## 5. Running the Example

1. Deploy contract
2. Replace `YOUR_DEPLOYED_CONTRACT_ADDRESS` in `index.html`
3. Open the HTML file in the browser
4. Connect wallet → click “Increment”
5. You now interact with a smart contract on **Base Sepolia**

---

## 6. Notes

- This is intentionally minimal
- Can be extended using OnchainKit, React, Wagmi, Vite, etc.
- Works on any EVM chain; configured here for Base

---