React Native

Build one 'habit tracker' app across 5 real stages: a list screen (View/Text) → navigation → camera check-in (native features) → global state → a real-device build/deploy. Learn to read and review AI-written mobile app code.

Stages

1. Build a habit tracker · Step 1 list screen

   ~80 minSubscription needed

   Render a habit list screen with View/Text/StyleSheet instead of the web's div/CSS. This project builds one real app across 5 lessons — start with real differences like Flexbox defaults not matching the web.

2. Build a habit tracker · Step 2 add a habit

   ~100 minSubscription needed

   Connect a new add-habit screen to the Step 1 list screen with a Stack Navigator. Trace parameter passing between screens and back-stack behavior through execution flow.

3. Build a habit tracker · Step 3 camera check-in

   ~110 minSubscription needed

   Add photo check-in verification with expo-camera. Diagnose real-world error cases like denied permissions or unsupported devices.

4. Build a habit tracker · Step 4 global state

   ~100 minSubscription needed

   Merge habit/check-in data that each screen held separately into one Zustand store. Learn to review an AI-proposed store refactor.

5. Build a habit tracker · Step 5 deployment

   ~120 minSubscription needed

   Read eas.json config and build profiles, and turn the habit tracker built so far into a build you can install on a real device — the wrap-up lesson for this 5-step project.