NutriConnect SDG 3 · Good Health

• 

  Logo

• 

  Homepage

🌍 The Inspiration

Malnutrition and food waste are parallel crises that often exist in the exact same neighborhoods. While local grocery vendors frequently discard surplus nutritious food nearing its expiration, vulnerable populations at nearby community health centers lack reliable access to fresh, healthy dietary options.

Seeing this disconnect locally—where fresh produce from markets might go to waste while nearby hospitals like the Mardan Medical Complex treat nutritional deficits—inspired the creation of NutriConnect. We wanted to build a real-time, geo-aware routing system to connect local supply with immediate medical and nutritional demand, directly supporting UN SDG 3 (Good Health and Well-being).

⚙️ What it does

NutriConnect acts as a real-time dispatch system for food rescue:

• Vendor Dashboard: Allows local vendors to easily log surplus food (proteins, veggies, fruits, grains) with strict expiry validation.
• Geo-Routing to CHCs: Using live browser geolocation, the app queries the OpenStreetMap Overpass API to find the closest hospitals and clinics within a 12km radius.
• SDG 3 Impact Dashboard: A mathematical utility engine dynamically converts kilograms of rescued food into estimated Nutritional Servings, Calories, Protein Grams, and Lives Impacted.
• Actionable Inventory: Food cards feature "Claim" and "Route to CHC" buttons that instantly update the global impact dashboard across all open tabs.

🛠️ How we built it (and the "Naked Repo" challenge)

To comply with the unique rules of this hackathon, we built the entire codebase with zero documentation (no README.md), focusing entirely on clean, semantic, and modular code architecture so the PresentMeApp Repo Analyzer could understand our logic.

• Frontend: Built with React and Next.js, utilizing Tailwind CSS for a clean, healthcare-focused aesthetic (emerald and slate tones).
• Mapping: Integrated Leaflet.js for interactive UI mapping and the OpenStreetMap Overpass API for live healthcare facility data.
• State Management: Engineered custom React hooks that listen to cross-tab storage events, ensuring the live surplus inventory and impact dashboard update instantly without requiring page reloads or a heavy backend database.

🚧 Challenges we ran into

• SSR Hydration Mismatches: We ran into crashes where the server-generated timestamp for food expiry differed from the client's timestamp. We solved this by seeding the default timestamp within a useEffect hook so the server and client render identical initial markup.
• Real-Time Data without a DB: We wanted the app to feel instant. We overcame the lack of a traditional WebSocket backend by utilizing cross-tab local storage events to broadcast updates instantly across the UI.

🚀 Accomplishments that we're proud of

We successfully built a highly functional, geographically dynamic app that directly addresses SDG Targets 3.4 and 3.2. By implementing a Zod-validated webhook that fires alerts when high-value nutritional items (like Protein) are logged, we turned a simple logging tool into a proactive health intervention system.

Built With

• leaflet.js
• next.js
• openstreetmap-api
• react
• tailwind-css