What You'll Build
GratitudeTree
A daily journal app where every entry is a moment worth keeping. Write a thought, snap a photo, shake to rediscover a memory — built end-to-end with Claude Code.
Each journal entry grows a new branch on an animated SVG tree — rendered in real time as your memories accumulate.
Write a thought or snap a photo directly from the app using the native iOS camera.
Shake your phone and a random past memory surfaces — powered by the device accelerometer.
A fire animation rewards daily journaling streaks, encouraging a habit that sticks.
Entries sync instantly across devices via Firestore — no refresh needed.
Sign up, log in, and persist sessions — a complete Firebase Authentication integration.
Who This Tutorial Is For
Anyone who has an app idea and wants to see it in the App Store.
You don't need to know React, Firebase, or mobile development. This tutorial teaches you everything from scratch — using Claude Code to accelerate every step:
- Writes and edits code directly in your project files
- Helps you debug errors without copying and pasting into a chat window
- Understands the full context of your codebase across every session
- Runs multiple tasks in parallel so you spend less time waiting
- Acts as a senior developer pair-programming alongside you
This is AI integrated into your actual development workflow — not bolted on as a chat window.
You don't need prior mobile or React experience. If you have a Mac and the drive to build something, you have everything you need to start.
What You'll Learn
18 chapters covering the complete journey — no steps skipped, no hand-waving.
Start with an Idea
Scope an MVP, sketch wireframes, and design your data model before writing a single line of code.
Build with React
Create a beautiful, mobile-first web app using React 19, TypeScript, Tailwind CSS v4, and Vite.
Power it with Firebase
Add real authentication, a Firestore database, and cloud storage — a real backend, not mock data.
Go Native with Capacitor
Wrap your web app in a native iOS shell. Use the camera, haptic feedback, and shake detection.
Accelerate with Claude Code
Use AI-assisted development at every step — scaffolding, debugging, iterating, and reviewing code.
Ship to TestFlight
Navigate certificates, provisioning profiles, and App Store Connect. Get your app on real iPhones.
The Journey
6 parts, 18 chapters, one complete iOS app.
The Idea
Chapter 1Foundation
Chapters 2–3Building the Web App
Chapters 4–9Going Mobile
Chapters 10–13TestFlight
Chapters 14–16Next Steps
Chapters 17–18The Stack
Modern, well-documented technologies with large communities. When you get stuck, answers exist.
Before You Start
You Need
- A Mac (required for iOS development)
- A free GitHub account
- Apple Developer account ($99/year — sign up early)
You Don't Need
- Prior React experience (we'll teach you)
- Mobile development experience
- Firebase knowledge
- An iPhone (Simulator works for most chapters)
Ready to build your first iOS app?
Start with Chapter 1 and work your way to TestFlight. Every step is explained. Every code block is tested.
Start the Tutorial