Web3 Beginner Tutorial: Creating an Ethereum Dapp with Ethers.js

·

This step-by-step guide will walk you through building a decentralized application (dApp) frontend, deploying a Solidity smart contract, and connecting them using Ethers.js. We'll utilize MetaMask, Remix IDE, and Ethers.js to create a functional HTML interface that interacts with blockchain functionality.

Prerequisites

  1. Install MetaMask

    • Download the browser extension
    • Switch to the Ropsten Testnet and copy your account address

  2. Acquire Test ETH

  3. Set Up Lite-Server

    npm install -g lite-server

Phase 1: Create a Basic HTML Frontend

HTML Structure

<!DOCTYPE html>
<html>
<head>
  <title>Mood Diary dApp</title>
  <style>
    body { font-family: Arial; text-align: center; }
    div { width: 20%; margin: 0 auto; display: flex; flex-direction: column; }
    button { margin: 10px 0; }
  </style>
</head>
<body>
  <h1>Mood Diary</h1>
  <div>
    <label>Input Mood:</label>
    <input type="text" id="mood">
    <button onclick="getMood()">Get Mood</button>
    <button onclick="setMood()">Set Mood</button>
  </div>
  <script src="https://cdn.ethers.io/lib/ethers-5.7.umd.min.js"></script>
  <script>
    // Ethers.js integration code here
  </script>
</body>
</html>

👉 Learn advanced Ethers.js techniques

Phase 2: Deploy a Solidity Smart Contract

Contract Code (mood.sol)

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

contract MoodDiary {
    string mood;
    
    function setMood(string memory _mood) public {
        mood = _mood;
    }
    
    function getMood() public view returns(string memory) {
        return mood;
    }
}

Deployment Steps:

  1. Compile in Remix IDE
  2. Deploy to Ropsten via "Injected Web3"

  3. Save:

    • Contract Address
    • Contract ABI

Phase 3: Connect Frontend to Contract

JavaScript Integration

const MoodContractAddress = "0xYourContractAddress";
const MoodContractABI = [...]; // Paste ABI here

let MoodContract;
let signer;

const provider = new ethers.providers.Web3Provider(window.ethereum, "ropsten");

provider.send("eth_requestAccounts", []).then(() => {
  provider.listAccounts().then((accounts) => {
    signer = provider.getSigner(accounts[0]);
    MoodContract = new ethers.Contract(
      MoodContractAddress,
      MoodContractABI,
      signer
    );
  });
});

async function getMood() {
  const mood = await MoodContract.getMood();
  console.log("Current mood:", mood);
}

async function setMood() {
  const moodInput = document.getElementById("mood").value;
  await MoodContract.setMood(moodInput);
}

👉 Explore more dApp development tools

Testing & Deployment

  1. Run lite-server
  2. Test functionality via MetaMask
  3. Verify transactions on Ropsten Etherscan

FAQ

1. What's the difference between Web3.js and Ethers.js?

Ethers.js offers a cleaner API and better modularization compared to Web3.js, making it preferred for newer dApp development.

2. Why use Ropsten instead of Mainnet?

Ropsten allows free test ETH usage without real financial risk during development.

3. How much does contract deployment cost?

On Ropsten: Free (test ETH). On Mainnet: ~0.005-0.02 ETH depending on network congestion.

4. Can I use this with mobile wallets?

Yes! WalletConnect-compatible apps like MetaMask Mobile will work.

5. What if my contract code changes?

You'll need to re-deploy the contract and update the ABI/address in your frontend.

6. How do I upgrade to Mainnet?

Simply change the network in MetaMask and use real ETH for gas fees.

Key Takeaways

This tutorial covers the essential workflow for Ethereum dApp development. For deeper learning:

👉 Master Web3 development