SafeBite

Inspiration

Food labels are supposed to make food safer, but for many people, they do the opposite. More than 3 million Canadians self-report having at least one food allergy, and one in four Canadians live with dietary restrictions or preferences. For people with visual impairments, cognitive disabilities, or those navigating labels in a second language, ingredient lists can be overwhelming or confusing. Long blocks of small text, unfamiliar chemical names, and inconsistent formatting turn everyday grocery shopping into a stressful and exclusionary experience. We were inspired to build SafeBite because accessibility in food safety is often overlooked. Everyone deserves equal access to clear, understandable information about what they’re eating.

What it does

SafeBite is a barcode-scanning web app that transforms product information into simple, spoken, and personalized insights, clearly flagging allergens and dietary conflicts while explaining complex ingredients in plain language. SafeBite offers users the ability to login to create a personalized health profile that has each user’s dietary restrictions, allergies, and food preferences. Users can easily search for and add additional diet constraints or allergens, then scan food barcodes using their device camera to instantly retrieve ingredient and chemical information. The app cross-references these ingredients against user-defined diets and allergies, and the government hotlist to display clear safety flags indicating whether a product is safe or unsafe. To improve accessibility and understanding, SafeBite includes AI-powered explanations that translate complex ingredients and chemicals into easy-to-understand language, along with text-to-speech functionality for hands-free and visually accessible use. An intuitive, guided UI ensures a smooth onboarding experience and makes food safety information fast, clear, and accessible to everyone.

How we built it

Design: Figma, Adobe Illustrator

Frontend: React, TypeScript, JavaScript, HTML, CSS, Tailwind CSS, Vite

Backend: Node.js, Express.js, TypeScript, Supabase

APIs & Services: OpenFoodFacts API for retrieving ingredient data from barcode scans Gemini API for AI-powered ingredient explanations ElevenLabs API for natural-sounding text-to-speech accessibility

Challenges we ran into

We ran into several technical challenges while building SafeBite. Integrating the barcode scanner was difficult, particularly aligning the camera feed with our custom scanning frame and making it responsive across different screen sizes. We also faced difficulties managing API keys and ensuring external services worked consistently on each team member’s local environment. While we implemented the foundations for authentication, we weren’t able to fully connect it across the frontend and all pages within the time constraints.

Accomplishments that we're proud of

We’re proud of how much we learned while navigating challenges throughout this project, especially working with API keys and understanding how to securely integrate and manage them across our application. Implementing the Gemini API and applying concepts learned from workshops to a real project was a major milestone for our team. As beginners to using APIs and backend development, we made significant progress in a short amount of time, and we’re incredibly proud of how far we came and the final product we built together.

What we learned

Through building SafeBite, we learned how to securely use and manage API keys and gained a stronger understanding of how to structure a project by separating folders, files, and responsibilities. We deepened our knowledge of React, especially around state management and component-based design. We also learned how to connect a frontend to a backend, work with external APIs, and collaborate as a team using Git, including merging changes and resolving conflicts.

What's next for SafeBite

SafeBite aims to expand beyond English by supporting multilingual usage, making food safety information accessible to a wider global audience. To further broaden its impact internationally, SafeBite plans to reference government food safety and allergen databases from multiple countries, allowing users outside of Canada to receive accurate, region-specific guidance. Future versions will also enable hands-free, voice-controlled navigation to better support users with visual or motor impairments.