Build a Real App with Claude Code and InstantDB (Not Just a Website) | Code with Beto

People with zero coding experience are building and shipping real applications right now.

Not landing pages. Not "demo" web pages dressed up to look like apps. Real apps. On real phones. In the App Store.

I've watched it happen inside my own community, and the workflow is way more accessible than most people think.

In this blog, I'll show you how to build a simple shared to-do list app with Claude Code, Expo, and InstantDB. By the end, you'll have a real app running on both iOS and Android, with a real-time backend syncing data across devices.

The app idea doesn't matter much. The patterns and best practices do.

Once you have this workflow down, you can point it at anything you want to build.

Watch the full walkthrough: Build Your First App with Claude Code in 20 Minutes (The Right Way)

The three things you need

There's no Xcode, no Android Studio, no simulator setup. You only need three pieces:

Expo Go on your phone: the app that lets you preview your project on a real device. Search for it in the App Store or Play Store and install it.
InstantDB account: the real-time backend we're going to use. Sign up at instantdb.com. It's free for the kind of project we're building.
VS Code with Claude Code: the IDE and agent that will generate the app for you.

Scaffold the project

Open VS Code and create a new empty folder somewhere on your machine. I usually put mine on the Desktop. Open that folder in VS Code, then open the integrated terminal (Terminal → New Terminal in the menu bar).

InstantDB ships a CLI that scaffolds the entire project for you, including the Expo app, the SDK, and the connection to a brand new InstantDB backend. Run:

npx create-instant-app

It'll ask you a few questions:

Framework: pick mobile with Expo.
AI: pick Claude Code (or whichever agent you use).
App: create a new InstantDB application. Give it a name. This becomes your real backend.

Once it finishes installing, you have a working Expo project wired up to a live InstantDB backend. No extra config.

Run it on your phone

Start the dev server from inside the project folder:

npx expo start

You'll get a QR code in the terminal. Scan it with your phone's camera app and the project will load in Expo Go.

If you have two phones (or a phone and a tablet, or your phone and a friend's phone), connect both. The starter app already includes a tiny real-time demo that updates instantly across devices. That's InstantDB doing its thing.

You didn't write a line of sync code.

Install the agent skills

Before you start prompting Claude, you want to give it skills. Claude Code knows a lot in general, but skills make it dramatically better at the specific tools you're using.

We're using Expo and InstantDB, so we install skills for both.

Open a second terminal in VS Code (the dev server keeps running in the first one). Then install the Expo native UI skill:

npx skills add https://github.com/expo/skills --skill building-native-ui

Select Claude Code when prompted, install at the project level. This is the skill the Expo team maintains. It teaches Claude to use the right native components, the right navigation patterns, and the iOS/Android conventions that make an app feel real instead of webby.

Then install the InstantDB skill:

npx skills add instantdb/skills

Same flow. Claude Code, project level.

You'll see a .claude/ folder appear with the skills inside. Now Claude knows your stack.

If you want to go deeper on which skills are worth installing, I wrote a longer post on the best Claude Skills for mobile development.

Plan before you build

Never let the AI write code before it knows what it's building.

Plans save tokens.

Plans save your time.

Plans save you from rewriting half your app three days from now because you didn't think about what fields a "task" should have.

Open Claude Code in the VS Code extension and switch to plan mode.

Here's the prompt I used:

I want to build a minimalistic shared to-do list. Real time. No login for now, this is a personal app for me and my family. Any user can see, add, and check off tasks. The home screen shows a list of tasks with a checkbox. Using Expo Router, create a bottom sheet screen to add new tasks. Each task can have an emoji, title, optional description, status, and a created-at timestamp. Don't worry about styling too much yet. Use InstantDB for storage and real-time sync.

Notice how specific I'm being. This matters more than people realize.

I'm telling Claude what to build, not just hinting.
I'm telling Claude what not to build (no auth, no fancy styling yet).
I'm naming the exact data shape: emoji, title, description, status, created-at.
I'm naming the navigation pattern: Expo Router with a bottom sheet.

Vague prompts produce vague results. Specific prompts produce real apps.

Spend time on the data shape

When Claude returns the plan, read it carefully. Especially the schema. Especially the schema. Especially the schema.

Changes to the data shape later mean changes to the database, which means redeploying to InstantDB. You can absolutely do it, but every change is friction.

If you nail the schema up front, the rest of the build is smooth.

In my plan, the task entity had:

emoji — a single emoji character
title — short string
description — optional string
status — done or not done
createdAt — timestamp

If I wanted a due date or a priority field, this is the moment to ask for it. Not after Claude has built three screens around the wrong shape.

When the plan looks right, accept it and let Claude build. Approve the commands as they come up. After a few minutes, you have a real working app on both phones.

Iterate the UI with images

The first build is functional, not pretty. That's on purpose. Now you bring the UI up to your standard.

The fastest way to do this is to give Claude a reference image. I dropped in a screenshot from one of my old apps (Minima), pasted it into the chat, and asked:

Use these images as inspiration to improve the UI. On iOS we want native behavior. Use black for the primary color. Add a soft box shadow to the checkbox.

Claude rebuilt the screens in a couple minutes. Watching it happen on the phone in real time, while the file changes.

Two tips that compound here:

Reference specific files with @filename so Claude knows exactly where to make the change.
Watch your context window. Past about 50%, agents get noticeably worse. Run /clear and start a fresh session before adding the next big feature.

Save your progress with git

The agent just generated a working app. Before you ask for the next feature, as Claude to save the progress using git.

Even if you don't fully understand git yet.

What this guide doesn't cover

This is where most AI tutorials would stop. Working app, two devices, looks great. Roll credits.

But shipping to the App Store is its own beast. App Store Connect. Provisioning profiles. Certificates. App review. Privacy manifests. EAS Build. Over-the-air updates. Push notifications. Analytics. Payments. The 30 small things that turn a working app into a real product.

I went through every one of those for Inkigo and the others, and I wrote down the mental model so you don't have to figure it out alone.

BookFrom Idea to App Store with Claude Code

Build and ship real mobile apps with Claude Code. The mental model you need, from idea to deployment. No coding required.

Keep going

You have a real app on your phone. That's already further than 99% of people who watched a "build an app with AI" tutorial this week.