FoodCast

• 

  Home Page

• 

  How it Works

• 

  Steps

• 

  Our Impact

• 

  User Engagement

• 

  Log in/Sign Up

• 

  Clicking a role

• 

  Google OAuth and Other Sign In Info

• 

  Recipient Portal

• 

  Claiming Direct Offer

• 

  Checking Offers

• 

  Checking Expired Offers

• 

  Donor Dashboard

• 

  Ai Prediction

• 

  Creating Direct Offer

• 

  Checking Offers

• 

  Admin Analytics

• 

  Stats

• 

  Driver Dashboard

Inspiration

• We were inspired by the gap between food surplus and food insecurity -often in the same city-motivating a system that predicts surplus, surfaces it instantly, and coordinates pickups to minimize waste.

What We Built

• A full‑stack web app with donor, recipient, driver, and admin views: donors create offers or run AI predictions; recipients claim items; drivers manage deliveries; admins track KPIs and category trends.
• A modern, accessible UI: Google Places address autocomplete, a persistent map, soft‑pastel analytics with clear legends, and a compact KPI carousel.

How We Built It

• Frontend: Next.js (App Router) + TypeScript + Tailwind CSS + Radix UI, with Embla Carousel for KPIs and Recharts for charts.
• Backend/API: Node.js routes for offers, users, and analytics; a Python model server powering AI predictions; local JSON storage for demo persistence and clear RLS-ready patterns for a future DB.
• Maps: Google Maps/Places APIs for geocoding, autocomplete, and location-aware offers; robust PAC dropdown anchoring with a MutationObserver.

What We Learned

• Clean, realistic data and conservative post‑processing often outperform complex models in practice.
• Small UX details - anchored autocomplete, modal questionnaires, labeled charts - really improves trust and speed.
• Separation of concerns prevents subtle bugs (ensuring predictions aren’t auto‑duplicated as offers).

Challenges

• Data realism vs. availability: synthesizing credible patterns and validating with error metrics instead of chasing perfect datasets.
• UI integration edge cases: ensuring Google’s .pac-container renders under the input, not at the bottom of the page.
• Logic correctness under demo constraints: eliminating double‑creation of predictions/offers and keeping state in sync across views.
• Performance vs. clarity: balancing rich analytics with a calm design that stays fast and legible.

Outcome

• A focused product that turns surplus predictions into actionable logistics, proving that “good enough” predictions + great coordination can move real food to real people - fast.

Built With

• app-router)-with-tailwind-css-and-radix-ui-on-the-frontend
• embla-carousel
• embla-carousel-for-kpis
• google-maps
• google-maps-places/maps-apis-for-geocoding-and-ui
• google-oauth
• javascript
• next.js
• node.js
• node.js-apis-with-file-based-json-storage-(demo)-plus-a-python-model-server-(fastapi-style)-for-predictions
• python
• radix
• react
• recharts-for-analytics
• supabase
• tailwind
• typescript