Build a Real Mobile App with Claude Code & InstantDB

Expo Go for Live Testing

Download Expo Go (iOS and Android) to test your app in real-time on actual devices. Scan a QR code from VS Code to instantly load your app without installing anything locally.

InstantDB as Your Backend

InstantDB is a free real-time database that works seamlessly with Claude. It handles data storage, real-time sync across devices, and requires no authentication setup for simple apps.

VS Code with Claude Code Extension

Install the Claude Code extension (verified by Anthropic) in VS Code. This gives you an AI assistant that can generate, review, and modify code directly in your editor.

Create Folder and Open in VS Code

Create a new folder on your desktop (e.g., 'do-app'), then open it in VS Code. This becomes your workspace for the entire project.

Run create-instant-app Command

In VS Code terminal, run 'create-instant-app' and select 'mobile with Expo' as your framework and Claude as your AI. This scaffolds the mobile app structure and initializes the project.

Project initialization steps

Create Backend in InstantDB Dashboard

During setup, InstantDB prompts you to create a new application. This creates your backend and database in the cloud. Name it and hit enter—it's free with usage limits.

Start the Development Server

Run 'npm run start' to launch the Expo server. This generates a QR code you can scan with Expo Go on your phone to see live updates as you code.

Cross-Device Synchronization

When you interact with the app on one device (e.g., pick a color on iPhone), the change instantly appears on Android and vice versa. This is InstantDB's real-time functionality at work.

Data Persists Safely

All changes are automatically stored in InstantDB's backend. You don't need to manually save or manage database connections—it's handled transparently.

Build Native UI Skill (Expo Team)

Install the 'build-native-ui' skill to help Claude generate beautiful, native-feeling interfaces. This teaches Claude about Expo's UI components and best practices.

InstantDB Skill for Database Integration

Install the InstantDB skill so Claude understands how to query, mutate, and sync data with your backend. This ensures generated code follows InstantDB patterns.

How to Install Skills

In a new terminal, run the skill installation command (from InstantDB docs or Expo docs), select Claude Code when prompted, and hit enter until complete. Skills appear in your project file tree.

Rule #1: Plan First, Code Second

Never let Claude write code before it knows what to build. Create a detailed plan first—this saves tokens, time, and prevents rework.

Switch to Plan Mode in Claude

In the Claude Code extension, click the plan mode button or press Shift+Tab to toggle into planning mode. This tells Claude to generate a structured plan instead of code.

Write a Specific Prompt

Describe exactly what you want: features, screens, data fields, and constraints. Vague prompts produce vague results. Example: 'Build a shared to-do list with emoji, title, description, and status. No login. Real-time sync with InstantDB.'

Claude Generates a Structured Plan

Claude outputs a plan covering context, architecture, data shape, routes, permissions, and files to create. Review it carefully before proceeding.

Finalize Data Schema Early

Spend time defining the exact shape of your data (fields, types, relationships) before Claude codes. Changes to data structure later require database migrations and redeployment.

Auto-Accept Claude's Commands

When Claude asks for permissions to create files or run commands, say 'yes' to allow it to proceed. Each action is logged so you can review what changed.

Reload App on Device

On iOS, shake your device and press 'reload' in the developer menu. On Android, shake and press 'refresh'. This reloads the app after Claude makes code changes.

Test Features Across Devices

Test your app on both iOS and Android simultaneously using Expo Go. Real-time sync means changes on one device appear instantly on the other.

Use Design Images as Inspiration

Instead of describing UI verbally, take screenshots of designs you like (from Figma, your portfolio, or design systems) and paste them into Claude. Claude uses these as visual references.

Combine Images with Specific Requests

Paste design images and add specific instructions like 'use black for primary color' or 'add box shadow to checkbox.' Claude balances visual inspiration with your requirements.

Real-Time UI Updates

As Claude modifies code, you see changes live on your phone. No need to manually reload—the Expo server hot-reloads the UI.

Example: Minima Task Manager Design

The video uses a free Figma design (Minima Task Manager) as reference. You can access similar designs at codewithbeto.dev/designs to inspire your own UI.

Monitor Claude's Context Usage

Keep track of how much context Claude has used. When it exceeds 50%, consider starting a new Claude session to avoid hitting context limits.

Describe Issues Clearly for Fixes

If the UI breaks or features don't work, describe the exact problem to Claude (e.g., 'button not working on Android' or 'title missing on iOS'). Claude will debug and fix it.

Iterative Refinement Workflow

Build features incrementally: generate code, test on devices, identify issues, ask Claude to fix, reload, and repeat. This is faster than trying to perfect everything upfront.

Real App, Not a Website

This workflow builds actual native iOS/Android apps with Expo, not web apps disguised as mobile. You use real devices, real databases, and real app features like bottom sheets.

No Wasted Tokens on Styling First

Focus Claude on functionality and data structure first. Only refine UI after the app works. This prevents token waste on styling that changes later.

Persistent Data with Real Backend

InstantDB stores data permanently and syncs across devices. You're not building a demo that loses data on refresh.

Skills Enable Best Practices

Claude skills teach Claude about Expo and InstantDB patterns, so generated code follows industry best practices instead of generic patterns.

App Store Deployment Is Complex

Shipping to iOS App Store and Google Play requires certificates, app review, and deployment knowledge. This is beyond the scope of a 20-minute tutorial.

Resource: From Idea to App Store with Claude Code

The instructor wrote a guide covering the full journey from app idea to App Store submission. It covers certificates, app review, and deployment strategies.