Inspiration

Community fridges across Vancouver are vital lifelines for fighting food insecurity, yet managing them relies almost entirely on fragmented volunteer group chats and manual physical checks. This lack of centralized visibility often leads to unexpected stock shortages of essential staples or silent food spoliation. We wanted to build a seamless tool that eliminates manual logging and transforms how mutual aid groups track inventory. By turning simple smartphone photos into actionable data, we aimed to keep neighborhood fridges predictably stocked and accessible.

What it does

SpreadTheLoaf turns community fridge monitoring into a quick camera scan. Volunteers or donors upload a photo of fridge shelves, and our AI vision pipeline automatically identifies food items, estimates quantities, assesses perishability, and logs the records. A public interactive map displays live stock levels for community members and donors across Vancouver. When essential staples drop below critical thresholds, our system automatically triggers n8n webhooks to broadcast targeted restock alerts straight into volunteer Discord channels. Volunteers receive a cryptocurrency reward through Solana in exchange for documenting the inventories of soon-to-be-depleted community pantries.

How we built it

We built our web application using Next.js and React, Tailwind CSS, and Auth0 for role-based access control. The core vision pipeline accepts photo uploads via a dedicated API route, passing images to the Google Gemini API using @google/genai alongside Zod schema validation for strict, structured inventory extraction. Validated inventory items commit directly to a Tiger Data PostgreSQL database instance via custom SQL queries, and the raw images are committed to a Vultr object bucket. Vultr cloud hosting also manages deployment, with Nginx, GoDaddy, and CertBot supporting the server. Database stock events trigger an n8n workflow pipeline that formats and routes instant notifications to volunteer chat groups, and Solana rewards users who respond to them.

Challenges we ran into

Our biggest challenge was connecting our frontend and backend. We initially built the user interface in Lovable (which uses Vite) and built our backend in Next.js. Merging the client-sided Vite components with the server-built Next side proved challenging, and lead to hours of trying to put the jigsaw puzzle of mismatched components, differing API routes, and fundamentally incompatible architectures together.

Accomplishments that we're proud of

We are proud of achieving a seamless, zero-friction workflow from photo upload to automated alert. Our verification interface gives volunteers full control to edit or confirm AI-extracted inventory before committing to the live database, balancing speed with data accuracy. Building a robust pipeline that directly connects multimodal AI vision to real-world community mutual aid channels feels both technically rewarding and socially impactful.

What we learned

This project deepened our experience with multimodal AI system design, particularly enforcing strict type safety and structured JSON outputs using Zod alongside @google/genai. We also learned how to effectively decouple notification engines using n8n webhooks, allowing backend database triggers to talk to consumer messaging apps without cluttering core application logic. Balancing automated computer vision with human-in-the-loop review taught us how to design better user interfaces for community-driven tools.

What's next for SpreadTheLoaf

Looking ahead, we plan to implement predictive analytics to forecast recurring demand patterns and alert volunteers before essential items run out entirely. We also aim to enhance SpreadTheLoaf as an offline-capable Progressive Web App (PWA) with client-side caching for logging inventory in low-connectivity areas. Lastly, integrating barcode scanning for packaged goods and onboarding more community fridge locations across British Columbia will help scale our impact.

Built With

Share this project:

Updates

Submission history