> ## Documentation Index
> Fetch the complete documentation index at: https://docs.vana.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Build a Vana App

> A step-by-step guide to the Data Portability direct data flow: request, approve, read, and pay.

Use Vana's Data Portability API to request user-approved data, read it from the user's Personal Server, and pay protocol fees from your app's escrow balance.

This guide assumes a web app with a **server backend** and a **React frontend**.

<Note>**Build on Moksha Testnet for now.** Mainnet deployment is being finalized, so test the flow against Moksha (testnet) today. When mainnet opens, the same app and code carry over — you just switch the network.</Note>

## What you'll build

<CardGroup cols={3}>
  <Card title="A server controller" icon="server">
    Holds your app identity, requested source, requested scopes, and paid reads.
  </Card>

  <Card title="Three backend routes" icon="route">
    Create an access request, check approval status, and read approved data.
  </Card>

  <Card title="A React button" icon="react">
    Opens Vana approval and renders the returned result.
  </Card>
</CardGroup>

## Two ways to build

<CardGroup cols={2}>
  <Card title="Start from the example app" icon="rocket" href="/build-a-vana-app/example-app">
    Clone, install, run — the whole flow working locally with sample data and no setup. The same code goes live when you're ready.

    **Best for** seeing how Vana works, and greenfield apps.
  </Card>

  <Card title="Add Vana to your own app" icon="puzzle-piece" href="/build-a-vana-app/manual-implementation">
    Wire Vana's primitives into your existing app with `@opendatalabs/vana-sdk` — request, approve, read. You keep your stack; the SDK handles identity, grants, and payments.

    **Best for** adding Vana to a real product on your own stack.
  </Card>
</CardGroup>

## Environments

Use **production app/API URLs end to end**. Select the chain separately.

Use **Vana Account dev** to exercise the developer flow on **Moksha** (testnet) via the Account network selector. Moksha keeps the same app/API URLs and changes chain/contracts only. The mainnet column below is for reference until deployment is finalized.

<Tabs>
  <Tab title="Production stack + Moksha testnet">
    |                         |                                                                              |
    | ----------------------- | ---------------------------------------------------------------------------- |
    | Account (dev / testnet) | [`account-dev.vana.org/developers`](https://account-dev.vana.org/developers) |
    | Block explorer          | [`moksha.vanascan.io`](https://moksha.vanascan.io)                           |
    | Fee asset               | native VANA                                                                  |
    | Testnet faucet          | [`faucet.vana.com/moksha`](https://faucet.vana.com/moksha)                   |
  </Tab>

  <Tab title="Production stack + Mainnet">
    |                |                                                |
    | -------------- | ---------------------------------------------- |
    | Account        | [`account.vana.org`](https://account.vana.org) |
    | Block explorer | [`vanascan.io`](https://vanascan.io)           |
    | Fee asset      | USDC                                           |
  </Tab>
</Tabs>

## Steps

<Steps>
  <Step title="Prerequisites">
    [Create an app identity](/build-a-vana-app/app-identity), [choose a source and scopes](/build-a-vana-app/source-and-scopes), and [fund escrow](/build-a-vana-app/escrow-and-fees).
  </Step>

  <Step title="Build">
    [Start from the example app](/build-a-vana-app/example-app), or [add Vana to your own app](/build-a-vana-app/manual-implementation).
  </Step>

  <Step title="Ship">
    [Test the flow](/build-a-vana-app/test-the-flow) end to end, and keep [troubleshooting](/build-a-vana-app/troubleshooting) close.
  </Step>

  <Step title="Extend">
    Need a source that doesn't exist yet? [Add a connector](/build-a-vana-app/add-a-connector).
  </Step>
</Steps>