Create a food donation post by entering details like food name, quantity, weight, pickup date, contact, and address for community sharing.
Register as a donor or volunteer by entering your full name, email, and password to join the FoodLoop mission and help the community.
All badges page: View earned and upcoming achievements for food donation claims, including progress bars toward Food Saver and Eco Warrior.
Biryani donation post claimed: See details like donor name, pickup time, location, contact, quantity, and edit/delete options.
Claim history dashboard: You've helped rescue 13.7kg of food-equivalent to 34 meals—with stats on total claims and monthly activity tracking
FoodLoop landing page welcomes users to join as a donor or volunteer, aiming to rescue food and serve communities with quick, free setup.
Donation history dashboard: You've saved 33 meals and donated 13.2kg of food, with stats on posts, claimed items, and impact tracking.
Dashboard summary: Track your impact, total posts, food availability, claimed and expired donations, plus your saved meals as a donor.
Badges & achievements: Track your food rescue journey, see progress toward earning new badges, and celebrate each milestone reached.
Volunteer dashboard for finding food to rescue: Search, filter, and check map view for donation posts, including nearest and urgent options.
Food rescue tips for volunteers: Guidelines on transportation, food safety, staying connected, and punctuality to ensure quality donations.

🥗 FoodLoop – Closing the Loop on Food Waste

FoodLoop is a lightweight web platform that connects food donors (like restaurants, events, or individuals) with nearby volunteers who can redistribute excess food to those in need. Built with React, Vite, and Tailwind CSS, it aims to minimize food waste and support communities through quick and simple coordination.

🚀 Elevator Pitch

A real-time food-sharing platform that enables anyone to donate surplus food and volunteers to claim and deliver it, helping reduce waste efficiently.

💡 Inspiration

In a world where millions go hungry and tons of food go to waste daily, we wanted to build a simple, decentralized system that empowers people to make a difference — without needing a large backend or complex logistics.

🛠️ What It Does

Allows users to post excess food listings with location and expiration time
Volunteers can discover nearby food posts via an interactive map
Enables claiming and confirming food pickups
Supports a multi-role experience: donor and volunteer
No backend required — leverages browser localStorage for state

🔨 How We Built It

Frontend: React (with TypeScript) + Vite
UI: Tailwind CSS and Lucide Icons
State Management: React Context API
Routing: React Router
Other Tools: React Dropzone, React Toast, localStorage
No backend, fully client-side hosted

🚧 Challenges We Ran Into

State Synchronization: Creating real-time updates across different user roles using only localStorage and React state.
Complex User Flows: Designing a smooth flow from posting → claiming → confirming food while preserving data integrity.
Responsive Design: Making the map interface mobile-friendly without losing functionality.
Performance Optimization: Managing large food post lists with fast filtering and rendering.
User Experience: Balancing simplicity with essential features for volunteers and donors.
Error Handling: Robust checks for edge cases in the food claiming and timing process.