Under the Hood

When we talk about building a decentralized application (dApp), it’s easy to miss how all the moving parts actually fit together. You see the frontend interface, you hear about smart contracts, and you know there’s a blockchain behind it, but how do these pieces connect to form a working dApp?

Let’s use a formula to visualize the process:

Backend (Smart Contracts + CLI) + Frontend (React.js + SDK + Vite) = dApp

Backend (Smart Contracts + CLI)

At the heart of every dApp is the backend logic, and in Web3, that means smart contracts.

• Smart Contracts (written in languages like Move) define the rules. They decide who can do what, how data is stored, and ensure everything is enforced on-chain without needing a middleman.
  
• The CLI (Command Line Interface) is your toolbox for working with those contracts. You use it to compile them, deploy them to the blockchain, and run commands to interact with them.

Without the backend, your dApp would just be an empty shell, nice buttons and forms, but no logic behind them.

Where to start:

• Download Docker here.
• Set up your CLI environment here.
• Using the CLI like Profiles, Test, and Deploy here.

Frontend (React.js + SDK + Vite)

If the backend is the brain of the dApp, the frontend is the face, which users actually see and click.

• React.js: Builds the interactive parts of your app, forms, dashboards, and buttons.
• SDK: The bridge between your UI and the blockchain. It serializes data, builds transactions, and sends them to the network. Without it, your frontend can’t “speak blockchain.”
• Vite: Your dev server. It runs your app locally with hot reloads, making development smooth and fast.

Together, these tools turn raw contract functions into a clean, interactive user experience.

Quick start setup:

# 1) scaffold a React + TypeScript app with Vite
npm create vite@latest my-dapp -- --template react-ts
cd my-dapp

# 2) install deps (including the SDK)
npm install
npm install supra-l1-sdk

# 3) add env support (create a .env file later in this folder)
#   VITE_SUPRA_RPC=...
#   VITE_MODULE_ADDR=...
#   VITE_DEV_PRIVATE_KEY=...

What we add from the SDK

1) SupraClient – your RPC connection

Entry point for all reads & writes.

Initialize once with RPC from .env.
Used to:

• Read on-chain data (view calls)
• Build transactions (serialize args)
• Submit signed transactions

// src/lib/supra.ts
import { SupraClient } from "supra-l1-sdk";
let clientPromise: Promise<SupraClient> | null = null;

export function getClient() {
  if (!clientPromise) {
    const rpc = import.meta.env.VITE_SUPRA_RPC as string;
    clientPromise = SupraClient.init(rpc);
  }
  return clientPromise;
}

2) Wallets – how you sign transactions

The chain won’t accept unsigned writes.

A wallet layer handles:

• Connect: get user address
• Sign: approve transactions
• Submit: send via SupraClient

import { SupraClient, SupraAccount } from "supra-l1-sdk";

export interface WalletAdapter {
  connect(): Promise<void>;
  isConnected(): boolean;
  address(): string | null;
  signAndSubmitSerializedTx(
    client: SupraClient,
    serialized: Uint8Array
  ): Promise<any>;
}

Wrapping It Up

Of course, this doesn’t cover visuals or UX design; that part depends entirely on the kind of dApp you’re building. But these are the core concepts that every dApp relies on.

And remember: developing isn’t only about writing code. It’s about understanding the process, how each layer (backend, frontend, SDK, wallets) fits together, so you always know what’s going on under the hood. Once you grasp that flow, the coding part becomes much clearer and more purposeful.

If you want to see this in action, check out PBO 2.0, our full course that takes you from zero to hero in building dApps on Supra.