Session 04.1
Frontend Architecture

WEB3
INTEGRATION.

Breaking the mental model. How to build frontends that talk to a database you don't own, via a protocol that has no API key.

01

The Architecture Shift

In Web3, the "Backend" is a shared, public network. We don't write API endpoints; we write Smart Contracts. We don't have a private database; we have a Public Ledger.

Legacy Stack (Web2)
Frontend
API Server
Private DB

"We own all of it"

Decentralized Stack (Web3)
Frontend
JSON-RPC
Public Nodes
The Blockchain (Ethereum)

"We own none of it"

02

The Language: JSON-RPC

We don't use REST APIs. We communicate with Nodes using Remote Procedure Calls (RPC). It's a stateless protocol where we send a JSON object describing the method we want to execute.

The Node

A computer running the blockchain software. It acts as our gateway.
https://rpc.sepolia.org

The Provider

The JS library object that manages the connection to the Node.

JSON Payload Request
// POST request to Node
{
  "jsonrpc": "2.0",
  "method": "eth_blockNumber",
  "params": [],
  "id": 1
}

// Response
{
  "jsonrpc": "2.0",
  "id": 1,
  "result": "0x5bad55" // Hexadecimal Block #
}
03

Legacy Tooling: Web3.js

The "jQuery" of Blockchain

Web3.js is the original library. Good for understanding history, but heavy. We use it here to demonstrate a simple Read-Only connection.

web3-demo.js
import { Web3 } from 'web3'; 

// 1. Define the Endpoint (The Node)
const RPC_URL = 'https://ethereum-sepolia-rpc.publicnode.com';
const web3 = new Web3(RPC_URL);

const main = async () => {
  // 2. The Heartbeat Check
  const blockNum = await web3.eth.getBlockNumber();
  console.log(`✅ Connected! Current Block: ${blockNum}`);

  // 3. Query State (Vitalik's Balance)
  const balanceWei = await web3.eth.getBalance('0xd8dA6...45');
  
  // 4. Unit Conversion (Wei -> Ether)
  console.log(`Balance: ${web3.utils.fromWei(balanceWei, 'ether')} ETH`);
};

main();
04

Modern Stack: The Sepolia Commander

We transition to Ethers.js for building DApps. Unlike the read-only script above, this introduces the Signer (Wallet) to write data to the blockchain.

Connect

Request access to window.ethereum (MetaMask)

Signer

Wrap Private Key to authorize transactions

Execute

Broadcast signed tx to the Mempool

SepoliaCommander.js logic
import { BrowserProvider, parseEther } from "ethers";

// 1. THE HANDSHAKE
async function connectWallet() {
    if (!window.ethereum) return alert("Install MetaMask!");
    
    // Wrap the injected provider
    const provider = new BrowserProvider(window.ethereum);
    
    // Trigger Popup
    await provider.send("eth_requestAccounts", []);
    
    // Get the "Pen" to write signatures
    const signer = await provider.getSigner();
}

// 2. THE WRITE OPERATION
async function sendMoney(toAddr, amount) {
    // 1 ETH = 10^18 Wei
    const tx = await signer.sendTransaction({
        to: toAddr,
        value: parseEther(amount) 
    });

    console.log(`Mempool Hash: ${tx.hash}`);
    
    // Wait for Mining (~12s)
    await tx.wait();
}

Protocol Terminology

Infrastructure

The Node

The generic API gateway. It listens for JSON-RPC commands and queries its local copy of the ledger.

Library

The Provider

A read-only connection pipe. Used to fetch public data like block numbers or balances.

Identity

The Signer

An abstraction of the Private Key/Wallet. Required to authorize state changes (transactions).

Cost

Gas

The fee paid to the network validators to process a write request. No Gas = No Transaction.

Data Unit

Wei

The smallest unit of ETH. 1 Ether = 10^18 Wei. Blockchains do not store decimals.