⛓️ Blockchain & Web3 · Deployment · Pro

Web3 dApp Deployment

Where a decentralised app's parts run: frontend on IPFS, contracts on a layer-2 chain, and supporting services like RPC providers and an indexer.

More Blockchain & Web3 templates

Deployment diagrams are part of Pro. Anyone can view this one; generating and editing it needs Pro.

Drawing diagram…

What this diagram shows

The frontend is hosted on IPFS and served through a gateway
Contracts run on a layer-2 network for low fees
An indexer makes on-chain data fast to query

Prompt used

Deployment of a Web3 dApp: the React frontend is built and pinned to IPFS and served via a gateway and ENS name. Users' wallets send transactions to contracts on a layer-2 network (Arbitrum) through an RPC provider. A subgraph indexer (The Graph) reads contract events and serves GraphQL to the frontend. A small backend on a cloud VM sends notifications.

Mermaid code

flowchart TB
  U[User with Wallet] --> GW[IPFS Gateway and ENS name]
  subgraph IPFS[IPFS Network]
    FE[React Frontend - pinned]
  end
  GW --> FE
  subgraph L2[Arbitrum Layer-2]
    C1[Vault Contract]
    C2[Token Contract]
  end
  RPC[RPC Provider]
  subgraph GRAPH[The Graph]
    SG[Subgraph Indexer]
  end
  subgraph CLOUD[Cloud VM]
    NOTIF[Notification Service]
  end
  FE --> RPC
  RPC --> C1
  RPC --> C2
  SG -.reads events.-> C1
  FE --> SG
  NOTIF --> SG

Related templates

C4 ArchitectureProBlockchain & Web3

Web3 dApp Deployment

What this diagram shows

Prompt used

Related templates

Crypto Exchange Architecture

Crypto Withdrawal Sequence

NFT Marketplace

Smart Contract Upgrade Process

Blockchain Transaction States

Hot and Cold Wallet Custody