Inspiration

🌿 HappyGreen — Turning Recycling into an Adventure

🌿 HappyGreen — Turning Recycling into an Adventure

Inspiration

In Peru, less than 2% of solid waste is properly recycled. We saw kids and adults ignoring recycling not because they don't care, but because it's boring and confusing. We asked: what if recycling felt like playing DragonCity?

That question became HappyGreen.

What We Learned

• Computer vision can identify waste types in real conditions
• Gamification dramatically increases habit formation
• Connecting collectors and citizens digitally solves a real logistics problem in Latin American cities
• Building for low-tech users requires radical simplicity

How We Built It

Stack: React + TypeScript + Tailwind CSS + Supabase + Phaser.js + Gemini AI Vision API

Key modules:

• 🤖 AI Scanner — Gemini 2.0 Flash identifies waste from photos and gives recycling instructions + videos
• 🗺️ GPS Map — Real Leaflet map showing collectors, collection points and routes in real time
• 🐉 EcoDragons — Scan waste → get a dragon themed after that material → battle other users
• 🌍 MyWorld — Island-building game powered by recycling points (like DragonCity but eco-themed)
• 🔄 HappySwap — Marketplace to exchange unused items
• 📊 Habit AI — Personalized recycling recommendations based on user behavior patterns

Challenges We Faced

Biggest challenge: Making the AI reliably identify waste in real-world conditions (bad lighting, mixed objects, blurry photos). We solved this with a smart fallback database that always returns a useful result.

Second challenge: Building a game that feels professional without a game studio. We used Phaser.js + Canvas-generated assets to create fluid 60fps animations.

Third challenge: Connecting 5 different user types (Citizens, Collectors, Schools, Municipalities, Companies) in one cohesive experience — each with their own dashboard and permissions.

Impact

"Every scan teaches. Every point motivates. Every dragon represents real waste recycled."

HappyGreen covers all 9 challenges of QuipuSoft 2026: automatic waste identification, educational AI agent, gamification, local data integration, habit personalization, environmental impact measurement, inclusive design, robust computer vision, and community scalability.

Built for Peru. Designed for the world. 🌎

Built With

• canvas-api
• claude-code
• framer-motion
• gemini-2.0-flash-api-(vision-ai)
• leaflet.js
• lovable
• node.js
• openstreetmap
• phaser.js
• postgresql
• react
• supabase
• tailwind-css
• typescript
• vite