Green Mason

Inspiration

It's Valentine's Day weekend at GMU, and someone on our team tosses a coffee cup into the wrong bin. That tiny moment sparked a bigger question, how many students actually know where stuff goes? Recycling, composting, e-waste... it's confusing.

We wanted to make sustainability feel less like a chore and more like a game. Since it's Valentine's Day, we framed it as falling in love with a greener campus, Love Points instead of boring scores, pledges as love letters to the planet, a dating-app style quiz for your eco-personality.

We also noticed GMU has amazing resources like PatriotAI that most students don't know about. So we built something that connects students to what's already there.

What it does

GreenMason is an AI-powered campus sustainability hub with five features:

📸 Snap & Sort -- Gemini Vision AI classifies waste items from photos into 6 categories with GMU-specific disposal tips
💬 EcoChat -- Sustainability chatbot that intelligently routes campus queries to PatriotAI agents (NourishNet, PatriotPal, CourseMate)
🏆 Green Score -- Earn Love Points heartsuit for every action, climb the leaderboard, unlock badges like "Compost Cupid" and "Sustainability Soulmate"
💌 Love Pledges -- Write Valentine's-style sustainability commitments on a community wall
💕 EcoMatch Quiz -- Tinder-style swipe quiz to discover your sustainability personality

Plus daily tips narrated by ElevenLabs voice AI and our mascot Sprout 🌱, a kawaii leaf with a pink heart.

How we built it

GreenMason = Next.js + FastAPI + Gemini AI + MongoDB Atlas + PatriotAI + ElevenLabs

Backend: FastAPI on Python, deployed on Render. Gemini Vision handles waste classification, Gemini Chat powers EcoChat with GMU-specific system prompts. PatriotAI routing is done through prompt engineering, Gemini appends tags like [ROUTE:NourishNet] that our backend parses into frontend routing cards.

Database: MongoDB Atlas (free M0 cluster) stores users, scores, leaderboard, and pledges. ElevenLabs streams voice audio through our backend to keep API keys secure.

Frontend: Next.js 16 + Tailwind CSS + shadcn/ui, deployed on Vercel. Mobile-first design with a custom Canvas API pipeline that converts any image format (including iPhone HEIC) to compressed JPEG before sending to Gemini.

Challenges we ran into

Gemini rate limits nearly stopped us. The google-generativeai library routes through the free-tier endpoint regardless of API key. We had to pivot to the Vertex AI SDK with proper GCP billing, a non-trivial debugging session at 2 AM.

Cross-browser image rendering was brutal. Chrome showed broken images while Safari worked fine. We cycled through base64 data URLs, CSS backgrounds, and blob URLs before solving it with URL.createObjectURL() and React refs.

MasonNet blocks MongoDB. Campus WiFi blocks port 27017, so our database wouldn't connect. We ran everything through a mobile hotspot, took us way too long to figure out.

SSR hydration mismatches - Math.random() in our floating hearts animation generated different values on server vs client, breaking React's hydration and cascading into broken page state.

Accomplishments that we're proud of

Snap & Sort accurately classifies waste items with campus-specific tips every time
PatriotAI routing feels seamless -- ask about the food pantry and it hands you to NourishNet with context
Valentine's theme is structural, not decorative -- woven into scoring, pledges, quiz, achievements, and mascot
Fully deployed and accessible on any device via public URL within the hackathon timeframe
Sprout is adorable and drew people to our project before we even explained it

What we learned

Vertex AI vs free Gemini API are very different -- the SDK switch taught us GCP auth and billing the hard way
Prompt engineering is a feature -- response quality changed dramatically with GMU-specific context in system prompts
Mobile-first design exposed issues we'd never catch on laptops
Deploying full-stack (frontend + backend) with env vars, CORS, and service accounts is a skill in itself

What's next for Green Mason

Love Points to Dining Dollars: Partner with GMU Dining Services to let students redeem heartsuit Love Points for Dining Dollars or Mason Money -- real incentives to build sustainable habits
Real PatriotAI API integration -- embed agent responses directly in EcoChat instead of redirecting
Campus map -- show nearest recycling bins, composting stations, and e-waste drop-offs based on your location
Social features -- friend challenges, residence hall competitions, team leaderboards
Multi-campus expansion -- swap out GMU context for any university; the architecture is already campus-agnostic

MLH Prize Categories

We are submitting to the following MLH sponsor categories:

✨ Best Use of Gemini API

Google Gemini powers two core features of GreenMason:

Gemini Vision -- Snap & Sort uses gemini-2.0-flash-001 via Vertex AI to classify waste items from photos into 6 categories with campus-specific disposal instructions
Gemini Chat -- EcoChat uses Gemini with custom system prompts containing GMU sustainability context and built-in PatriotAI routing logic that detects campus-specific queries and routes users to the appropriate agent

🔊 Best Use of ElevenLabs

ElevenLabs TTS is integrated for voice accessibility and engagement:

"Hear My Score" -- Narrates personalized Green Score summaries using the eleven_multilingual_v2 model (e.g., "Hey Mohit! Your Green Score is 85 points and you're ranked number 3...")
Daily Voice Tips -- Sustainability tips delivered as natural-sounding audio, making the app more accessible and engaging

🍃 Best Use of MongoDB Atlas

MongoDB Atlas (M0 free cluster) is our entire data backbone:

Users collection -- Profiles, display names, and total scores
Scores collection -- Every action logged with timestamps, points, and descriptions
Pledges collection -- Community Love Pledge wall with likes
Leaderboard -- Real-time campus-wide ranking aggregated from scores
Global Stats -- Live counters for total users, items sorted, pledges made, and points earned across the platform