FoodBridge

• 

  Landing

• 

  Auth

• 

  Form

• 

  Donation Dashboard

• 

  Map

• 

  Claims

• 

  Walkthrough

Inspiration

Every night, restaurants throw away hundreds of portions of perfectly good food while shelters nearby struggle to feed people. The problem isn't a lack of food, it's a lack of coordination. I built FoodBridge to close that gap in real-time.

What it does

FoodBridge connects restaurants with surplus food to nearby shelters instantly. Restaurants post available donations with a food item, quantity, and pickup window. Shelters see all nearby donations on a live map with green pins for available food and gray pins for claimed food. One tap claims a donation, and every connected user sees the update in real-time without refreshing.

How we built it

Next.js (App Router) for the frontend and routing Firebase Auth for email/password login with role-based access (restaurant vs. shelter) Firestore with real-time onSnapshot listeners for live donation status across all users Leaflet.js + React-Leaflet for the interactive donation map Tailwind CSS for a clean, mobile-friendly UI

Challenges we ran into

Leaflet's map initialization was the trickiest part. Because Next.js renders on the server and Leaflet is browser-only, I had to dynamically import the map component and carefully manage the lifecycle, preventing the "container already initialized" error when the component remounts by using a cancellation flag and synchronous ref-based cleanup. I also hit Firestore composite index errors early on and restructured queries to sort client-side instead.

Accomplishments that we're proud of

Real-time sync works seamlessly when a shelter claims a donation, the restaurant dashboard updates, and the map pin turns gray instantly across all open sessions. The two-role auth flow feels intuitive, and the app is fully functional end-to-end with live donation data populated across multiple cities.

What we learned

Managing async lifecycles in React is subtle, especially when async initialization (like importing Leaflet) races against component unmounts. I also learned how quickly Firestore's real-time listeners can power live multi-user experiences with very little code.

What's next for FoodBridge

Push notifications so shelters are alerted the moment a new donation is posted Distance-based filtering so shelters only see donations within a set radius A "collected" confirmation step so restaurants can track full donation lifecycle Volunteer routing to help drivers pick up and deliver donations between locations Expanding to support food banks and community fridges alongside shelters

Built With

• css
• firebase
• leaflet.js
• lucidereact
• next.js
• openstreetmap
• react
• tailwindcss
• typescript