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

# Build your first Mini App

> From an empty Vite project to a Mini App running in the Startale sandbox.

A guided walkthrough that takes you from `pnpm create vite` to a fully functional Mini App appearing in the Startale Mini App sandbox launcher.

## What you'll build

A Mini App with:

* A working manifest at `/.well-known/farcaster.json`.
* The Farcaster SDK initialized and `sdk.actions.ready()` called.
* The Startale connector wired into wagmi.
* A connect button that reads the user's smart-account address.
* STAR Points displayed from `sdk.context.startale`.

## Steps

The full code closely matches the [Mini App quickstart](/miniapps/quickstart). The walkthrough below explains the why and adds debugging tips at each milestone.

### 1. Scaffold and install

```bash theme={null}
pnpm create vite@latest first-miniapp -- --template react-ts
cd first-miniapp
pnpm install
pnpm add @startale/app-sdk @farcaster/miniapp-sdk wagmi viem @tanstack/react-query
```

### 2. Manifest

Create `public/.well-known/farcaster.json` per the [manifest reference](/miniapps/manifest). Use placeholder image URLs pointing at `https://placehold.co/...` until you have real assets.

**Common mistake:** missing `frame.featuredBannerImageUrl`. The dev tooling will reject your submission. Provide one even at this early stage.

### 3. Wagmi config

Mirror the [Quickstart config](/quickstart#2-configure-wagmi). Use only Soneium Mainnet for now to keep it simple.

### 4. SDK ready

```tsx theme={null}
import { useEffect } from 'react'
import { sdk } from '@farcaster/miniapp-sdk'

useEffect(() => {
  sdk.actions.ready()
}, [])
```

If your Mini App never reaches `ready()`, the host shows a loading spinner indefinitely.

### 5. Read context

```tsx theme={null}
const [points, setPoints] = useState<number | null>(null)

useEffect(() => {
  void sdk.context.then((ctx) => {
    setPoints(ctx.startale?.starPoints ?? 0)
  })
}, [])
```

### 6. Run the sandbox

[Same as the Mini App quickstart →](/miniapps/quickstart#7-run-the-sandbox)

## What you've learned

* The required handshake (`sdk.actions.ready()`) and why it matters.
* How to read Startale-specific context (`starPoints`).
* That the sandbox does not simulate `eoaWallets`; test EOA features against staging or production.

## Next

[Discover linked EOAs for legacy player onboarding →](/tutorials/code-walkthroughs/gated-content-with-eoa-discovery)