From Idea to iOS
Build your first iOS app with React, Firebase, Capacitor & Claude Code.
This is a free, step-by-step tutorial that takes you from a blank folder to a real iOS app running in the Simulator. No prior mobile development experience needed.
What You'll Build
GratitudeTree — a daily journal app where every entry is a moment worth keeping. Write a thought or snap a photo. Shake the jar to rediscover a random past memory.
By the end of this tutorial, you'll have a fully functional iOS app with:
- Text and photo journal entries — create, read, edit, delete
- Real-time sync — entries update instantly across devices via Firebase
- Camera integration — take photos or pick from your library using native iOS APIs
- Shake interaction — shake your phone to surface a random past entry with haptic feedback
- Streaks and stats — track your journaling habit with a fire animation
- Authentication — email/password login
- Premium, native-feeling design — polished UI that looks like a designer built it
- Running in the iOS Simulator — your app, looking and feeling like a real iOS app
Want to go further? An optional section covers TestFlight distribution so friends can install it on real iPhones.
Who This Tutorial Is For
You should follow this tutorial if you:
- Have never written code before but want to build something real
- Know basic HTML, CSS, and JavaScript (or are actively learning)
- Have never built an iOS app before
- Want to learn by doing, guided by AI — each step gives you a prompt, Claude Code writes the code, and you learn from what it creates
- Are willing to work through challenges — this tutorial covers the hard parts too
You do not need prior experience with React, Firebase, Capacitor, TypeScript, or Xcode. We teach everything from scratch.
What You'll Need
Required
| Requirement | Why |
|---|---|
| A Mac | Xcode only runs on macOS. This is a hard requirement for iOS development. |
| Claude Code | Your AI coding partner for this entire tutorial. It writes the code; you learn from it. |
Nice to Have (Not Required)
| Tool | Why |
|---|---|
| An iPhone | For testing camera and shake features. The iOS Simulator works for most chapters. |
| Apple Developer Account ($99/year) | Only needed if you want to distribute via TestFlight (Part 6). Not required to complete the core tutorial. |
Everything else (Node.js, Cursor, Xcode Command Line Tools) gets installed in Chapter 1.
How This Tutorial Works
Sequential chapters
This tutorial is designed to be followed in order, from Chapter 1 through the end. Each chapter builds on the previous one.
Prompt-driven development
Every step gives you a prompt to send to Claude Code. Claude Code writes the code, and we explain what it created and why. You learn by reviewing real code that Claude Code generated for your project — not by copying and pasting from a wall of text.
Simple, natural prompts
The prompts in this tutorial are written in plain English — the way you'd naturally describe what you want. No need to know technical jargon. Claude Code figures out the implementation details.
$ claude "What does the onSnapshot function do in Firestore? Explain it like I'm a beginne..."The prompt-driven workflow
Here is how every chapter works:
- You send a prompt — Each step includes a prompt you copy and send to Claude Code
- Claude Code writes the code — It creates or modifies files in your project based on the prompt
- You test it — Run the app and verify it works as expected
- You learn from it — We explain what the code does and why
Terminal commands (like npm install or npm run dev) are still things you run yourself. But the app code? That comes from Claude Code.
Verifying your work
Instead of comparing your code line-by-line against reference snippets, we use functional testing — run the app and check that it works. Since Claude Code generates code, your files may look different from ours, and that's perfectly fine as long as the app behaves correctly.
When in doubt, you can always ask Claude Code to review your work:
$ claude "Review my project and check if everything is working correctly. Flag any errors ..."Don't hesitate to paste error messages directly into Claude Code and ask it to help you debug. That's one of its superpowers — it can read error output and suggest fixes. Throughout this tutorial, if you hit a wall, your first move should always be to share the error with Claude Code.
The Tech Stack
| Layer | Technology | Why |
|---|---|---|
| Frontend | React 19 + TypeScript + Vite | Fast, modern, huge community |
| Styling | Tailwind CSS v4 | Utility-first, great for mobile-first design |
| Icons | Lucide React | Clean, consistent icon set |
| Auth | Firebase Authentication | Handles the hard parts of auth securely |
| Database | Cloud Firestore | Real-time, offline-capable, scales automatically |
| File Storage | Firebase Storage | Upload and serve photos with security rules |
| Mobile Wrapper | Capacitor | Turns your web app into a native iOS app |
| Native Plugins | @capacitor/camera, @capacitor/haptics | Access device camera and haptic engine |
| AI Assistant | Claude Code | Scaffold, debug, iterate, and learn faster |
The Journey
| Part | Chapters | What You'll Build |
|---|---|---|
| Part 1 — Getting Started | 1 | Install tools: Xcode CLI Tools, Node.js, Cursor, Claude Code |
| Part 2 — Scaffolding | 2 | Project scaffolding + Firebase setup |
| Part 3 — The Idea | 3 | Blueprint: scope, MVP planning, implementation plan |
| Part 4 — Web App | 4–9 | Full web app: UI, entries, Firebase, auth, polish, streaks; Ch. 9 is an optional bonus flourish |
| Part 5 — Going Mobile | 10–13 | Capacitor, camera, shake, iOS polish — your app in the Simulator! |
| Part 6 — TestFlight (optional) | 14–16 | Apple Developer, TestFlight, App Store readiness |
| Part 7 — Next Steps | 17–18 | Iteration cycle + App Store submission |
Ready?
Let's build something real.
Follow @parvsondhi for build threads, tips, and updates on this tutorial.