RecipeSnap: Simplifying Cooking & Budgeting

🍳 Introduction

RecipeSnap 📸, search recipes and budget meals with just a snap of your camera! RecipeSnap is the ultimate culinary companion, seamlessly integrating Cloudflare AI image recognition, ingredient identification, and real-time price tracking through Wakefern, providing a list of ingredients, their prices from Wakefern data, and recipes of any meals you want to cook!

🥗 Inspiration

Our team's struggle with efficient meal planning and grocery shopping as college students sparked the idea for RecipeSnap. We aimed to streamline these tasks, creating a tool that instantly generates an ingredient list and their prices just from a photo of the desired food.

📚 What We Learned

Developing RecipeSnap taught us the nuances of using APIs and connecting React Native front end with Python back end. We also learned more about how to use Cloudflare's AI models and frontend development with React Native and Expo Go, which are tools we are trying for the first time.

🛠️ How We Built Our Project

RecipeSnap utilizes Cloudflare Workers AI ResNet-50 for image recognition, Edamam API to find recipes, and Wakefern for price tracking of ingredients. The frontend was developed using React Native and Expo Go. We used Python for data processing, Axios for API calls, and FastAPI for communication between the frontend and backend.

🚀 Challenges Faced

We faced difficulties in integrating the frontend with the backend and using React Native for the first time.

🥘 Accomplishments that we're proud of

Successfully integrating Cloudflare AI for food image recognition.
Developing a user-friendly interface with React Native and Expo Go.
Reliable real-time price tracking through Wakefern API.
Overcame our challenges to make our app run smoothly.

😋 What's next for RecipeSnap

Implementing user registration and login.
Move from local to cloud storage.
Expanding the database of recognized food items to cover a wider range of cuisines and products.
Integrating more nutritional information and dietary preferences to offer personalized recipe recommendations.
Connecting with grocery stores to create online shopping lists.

Built With

ai
axios
cloudflare
cloudflare-ai
edamam-nutrition
expo.io
fast-api
html
javascript
python
react
react-native
wakefern

Submitted to

HackRU Spring 2024
- Winner Maverick Track

Created by

I worked on the front end and helped with creating buttons to gather camera input and image input. I also worked on creating a component to read the json of ingredients from the backend and displaying it

Terry Nguyen
I worked on front-end mostly and created some things like navbar functionality, parts of cameraInput and ImageInput. I utilized Axios on frontend and FastAPI with Uvicorn on backend to connect the different components of the app.

Andrew Chang
Worked with python on the backend employing Cloudflare Workers AI to utilize ResNet-50 for image classification, Edamam API to find recipes, and Wakefern API for store prices (using Hamming distance to find items when they don't have the exact same name).

Artem Torubarov
Student at Rutgers University–New Brunswick School of Arts and Sciences Honors Program
I mostly worked on creation of the front end and helping to make it functional. I also contributed through visuals especially with the logo creation. I helped plan out certain aspects of the app including layout in an attempt to create an easy experience for users.

ldh 174