3R AI

Inspiration

Every day, people throw away things they didn't have to — not because they don't care about the environment, but because in the moment, they don't know what the better option actually is. Is this recyclable here? Could I reuse it instead? Should I have avoided buying it in the first place? We wanted to remove that guesswork entirely: point your camera at anything, and get an instant, specific answer.

What it does

3R AI lets you snap a photo of any everyday item and get an AI-powered recommendation on whether to Reduce, Reuse, or Recycle it — not a generic recycling chart, but a personalized answer based on the item's actual material, shape, and condition. For each scan, it provides:

• A confident, specific identification of the item
• The single best action, with reasoning
• A full breakdown of all three R's for that item
• Concrete, tailored reuse ideas
• An honest environmental impact comparison
• General local-rules guidance, since recycling rules vary by city and we're upfront that this isn't an official municipal lookup

Beyond individual scans, users can sign in with Google to track their personal impact over time — items reused, recycled, and reduced — take on a 7-day challenge to build the habit, and read through a Learn section on the reasoning behind the 3Rs.

How we built it

• Frontend: Next.js (App Router), React, TypeScript, and Tailwind CSS
• AI vision: Google's Gemini API analyzes the uploaded photo directly — examining shape, material, texture, and color — and returns a structured JSON result using Gemini's responseSchema feature for reliable, strictly-valid output
• Auth & data: Firebase Authentication (Google sign-in) and Firestore for persisting user impact stats and action history across devices
• Deployment: Vercel, connected to GitHub for continuous deployment
• Demo mode: the entire app works with zero setup — no API keys or sign-in required — so anyone can try the full experience instantly, with realistic mock data standing in for the AI when no key is configured

Challenges we ran into

• Getting truly personalized AI results: early prompts caused the model to default to generic guesses (e.g., calling everything a "plastic water bottle"). We rewrote the prompt to force the model to reason about shape, material, and texture before answering, and added structured output constraints to guarantee valid, specific responses instead of vague ones.
• API key format changes: newer Google AI Studio keys required a different authentication method (an HTTP header instead of a URL parameter) than what most documentation assumed.
• Model deprecation churn: Google retired multiple Gemini model versions mid-build, requiring us to adapt quickly each time.
• Hydration mismatches in production: a date-dependent value computed during render caused the live Vercel deployment to intermittently disagree with itself between server and client, which we traced down to a subtle React hydration bug and fixed by deferring the calculation to run only after mount.
• Environment variable pitfalls: diagnosing why the live deployment silently fell back to demo mode taught us to carefully verify that environment variables actually contain values (not just correct names) and that a fresh deployment runs after they're set.

What we learned

Building and deploying a full AI-powered product end-to-end — not just prototyping locally — surfaces a completely different set of problems than local development: environment configuration, deployment timing, model availability, and production-only bugs like hydration mismatches. We came away with a much deeper appreciation for how much invisible infrastructure work sits underneath a simple "take a photo, get an answer" user experience.

What's next for 3R AI

• Persisting scan history with photos for a visual timeline of impact
• Expanding local rules guidance with real municipal data partnerships
• Community challenges and leaderboards
• Barcode scanning for packaged goods to pull in verified material data

Built With

• firebase
• firebase-authentication
• firestore
• google-gemini-api
• next.js
• react
• tailwind-css
• typescript