← All phases
2

Lesson 2 — Scaffolding

Maps to: SYSTEM.md Phase 2 (expo-scaffolding) Goal: leave this lesson with an empty app running live in Expo Go on your own phone.

What "scaffolding" means

Scaffolding is generating the skeleton of your project — folders, config files, a blank starting screen — before any real feature exists. This system's expo-scaffolding skill (see skills/local/expo-scaffolding/SKILL.md) always defaults to Expo Router + TypeScript — file-based navigation where each screen is a file under app/. Don't override this default; it's what every later lesson assumes.

Ask Claude Code to scaffold the Habit Tracker

Scaffold a new Expo app called HabitTracker for this concept: an app where I can add habits, tap to mark them done each day, and see a streak count per habit. No accounts.

Claude Code runs npx create-expo-app@latest HabitTracker under the hood (via the /init command or the expo-scaffolding skill directly) and gives you:

HabitTracker/
├── app/
│   ├── _layout.tsx      ← the navigation shell — wraps every screen
│   └── index.tsx        ← your home screen (currently a starter template)
├── components/           ← reusable UI pieces go here later
├── constants/             ← colors, shared config
├── hooks/                  ← reusable logic later, if needed
├── app.json                ← app config — name, icon, permissions (Lesson 3, 6, 7 all touch this)
├── package.json
└── tsconfig.json

You don't need to memorize this — just recognize it. app/index.tsx is the file you'll actually edit in Lesson 4.

Add Zustand now (you'll need it in Lesson 4)

This system's state-management convention is Zustand — small, minimal boilerplate. Install it now so it's ready:

npx expo install zustand

See it running — no Mac, no Simulator

  1. In your project folder, run npx expo start.
  2. A QR code appears in your terminal.
  3. Open Expo Go on your phone (installed back in 01-environment-setup.md) and scan it.
  4. The starter app appears live on your phone within a few seconds.

This is the entire "build and run" loop for this whole course — edit code, save, see it update on your phone almost instantly. No Xcode, no Simulator, no cloud Mac rental, ever.

One gotcha to know about now

Don't hand-edit app.json's plugins array yet — leave it empty/minimal. The moment you add a native module (Lesson 6's monetization SDKs are the first time this happens), Expo Go can no longer load your app and you switch to a "dev build" instead. Keeping plugins empty for as long as possible keeps you on the fast Expo Go loop the longest.

Deliverable

An empty app that opens and runs in Expo Go on your own phone — the exact deliverable 04-workflow-course-overview.md Module 2 asks for.

Apply to your own idea

Repeat the exact prompt above with your own app's name and one-paragraph concept from Lesson 1 substituted in. Confirm it boots in Expo Go before moving on — don't debug a scaffolding problem and a feature problem at the same time later.

Prompts

Maps to: courses/react-native-course/lessons/02-scaffolding.md (SYSTEM.md Phase 2) Run this: once concept.md exists for the student.

Before you scaffold: connect GitHub to ChatGPT or Claude

This is the point where your app becomes a real project with real code — you want it saved somewhere durable, not just stuck in a phone chat.

  1. Create a GitHub repository for {{APP_NAME}} first — this is where the code lives and updates as you build.
  2. In ChatGPT or the Claude app, connect your GitHub account (Settings → Connectors/Apps, depending on which app and version you're using — this feature's exact location varies by plan) and point it at the new repo.
  3. Confirm with your instructor that the repo is connected before moving on — from here, every prompt below gets scaffolded and pushed straight into that repo, so your instructor can pick up the code later too.

Prompt 1 — Scaffold the project

Scaffold a new Expo app called {{APP_NAME}} for this concept: {{ONE-PARAGRAPH CONCEPT FROM concept.md}}

Claude Code runs npx create-expo-app@latest {{APP_NAME}} under the hood — Expo Router + TypeScript by default, don't let it override that.

Prompt 2 — Add Zustand (state management)

npx expo install zustand

Prompt 3 — See it running

Ask the student to open Expo Go on their own phone and scan the QR code Claude Code shows after npx expo start. No Mac, no Simulator, no cloud Mac rental — just their phone.

Optional shortcut

If you're running Claude Code from inside the React Native app builder system repo, /init does the same scaffolding step.

Full lesson

courses/react-native-course/lessons/02-scaffolding.md