MVP Starter — From Idea to App

Give developers a hands-on, AI-powered system that transforms an idea into a working React Native MVP—with authentication, navigation, live data, reusable architecture, and features that can evolve as the product grows.

Describe what you want to build. Get a running app with sign-in, protected screens, a live database, validated forms, and a growing set of features you can keep shaping.

git clone <this-repo> my-app && cd my-app
npm install
npx expo start

The starter runs against a shared demo Firebase project on first launch, so you can sign up and click around before configuring anything.

What you get

Capability	Where it lives
Expo SDK 54 + TypeScript (strict)	app/, tsconfig.json
Email/password auth with persisted sessions	services/firebase.ts, store/authSlice.ts, hooks/useAuth.ts
Protected routes (no flashes, no manual redirects)	app/_layout.tsx using Stack.Protected
File-based navigation (tabs + stacks + dynamic routes)	app/(tabs)/, app/post/[id].tsx, …
Live Firestore data with one hook	services/createCollectionService.ts, hooks/useCollection.ts
Reusable UI kit (Button, Input, FormField, Card, Screen, states)	components/ui/
Design tokens for light and dark mode	constants/theme.ts, hooks/use-theme.ts
Global state (Redux Toolkit)	store/
Form validation (react-hook-form + zod) and friendly errors	lib/validation.ts, lib/errors.ts, components/ErrorBoundary.tsx
AI-assisted feature generation	scripts/mvp/, npm run mvp
Working example features: social feed, map, user search + follows, movies API, task list, AI chat	app/(tabs)/, services/

From idea to features in three commands

# 1. Turn an idea into a plan (needs ANTHROPIC_API_KEY in .env or your shell)
npm run mvp -- plan "an app that helps roommates split chores and expenses"

# 2. Review mvp.plan.json, then scaffold models, services, screens and routes
npm run mvp -- scaffold

# 3. Run it
npx expo start -c

No API key? Generate a feature directly from a field list:

npm run mvp -- feature chores --fields "title:string,assignee:string,dueInDays:number,done:boolean" --icon checkmark.circle.fill

Every generated feature is a real, editable slice of the app: a typed model with validation, a Firestore service, a list + create screen, a registered route, and a short doc with the matching security rules. See docs/GENERATING_FEATURES.md.

Project structure

app/                    File-based routes (Expo Router)
├── _layout.tsx         Providers + protected navigation
├── auth/               login, signup
├── (tabs)/             Main tab bar; generated tab features land here
├── post/[id].tsx       Dynamic routes for details
├── user/[uid].tsx
└── movie/[id].tsx
components/ui/          Reusable UI kit (import from '@/components/ui')
config/env.ts           Every environment variable, in one typed object
constants/theme.ts      Colors, spacing, radius, font sizes
hooks/                  useAuth, useLiveQuery, useTheme, typed Redux hooks
lib/                    validation schemas, error helpers
models/                 Data models (type + zod schema); generated features write here
services/               Firebase + external API access; createCollectionService factory
store/                  Redux Toolkit slices
scripts/mvp/            The generator: planner (Claude) + scaffolder (templates)
docs/                   Setup, architecture, and feature generation guides
firestore.rules         Starter security rules

Documentation

• docs/SETUP.md — install, environment variables, Firebase project, running on a device
• docs/ARCHITECTURE.md — how auth, routing, data, state, forms, and errors fit together, with the patterns to follow when adding features
• docs/GENERATING_FEATURES.md — the npm run mvp workflow, what it generates, and how to extend the templates
• CLAUDE.md — conventions for AI coding assistants working in this repo
• soul.md — why this project exists

Scripts

Command	What it does
npm start / npm run ios / npm run android / npm run web	Start the Expo dev server
npm run typecheck	tsc --noEmit across the project
npm run lint	ESLint via expo lint
npm run mvp -- <command>	Feature generator (plan, scaffold, generate, feature, icons)

Tech stack

Expo 54 · React Native 0.81 · TypeScript · Expo Router · Firebase (Auth, Firestore, Storage) · Redux Toolkit · react-hook-form + zod · react-native-maps · Anthropic SDK (generator only)

---

Built from the talk From Idea to App: Rapid MVP Development in React Native by Aaron Ramírez Lezama.