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

# Integration Overview

> Choose the right frontend integration approach for your project.

## Prerequisites

Before starting your integration:

* Review [Key Concepts](/sonar/key-concepts) for an overview of Sonar's architecture
* Read the [Technical Overview](/sonar/technical-overview) to understand the end-to-end purchase flow
* Understand [Entities](/sonar/core-features/entities) to learn how users, entities, and wallets relate

## Integration Approaches

Your frontend application orchestrates the complete purchase flow: user authentication, eligibility verification, requesting purchase permits, and submitting transactions onchain. Choose an approach based on your architecture.

<CardGroup cols={2}>
  <Card title="Frontend-only" href="/sonar/integration-guides/frontend-only" icon="react">
    **Best for: SPAs without a backend**

    All authentication and API calls happen client-side using React hooks. Tokens are stored in browser storage.

    * Simpler to implement
    * Uses `@echoxyz/sonar-react` hooks
    * [Example app →](https://github.com/sunrisedotdev/sonar-example-react)
  </Card>

  <Card title="Frontend with Backend" href="/sonar/integration-guides/frontend-with-backend" icon="server">
    **Best for: Apps that already have a backend**

    OAuth tokens are stored server-side and all Sonar API requests are proxied through your backend.

    * More secure (tokens never exposed to browser)
    * Automatic token refresh on server
    * [Example app →](https://github.com/sunrisedotdev/sonar-example-nextjs)
  </Card>
</CardGroup>

## Solana (SVM)

If your sale runs on Solana, the Sonar API calls work the same way as in the guides above. Follow either approach for OAuth and entity management, then refer to the Solana guide for the chain-specific wallet adapter and transaction construction.

<Card title="Solana Integration" href="/sonar/integration-guides/frontend-svm" icon="cube">
  Wallet adapter setup, PDA derivation, and `place_bid` transaction construction for Solana sales.

  * [Example app (React) →](https://github.com/sunrisedotdev/sonar-example-react-svm)
  * [Example app (Next.js) →](https://github.com/sunrisedotdev/sonar-example-nextjs-svm)
</Card>

## Testing Your Integration

Use [test sales](/sonar/core-features/test-sales) during development to simulate various entity states, including setup progress, eligibility status, and failure scenarios. Test sales allow you to verify your integration handles edge cases without completing actual verification.