Skip to content

React Native app that parses grocery receipts and suggests recipes based on the available ingredients. Won Best Use of Google Cloud Platform at Hack Western VI. 🏆

Notifications You must be signed in to change notification settings

alice-cai/recipe-radar

 
 

Repository files navigation

Recipe Radar

Recipe Radar is a React Native app that suggests recipes to you based on the items you have in your fridge/pantry. Click here to see a video demo.

Winner for Best Use of Google Cloud Platform at Hack Western VI. 🏆

 

How It Works

After buying groceries, you can use our app to take a photo of your receipt. The app will parse out the items in your receipt and save them to Google FireStore. It will then recommend recipes you can make based on the ingredients you have. You can always manage your list of ingredients using the app's interface.

How We Built It

The front-end was built using React Native. It uses axios to query the recipe API and uses Google Firebase to store the user's list of ingredients.

On the back-end, we have a Flask server that receives the recipe image from the front-end through ngrok. It then sends the image of the receipt to Google Cloud Vision to get the text extracted. We then post-process the data we receive to filter out any unwanted noise.

Front-end: Alice Cai & Lucas Budz
Back-end: Andy Jiang & Deep Pandya

Challenges We Ran Into

One of the challenges we ran into was deploying our Flask server to Google App Engine. We found that it was not possible to write into Google App Engine storage; instead, we had to write into Firestore and have that interact with Google App Engine.

On the frontend, we had trouble designing the UI to be responsive across platforms, especially since we were relatively inexperienced with React Native development. We also had trouble finding a recipe API that suited our needs and had sufficient documentation.

How to Run

git clone https://github.com/AndyJiang99/HackWestern2019

Install dependencies:

yarn install
npm install
pip install -r requirements.txt

Start Flask Server

python server.py
copy ngrok endpoint to camera.js

Start react-native application

expo start

Download the expo app on your mobile device and scan the QR code generated by expo start.

About

React Native app that parses grocery receipts and suggests recipes based on the available ingredients. Won Best Use of Google Cloud Platform at Hack Western VI. 🏆

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 91.4%
  • Python 8.6%