Inspiration
Living in London, I watched friends and family toss out £100s of food yearly—milk going sour, veggies wilting, bread stale. Seeing global food waste stats (1/3 of all food wasted!) and local surplus food programs like Too Good To Go inspired me to build a one-stop tool for everyday households to fight waste.
What it does
Food Waste Fighter is a web app that lets users track food inventory with expiration alerts, get recipe ideas for leftover ingredients, discover discounted near-expiry food bags from local stores, learn home composting, and see their savings/environmental impact.
How we built it
I started with Figma to design a warm, intuitive UI (earth tones, playful animations) aligned with European/American user habits. Built the front end with HTML/CSS/JavaScript (React for state management), added CSS keyframe animations for hover effects/scroll triggers, and used Chart.js for impact stats. LocalStorage powers inventory persistence, and custom modals handle surplus food reservations.
Challenges we ran into
The biggest hurdle was balancing dynamic animations (count-up stats, card transitions) with accessibility—ensuring animations worked for all users (respecting prefers-reduced-motion). Also, designing a responsive grid for feature cards that worked seamlessly on mobile (EU/US users rely on phones!) took multiple iterations.
Accomplishments that we're proud of
Creating a cohesive, visually engaging experience that’s both functional and joyful—users love the scroll-triggered impact counters and hover animations. We also nailed the surplus food reservation flow, making it quick and satisfying with success animations.
What we learned
I deepened my understanding of accessibility in web animations, and how to design for diverse user needs (e.g., vegan/gluten-free filters for recipes). I also learned that small, intentional UI choices (color-coded expiration alerts) make the app far more usable for busy households.
What's next for this project
First, add user profiles to sync inventory across devices. Then, partner with local grocery chains to expand surplus food listings, and integrate a community compost map with real local locations. Finally, add a meal-planning feature to align inventory with weekly shopping—cutting waste at the source.
Log in or sign up for Devpost to join the conversation.