Video summary

How I Vibe Coded a Recipe App using Claude Code (Full Build + Marketing)

Main summary

Key takeaways

Technology

Summary of the Video (Technical Concepts + Build/Marketing Tutorial)

1) App Idea + Core AI Workflows

The app (named ResuMe) is described as a recipe organizer that turns messy recipe sources into structured “recipe cards.”

Universal Import

  • Paste a URL (including YouTube links) → AI extracts ingredients and instructions into a clean, structured format.
  • Scan a physical recipe photo → AI uses OCR/vision extraction to convert the image into the same structured recipe UI.

Augmentations

  • Calorie estimation using AI (compared to apps like Calorie AI).
  • A “Make it healthier” button uses AI to substitute ingredients, for example:
    • heavy cream → Greek yogurt
    • spaghetti → whole grain

User Experience Focus (“Stickiness”)

The product becomes “sticky” by encouraging users to maintain collections of many recipes, increasing switching costs.

2) Monetization / Market Analysis (Recurring Revenue + Churn + Valuation)

The video references a successful comparable app making ~$800k/month with strong “sticky” retention.

Why subscriptions help

  • Recurring subscriptions reduce churn by making it harder for users to lose value (e.g., losing access to their recipe library after cancellation).

Valuation framing

  • Apps can be sold for about 2–4× annual profit, citing sources such as Acquire, Flippa, and Trust MRR.

Positioning advice

  • Don’t only clone—niche down.
    • Example given: Cookpad, tailored to Japan.

3) Tooling Stack Used for the “Vibe Coding” Build

Tooling

  • Cloud Code: generates backend logic and connects features/APIs.
  • Cloud Design (cloud.ai / “design”): produces high-fidelity UI more easily than building everything in Cloud Code.

Mobile framework

  • React Native
  • Expo Go for preview/testing on a real phone
  • TypeScript

Data + architecture

  • Local device storage for saved data (early stage / preview approach)
  • A small Node.js / Express backend to keep API keys off the phone

AI model selection strategy

  • Use a smarter model for planning (example mentioned: Opus 4.7).
  • Switch to a faster/cheaper model for execution (example mentioned: Sonnet 4.6) to conserve tokens.

4) Step-by-Step Build Workflow

  1. Download/install the Cloud Code desktop app.
  2. Create/select a project folder.
  3. Prompt Claude using a real app store page URL to generate feature ideas and page structure.
  4. Send UI/page prompts to Cloud Design to generate a polished high-fidelity UI:
    • Uses design references (example mentioned: a Pinterest screenshot)
    • Uses “theme tweaks” like global color palettes
  5. Export/hand off design assets back to Cloud Code (download zip / unzip into the project folder).
  6. In Cloud Code, instruct it to:
    • Build the app from design files using Expo React Native
    • Wire AI features via OpenAI API through a Node.js Express backend
    • Run on the local machine for preview
  7. Iterate/test inside the preview UI:
    • Cook mode interaction
    • Edit recipe UI (not fully saving changes at first in the demo)
    • Shopping list integration (works)
  8. Use in-editor “annotation”-style edits:
    • Click an element → change properties (e.g., progress bar color to green)

5) API Keys + OpenAI Integration Details

Why an API key is required

Image/link extraction is performed by sending data to OpenAI.

Cost discussion

  • Uses a model described as GPT-5.4 Mini and estimates extraction costs per scan.

Security approach

  • Store the key in a .env file rather than pasting into chat.
  • Backend holds keys to prevent users from extracting/draining them.

Testing

  • On-device testing via Expo Go.
  • Demonstrations include:
    • Photo scanning → handwritten recipe becomes a structured recipe card; save to library
    • YouTube link extraction → imports recipe content and image from a referenced website in the description
    • “Make it healthier” works after API connection

6) Feature Expansion Plan (Database, Payments, Publishing Prerequisites)

  • Database: Supabase (storing recipes/settings)
  • Subscriptions/Payments: RevenueCat (Apple-approved; manages subscriptions)
  • Apple developer account: ~$99/year to publish on the App Store

App Store rejection checklist (mentioned)

  • “Vibe coded” apps may be rejected due to missing reliability/security layers.
  • A full checklist is mentioned (18 items) to cross-check prior to submission.

7) Marketing Tutorial (How to Get Paying Users)

The video emphasizes that marketing is often more important than building.

Competitive research

  • Check TikTok presence for similar apps.
  • Example behavior: competitors posting UGC “hack” videos.

TikTok content strategy options

  1. Build your own TikTok account and post UGC videos yourself (slow but organic)

  2. Pay UGC creators to produce videos (one-time production fee + ongoing traffic)

  3. AI-generated UGC

    • Use AI avatar/persona tools (examples mentioned: ArKads, Hixfil)
    • Create multiple AI accounts/personas, post at high volume, then scale with ads when content goes viral

Core principle

Generate many videos → identify what works → scale spend.

Main Speakers / Sources

  • Speaker/creator: The video host (unnamed in subtitles), author of the “Claude Code full build + marketing” walkthrough.
  • Named tools/apps: Claude (Claude Code), Cloud Design (cloud.ai), OpenAI API, Expo Go, Supabase, RevenueCat.
  • Named market comparables: Cookpad, Calorie AI.
  • External platforms referenced:
    • valuation: acquire.com, Flippa, Trust MRR
    • marketing: Pinterest, TikTok
    • payments/publishing: Apple developer account

Original video