Play, Plan, and Prove Impact
Problem:
Planning and expanding green hydrogen infrastructure is complex. Urban planners, energy companies, and policymakers often lack interactive tools that combine mapping, AI insights, and impact analysis for optimal decision-making.
Our Solution:
Green Hydrogen InfraVision is an interactive, gamified, AI-powered platform for mapping, optimizing, and analyzing green hydrogen infrastructure. Users can explore existing and planned hydrogen assets, experiment with site placement, and visualize sustainability impacts in real-time.
- OpenStreetMap integration with multiple layers:
- Street Map, Satellite, Terrain, Dark Mode
- Existing H₂ Plants
- Renewable Sources
- Demand Centers
- Pipeline Network
- Regulatory Zones
- AI Suggested Sites
- Drag & drop site markers
- Real-time Site Assessment & Suitability Analysis
- Weather & Air Quality Data - Real-time environmental conditions
- AI-suggested site highlights
- Left panel with AI suggestion plans
- Click to jump to suggested location
- Scoring for site suitability and sustainability impact
- Powered by Gemini API
- Provides insights, recommendations, and interactive help
- Plants Dashboard with metrics
- Suitability & impact analysis charts
- CO₂ saved, industries supported, renewable utilization
- Export images & share button for quick access
- Drag anywhere on the map
- Access Site Assessment details: terrain, infrastructure proximity, land availability
- Check Impact Metrics: CO₂ saved, industries supported, renewable utilization
- Weather Analysis: Real-time temperature, air quality, and pollution data
- Overall Score: provides a single metric summarizing site viability and planning potential
- Real-time Weather Conditions - Temperature, humidity, wind speed, pressure
- Air Quality Monitoring - AQI levels, PM2.5, PM10, and pollutant concentrations
- Environmental Impact Assessment - Weather data integration for site planning
- Global Coverage - Works worldwide with OpenWeatherMap API
- Cached Performance - 1-hour cache for optimal API usage
- Dark/Light mode toggle
- Authentication & user management via Supabase
- Help form for support
- About page explaining the project
- Open the map → explore hydrogen assets & renewable hubs.
- See AI-suggested sites → top recommendations glow.
- Drag & drop your own plant → get suitability score & analysis.
- Check Weather tab → view real-time environmental conditions & air quality.
- Open the dashboard → view CO₂ savings, industries supported, renewables usage.
- Export & share → quick access for presentations and reports.
- Urban & Regional Planners 🏙
- Energy Companies ⚡
- Project Developers 🏗
- Policy Analysts 📑
- Capital Efficiency → directs investments to high-impact projects
- Avoids Redundancy → prevents overlapping infrastructure
- Supports Net-Zero Goals → measurable CO₂ savings
- Drives Coordination → enables ecosystem-wide growth
- React + TypeScript
- TailwindCSS
- Leaflet.js Maps
- Node.js + Express
- PostgreSQL
- Supabase
- Gemini API
- OpenWeatherMap API - Weather & Air Quality Data
- Supabase Auth
- Leaflet.js Maps
- OpenStreetMap (OSM)
Create a .env file in the root directory with the following variables:
# Database
DATABASE_URL=your_postgresql_connection_string
# Supabase
VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
# AI Services
OPENAI_API_KEY=your_openai_api_key
GEMINI_API_KEY=your_gemini_api_key
# Weather API
OPENWEATHER_API_KEY=your_openweathermap_api_key- Supabase: For authentication and database
- OpenAI/Gemini: For AI assistant functionality
- OpenWeatherMap: For weather and air quality data
📖 Detailed Setup Guide: See weather-api-setup.md for comprehensive weather API configuration.
- Dashboard → Main map, AI suggestions, plants dashboard, drag & drop, site assessment
- About → Project description, team, impact
- Help → Support form
- Expand dataset → integrate real-world renewable & hydrogen infrastructure data
- Enhance AI → geospatial ML models for smarter site selection
- Advanced gamification → scoring leaderboard
- Public API → enable external tools & researchers
Built during a hackathon, InfraVision merges energy planning, AI, and gamification into an engaging, decision-support platform. It is designed to be more than a prototype—a vision for the future hydrogen economy.
MIT License – free to use, modify, and distribute.
Thank you for exploring Green Hydrogen InfraVision. Together, let's accelerate the green hydrogen revolution!