# Build your first app

> Follow a travel-app example from your first prompt to native preview and publishing preparation.

Canonical: https://www.rnblocks.dev/docs/first-app
Updated: 2026-10-01

Start with a small, useful app. This walkthrough uses a travel app called Wandr: discover places, open a destination and save favorites. The same sequence works for your own idea.

## Before you start

- An RNBlocks account with available AI credits.
- An idea for one main task. Connect a service only if the feature needs it.

## 1. Describe a clear first version

Section: https://www.rnblocks.dev/docs/first-app#describe

Open **Studio** and send this prompt, or replace the audience and main task with your own:

> **Try this prompt**
> Build a travel app to discover destinations, save favorite places and plan a trip. Use inviting photography and clear navigation. Start with Explore, Destination and Saved screens.

### Figure: Your app in Studio

Wandr in Studio. On desktop, the conversation is on the left and the iOS preview is on the right, with Publish in the preview toolbar. On mobile, the Preview tab shows the app and Publish action.

1. Use the conversation to request changes and follow the agent’s work.
2. Open Preview to try the native app. On a phone, switch between Prompt and Preview.
3. Publish sits beside the app preview when you are ready to prepare a release.

Example: Wandr in Studio, with a recreated native app screen. Illustrated walkthrough.


## 2. Connect saved data when requested

Section: https://www.rnblocks.dev/docs/first-app#connect

A local favorites list and an account that syncs across devices are different features. If you need sync, say so. Review the agent’s connection request, complete the service setup and return to the same conversation.

### Figure: Connect Supabase from the conversation

A travel-app request appears in Studio’s conversation. Below Checked integrations, a Supabase request says Save favorite places across devices and offers Connect Supabase. On mobile, this appears in the Prompt tab.

1. Ask for accounts or saved data that should sync across devices.
2. Choose Connect Supabase in the request card.
3. After authorizing your account, return to choose the project and review database changes.

Example: adding saved places to Wandr. Illustrated walkthrough.

- [Connect Supabase for accounts and saved data](https://www.rnblocks.dev/docs/connectors/supabase)

## 3. Try the app

Section: https://www.rnblocks.dev/docs/first-app#preview

1. **Open the native preview** — When the app is ready on a computer, choose Preview, then iOS or Android. On a phone, switch from Prompt to Preview and use Open with Expo Go to try it on your device.

2. **Complete a real task** — Open a destination, save it and find it in Saved. If data should persist, close and reopen the app and check again.

3. **Ask for one focused change** — For example: ‘Make the destination title easier to read over the photo.’ Repeat the same task after the update.

### Figure: Try the app in the iOS preview

The Studio preview panel shows Wandr’s destination discovery screen in an iPhone. On a computer, My Device, Android, iOS and Web sit below the preview, with iOS selected. On mobile, the Preview tab shows the app. The toolbar includes Publish.

1. On a computer, choose iOS below the preview. On a phone, open Preview and use Open with Expo Go.
2. Open a destination, use its actions and check the next screen.
3. Test the Android version too before preparing that release.

Wandr in the iOS preview. Illustrated workspace with recreated native app screens.


## 4. Move into publishing

Section: https://www.rnblocks.dev/docs/first-app#publish

When the main task works, choose **Publish**. Tell the publishing agent where you want to release and what you need help with. You can start with a question, app checks, screenshots or a test build.

> **A useful first publishing request**
> Help me prepare this app for iPhone testing. Check what is missing and tell me which accounts I need.

- [From Studio to the stores](https://www.rnblocks.dev/docs/publishing)
- [Account checklist](https://www.rnblocks.dev/docs/publishing/accounts)

## Continue

- [Write useful prompts](https://www.rnblocks.dev/docs/prompts)
- [Test the important paths](https://www.rnblocks.dev/docs/testing-your-app)
- [Create store screenshots](https://www.rnblocks.dev/docs/publishing/store-assets)