codiallo

EcoBuddy is an AI-powered mobile app that transforms climate learning into real-world action through gamification, AR, and global accessibility

Comment

About EcoBuddy - AI-Powered Climate Education App

🌍 What Inspired This Project

Climate change is one of the most pressing challenges of our time, yet traditional environmental education often fails to engage younger generations effectively. I was inspired by the disconnect between scientific knowledge about climate change and actionable behaviors in daily life.

The inspiration came from observing how:

  • Young people are passionate about environmental issues but lack practical tools to translate concern into action
  • Gamification successfully motivates behavior change in other domains (fitness apps, language learning)
  • AI technology has become sophisticated enough to create personalized, interactive experiences
  • AR/ML capabilities on smartphones are underutilized for environmental education

I wanted to bridge this gap by creating an app that transforms abstract environmental concepts into engaging, personal experiences through the power of AI, gamification, and augmented reality.

🎯 What I Learned

This project was an incredible learning journey across multiple domains:

Technical Skills

  • Flutter Development: Mastered cross-platform mobile development with advanced state management using Riverpod
  • Spring Boot Backend: Built robust RESTful APIs with JWT authentication, JPA/Hibernate ORM, and MySQL integration
  • AI Integration: Learned to integrate Google Gemini API for natural language generation and interactive storytelling
  • Machine Learning: Implemented TensorFlow Lite and Google ML Kit for real-time object recognition
  • Augmented Reality: Explored AR capabilities for environmental impact visualization
  • API Design: Created comprehensive RESTful APIs following best practices

Architecture & Design Patterns

  • Clean Architecture: Implemented proper separation of concerns with domain, data, and presentation layers
  • Repository Pattern: Abstracted data sources for better testability and maintainability
  • Provider Pattern: Used Riverpod for efficient state management across the app
  • Service-Oriented Architecture: Designed modular backend services for scalability

Environmental Science Integration

  • Carbon Footprint Calculation: Researched methodologies for calculating environmental impact of everyday objects
  • Recycling Systems: Learned about global recycling standards and local variations
  • Behavioral Psychology: Studied gamification principles for environmental behavior change

User Experience Design

  • Internationalization: Implemented multi-language support (English/French) using Flutter's i18n framework
  • Accessibility: Designed inclusive interfaces considering diverse user needs
  • Onboarding Flows: Created intuitive user journeys for complex features

🏗️ How I Built This Project

Architecture Overview

The project follows a microservices-inspired architecture with clear separation between frontend and backend:

┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   Flutter App   │────│  Spring Boot    │────│   External      │
│   (Frontend)    │    │   (Backend)     │    │   Services      │
└─────────────────┘    └─────────────────┘    └─────────────────┘
         │                       │                       │
    ┌────▼────┐             ┌────▼────┐             ┌────▼────┐
    │   UI    │             │   API   │             │ Gemini  │
    │ Screens │             │ Layer   │             │   AI    │
    └─────────┘             └─────────┘             └─────────┘
         │                       │                       │
    ┌────▼────┐             ┌────▼────┐             ┌────▼────┐
    │ State   │             │Business │             │ TF Lite │
    │  Mgmt   │             │  Logic  │             │   ML    │
    └─────────┘             └─────────┘             └─────────┘
         │                       │
    ┌────▼────┐             ┌────▼────┐
    │ Local   │             │ MySQL   │
    │Storage  │             │Database │
    └─────────┘             └─────────┘

Frontend Development (Flutter)

Core Technologies: Flutter 3.8+, Dart, Riverpod, Camera, ML Kit

  1. Feature-Based Architecture:

    lib/
├── features/
│   ├── auth/           # Authentication flows
│   ├── dashboard/      # Main dashboard
│   ├── narration/      # AI story generation
│   ├── scanner/        # AR object scanning
│   ├── challenges/     # Gamification system
│   └── leaderboard/    # Social features
├── shared/             # Common services & providers
└── core/               # Constants & utilities

  2. State Management Strategy:

    • Riverpod for dependency injection and state management
    • Provider pattern for feature-specific state
    • Repository pattern for data abstraction

  3. Key Implementation Challenges:

    • Real-time Camera Processing: Implemented efficient image capture and ML processing pipeline
    • Offline Capability: Added intelligent caching for scan results and story content
    • Performance Optimization: Used lazy loading and widget optimization for smooth UX

Backend Development (Spring Boot)

Core Technologies: Spring Boot 3.5, Spring Security, JPA/Hibernate, MySQL, JWT

  1. API Design:

    @RestController
public class NarrativeController {
   @PostMapping("/api/narration/start")
   public ResponseEntity<StoryResponse> startStory(@RequestBody StoryRequest request);

   @PostMapping("/api/narration/choice")
   public ResponseEntity<StoryResponse> makeChoice(@RequestBody ChoiceRequest request);
}

  2. Database Schema Design:

    • Users: Authentication and profile management
    • Stories: AI-generated narrative sessions
    • Challenges: Gamification tracking
    • ScanResults: Object recognition history
    • Leaderboards: Social competition data

  3. Security Implementation:

    • JWT-based authentication with refresh tokens
    • Role-based access control (RBAC)
    • Input validation and sanitization
    • CORS configuration for mobile app integration

AI Integration Strategy

  1. Google Gemini API Integration:

    @Service
public class GeminiService {
   public String generateInteractiveStory(String scenario, String userChoice) {
       // Custom prompt engineering for environmental education
       String prompt = buildEcoEducationPrompt(scenario, userChoice);
       return geminiClient.generateContent(prompt);
   }
}

  2. Machine Learning Pipeline:

    • TensorFlow Lite: On-device object classification for real-time performance
    • Google ML Kit: Fallback for complex object recognition
    • Custom Models: Trained specific models for environmental objects

Database Design & Optimization

Mathematical Modeling for Impact Calculation:

Carbon footprint calculation formula: $$\text{Total Impact} = \sum_{i=1}^{n} (\text{Object}_i \times \text{Weight}_i \times \text{Factor}_i)$$

Where:

  • $\text{Object}_i$ = individual scanned object
  • $\text{Weight}_i$ = usage frequency multiplier
  • $\text{Factor}_i$ = environmental impact coefficient

Performance Optimizations:

  • Implemented database indexing on frequently queried fields
  • Used connection pooling for improved database performance
  • Added caching layer for static environmental data

🚧 Challenges I Faced

1. Technical Challenges

Real-time Object Recognition Performance:

  • Problem: Initial ML models were too slow for real-time scanning
  • Solution: Implemented hybrid approach using TensorFlow Lite for speed with Google ML Kit fallback for accuracy
  • Result: Achieved <200ms classification time with 85%+ accuracy

Cross-platform Compatibility:

  • Problem: AR features behaved differently on iOS vs Android
  • Solution: Created platform-specific implementations with unified interfaces
  • Code Example: dart class PlatformScanner { static ScannerService create() { if (Platform.isIOS) { return IOSScannerService(); } else { return AndroidScannerService(); } } }

AI Response Consistency:

  • Problem: Gemini API sometimes generated inconsistent story formats
  • Solution: Implemented robust prompt engineering with structured output validation
  • Template Example: Generate an environmental education story with exactly this JSON structure: { "story": "narrative text", "choices": ["option1", "option2", "option3"], "environmental_impact": number, "educational_tip": "learning point" }

2. User Experience Challenges

Onboarding Complexity:

  • Problem: Users found the app's multiple features overwhelming
  • Solution: Created progressive disclosure with guided tutorials for each feature
  • Implementation: Step-by-step onboarding with feature unlocking based on usage

Internationalization Edge Cases:

  • Problem: Environmental terms varied significantly between languages
  • Solution: Built context-aware translation system with regional environmental data
  • Result: Proper localization for French and English markets

3. Data & Algorithm Challenges

Environmental Impact Data Accuracy:

  • Problem: Limited reliable data sources for carbon footprint calculations
  • Solution:
    • Collaborated with environmental science resources
    • Implemented confidence intervals for impact estimates
    • Added data source transparency for users

Gamification Balance:

  • Problem: Ensuring rewards motivated real behavior change without being superficial
  • Solution:
    • Researched behavioral economics principles
    • Implemented variable reward schedules
    • Added community verification for challenge completion

4. Integration Challenges

API Rate Limiting:

  • Problem: Gemini API free tier had strict rate limits
  • Solution: Implemented intelligent request batching and local caching

  • Code:

    class RateLimitedGeminiService {
 final Queue<ApiRequest> _requestQueue = Queue();
 Timer? _rateLimitTimer;

 Future<String> generateContent(String prompt) async {
   if (_requestQueue.length > MAX_QUEUE_SIZE) {
     return await _getCachedResponse(prompt);
   }
   // Rate limiting logic...
 }
}

🎮 Key Features Implemented

1. AI-Powered Interactive Storytelling

  • Personalized Narratives: Generated custom environmental scenarios based on user profile
  • Choice Consequences: Each decision shows real environmental impact with scientific backing
  • Progressive Learning: Stories adapt difficulty based on user's environmental knowledge level

2. Advanced AR Object Recognition

  • Multi-Modal Recognition: Combined visual recognition with contextual understanding
  • Environmental Database: Comprehensive database of 500+ everyday objects with impact data
  • Real-time Feedback: Instant environmental assessment with actionable alternatives

3. Social Gamification System

  • Challenge Framework: Weekly/monthly challenges with community verification
  • Dynamic Leaderboards: Regional and global rankings with privacy controls
  • Achievement System: 50+ badges for various environmental actions

4. Comprehensive Analytics Dashboard

  • Personal Impact Tracking: Visualized carbon footprint reduction over time
  • Community Impact: Collective environmental impact of user base
  • Data Export: Detailed reports for personal environmental auditing

🌟 Technical Achievements

Performance Metrics

  • App Startup Time: <2 seconds on mid-range devices
  • Object Recognition Speed: <200ms average classification time
  • API Response Time: <500ms for most backend calls
  • Offline Capability: 80% of features work without internet connection

Scalability Features

  • Microservices Architecture: Backend designed for horizontal scaling
  • CDN Integration: Optimized asset delivery for global users
  • Database Optimization: Indexed queries with <50ms response times
  • Caching Strategy: Multi-layer caching reducing API calls by 60%

Security Implementation

  • Zero-Trust Architecture: Every API call validated and authenticated
  • Data Privacy: GDPR-compliant data handling with user consent management
  • Secure Storage: Encrypted local storage for sensitive user data

🚀 Impact & Results

Educational Effectiveness

The app successfully transforms abstract environmental concepts into tangible, actionable knowledge through:

  • Real-world Application: Users learn by scanning objects they encounter daily
  • Immediate Feedback: Instant impact assessment creates strong learning associations
  • Gamified Learning: Point systems and challenges maintain long-term engagement

Technical Innovation

  • Hybrid AI Approach: Combined on-device ML with cloud AI for optimal performance
  • Sustainable Development: App promotes environmental awareness through technology
  • Open Architecture: Designed for future expansion and community contributions

User Experience Success

  • Intuitive Design: Complex environmental data presented in accessible formats
  • Multi-generational Appeal: Interface designed for users aged 12-65
  • Cultural Adaptation: Localized content for different environmental contexts

This project represents the intersection of artificial intelligence, environmental science, and mobile technology to create meaningful behavior change. It demonstrates how modern technology can be leveraged not just for entertainment or productivity, but for addressing critical global challenges through education and community engagement.

The journey of building EcoBuddy has been both technically challenging and deeply rewarding, pushing the boundaries of what's possible when combining cutting-edge technology with environmental consciousness. Every line of code written contributes to a larger mission: empowering individuals to make informed environmental decisions through engaging, AI-powered experiences.

Built With

Share this project:

Updates