Build a Web3 Frontend for Your Arbitrum Smart Contract (No Frameworks Needed)

#smartcontract #web3 #ethereum #frontend

👋 Intro

So, you’ve deployed your first smart contract on Arbitrum Sepolia.
Congrats! 🎉
Now what?

It’s time to build a simple frontend — no React, no Vue, just HTML + TailwindCSS + JavaScript — that talks directly to your contract.

By the end of this guide, you’ll have a working Web3 guestbook users can interact with on Arbitrum testnet.

🧩 Tools We’ll Use

HTML for structure
TailwindCSS for styling
JavaScript + ethers.js for connecting to the contract
MetaMask for signing transactions
Your deployed contract on Arbitrum Sepolia

🎯 What We’re Building

A simple UI with:

A form to submit name + message
A list of all messages from the blockchain
Live updates on-chain using your smart contract

📁 Project Setup

Create a file called index.html and paste the following code:

📜 JavaScript: app.js

Create a file named app.js and paste the code below.

💡 Replace YOUR_CONTRACT_ADDRESS and YOUR_ABI_HERE with your deployed contract’s address and ABI.

const contractAddress = "0x419464a323f6E4A17f1199Ea8f18fdc935582782";
const  contractABI = [
    insert ABI here
  ];

let provider, signer, guestbook;

async function init() {
 if (window.ethereum) {
    provider = new ethers.BrowserProvider(window.ethereum);
    signer = await provider.getSigner();
    guestbook = new ethers.Contract(contractAddress, contractABI, signer);
    loadEntries();
  } else {
    alert("Please install MetaMask!");
  }
}

async function loadEntries() {
  const entries = await guestbook.getAllEntries();
  const container = document.getElementById("entries");
  container.innerHTML = "";

  entries.slice().reverse().forEach(entry => {
    const div = document.createElement("div");
    div.className = "bg-gray-800 p-4 rounded shadow";
    div.innerHTML = `
      <p class="font-semibold">${entry.name}</p>
      <p>${entry.message}</p>
      <small class="text-gray-400">${new Date(entry.timestamp * 1000).toLocaleString()}</small>
    `;
    container.appendChild(div);
  });
}

document.getElementById("guestbookForm").addEventListener("submit", async (e) => {
  e.preventDefault();
  const name = document.getElementById("name").value;
  const message = document.getElementById("message").value;

  try {
    const tx = await guestbook.sign(name, message);
    await tx.wait();
    document.getElementById("name").value = "";
    document.getElementById("message").value = "";
    loadEntries();
  } catch (err) {
    alert("Error: " + err.message);
  }
});

init();