F.A.T.E. | Food Alert and Tracking Engine

Inspiration

Global food waste is a massive environmental crisis, accounting for an immense portion of global greenhouse gas emissions. When brainstorming eco-friendly tech, our team wanted to build something that creates immediate, localized impact. We realized that a huge percentage of household food waste happens simply because items get lost in the back of the pantry and expire before we notice. We created F.A.T.E. (Food Alert and Tracking Engine) to put a smart, eco-conscious pantry manager directly into every user's pocket, turning grocery expiration dates into actionable carbon-saving targets.

What it does

F.A.T.E. is a mobile-first web application that helps users eliminate household food waste. Users tap a prominent floating camera button at the bottom of the interface to instantly scan any grocery product's barcode. The app pulls real-time environmental and product data—including name, thumbnail images, and eco-friendliness ratings—via the Open Food Facts API. After scanning, the user inputs the product's expiration date, and F.A.T.E. saves the item to an optimized, locally persistent dashboard. The pantry automatically self-sorts chronologically, using dynamic, traffic-light visual indicators (Crimson, Orange, Gold) to visually flag which ingredients need to be eaten immediately.

How we built it

We managed our tight 12-hour timeline by splitting our 4-person team into a highly efficient parallel pipeline: The Frontend UI Team designed a clean, mobile-responsive layout using vanilla semantic HTML5 and customized CSS variables matching our green-and-gold brand palette. They engineered the floating layout, responsive forms, and dynamic list sorting systems. The Logic & API Team structured the JavaScript modules, managed the asynchronous Open Food Facts API endpoints, and built local storage serialization hooks to persist pantry data across browser reloads. We leveraged the high-performance @zxing/browser Multi-Format Reader library via a secure context to access phone camera feeds and wrapped it in a custom-designed overlay modal with precise scanning guides. The entire project was structured flat at the root for streamlined deployment directly to Netlify to make live demoing foolproof.

Challenges we ran into

Flatlining our project directory tree halfway through the hackathon to guarantee seamless Netlify and GitHub Pages deployment broke our file paths and module mappings, causing browser console crashes and a stubborn Git tracking invalid path Merge with strategy port error. We had to dive deep into managing Git's cache layer and re-index our files manually. Additionally, configuring the webcam hardware bounds to reliably capture linear grocery barcodes instead of standard square QR codes took rigorous testing and calibration inside the ZXing constraints layout.

Accomplishments that we're proud of

Zero-Backend Architecture: We succeeded in creating a fast, functional app that reads and writes live data without spending a single minute configuring an external database server. Pure CSS Iconography: We engineered smooth, hover-responsive pure CSS pseudo-elements and matched them seamlessly with Font Awesome to build a highly interactive floating bottom navigation scheme. Presentation Fail-Safes: We integrated a robust local fallback dictionary that catches failed network requests, ensuring that even if our venue's Wi-Fi fails during our live demo, the app will still cleanly process target products right in front of the judges.

What we learned

We learned a massive amount about utilizing ES6 JavaScript modules in static web environments and handling client-side camera streaming constraints. More importantly, we learned the value of solid team synchronization—agreeing on an explicit data contract early on allowed our frontend and backend teams to merge their modules seamlessly when our codebases intersected.

What's next for F.A.T.E. | Food Alert and Tracking Engine

We want to expand F.A.T.E. past simple monitoring by introducing an aggregate "Prevented Carbon Footprint Dashboard" that quantifies the real-world carbon offset users achieve when they finish items before expiration. We also plan to integrate a client-side recipe generator that scans the user's highest-urgency pantry items and suggests meals to cook them with, turning potential waste into a proactive, eco-friendly cooking experience.