Reciprocal: Recipe to Grocery

Inspiration

We were inspired by Eitan Bernath's brief regarding recipes and the desire to make them easier to organize and access. We view food as a very special thing that has more meaning than just sustenance; it's part of who we are as people. It felt like we shared the same goal as Eitan in wanting to do something that helps get people in the kitchen more.

What it does

Reciprocal allows recipe extraction from blogs, websites, and videos to save them all in one place, eliminating the need to search through several websites that have recipes scattered throughout. The app is also able to generate a grocery list for the user, allowing them to quickly get what they need to start cooking, without having to worry if they wrote everything down.

How we built it

Reciprocal is built with Expo, a full-stack React Native framework. For recipes from websites, we are extracting the data out of the URL’s JSON-LD. JSON-LD is a metadata standard that most recipe sites follow for improved SEO. For videos, our app calls two Supabase Edge Functions. The first is responsible for using a service called Supadata to get the transcript for the video. The second receives the transcript, sends it to OpenAI’s gpt-4o-mini model, and returns ingredients from the transcript. We use RevenueCat's monetization services to manage subscriptions and paywalls.

Challenges we ran into

The first challenge was determining what would actually help people to cook more and use the recipes that they were interested in. We conducted our own user research and found that contributing reasons were that people's saved recipes were scattered and they didn't always remember where they were saved, and that following a recipe was perceived as taking additional effort they weren't interested in expending. This led us to creating our core functions of saving recipes in one place from as many sources as possible and generating grocery lists for them. Another challenge was finding a suitable way to get ingredients from online videos. We were able to find a way that combined API usage from Supadata to get transcripts of the videos and then OpenAI to extract the ingredients.

Accomplishments that we're proud of

We were able to maintain Apple's design system throughout the app, giving it a familiar look to iOS users. To do this, we used beta and canary versions of Expo, allowing us to use features unavailable in the current stable release, like SwiftUI components from Expo packages. This allows us to adopt iOS’ Liquid Glass and native list components. We were also proud that we were able to design an app that may not have a lot of different screens, but can still have a large impact on getting the recipes rolling from the screen to the kitchen.

What we learned

Through this project, we learned methods for quickly gathering user research and the effect that utilizing a waitlist webpage can have in acquiring a starting user base in a short period of time. We also learned how a commitment screen during onboarding can enhance user retention. Specifically related to this project, we were also able to learn about how people save recipes and find new ones. It was interesting to learn that people don't use physical cookbooks as much as we thought they did, so we decided to focus on online sources.

What's next for Reciprocal: Recipe to Grocery

Moving forward, there are a couple of features we'd like to add to Reciprocal in the future: Image Transcription – Our research indicated that people use online sources for recipes much more often than physical, so this was not the focus for our hackathon project. Instacart Integration – This would allow users to add items directly to their Instacart account, making acquiring ingredients even easier.