🧩 What’s a DApp? How Frontends Talk to Smart Contracts on Arbitrum

You’ve deployed your first smart contract. Now let’s connect it to a frontend and turn it into a real decentralized app (DApp) you can share with anyone — all on Arbitrum.

🧠 First, What Is a DApp?

A DApp = Decentralized App.
It’s just like any web app you use daily — but with one big difference:

Instead of talking to a server, it talks to a smart contract on the blockchain.

*Example DApps:
*

• Uniswap (swaps tokens)
• Aave (borrows/lends crypto)
• Lens Protocol (decentralized social media)
• DApps = Frontend (HTML/JS) + Smart Contract (Solidity)

🧱 Architecture Breakdown

🧑‍💻 User clicks button
⬇️
🌐 Frontend (React/Next.js/etc.)
⬇️
🔌 Web3 Provider (ethers.js / wagmi / viem)
⬇️
📜 Smart Contract (Solidity on Arbitrum)
⬇️
📦 Blockchain stores + returns data

⚙️ Let’s Build a Basic DApp UI (React + ethers.js)

// SPDX-License-Identifier: MIT pragma solidity ^0.8.18; contract MessagePortal { string private message; // Event to emit when message is updated event MessageUpdated(address indexed sender, string newMessage); // Constructor to set initial message constructor(string memory _initialMessage) { message = _initialMessage; } // Read current message function getMessage() public view returns (string memory) { return message; } // Update the message function updateMessage(string memory _newMessage) public { message = _newMessage; emit MessageUpdated(msg.sender, _newMessage); } } 

Now we’ll build a frontend to read and update that message.

🧰 Tools You’ll Use

• Vite + React for the frontend
• ethers.js to talk to the blockchain
• MetaMask for signing
• Arbitrum Testnet

🚧 Step-by-Step: Build Your DApp Frontend

1. Create your React app

npm create vite@latest hello-dapp --template react cd hello-dapp npm install npm install ethers 

2. Add the basic UI

// src/App.jsx import { useState } from 'react'; import { ethers } from 'ethers'; const CONTRACT_ADDRESS = 'YOUR_DEPLOYED_CONTRACT_ADDRESS'; const ABI = [ 'function message() view returns (string)', 'function updateMessage(string memory _newMessage) public', ]; function App() { const [msg, setMsg] = useState(''); const [newMsg, setNewMsg] = useState(''); const loadMessage = async () => { const provider = new ethers.providers.Web3Provider(window.ethereum); const contract = new ethers.Contract(CONTRACT_ADDRESS, ABI, provider); const current = await contract.message(); setMsg(current); }; const updateMessage = async () => { const provider = new ethers.providers.Web3Provider(window.ethereum); const signer = provider.getSigner(); const contract = new ethers.Contract(CONTRACT_ADDRESS, ABI, signer); const tx = await contract.updateMessage(newMsg); await tx.wait(); loadMessage(); }; return ( <div> <h1>Arbitrum DApp</h1> <p>Current Message: {msg}</p> <input onChange={(e) => setNewMsg(e.target.value)} placeholder="New message" /> <button onClick={updateMessage}>Update</button> <button onClick={loadMessage}>Refresh</button> </div> ); } export default App; 

3. Connect MetaMask to Arbitrum Goerli

• Add Arbitrum testnet if needed: Chainlist
• Grab test ETH from the faucet.

4. Run your app

npm run dev 

Now, your DApp:

• Reads the message from the blockchain.
• Sends a transaction to update it.
• Shows the new message on-chain.

Magic. 🔥

🛠️ What Just Happened?

• ethers.js talks to your contract.
• Web3Provider connects to MetaMask.
• signer lets users approve a blockchain transaction.
• You built a Web3 interface — fully functional on Arbitrum testnet.

🧠 Pro Tips

• Use viem or wagmi for advanced state handling.
• Add loading states for transactions.
• Show the transaction hash & link to Arbiscan.

🧪 Next Steps

Now that your frontend talks to your smart contract:

• Add token payments.
• Use a real database for metadata (like IPFS).
• Build real-world apps (chat, voting, DAOs, NFT mints).

📌 TL;DR

• DApps = frontend + smart contract.
• You built a full Web3 app using ethers.js + Arbitrum.
• Next up: storing & using blockchain data better.