Home Page
Leaderboard
History
Redeemable Rewards
Daily Quests

Mata - Turning Sustainability Into a Game

The Inspiration

The idea for Mata came from a simple observation: people want to help the environment, but intentions rarely translate into action. The issue isn't a lack of concern. Instead, it's that sustainable choices often feel effortful and don't provide immediate, tangible feedback

What if every small action from refilling a water bottle to sorting recycling gave you instant gratification? That's where Mata was born: at the intersection of gamification, AI, and environmental impact.

The name "Mata" comes from the Sanskrit word for "mother," a reminder that these small actions are love letters to Mother Earth.

What We Learned

1. AI IS Probabilistic

We learned that GPT-4 Vision is incredibly powerful but requires careful prompt engineering. Our first attempts at verification were too lenient (giving points for random photos) or too strict (rejecting legitimate actions). We iterated on our prompt design until we reached the sweet spot between automation and accuracy.

2. Mobile Development ≠ Web Development

React Native taught us that mobile users expect:

Instant feedback (we added skeleton loaders and optimistic updates)
Offline resilience (AsyncStorage for auth tokens)
Native feel (Expo Camera instead of web-based alternatives)

3. Firebase Is Versatile

We leveraged Firebase for:

Authentication (passwordless future with email magic links)
Firestore (real-time leaderboard updates)
Future-proofing (ready for Storage and Cloud Functions)

4. CO₂ Math Is Harder Than It Looks

Calculating environmental impact required research into Life Cycle Assessments (LCAs). For example:

Reusable bottle: Saves ~75g CO₂ per use vs. single-use plastic
Bike commute: Saves ~120g CO₂ per km vs. driving
Recycling: Saves ~50g CO₂ per item (aluminum/plastic mix)

We converted these to relatable metrics: "That's like not driving 0.4km in a car!"

$$\text{km}_{\text{saved}} = \frac{\text{CO}_2\text{ grams}}{195 \text{ g/km}}$$

(Average car emissions: 195g CO₂/km)

How We Built It

Step-by-Step Build Process

Phase 1: Foundation

Set up Expo with TypeScript
Implemented navigation (stack + bottom tabs)
Designed green-first UI theme with gradients
Firebase project initialization

Phase 2: Authentication

Firebase Auth integration
Login/signup forms with validation
AsyncStorage for persistent sessions
Error handling for duplicate emails

Phase 3: Camera & AI

This was the hardest part. Initial challenges:

Image size limits: Phone photos were 5-10MB. Solution: Compressed to base64 with quality reduction
API latency: GPT-4 Vision took 3-5 seconds. S Solution: Added loading animations and optimistic UI
Prompt engineering: Balancing false positives/negatives. Solution: Iterative testing with 50+ sample images

// Our final prompt structure
const prompt = `You are an environmental expert. Analyze images and determine if they show eco-friendly actions. Valid eco-actions: reusable bottles/cups, recycling, composting, biking, public transport, reusable bags, solar panels, planting trees, general proper disposal of trash in bins.

Estimate the CO2 savings in grams based on what you see:
- Reusable bottle/cup: 20-100g (vs single-use plastic)
- Recycling items: 50-200g depending on amount
- Biking: 100-500g depending on distance (avg car emits 200g CO2/km)
- Composting: 50-300g depending on amount
- Public transport: 150-400g vs driving
- Reusable bags: 10-50g vs plastic bags
- Proper trash disposal: 10-50g (prevents littering/pollution)
- Other eco-actions: estimate reasonably


Respond ONLY with valid JSON in this exact format:

{
"isEcoFriendly": true,
"actionType": "bottle",
"confidence": 85,
"reasoning": "Shows a reusable water bottle being refilled",
"estimatedCO2Saved": 75,
"impactDescription": "Equal to 0.4km not driven by car"
}
actionType must be one of: "bottle", "recycle", "bike", "compost", "trash", "other"
estimatedCO2Saved should be a realistic number in grams based on the visible action`
}`;

Phase 4: Gamification

Points system for different action types
Quest system to encourage spontaneous actions
Marketplace for redeeming rewards with points
Animated reward popup (confetti coming next!)
Leaderboard with real-time Firestore queries
History timeline with photo previews

Phase 5: Data Persistence

Firestore schema design
Optimistic updates for better UX
Leaderboard caching to reduce reads
Error recovery for failed uploads

Challenges We Faced

1. The "Black Box" Problem

Challenge: GPT-4 Vision sometimes misidentified actions (e.g., calling a green thermos "recycling").

Solution: Added a confidence threshold system:

if (confidence >= 60) {
  // Auto-approve
} else if (confidence >= 40) {
  // Ask user: "Did you mean [action]?"
} else {
  // Reject with reasoning
}

2. Cost Optimization

Challenge: At $0.001/verification, 10,000 users submitting 5 actions/day = $50/day.

Solution:

Switched from gpt-4-vision-preview to gpt-4o-mini (80% cost reduction)
Future: Add local on-device ML model for common actions (bottles, bags)

3. The Cold Start Problem

Challenge: Empty leaderboard isn't motivating.

Solution: Working on implementing achievement badges and seeded test users during demo phase.

4. Image Storage Costs

Challenge: Storing base64 images in Firestore hits document size limits (1MB).

Current: Images stored as data URIs locally

Future: Firebase Storage with CDN for $0.026/GB

What's Next?

Mata is just getting started. Our roadmap includes:

Social Layer: Challenge friends, share achievements to Instagram Stories
Corporate Partnerships: White-label for companies' sustainability programs
Smart Predictions/Notifications: "You usually bike on Mondays—ready to earn 50 points?"
Further Integrations: Connection to fitness trackers for more accurate tracking.