Complete Tutorial: Vibecode Pokémon Go Cat Version

npx create-expo-app@latest cat-go
cd cat-go
npx expo start

Set up this Expo app as a mobile-first collectible camera game called Cat Go.

Use TypeScript.

Create these screens:
1. Home screen
2. Camera screen
3. Collection screen
4. Cat detail screen

Use a clean black UI with mint accent color #00F5C4.
Keep the design minimal, playful, and premium.
Do not add fake features.

npx expo install expo-camera

Add a Camera screen using expo-camera.

Requirements:
- Ask for camera permission.
- Show full-screen camera preview.
- Add a circular capture button at the bottom.
- After taking a photo, show a preview screen.
- Add two buttons: Retake and Catch Cat.
- Store the captured photo URI in local state.
- Do not upload anything yet.

type Cat = {
  id: string;
  userId: string;
  imageUrl: string;
  name: string;
  rarity: "Common" | "Uncommon" | "Rare" | "Epic" | "Legendary";
  level: number;
  stats: {
    stealth: number;
    fluff: number;
    chaos: number;
    speed: number;
    charm: number;
  };
  detectedBreed?: string;
  detectedColor?: string;
  location?: {
    latitude: number;
    longitude: number;
  };
  createdAt: string;
};

Set up Firebase in this Expo app.

Create:
- firebase.ts config file
- anonymous auth helper
- Firestore helper for saving cats
- Firestore helper for reading the current user's cat collection

Use modular Firebase imports.
Do not hardcode secrets directly in components.
Create a .env example file.

Add image upload support for captured cat photos.

After the user taps Catch Cat:
1. Upload the image
2. Return a public image URL
3. Pass that URL to an analyzeCatPhoto function
4. Show loading state while this runs
5. Show an error if upload fails

You are analyzing a user-submitted photo for a cat collecting app.

Return only valid JSON.

Check whether the image contains a real living cat.

Rules:
- A real cat counts.
- A kitten counts.
- A drawing, plush toy, cartoon, statue, logo, or screenshot does not count.
- If unsure, set isCat to false.

Return:
{
  "isCat": boolean,
  "confidence": number,
  "reason": string,
  "visualDescription": string,
  "suggestedName": string,
  "detectedColor": string,
  "possibleBreed": string
}

type CatAnalysis = {
  isCat: boolean;
  confidence: number;
  reason: string;
  visualDescription: string;
  suggestedName: string;
  detectedColor: string;
  possibleBreed: string;
};

Create a backend function called analyzeCatPhoto.

Input:
- imageUrl

Output:
- isCat
- confidence
- reason
- suggestedName
- detectedColor
- possibleBreed

The function should reject:
- no animal
- dogs
- cartoons
- plush toys
- screenshots
- drawings
- cat logos

Return strict JSON only.
Add error handling for invalid AI responses.

function rollRarity() {
  const roll = Math.random();

  if (roll < 0.70) return "Common";
  if (roll < 0.90) return "Uncommon";
  if (roll < 0.975) return "Rare";
  if (roll < 0.995) return "Epic";
  return "Legendary";
}

function generateStats() {
  return {
    stealth: randomStat(),
    fluff: randomStat(),
    chaos: randomStat(),
    speed: randomStat(),
    charm: randomStat(),
  };
}

function randomStat() {
  return Math.floor(Math.random() * 100) + 1;
}

Create a rarity and stats generator for cats.

Rules:
- Common should happen most often.
- Legendary should be very rare.
- Stats should be 1 to 100.
- Stats should feel funny but not childish.
- Use: stealth, fluff, chaos, speed, charm.
- Save rarity and stats with each cat.

If analyzeCatPhoto returns isCat true:
- Generate rarity
- Generate level
- Generate stats
- Save the cat document to Firestore
- Navigate to the Cat Detail screen

If isCat false:
- Show message: "No real cat detected. Try another photo."
- Do not save the image as a cat

Build the Collection screen.

Requirements:
- Fetch cats for the current user from Firestore
- Show them in a 2-column grid
- Each card shows image, name, rarity, and level
- Tapping a card opens Cat Detail screen
- Empty state says: "No cats caught yet. Go find one."
- Add button to open Camera screen

Build the Cat Detail screen.

Make it feel like a collectible creature profile.

Include:
- Large cat image
- Name
- Rarity badge
- Level
- Stat bars for stealth, fluff, chaos, speed, charm
- Possible breed
- Detected color
- Date caught

Use black background, white text, and mint accent #00F5C4.

After a cat is successfully caught, add a reveal screen.

Sequence:
1. Show "Analyzing..."
2. Show "Cat detected"
3. Show the generated cat card
4. Reveal rarity with a short animation
5. Add button: Add to Collection

We are building Cat Go, a mobile app where users photograph real cats they meet outside and collect them as creature cards.

Core loop:
- Open camera
- Snap photo
- AI checks if it is a real cat
- If valid, generate name, rarity, level, and stats
- Save to collection
- Show profile page

Tech:
- Expo React Native
- TypeScript
- Firebase Auth
- Firestore
- Firebase Storage or Cloudinary
- Backend function for AI image analysis

Design:
- Black background
- Mint accent #00F5C4
- Minimal, premium, playful
- No childish clutter

Build the app in small steps.
First create the screen structure and navigation.
Do not implement AI yet.

Now implement the camera flow.

Use expo-camera.

Create:
- Camera permission state
- Full-screen camera preview
- Capture button
- Photo preview screen
- Retake button
- Catch Cat button

Keep code clean and split reusable components.

Now add Firebase.

Create:
- firebase.ts
- auth helper for anonymous sign in
- cats service with saveCat and getCatsForUser
- TypeScript Cat type

Use Firestore modular API.
Use environment variables.
Do not expose secret server keys.

Create analyzeCatPhoto.

It should accept an uploaded image URL and return strict JSON:
isCat, confidence, reason, suggestedName, detectedColor, possibleBreed.

Reject drawings, screenshots, toys, logos, cartoons, dogs, and non-cat images.

For now, mock the AI response behind a function interface so we can later swap in OpenAI vision or Google Cloud Vision.

Connect the full capture flow.

When user taps Catch Cat:
- Upload image
- Analyze image
- If not cat, show rejection message
- If cat, generate rarity, level, and stats
- Save cat to Firestore
- Navigate to Cat Detail screen

Add loading and error states.

Improve the successful catch flow.

Add:
- Analyzing state
- Cat detected state
- Rarity reveal
- Add to Collection button
- Shareable card UI

Do not add new features outside this flow.
Polish the core loop only.

users/{userId}
cats/{catId}

users/{userId}/cats/{catId}

users
  userId
    cats
      catId

{
  "name": "Miso",
  "rarity": "Rare",
  "level": 12,
  "imageUrl": "https://...",
  "stats": {
    "stealth": 88,
    "fluff": 76,
    "chaos": 91,
    "speed": 52,
    "charm": 97
  },
  "detectedColor": "orange tabby",
  "possibleBreed": "domestic shorthair",
  "createdAt": "2026-06-22T12:00:00Z"
}

Does this image have a cat?

Does this image contain a real living cat photographed by the user?

Reject:
- cartoon cats
- plush cats
- screenshots
- toys
- logos
- AI-generated images if obvious
- photos of screens

Return strict JSON.

Respect animals and private property. Only photograph cats safely from a distance.

takePhoto()
uploadPhoto()
analyzeCatPhoto()
generateRarity()
generateStats()
saveCat()
getUserCats()

Build only the core loop first:
Open camera, snap real cat, verify with AI, generate collectible profile, save to collection.
Do not add maps, battles, trading, leaderboards, or social features yet.