Deploying React Frontends for Algorand

Build React applications that connect to Algorand wallets and interact with smart contracts using typed clients.

Prerequisites

Before using this skill, ensure:

1. Smart contract is deployed with a known App ID
2. ARC-56/ARC-32 app spec exists (e.g., MyContract.arc56.json)
3. React project is set up (Vite, Next.js, or Create React App)

Core Workflow: The "Signer Handoff" Pattern

The key insight is passing the wallet's transaction signer to AlgorandClient, which then provides it to typed app clients: