Cookie

From inspiration to creation: Turn any cooking video into your next meal with AI-powered grocery lists, kitchen checks, and step-by-step guidance.

Comment

Inspiration 🌟

The inspiration came from observing a common struggle: people get excited watching cooking videos online, but the journey from "I want to make that!" to actually cooking it feels overwhelming. The gap between inspiration and action is filled with friction - writing down ingredients, checking what you have, making grocery lists, and following along while cooking.

We asked ourselves: What if we could eliminate all that friction? What if you could simply paste a YouTube link and have everything ready to go - from your personalized grocery list to step-by-step cooking guidance?

What it does 🍳

Cookie is your personal cooking companion that transforms recipe inspiration into reality:

  • 🎥 Video to Recipe: Paste any YouTube cooking video URL, and our AI extracts the complete recipe with ingredients and instructions
  • ✅ Smart Kitchen Check: Tell us what's in your fridge, and we'll show you what you already have vs. what you need to buy
  • 🛒 Instant Grocery Lists: Generate shopping lists with nearby store locations and directions
  • 👨‍🍳 Guided Cook Mode: Step-by-step cooking interface with timers and ingredient tracking
  • 💬 Sage AI Assistant: Chat with our AI cooking expert for tips, substitutions, and techniques
  • 📚 Recipe Discovery: Browse community recipes and find inspiration from curated cooking channels

How we built it 🛠️

Frontend Stack:

  • React + TypeScript for type-safe, maintainable code
  • Vite for lightning-fast development
  • Tailwind CSS for beautiful, responsive UI
  • Custom component library built on shadcn/ui

Backend & Services:

  • Node.js/Express API server
  • Appwrite for authentication and database
  • Gemini for recipe extraction and AI chat
  • YouTube Data API for video fetching and metadata
  • Browser Geolocation API for store finding

Architecture Highlights:

  • RESTful API design with proper error handling
  • State management using React hooks
  • Persistent chat history with localStorage
  • Real-time recipe parsing from video transcripts
  • Responsive mobile-first design

Challenges we ran against 🚧

  1. Recipe Extraction Accuracy: YouTube videos don't have structured data. We had to build a robust system that uses video transcripts, descriptions, and AI to extract ingredients with proper quantities and cooking steps. Getting this reliable across different video formats and accents was challenging.

  2. State Persistence: Users might browse recipes, go shopping, and come back later. We implemented smart caching with localStorage to preserve cooking sessions, grocery lists, and even AI chat history - all while keeping it user-specific and privacy-conscious.

  3. Mobile UX for Cooking: People cook in their kitchens, often with messy hands. We designed large touch targets, clear visual hierarchy, and a "cook mode" that works hands-free - but making it intuitive required multiple iterations.

  4. Real-time Ingredient Tracking: Synchronizing ingredient checks across the kitchen check, grocery list, and cook mode screens while maintaining data consistency was complex. We solved it with a centralized state management pattern.

  5. API Rate Limits: Balancing YouTube API quotas, AI model costs, and user experience meant implementing smart caching, request batching, and fallback mechanisms.

What we learned 🎓

  • AI Integration: How to effectively prompt LLMs for structured data extraction from unstructured content
  • User Psychology: The importance of reducing friction at every step of the user journey
  • Responsive Design: Building truly mobile-first experiences that work in real kitchen environments
  • API Architecture: Designing clean, scalable backend services that handle errors gracefully
  • Accessibility: Making cooking apps usable for everyone, regardless of technical ability

What's next for Cookie 🚀

  • Recipe Scaling: Automatically adjust ingredient quantities for different serving sizes
  • Meal Planning: Weekly meal planning with combined grocery lists
  • Voice Control: Hands-free navigation during cooking
  • Recipe Sharing: Social features to share your creations with friends
  • Nutrition Info: Automatic calorie and macro calculation
  • Multi-language Support: Make cooking accessible worldwide
  • Smart Home Integration: Connect with smart appliances and timers

Cookie isn't just an app - it's a bridge between inspiration and creation, making home cooking accessible, enjoyable, and achievable for everyone. 🍪

Share this project:

Updates