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.