Basic Layout
Alt Layout

Preserves - Devpost Submission

Inspiration

The idea of building something like this has been mulling in my mind for a bit and this competition gave me the drive to actually try it.

I have tried a lot of similar products but they always had a feeling of POC, or not built by people who use the product. As someone who loves cooking, and finding recipes from old family cookbooks or social media, I wanted a place I could store them, optimise them and produce something that could bring physical back to digital.

What it does

On the face the app preserves (saves) recipes from images, websites and social media posts.

Optimisation: What we do different is we optimise the recipes for small screens by incorporating ingredients and steps into one view. So if you choose you can view the full recipe in one list making it perfect for cooking while only on a mobile screen. Where books have the luxury of giving you the full context, digital devices inherently can't do that so by combining the information we create a dense information block that in practice seems to work really well.

Versions: Another addition is the ability to revise recipes – traditionally you would write on a recipe to make alterations, but still have access to the original. I wanted to keep this so you can duplicate and edit a recipe, making it possible to keep the original and have a new personalised version.

Shopping List: Here the ability to quickly long-press on ingredients lets you add them to a shopping list, or type in anything you want. We have the ability to show the shopping list as a Widget on your home screen.

Notes and Images: We allow you to add notes to recipes with images – perfect for capturing substitutions, family variations, or memories associated with a dish. These appear right alongside the recipe instructions.

How we built it

We built Preserves as a hybrid architecture that leverages the strengths of different platforms:

Frontend: React Native with Expo for a true cross-platform mobile experience. We use Expo Router for navigation and Uniwind for styling, with support for both light and dark modes.

Backend: Convex powers our real-time database, authentication (via Better Auth), and serverless functions. The real-time sync means when you save a recipe on your phone, it's instantly available everywhere.

AI & Processing: Cloudflare Workers handle the heavy lifting. When you upload an image or share a URL, our Workers queue the job and use Google Gemini to extract structured recipe data – ingredients, instructions, cooking times, nutrition info, even difficulty levels. We store images in Cloudflare R2 for fast global access.

Smart Optimizations: We built a "master recipe" system for social media content. When someone imports a TikTok or YouTube recipe we've seen before, we skip the AI processing entirely and serve a cached, verified version instantly. This makes subsequent imports lightning fast and reduces AI costs.

Widgets: We use Voltra for native iOS and Android home screen widgets, so your shopping list is always visible without opening the app.

Queue System: Recipe analysis happens asynchronously via Cloudflare Queues. This means you can upload a photo, close the app, and get a notification when your recipe is ready – even if it takes a minute to process.

Challenges we ran into

AI Output Consistency: Getting structured data from unstructured recipe sources (especially handwritten recipe cards or fast-paced cooking videos) was tricky. We had to build extensive prompt engineering and output validation to handle edge cases – like recipes that span multiple images, or videos where the ingredients are shown but never listed.

Mobile-First Recipe Display: Traditional recipe apps split ingredients and instructions across tabs or screens. We wanted them combined for cooking flow, but had to carefully design the layout so it didn't feel cluttered. We ended up with a unique "incorporated instructions" system where quantities are baked right into each step.

Instagram As they are super aggressive getting hold of the content has been a challenge but we have a solution that will be released in the near future.

Accomplishments that we're proud of

The "Combined View": We're genuinely proud of the incorporated instructions feature. It sounds simple – putting ingredient quantities directly into each step – but it transforms the cooking experience on mobile. No more switching between tabs with flour-covered fingers.

Multi-Language Support: The app supports 6 languages (English, Spanish, French, German, Italian, Dutch) with full translation of the UI and AI prompts. This means a user in Amsterdam can import a French recipe and have it analyzed in Dutch.

Master Recipe System: Our social media recipe deduplication means the more people use Preserves, the faster it gets for everyone. Seeing the "copiedFromMaster" metric go up in our analytics is genuinely satisfying.

Home Screen Widgets: Getting the shopping list widgets working natively on both iOS and Android, with real-time updates and proper theming, was a technical challenge we're proud to have solved.

What we learned

The Power of Hybrid Architectures: Convex's real-time sync combined with Cloudflare Workers' edge computing gives us the best of both worlds – instant UI updates with heavy processing handled at the edge.

AI is a Tool, Not a Magic Wand: We learned to treat AI as a component in a larger system, not the entire solution. Validation layers, fallback flows, and human-editable outputs are essential.

Cooking is Universal, But Recipes are Personal: Every cook has their own way of noting recipes. Building flexible note-taking and versioning features taught us that preservation isn't just about storage – it's about letting people make recipes their own.

Mobile-First Means Thumb-First: We redesigned our shopping list interactions around long-press gestures because that's what works when you're holding a phone while stirring a pot. Small UX decisions matter enormously in kitchen environments.

Queue-Based Processing for User Experience: Moving from synchronous to asynchronous processing for AI analysis actually improved the user experience. Users don't want to stare at a loading spinner – they'd rather get a notification when it's done.

Durabile Compute: With AI and the instabilities around it having a determaitics compute contruct that can effortlessly retly and follow crutial steps is essential.