Build a cross-platform mobile app with AI, TanStack Start, oRPC, Supabase, and React Native — deployed to Cloudflare
A live cross-platform mobile app (iOS + Android + Web) with an AI-assisted development workflow, server-driven API layer, Supabase backend, and Cloudflare deployment — shipped in about 4–6 weeks.
One-time payment — yours to keep forever
Included with every copy
- Your own copy — keep it forever
- Gets better over time — free updates included
- Run it on web and mobile
- Invite a partner to go through it with you — you share the same progress
- The playbook's community — ask questions, get additions, and see how other buyers improve it, right on the step
Who it's for
Full-stack TypeScript developers who have shipped at least one React app and want to build a production mobile app without learning Swift, Kotlin, or a second backend language.
Who it's NOT for
Complete beginners to React, TypeScript, or the terminal. Also not for you if you need native Swift/Kotlin code, App Store/Play Store submission guidance, or deep CSS/styling tutorials.
About this playbook
If you're a TypeScript developer who knows React and wants to ship a real mobile app — not a tutorial to-do list — this is the stack that gets you there fastest. You'll build with TanStack Start on the server, oRPC for the type-safe API layer, Supabase for auth and database, Expo React Native for the mobile client, and deploy everything to Cloudflare Workers. Every phase uses Claude Code to accelerate — not replace — the work, from scaffolding to debugging to deployment. I've shipped five apps on this stack and the mistakes I made (misconfigured API base URL that cost a weekend, RLS policies I forgot applied differently server-side) are the warnings in here. Advanced-level. You need TypeScript and React fluency, but nothing mobile-specific coming in.
What you'll do, step by step
5 phases · 16 steps
Free preview — these steps are open to read in full before you buy.
Get the skeleton right from day one. A pnpm monorepo with clean package boundaries saves you the rewrite I did halfway through my first project — the web app, mobile app, and shared domain code each live in their own workspace package, and the type-safe API contract lives alongside domain types in the shared package, imported by both apps.
- 1Initialize the monorepo with pnpm workspacesFree preview15 min
Create a pnpm workspace with three packages from the start:
apps/web(TanStack Start),apps/mobile(Expo React Native), andpackages/shared(oRPC contract and domain types). Runpnpm initat the root, create apnpm-workspace.yamlthat declares all three, and set"type": "module"in the root package.json.Use Claude Code to scaffold this — give it the structure and let it write the
pnpm-workspace.yaml, the roottsconfig.jsonwith project references, and each package'spackage.json. It takes me longer to type this paragraph than for Claude to produce all three configs.You're done when
A pnpm workspace root with
pnpm-workspace.yamlpointing atapps/*andpackages/*, plus stubs for each package.Tip
Set
"private": trueon the root package.json and use--filterfor all workspace commands.pnpm --filter @app/web devbeats cd-ing into directories.Watch out
Skip npm workspaces — pnpm's strict dependency isolation prevents the 'it works on my machine but not in CI' class of bugs. I learned this after a weekend debugging a missing peer dependency that npm had silently hoisted.
- 2Scaffold the TanStack Start web app with Claude CodeFree preview30 min
Run
pnpm create @tanstack/start@latest apps/weband pick the React + TypeScript template. Then ask Claude Code to add the Cloudflare adapter — it'll install the adapter package and update theapp.config.tsto use the cloudflare adapter depending on your deployment target.Claude Code is your scaffolding partner throughout this playbook. After scaffolding, run
pnpm --filter @app/web devand confirm the starter page renders atlocalhost:3000before moving on.You're done when
A working TanStack Start app running at localhost:3000 with the Cloudflare adapter configured.
Tip
I scaffold every new project through Claude Code now — it knows the current API surface, so it writes the adapter config and wrangler.toml without me cross-referencing two docs pages.
Watch out
Pin
@tanstack/react-startand the adapter to exact versions in package.json. The framework is RC and semver is stable, but CI will drift if you use^ranges.
Details
What you need first
A laptop with Node 20+, pnpm installed, a Cloudflare account (free tier works), a Supabase account (free tier works), and $20/month for Claude Pro (Claude Code access). Xcode or Android Studio if you want to run the mobile app on a simulator.
Tags
What people who used it say
Only buyers who got through at least half the steps can leave a review.
No reviews yet. The first ones appear once buyers get through at least half the steps.
Common questions
About the creator
8 years of full-stack development, led a Next.js-to-TanStack-Start migration at a SaaS startup, maintains open-source React tooling
Creating since 2026
Full-stack TypeScript developer who has shipped 5+ production apps with TanStack Start since its public beta. I write the guides I wish I'd had when I was learning full-stack React — no fluff, just what actually works in production.