Climate change affects 8 billion people, yet most feel overwhelmed and don't know where to start. During DevFest preparation, I realized three critical gaps:

 - Information Gap: People don't understand the local impact of climate 

change - Action Gap: Even aware individuals lack personalized, actionable solutions - Motivation Gap: Individual actions feel insignificant without visible collective impact

I built Climate Action AI to bridge these gaps using Google Gemini's intelligence to make climate action accessible, personalized, and impactful for everyoneβ€”regardless of language, location, or lifestyle.



πŸ› οΈ What it doe

Climate Action AI is an intelligent platform that empowers individuals to combat climate change through:

πŸ€– AI Climate Assistant (Google Gemini 2.0 Flash)

 - Answers climate questions in English, Hindi, and Hinglish
 - Provides location-aware recommendations
 - Offers 3 actionable steps you can take TODAY
 - Maintains conversation context for follow-ups

πŸ“Š Real-Time Climate Dashboard

 - Global temperature anomaly tracker
 - COβ‚‚ concentration visualization (420+ ppm)
 - Arctic ice decline simulation
 - Sea level rise monitoring
 - Extreme weather event tracker

🌍 Interactive 3D Earth Experience

 - Beautiful Three.js rotating globe
 - Floating AI assistant - Earth speaks about climate struggles
 - Creates emotional connection through storytelling

🎯 Personalized 30-Day Action Plans

 - Customized based on location, lifestyle, and concerns
 - Daily challenges with carbon reduction estimates
 - Cost savings calculations
 - Tree equivalent conversions
 - Community progress tracking

πŸ“ˆ Impact Visualization

 - Personal carbon footprint tracker
 - Community leaderboard (gamification)
 - Before/after predictions
 - Measurable COβ‚‚ reduction metrics


πŸ”¨ How we built it

Frontend Stack:

 - HTML5/CSS3 - Modern, responsive UI with gradient animations
 - JavaScript ES6+ - Interactive features and dynamic content
 - Three.js - 3D Earth visualization with realistic textures
 - Chart.js - Beautiful climate data visualizations
 - CSS Grid/Flexbox - Mobile-first responsive design

Backend Stack:

 - Node.js - Runtime environment
 - Express.js - RESTful API server
 - Google Generative AI SDK - Gemini integration
 - Node-Cache - Response caching for performance
 - Axios - HTTP client for API calls

AI Integration:

 - Google Gemini 2.0 Flash - Primary AI model
 - Custom prompt engineering for climate expertise
 - Multi-language detection algorithm
 - Context-aware conversation handling
 - Fallback system for API reliability

Development Process:

 - Research Phase: Studied IPCC reports, UN climate data, and user needs
 - Design Phase: Created wireframes focusing on accessibility
 - AI Integration: Implemented Gemini with custom climate prompts
 - Visualization: Built interactive charts and 3D Earth
 - Testing: Tested with English, Hindi, Hinglish queries
 - Deployment: Deployed to VPS with Nginx reverse proxy


πŸ’ͺ Challenges we ran into

  1. Gemini API Model Compatibility
 - Challenge: Multiple model versions (gemini-pro, gemini-1.5-flash) 

returned 404 errors - Solution: Implemented fallback system with gemini-2.0-flash-exp and robust error handling

  1. Multi-Language Support
 - Challenge: Automatically detecting and responding in user's language 

(English/Hindi/Hinglish) - Solution: Created intelligent prompt engineering that instructs Gemini to match user's language

  1. Real-Time Data Integration
 - Challenge: Integrating live climate data from multiple sources
 - Solution: Built simulation layer with realistic data patterns; ready for
API integration
  1. Performance Optimization
 - Challenge: Gemini API calls were slow for repeated queries
 - Solution: Implemented node-cache with 1-hour TTL for frequently asked 

questions

  1. Mobile Responsiveness
 - Challenge: Complex charts and 3D Earth broke on mobile devices
 - Solution: Implemented responsive CSS Grid, touch controls, and adaptive 

chart sizing

  1. Context Preservation
 - Challenge: Maintaining conversation context across multiple AI queries
 - Solution: Implemented session-based conversation history (ready for user
authentication)


πŸ† Accomplishments that we're proud of

βœ… Successfully integrated Google Gemini 2.0 Flash with custom climate expertise prompts βœ… Multi-language AI support - Seamless English/Hindi/Hinglish detection βœ… Beautiful 3D Earth visualization using Three.js with realistic climate overlays βœ… Interactive climate data dashboard with real-time animations βœ… Personalized action plan generator with measurable impact metrics βœ… Fully responsive design - Works perfectly on mobile, tablet, and desktop βœ… Deployed live at https://www.surajrana.dev/climateai/ ( https://www.surajrana.dev/climateai/) βœ… Open-source on GitHub with comprehensive documentation βœ… Zero dependencies on paid services - Completely free to use and deploy

Most Proud Moment: When the AI assistant correctly answered a Hinglish query about Delhi pollution with localized, actionable advice! πŸŽ‰



πŸ“š What we learned

Technical Skills:

 - Advanced Google Gemini API integration and prompt engineering
 - Building intelligent fallback systems for API reliability
 - Three.js for 3D web visualizations
 - Real-time data visualization with Chart.js
 - Node.js performance optimization with caching
 - Responsive design for complex interactive elements

AI/ML Insights:

 - How to craft effective prompts for domain-specific knowledge
 - Multi-language handling in AI applications
 - Context management in conversational AI
 - Balancing response quality with API costs

Climate Science:

 - IPCC climate data interpretation
 - Carbon footprint calculation methodologies
 - Regional climate impact variations
 - Effective climate communication strategies

Product Design:

 - Making complex scientific data accessible
 - Gamification for behavior change
 - Emotional storytelling in tech products
 - Balancing urgency with hope in climate messaging


πŸš€ What's next for Climate Action AI

Phase 1: Enhanced AI (Next 3 Months)

 - [ ]  Voice Interaction - Speak to Gemini for accessibility
 - [ ]  Image Analysis - Upload receipts for automatic carbon tracking
 - [ ]  Multi-modal Responses - Text + images + charts in AI responses
 - [ ]  More Languages - Spanish, French, Arabic support

Phase 2: Community Features (3-6 Months)

 - [ ]  User Authentication - Firebase Auth for progress tracking
 - [ ]  Social Leaderboards - City-wise and global rankings
 - [ ]  Team Challenges - Group climate competitions
 - [ ]  Achievement Badges - Gamification rewards
 - [ ]  Social Sharing - Share impact on social media

Phase 3: Advanced Analytics (6-9 Months)

 - [ ]  ML Carbon Prediction - Vertex AI for footprint forecasting
 - [ ]  Climate Risk Assessment - Location-based risk analysis
 - [ ]  Personalized Impact Reports - Monthly PDF reports
 - [ ]  Integration APIs - Connect with smart home devices

Phase 4: Scale & Impact (9-12 Months)

 - [ ]  Mobile Apps - React Native iOS/Android apps
 - [ ]  Chrome Extension - Browser-based carbon tracking
 - [ ]  Enterprise Partnerships - Corporate sustainability programs
 - [ ]  NGO Collaborations - Partner with climate organizations
 - [ ]  API Marketplace - Third-party integrations
 - [ ]  Offline Mode - PWA for areas with poor connectivity

Dream Goals:

 - Reach 1 million users globally
 - Collectively reduce 10,000 tons of COβ‚‚
 - Partner with 100 schools for climate education
 - Win Google AI Impact Challenge funding
Share this project:

Updates