Re-cipe - A digital cookbook

Your Culinary Companion.

Comment

Inspiration

The kitchen is often called the heart of the home, yet the modern cooking experience is fragmented—scattered between screenshot chaos, ad-riddled recipe blogs, and forgotten bookmarks. I were inspired to bring order and elegance back to cooking. I wanted to create more than just a utility; I envisioned a "Maison" for your digital recipes—a place where culinary art meets high-end design. The goal was to build an application that feels as premium as the dishes users aspire to create, blending the functionality of a powerful database with the aesthetic of a luxury fashion house.

What it does

Re-cipe / A digital cookbook is a comprehensive culinary management platform.

  • Insight: All the information need about a recipe: Ingredients, Instructions, Portions and Nutrition
  • Smart Import: Instantly parses and saves recipes from any website or image, stripping away clutter to focus on ingredients and instructions.
  • Quick Grocery: Convert any recipe to grocery with a press.
  • Meal Planner: Allows users to plan meals for days ahead.

How I built it

I built Re-Cipe using a modern, robust mobile stack:

  • Frontend: React Native with Expo for a seamless cross-platform experience. I used NativeWind (Tailwind CSS) to craft the bespoke, high-fashion UI components.
  • Backend: Supabase handles our authentication, database, and edge functions for parsing logic.
  • Payments: I integrated RevenueCat to manage subscriptions, implementing a strict paywall flow that handles entitlements, restores, and tier management.
  • AI: Leveraged AI capabilities (via Edge Functions) to intelligently parse unstructured recipe HTML and images into structured JSON data.

Challenges I ran into

  • Subscription Logic: Enforcing a hard paywall on first login was tricky. I had to architect a robust routing flow that checks subscription status before the main app loads, ensuring users couldn't bypass the check via deep links or navigation glitches.
  • Native vs. JS Interactivity: I faced significant challenges overlaying custom UI (like our "Sign Out" button) on top of native modules (RevenueCat's Paywall). Debugging touch event propagation (pointerEvents) and z-index stacking contexts between React Native views and native UI components required precise adjustments.
  • Data Parsing: Standardizing recipe data from the wild web is messy. Handling edge cases for different blog formats required almost constant refinement of our parsing engine.

Accomplishments that I'm proud of

  • The "Unskippable" Paywall: I successfully built a secure, full-screen paywall that feels completely native to the app, handling restore flows and account switching gracefully.
  • The Aesthetic: I avoided the "standard app" look. The result is a distinct, glass elements and smooth animations that stands out in the crowded food & drink category.
  • Seamless Onboarding: The flow from Sign Up -> Subscription -> Home is frictionless, handling authentication states and purchase synchronization in the background without user interruption.

What I learned

  • State Management is Key: Managing the three-way sync between Supabase Auth, RevenueCat customer info, and our local app state taught us the importance of a centralized "source of truth"—in our case, a custom useAuth hook that orchestrates it all.
  • Native Modules require respect: I learned that when working with native UI components (like the Paywall), standard CSS-like positioning often falls short. You have to respect the native view hierarchy.

What's next for Re-cipe - A digital cookbook

  • AI Chef Assistant: I plan to introduce a conversational AI that can answer cooking questions in real-time while you're in the app.
  • Collaborative Cookbooks: Allowing users to create shared collections with family or friends.
  • Enhanced Social Features: Expanding the "Channels" feature to allow for deeper community engagement around specific cuisines or dietary lifestyles.

p/s: phone a bit old for demo, it looks better on newer iPhone - I have to adjust the speed a bit to fit in the time constraints so it looks a bit rush

Built With

Share this project:

Updates