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

# Build your first mobile app

> From a prompt to a working app on your phone — in under ten minutes.

This page is the focused quick-start for Mobile App Mode. For the broader product walk-through, see [Quick start](/docs/introduction/quick-start).

<Steps>
  <Step title="Sign in">
    Go to [vibely.sh](https://vibely.sh) and sign in.
  </Step>

  <Step title="Pick Mobile App">
    On the new-project screen, choose **Mobile App**. You'll be building on Expo SDK 54 + React Native, with NativeWind for styling and Supabase wired in when you ask for auth or storage.
  </Step>

  <Step title="Describe your app, with native features named">
    Be specific about the platform-flavoured features you need.

    * *"Push reminders at user-chosen times"* → Vibely wires push notifications.
    * *"Face ID to unlock the journal screen"* → biometric auth on the right screen.
    * *"Apple Sign In + Google"* → both providers, the right way.
    * *"Camera capture for profile pictures"* → camera with permission asked at the right moment.

    A good first prompt:

    > *"A habit tracker. Daily streak counter, push reminders at user-chosen times, biometric unlock, Supabase auth. Big tap targets, soft shadows, rounded corners."*
  </Step>

  <Step title="Answer the 3–4 clarifying questions">
    Before generating screens, Vibely asks a short batch of follow-ups — the niche, who the app is for, the must-have flow on day one, and the visual tone. Answer them and the agent tailors the navigation, native features, and aesthetics to your exact use case instead of a generic mobile template.
  </Step>

  <Step title="Open the web preview">
    The right pane shows a live web preview. Use it for fast iteration on layout, navigation, and forms.
  </Step>

  <Step title="Scan with Expo Go">
    Install [Expo Go](https://expo.dev/go) on your phone. Click **QR** in the project header and scan with your camera (iOS) or the Expo Go app (Android). The app loads on your device with hot reload.

    Expo Go is **required** for testing camera, push, biometrics, secure storage, and most native APIs — those don't work in the browser preview.
  </Step>

  <Step title="Iterate">
    Keep prompting. Each turn updates code; both the web preview and your device refresh together.

    * *"Add a stats screen with a 30-day heatmap."*
    * *"Move the streak counter into the header."*
    * *"Add a settings tab with the reminder-time picker and biometric toggle."*
  </Step>

  <Step title="Ship to the App Store / Play Store">
    See [Ship to stores](/docs/mobile-app/ship). You'll need an Apple Developer account ($99/yr) for iOS and a Play Console account ($25 one-time) for Android. Vibely drives the EAS build and uploads on your behalf — no Mac required for iOS.
  </Step>
</Steps>

## Tips for a strong first prompt

* **Name the platform-specific features.** *"Push reminders," "biometric login," "Apple Sign In," "Live Activities"* — naming them gets you the right native integration on turn one.
* **Pick a navigation pattern.** Tabs, stack, drawer, modal sheets. *"Bottom tabs for Home / Stats / Settings, plus a modal sheet for adding a habit"* is concrete.
* **Mention orientation.** *"Portrait only"* or *"supports landscape on tablets"* prevents a costly rewrite later.
* **Use mobile language for the vibe.** *"Big tap targets, soft shadows, rounded corners"* lands differently than *"minimal, tight, high contrast"*.

## What "good" looks like at the end of turn 1

* Working screens — at least a home plus one detail or settings screen
* Tab or stack navigation between them
* Styling consistent with the vibe you described
* Auth wired up if you mentioned it (Supabase magic link, OAuth, etc.)
* Native features ready if you mentioned them (push, secure storage, biometrics)

If the agent shipped only placeholder screens, prompt: *"Replace placeholder content with real screens — no 'Coming soon' text."*

## Web preview vs. Expo Go — when to use which

| Test                          | Web preview | Expo Go |
| ----------------------------- | :---------: | :-----: |
| Layout / spacing / typography |      ✓      |    ✓    |
| Navigation flow               |      ✓      |    ✓    |
| Forms and inputs              |      ✓      |    ✓    |
| Camera                        |      ❌      |    ✓    |
| Push notifications            |      ❌      |    ✓    |
| Biometrics                    |      ❌      |    ✓    |
| Secure storage                |      ❌      |    ✓    |
| Geolocation                   |      ⚠️     |    ✓    |
| Haptics                       |      ❌      |    ✓    |
| Real device performance feel  |      ❌      |    ✓    |

Use the web preview for fast iteration; switch to Expo Go before you say "ship it."

## Next

<CardGroup cols={2}>
  <Card title="Native capabilities" icon="mobile-screen" href="/docs/mobile-app/native">
    Camera, push, biometrics, geolocation, IAP, deep links.
  </Card>

  <Card title="Ship to stores" icon="apple" href="/docs/mobile-app/ship">
    EAS builds, TestFlight, Play Console — driven by Vibely.
  </Card>

  <Card title="What's in the box" icon="cube" href="/docs/mobile-app/templates">
    The stack and starter setup every mobile app ships with.
  </Card>

  <Card title="Connectors" icon="plug" href="/docs/connectors/overview">
    Wire third-party services with one prompt.
  </Card>
</CardGroup>