CookFlow

• 

  Import Recipe via Manual Input and Photos

• 

  Cookbook Creation

• 

  Import Recipe via URLs

• 

  Meal planner and AI meal planner

• 

  Recipe Details

• 

  Recipes and suggestions

• 

  Grocery List

Inspiration

Cooking is one of the most creative acts we perform daily, yet the digital tools we use to manage it often feel utilitarian and cluttered. We were inspired by the "Liquid Glass" aesthetic—a design language that prioritizes depth, translucency, and focus. We wanted to build an app that didn't just store recipes, but felt as premium and inspiring as a high-end kitchen.

The struggle was real: recipes are scattered across TikTok, YouTube, and physical cookbooks. We set out to create a central "Flow" where these sources could converge into a beautiful, unified experience.

What it does

CookFlow is a premium recipe management and social platform. It allows users to:

• Import Anywhere: Scrape recipes from URLs (YouTube, Instagram, TikTok) or use OCR to scan physical cookbook pages.
• Liquid Glass UI: Experience a modern, frosted-glass interface that reduces cognitive load and keeps the focus on the food.
• Community Feed: Share recipes with a global "Chef" community, featuring a responsive, inline social experience.
• Smart Organization: Auto-generate grocery lists from selected recipes and plan meals for the week.
• Personalized Identity: Choose your "Chef Persona" with custom emoji avatars and glass-styled profiles.

##How we built it We built CookFlow using a robust, modern mobile stack:

• Frontend: React Native with Expo, leveraging expo-blur and expo-linear-gradient to achieve the signature Liquid Glass effect.
• Backend: Firebase (Firestore and Auth) provides real-time data synchronization and secure user management.
• Monetization: Integrated RevenueCat for seamless subscription management and feature gating.
• State Management: Utilized React Context API for a lightweight yet powerful global state handling recipes and auth.
• Transitions: Used react-native-reanimated and LayoutAnimation to ensure the glass elements felt fluid and reactive.

Challenges we ran into One of the biggest hurdles was maintaining 60 FPS performance while rendering multiple real-time blur layers (Glassmorphism). We had to carefully optimize our component hierarchy and use removeClippedSubviews to ensure the social feed remained buttery smooth.

Another challenge was "Data Normalization"—taking unstructured text from a web scraper or OCR and turning it into a structured recipe. We iterated heavily on our parsing logic to handle everything from metric units to informal cooking instructions.

Accomplishments that we're proud of

• Visual Identity: We successfully implemented a consistent "Liquid Glass" design system across 15+ screens, moving away from standard Material Design to something truly unique.
• Social Responsiveness: Our redesigned comments section uses inline expansion and local state updates to provide an "instant" feel, even before the database confirms the write.
• The Chef Persona: We implemented a fun, personalized avatar system where users can choose their chef identity (👨‍🍳, 👩‍🍳, 🍳) to represent them in the community.

What we learned We learned that in a food app, UI is UX. If the app looks delicious, people are more inspired to cook. We also gained deep experience in "Feature Gating"—balancing a useful free tier (5 recipes) with a compelling premium offering through RevenueCat. Technically, we mastered the nuances of KeyboardAvoidingView and LayoutAnimation to handle complex, interactive UI states within a frosted-glass container.

What's next for CookFlow

• Claude Vision Integration: Moving our OCR from a placeholder to a full Claude 3.5 Sonnet implementation for near-perfect cookbook scanning.
• AI Meal Planning: Using LLMs to suggest weekly menus based on a user's saved recipes and dietary preferences.
• Collaborative Kitchens: Allowing families to have a shared "Cloud Cookbook" where they can edit recipes and grocery lists together in real-time.
• Nutritional Analysis: Automatically calculating macros and calories for every imported recipe.

CookFlow — Cook with clarity. Flow with flavor.

Built With

• android
• chatgpt
• cross-platform
• firebase
• firestore
• i18n
• iap
• ios
• liquid-glass
• llm
• ocr
• parse
• react-native
• revenuecat
• typescript
• voice-to-speech