glance

• 

  glance logo!

• 

  select your dietary preferences here

• 

  ingredient scanning page

• 

  scanned results

Inspiration

We were inspired by a number of things to build this tool, we're very close to people with severe allergies, we've seen youtube videos of moms trying to avoid added sugar in their food, and we both have a passion for food and cooking, these factors inspired us to create a multipurpose tool that allows people to ditch reading those tiny, incorrigible ingredient lists and know what's actually in their food. Wether you're looking for dangerous ingredients to you, ingredient preferences or avoidances, or you're just a big fan of pastel colours, glance is a tool aimed to help everyone know exactly what they're eating at a glance 😉

What it does

glance allows users to select an ingredient (like shellfish) or category of food (like dairy) to look for in the picture of the ingredient list they take on our webapp. We also provide an option for users to manually enter ingredients they're unsure of or the scanner does not pick up. The list of ingredients is then checked against the users selected preferences and a table of results are provided letting the user know at a glance if the food contains any of their flagged ingredients or categories.

How we built it

glance is a web app created using the react.js framework for our frontend and node.js for our backend. We leverage co:here's classification library to classify ingredients into categories and the tesseract image to text library to convert the ingredient picture into useable text.

Challenges we ran into

We're a team of two, so our primary challenge was distribution of work, we had four less hands and two less brains to ideate and execute an idea. That being said, despite this challenge, we worked extremely well together, chose an appropriately sized project for our manpower/time, and ended up creating a very visually striking and useful application.

Accomplishments that we're proud of

It's always an accomplishment to successfully use a new technology and in this case, we used two unfamiliar technologies! 🎉

Above all else however, is the knowledge that we have made a product that could make someone's life just a little bit easier and use a really cool technology along the way!

What we learned

Tech-wise, we learned the importance of asking for help and correctly choosing a project to fit your team and manpower. Both of these are challenging lessons, especially when you're in one of the most amazing incubation spaces in Canada, but because we acknowledge our team size and time, we ended up choosing a smaller albeit very useful project that we knew we could complete. Sometimes it's better to scale back and prioritize different factors when ideating at hackathons.

What's next for glance

That's easy, more categories! We're leveraging co:here's technology to categorize foods as some item that corresponds with an item or diet that a user can flag to look for, so naturally we were limited in our time frame about how many of those options we could give. Next, we want to add diet options, like vegan, vegetarian, keto, etc., more common allergens, and even the option for the user to input their own word. Additionally, glance has accessibility uses, especially for the visually impaired. In future iterations, this aspect will be emphasized creating a tool that's helpful for all our users.

Built With

• co:here
• node.js
• react
• tesseract