A hands-on tutorial that teaches you the production-grade patterns of building full-stack applications with FastAPI (Python), React (TypeScript), and React Native (Expo). Every file is heavily commented to explain not just what the code does, but why it's done that way.

One API, Multiple Clients — the same backend powers both web and mobile apps.

• Backend: Build a REST API with FastAPI, Pydantic validation, and proper error handling
• Web Frontend: Create a React app with TypeScript, controlled components, and API integration
• Mobile App: Build a React Native app with Expo that consumes the same API
• Full-Stack Patterns: Connect frontend to backend with CORS, environment variables, and type safety
• Production Practices: Error handling, loading states, separation of concerns, and clean architecture
• CRUD Operations: Implement Create, Read, Update, Delete — the foundation of most apps

Before you start, make sure you have these installed:

git clone https://github.com/YOUR_USERNAME/learn-fastapi-react.git
cd learn-fastapi-react

cd backend
uv sync                      # Install Python dependencies
uv run fastapi dev main.py   # Start FastAPI dev server

The API will be running at http://localhost:8000
Interactive docs at http://localhost:8000/docs

cd frontend
cp .env.example .env         # Create environment file
npm install                  # Install Node dependencies
npm run dev                  # Start Vite dev server

The web app will be running at http://localhost:5173

Mobile devices can't access localhost — you need a tunnel or local IP.

Option A: Using ngrok (works anywhere)

# Terminal 1: Start ngrok tunnel
ngrok http 8000
# Copy the https URL (e.g., https://abc123.ngrok-free.app)

# Terminal 2: Start mobile app
cd mobile
cp .env.example .env
# Edit .env and set EXPO_PUBLIC_API_BASE_URL to your ngrok URL
npm install
npx expo start

Option B: Using local IP (same WiFi only)

cd mobile
cp .env.example .env
# Edit .env and set EXPO_PUBLIC_API_BASE_URL=http://YOUR_LOCAL_IP:8000
npm install
npx expo start

Scan the QR code with Expo Go app on your phone.

1. Open http://localhost:5173 in your browser (web)
2. Scan QR code with Expo Go (mobile)
3. Create a user — it appears on BOTH web and mobile!
4. Check http://localhost:8000/docs to see the API documentation

learn-fastapi-react/
├── backend/                    # FastAPI backend
│   ├── main.py                 # App entry point, CORS config
│   ├── models.py               # Pydantic models (data shapes)
│   ├── database.py             # Data storage layer
│   └── routers/
│       └── users.py            # CRUD endpoints
│
├── frontend/                   # React web frontend
│   ├── src/
│   │   ├── main.tsx            # React entry point
│   │   ├── App.tsx             # Main component (state + logic)
│   │   ├── types.ts            # TypeScript interfaces
│   │   ├── api/
│   │   │   └── users.ts        # API client functions
│   │   └── components/
│   │       ├── UserForm.tsx    # Form component
│   │       └── UserList.tsx    # List component
│   ├── .env.example            # Environment template
│   └── .env                    # Your local config (git-ignored)
│
├── mobile/                     # React Native mobile app (Expo)
│   ├── app/
│   │   ├── _layout.tsx         # Root layout (navigation)
│   │   └── index.tsx           # Home screen (state + logic)
│   ├── src/
│   │   ├── types.ts            # TypeScript interfaces (same as web!)
│   │   ├── api/
│   │   │   └── users.ts        # API client (same pattern as web!)
│   │   └── components/
│   │       ├── UserForm.tsx    # Native form component
│   │       └── UserList.tsx    # Native list component
│   ├── .env.example            # Environment template
│   └── .env                    # Your local config (git-ignored)
│
└── README.md                   # You are here!

This isn't a "copy-paste and hope it works" tutorial. It's designed for you to read and understand the code.

1. Every file is heavily commented — explaining patterns, decisions, and connections between frontend and backend
2. Follow the reading order below — it's structured to build understanding layer by layer
3. Open files side by side — when a frontend file references a backend endpoint, open both and trace the flow
4. Experiment — break things, add console.logs, change values, see what happens

• "Why is this code here and not somewhere else?"
• "What would break if I removed this?"
• "How does this frontend code connect to the backend?"

1. backend/models.py — Data shapes (Pydantic)
2. backend/database.py — Storage layer
3. backend/routers/users.py — CRUD endpoints
4. backend/main.py — App setup & CORS

1. frontend/src/types.ts — TypeScript interfaces (mirrors backend models)
2. frontend/src/api/users.ts — API client (calls backend)
3. frontend/src/main.tsx — Entry point
4. frontend/src/App.tsx — Main component (state + logic)
5. frontend/src/components/UserForm.tsx — Form component
6. frontend/src/components/UserList.tsx — List component

1. mobile/src/types.ts — Same interfaces as web!
2. mobile/src/api/users.ts — Same API client pattern
3. mobile/app/_layout.tsx — Expo Router layout (like React Router)
4. mobile/app/index.tsx — Main screen (compare to frontend/src/App.tsx)
5. mobile/src/components/UserForm.tsx — Native form (TextInput vs input)
6. mobile/src/components/UserList.tsx — Native list (View + map vs ul/li)

This tutorial goes beyond "it works" to "it works correctly":

Once you understand this codebase, here's where to go next:

MIT License — do whatever you want with this code. Learn from it, modify it, use it in your projects. No attribution required (but appreciated!).

Happy coding! If this helped you, consider starring the repo ⭐