pyp

Inspiration

While working at Whole Foods I became curious about why customers were willing to pay more for products available at other stores for considerably cheaper. While speaking with a coworker, I learned that Whole Foods has banned 100+ ingredients from their store and, as a result, customers can pick anything off the shelf and feel confident that it meets a certain standard of safety. I wanted to create a simple piece of software that can give consumers the same peace of mind regardless of the grocery stores they have access to.

What it does

The web app utilizes your webcam to scan a barcode, find the UPC of the product, and gets the ingredient list from the Edamam Food and Grocery API. This ingredient list is then cross-referenced with a list of potentially harmful ingredients and items are flagged accordingly. The user is then provided with links that will help them research these ingredients and make their own decision on their purchases.

How we built it

The web app is built entirely in React.js while using Redux for state management. Axios is used for the API calls and Font Awesome was used for iconography.

Challenges we ran into

I had trouble finding a library to use for the barcode scanner because most of the relevant libraries are only designed for React Native. I also struggled to deal with the fact that ingredients are listed differently on different ingredients labels. An example includes artificial coloring sometimes being listed as "red 20" or "colors (red 20)".

Accomplishments that we're proud of

I am proud that I was able to get the web app to check for a substantial list of different ingredients in a short period of time. I am also proud of the overall design and flow of the web app.

What we learned

I learned that external API's can be extremely useful but they do come with downsides. This includes the fact that information is often not given in the form that you expect. I also learned that this project may have been better fitted for a React Native app but I discovered this too late in its development.

What's next for pyp

The main priority moving forward is expanding the list of "banned" ingredients to account for varying formatting. I also plan to convert this project to a React Native app as I feel it makes more sense as a mobile app. I plan to either find a better barcode scanner plugin or to modify an existing one to better indicate when the code has been identified.

Built With

• edamam-api
• javascript
• react
• redux