LunchLoop

• 

  01 — Overview : Track lunch waste, meals served, and waste sources at a glance. All figures shown are fictional sample data.

• 

  02 — Log a lunch audit : Record meals served, discarded food, plate waste, and whether food ran out.

• 

  03 — Experiment : Plan one practical change with your canteen and select baseline and follow-up observations.

• 

  04 — Results : Compare waste per 100 meals before and after a change. The sample’s 30.3% decrease illustrates the workflow, not real impact.

• 

  05 — Mobile overview : View lunch-waste measurements and access audit tools from a phone.

• 

  06 — Mobile results : Review comparison results and underlying measurements in a mobile-friendly layout.

Inspiration

LunchLoop started with a simple question: how can students turn concern about food waste into something they can measure and act on?

School lunch offers a practical starting point. Students and canteen staff can observe what gets discarded, try a small change, and return to the measurements to learn what happened.

LunchLoop supports SDG 12: Responsible Consumption and Production, specifically target 12.3 on reducing food waste.

What it does

LunchLoop connects three steps: measure, try a change, and learn.

Students can:

• Record meals served, discarded unserved food, and plate waste.
• Flag lunches where food ran out.
• Plan one experiment with canteen staff.
• Select baseline and follow-up observations.
• Compare food waste per 100 meals, alongside the original quantities.
• Export CSV reports and download JSON backups.

For example, a canteen could test optional smaller first helpings with seconds available, then compare observations before and after the change.

A clearly labeled fictional sample lets visitors explore the complete workflow. “Start your own” opens a separate workspace for real measurements.

How we built it

The interface uses React and TypeScript, with Vinext and Vite producing a static website. Tailwind CSS, shadcn/Base UI, Lucide icons, and Recharts support the interface and charts. Records are stored locally in the browser, so the prototype works without accounts or a database.

Challenges

Comparing raw waste totals can be misleading when the number of meals changes. LunchLoop calculates waste per 100 meals using total discarded kilograms divided by total meals served.

Another challenge was avoiding misleading success signals. Lower waste could coincide with food running out, so stockouts remain visible. The app also handles missing comparison data and keeps fictional sample records separate from real entries.

What we learned

Useful measurement needs context. A smaller number alone does not tell the whole story: meal counts, food availability, and comparable observations matter.

A focused tool can help students connect an environmental concern to a practical conversation with their canteen.

Accomplishments and next steps

We completed the audit-to-experiment-to-results workflow, tested desktop and mobile interactions, and passed 16 automated tests covering calculations, validation, exports, and storage.

The sample’s 30.3% decrease is fictional, not measured real-world impact. Before-and-after observations also do not prove causation.

The next step is to test the workflow with a student club and canteen, collect feedback, and run a small pilot. The current prototype stores records on one browser and device; shared team workspaces are a possible future improvement.

References

• https://sdgs.un.org/goals/goal12
• https://www.worldwildlife.org/resources/teaching-resources/toolkits/food-waste-warrior-teaching-resources/

Built With

• base-ui
• localstorage
• lucide
• react
• recharts
• shadcn/ui
• tailwind-css
• typescript
• vinext
• vite