FoodFlow

• 

  logo

FoodFlow: Turn Food Waste Into Community Impact Inspiration As a student passionate about social impact, I was inspired by the stark contrast between food waste and food insecurity in our communities. Every year, tons of edible food from restaurants and bakeries are discarded, while many struggle with hunger. This issue resonates with the United Nations' 17 Sustainable Development Goals (SDGs), particularly SDG 2 (Zero Hunger) and SDG 12 (Responsible Consumption and Production). I envisioned FoodFlow as a platform to bridge this gap, connecting surplus food with those in need through community collaboration. Despite being a solo developer balancing schoolwork, I saw this hackathon as an opportunity to create a meaningful solution aligned with global sustainability goals. What it does FoodFlow is a web platform that connects three key groups to combat food waste and hunger:

Donors (e.g., restaurants, cafes) post surplus food, specifying details like items and pickup times. Recipients (e.g., food banks, shelters, individuals) browse and claim available donations. Volunteers accept delivery tasks, transporting food from donors to recipients.

Each user group has a dedicated dashboard to manage their activities, track donation and delivery statuses, and view their community impact. While the platform is not yet fully functional with live data, it aims to create a seamless "flow" of food, reducing waste and addressing hunger through technology. How we built it As the sole developer, I built FoodFlow in one week during a hackathon, using modern web technologies to create a user-friendly platform. The tech stack includes:

Frontend: React with TypeScript for a dynamic, type-safe interface, built with Vite for fast development. Backend: Supabase for a scalable PostgreSQL database, authentication, and real-time capabilities. Routing: React Router for navigation across pages like the HomePage, role-based dashboards (DonorDashboard, RecipientDashboard, VolunteerDashboard), DonationDetailPage, and a NotFound page. Styling: Tailwind CSS for rapid UI development, Framer Motion for animations, and Lucide React for icons. Testing: Jest and React Testing Library to ensure component reliability. Data Handling: Custom hooks (useDonations, useDeliveryJobs) to fetch data from Supabase, though dashboards currently rely on mock data from mockData.ts.

The platform supports user authentication via an AuthModal, with role-based access (donor, recipient, volunteer) managed by a useAuth hook. Donors can view impact metrics and past donations, recipients can browse and reserve donations, and volunteers can accept delivery jobs. However, core features like donation creation and search/filtering are incomplete, and dashboards use static data instead of live Supabase data. I developed the platform on a low-spec device, which struggled with multitasking and slowed down tasks like running Vite, Supabase queries, and testing simultaneously. Despite these constraints, I built a functional prototype with role-based dashboards and a public landing page. Challenges we ran into Building FoodFlow as a solo student developer was challenging, especially while juggling schoolwork and limited hardware:

Time and Workload: Balancing coursework, exams, and the hackathon's timeline forced me to prioritize core features over polish. Late-night coding sessions were often interrupted by assignments, limiting my focus. Hardware Limitations: My device couldn’t handle extensive multitasking, slowing down development and testing. Running Vite, Supabase, and Jest simultaneously caused frequent crashes, making debugging frustrating. Critical Bug: The dashboards rely on static mockData.ts instead of live data from useDonations and useDeliveryJobs hooks, rendering the app non-functional for real-world use. Integrating these hooks was deprioritized due to time constraints. Incomplete Features: The "Donate Food" button lacks a form to trigger createDonation, and recipient search/filtering UI isn’t connected to logic. The useAuth hook assumes undefined Supabase functions (db.getProfile, auth.signUp, auth.signIn), risking silent failures. Real-Time and Error Handling: The autoRefresh in data hooks uses inefficient setInterval instead of Supabase Realtime subscriptions. Dashboards also lack UI for error states, potentially confusing users if data fails to load. Solo Development: Without a team, I handled everything—design, coding, testing, and debugging—which stretched my skills and time thin, especially as a student with limited experience.

Accomplishments that we're proud of Despite the challenges, I’m proud of several achievements:

Building a working prototype in one week, including role-based authentication and dashboards, while managing school responsibilities. Designing a platform aligned with SDGs 2 and 12, giving the project a meaningful purpose. Creating a polished UI with Tailwind CSS and Framer Motion, despite limited design experience. Implementing custom hooks (useAuth, useDonations, useDeliveryJobs) that lay the groundwork for a scalable, real-time platform. Persevering through hardware limitations and time constraints to deliver a functional foundation for FoodFlow.

What we learned This project taught me valuable lessons as a student developer:

Time Management: Balancing school and a hackathon requires ruthless prioritization—focusing on core features first. Supabase: Using a backend-as-a-service platform accelerates solo development, but understanding its nuances (e.g., real-time subscriptions) is critical. Testing Early: Writing tests with Jest and React Testing Library from the start reduces bugs and improves reliability. Resilience: Working with a low-spec device taught me to optimize workflows and stay patient through technical setbacks. SDG Alignment: Framing a project around global goals like the SDGs adds purpose and clarity to development decisions.

What's next for FoodFlow Despite its current limitations, I’m committed to expanding FoodFlow into a fully functional platform and hope it’s recognized as a strong candidate for funding. Future plans include:

Fixing Critical Bugs: Integrate useDonations and useDeliveryJobs hooks to replace mock data with live Supabase data, ensuring real-world functionality. Completing Features: Implement donation creation forms, connect search/filtering logic, and replace setInterval with Supabase Realtime subscriptions for efficient updates. Error Handling: Add UI feedback for error states in dashboards to improve user experience. Authentication: Verify and implement missing Supabase functions (db.getProfile, auth.signUp, auth.signIn) to ensure robust authentication. Scalability: Optimize for larger user bases and multiple regions, potentially adding geolocation for volunteer matching. Mobile App: Develop iOS and Android apps to make FoodFlow accessible on the go. Impact Tracking: Add analytics dashboards to show metrics like meals saved and waste reduced, aligning further with SDGs. Partnerships: Collaborate with local governments, NGOs, and businesses to expand outreach and impact.

I’m honest about the project’s current state—it’s a prototype with bugs and incomplete features, built under significant constraints. Yet, I’m passionate about its potential to fight hunger and reduce waste. With funding and more time, I believe FoodFlow can become a transformative tool for communities worldwide.

Built With

• and-real-time-features.-tailwind-css:-utility-first-css-framework-for-rapid-ui-styling.-framer-motion:-library-for-creating-smooth-animations.-lucide-react:-icon-library-for-clean
• authentication
• framer-motion
• react
• supabase
• tailwind
• typescript
• vite