Posted on May 17

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();