CookIt

From Saved to Savored

Comment

CookIt - From Saved to Savored 🍳

Inspiration

The inspiration for CookIt came from a real problem experienced by millions of home cooks: the gap between recipe inspiration and actual cooking. We've all been there - saving countless TikTok videos, bookmarking Instagram posts, and screenshotting recipes, only to never actually cook them.

When we saw Eitan Bernath's brief for RevenueCat Shipyard 2026, his vision resonated immediately: "If I can tell some app all the cookbooks I have in my collection... I have chicken, broccoli... are there recipes in my cookbooks that have that?"

This wasn't just another recipe app idea - it was solving three critical pain points:

  • 📚 Digital cookbook management (a feature NO competitor has)
  • 🥘 Ingredient-based recipe discovery from your own collection
  • 📱 Social media recipe extraction from creators like Eitan

The challenge was clear: build an app that bridges the inspiration-to-execution gap for Eitan's 12+ million followers and home cooks everywhere.

What I Learned

Building CookIt taught me invaluable lessons about AI integration, mobile development, and user experience design:

Technical Deep Dives

  • OpenAI API mastery: Implemented 4 different AI parsing methods (URL, video, text, image)
  • React Native optimization: Built responsive components that work seamlessly across iOS/Android
  • State management: Created efficient Zustand stores for complex cookbook/recipe relationships
  • RevenueCat integration: Implemented subscription tiers with precise entitlement management

AI Challenges & Solutions

The most fascinating learning was prompt engineering for recipe extraction. Getting consistent JSON output from chaotic social media content required:

// Example: Handling YouTube transcript + metadata hybrid approach
const videoPrompt = `Extract recipe information from this ${platform} video using ALL available data sources.
${transcriptContent}
${pageMetadata}

Based on what was SPOKEN in the video transcript and page information:
1. Extract exact recipe title
2. List ALL ingredients with quantities
3. Create step-by-step instructions
4. Estimate servings and cook times`;

UX Insights

The "What Can I Cook?" feature required sophisticated fuzzy matching algorithms: $$\text{Match Score} = \frac{\text{Available Ingredients}}{\text{Total Required}} \times 100$$

Where perfect matches (100%) show recipes you can cook immediately, while partial matches suggest missing ingredients.

How I Built It

🏗️ Architecture Overview

Frontend: React Native + Expo for cross-platform development AI Engine: OpenAI GPT-4-turbo for recipe intelligence
Backend: Firebase for real-time data + authentication Monetization: RevenueCat for subscription management Storage: AsyncStorage for offline capabilities

🧠 AI Implementation Details

The AI system handles 4 distinct input types:

  1. Website/URL Import 🌐

    // Fetch webpage content, strip HTML, extract recipe
const pageContent = await this.fetchWebpageContent(url);
const recipe = await this.makeOpenAIRequest(pageContent);

  2. Video Import 📹 (TikTok, YouTube, Instagram)

    // Hybrid approach: transcript + metadata
const transcript = await this.getYouTubeTranscript(url);
const pageContent = await this.fetchWebpageContent(url);
const combinedContent = `${transcript}\n${pageContent}`;

  3. Image Recognition 📸 (GPT-4 Vision)

    // Base64 encode image, use Vision API
const base64Image = await FileSystem.readAsStringAsync(imageUri);
const response = await openai.vision.analyze(base64Image);

  4. Natural Language Description ✍️

    // Free-form text to structured recipe
const recipe = await this.parseRecipeFromDescription(description);

🎯 Unique Features Implementation

Cookbook Library Management ⭐

interface Cookbook {
  id: string;
  title: string;
  author: string;
  coverImageUri?: string;
  recipeCount: number;
  notes?: string;
  createdAt: Date;
}

Intelligent Ingredient Matching

const fuzzyMatch = (available: string[], required: string[]) => {
  return required.filter(ingredient => 
    available.some(avail => 
      levenshtein(ingredient.toLowerCase(), avail.toLowerCase()) <= 2
    )
  );
};

🏪 Monetization Strategy

// Free Tier: 5 recipes, 3 cookbooks
// Premium: Unlimited recipes, unlimited cookbooks, photo import
const FREE_LIMITS = {
  recipes: 5,
  cookbooks: 3,
  photoImport: false
};

Challenges I Faced

1. AI Consistency Challenge 🤖

Problem: OpenAI responses varied in format, breaking JSON parsing Solution: Implemented robust prompt engineering + multi-step validation

// Remove markdown, validate JSON, add fallbacks
responseText = responseText.replace(/```json\n?/g, '').replace(/```\n?/g, '');
const parsedResponse = JSON.parse(responseText);

2. Cross-Platform Responsive Design 📱

Problem: Layouts breaking on different screen sizes Solution: Built custom responsive utility functions

export const getResponsivePadding = (width: number) => {
  if (width < 768) return 16;
  if (width < 1024) return 24;
  return 32;
};

3. Video Transcript Extraction 📺

Problem: YouTube transcripts not always available Solution: Hybrid approach combining multiple data sources

// Graceful fallback: transcript + page metadata + description
if (!transcript) {
  recipeContent += `\n--- VIDEO PAGE INFO ---\n${pageContent}`;
}

4. State Management Complexity 🔄

Problem: Complex relationships between recipes, cookbooks, and users Solution: Zustand stores with computed values and persistence

interface RecipeStore {
  recipes: Recipe[];
  addRecipe: (recipe: Recipe) => void;
  linkToCookbook: (recipeId: string, cookbookId: string) => void;
  // ... 15+ methods for complete recipe lifecycle
}

Technical Achievements

  • ✅ Zero compilation errors - Production ready
  • ✅ 4 AI input methods - Most comprehensive recipe import system
  • ✅ Fuzzy ingredient matching - Advanced algorithm for "What Can I Cook?"
  • ✅ Voice cooking mode - Hands-free cooking experience
  • ✅ RevenueCat integration - Complete subscription system
  • ✅ Offline capabilities - AsyncStorage for core functionality
  • ✅ Cross-platform - Single codebase for iOS/Android

Built With

Core Technologies

  • React Native 0.73+ - Cross-platform mobile framework
  • Expo SDK 50+ - Development platform and tooling
  • TypeScript - Type-safe development
  • Zustand - Lightweight state management

AI & APIs

  • OpenAI GPT-4-turbo - Recipe intelligence and extraction
  • GPT-4 Vision - Image-to-recipe conversion
  • YouTube Transcript API - Video content extraction

Backend & Services

  • Firebase - Authentication, real-time database, storage
  • RevenueCat - Subscription management and analytics
  • AsyncStorage - Local data persistence

UI/UX Libraries

  • React Native Safe Area Context - Screen optimization
  • Expo Image Picker - Photo/camera integration
  • React Native Gesture Handler - Touch interactions
  • React Native Reanimated - Smooth animations

Development Tools

  • Expo CLI - Development workflow
  • Metro Bundler - JavaScript bundling
  • Flipper - Debugging and inspection
  • EAS Build - Cloud building service

Try It Out

📱 Mobile App - React Native app with full feature set
🧑‍💻 Source Code - Complete TypeScript implementation

Demo Highlights:

  • 📚 Cookbook Library Management - Unique feature no competitor has
  • 🥘 "What Can I Cook?" - Ingredient matching with your cookbooks
  • 📱 Recipe Import - From TikTok, YouTube, websites, and photos

Built for RevenueCat Shipyard 2026
Target Creator: Eitan Bernath (12M+ followers)
Solving real problems for food creators and home cooks worldwide 🍳

Built With

  • developmenttools
  • firebase
  • openai
  • reactnative
  • revenuecat
Share this project:

Updates