Eco-Lens

Turn trash into impact — AI-powered recycling with rewards and achievements!

Comment

EcoLens — Project Story

Inspiration

We built EcoLens for the real, frustrating gap between awareness and action: people want to recycle but often don’t know what goes where or how much their small actions matter. The idea came from seeing countless images of recyclables tossed into trash and realizing a tiny bit of real-time feedback + gamification could turn a one-off effort into a habit. EcoLens was also built as our submission to Hack for Humanity, aiming to make sustainability approachable and measurable.

What it does

EcoLens lets users point their phone or upload a photo of waste and get:

  • an AI classification of the material (plastic, paper, glass, metal, organic, or other),
  • an estimated environmental impact (CO₂ offset, water saved, energy saved),
  • instant points, progress toward badges, and leaderboard rank to encourage ongoing behavior.

Identify → quantify → reward. The system converts confidence + estimated weight into points and impact so users see real, cumulative results.

How we built it

Frontend: Next.js + React + Tailwind — responsive UI, camera & upload flows, dashboard, achievements.
Backend: Server-Less(within Next.js app) — auth, predict proxy, achievements engine, leaderboard.
ML: Hosted model endpoint (Hugging Face Space) for image predictions; results proxied and normalized server-side.
DB: MongoDB stores users, scans, achievements.
Email / Auth: OTP via SMTP for verification, JWTs in HTTP-only cookies, token rotation in /api/user.

Data flow:

  1. Client sends image → POST /api/predict
  2. Backend proxies to ML endpoint → receives labels + confidences
  3. Backend maps label → category, computes points & impact, updates user & achievements, logs scan
  4. Frontend updates dashboard and shows badge/leaderboard changes

Example impact formula: $$\text{CO}{2_kg} = \frac{\text{estimated_weight_g}}{1000} \times EF{\text{kg/tonne}}$$

Code example:

await fetch('/api/predict', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ dataUrl: imageDataUrl }),
});

Challenges we ran into

  • Label ambiguity: model sometimes returns unknown; we don’t log low-confidence scans.
  • Weight estimation: image → grams approximation needed balancing.
  • Auth/cookie consistency: mismatched cookie names caused intermittent login issues.
  • Transactional user creation + email failover: careful rollback logic required.
  • UX friction: camera permission and cropping flows on mobile needed multiple iterations.

Accomplishments we’re proud of

  • Judge-ready dashboard showing lifetime CO₂, water, energy savings.
  • Achievements engine with material-specific badges & global leaderboard.
  • Robust predict → persist → notify pipeline.
  • Clean, responsive UI with clear CTAs and contextual tips.

What we learned

  • Integrating ML is more than a model: UX, error handling, conservative math matter.
  • Small details (cookies, token rotation, OTP edge cases) break apps more than mis-tuned models.
  • Gamification + feedback motivates behavior change.
  • Transactions & cleanup patterns in MongoDB make auth flow reliable.

What’s next for EcoLens

  • Improve weight estimation (user-assisted calibration).
  • Expand model categories & local recycling rules.
  • Polish mobile UX (PWA, animations).
  • Integrate local cleanup events, friend challenges, and point-to-reward systems.
  • Open API for aggregated impact data for researchers.

Built With

Share this project:

Updates