Eon - Earth Saga

• 

  Main Page(Hero Section)

• 

  Regions

• 

  Ai Narrative by Claude

• 

  Environmental stats

Inspiration I built EON to make environmental data more engaging by turning it into stories. Our goal was to turn complex climate information into clear, human-centered narratives that make global conditions more relatable and actionable.

What it does EON provides a 3D globe showing 222+ regions with near real-time environmental data. Clicking any region triggers Claude AI to analyze the inputs, generate a narrative, and read it aloud with multiple TTS voices. Users can bookmark locations, search regions, and export data.

How I built it Frontend: React, TypeScript, Vite, Tailwind CSS, Three.js/React Globe GL. Claude Sonnet 4.5 powers narratives. Fish Audio TTS adds multi-voice audio. Backend: Express serverless on Vercel. Data from Open-Meteo and OpenWeatherMap APIs.

Challenges I ran into Resolved Vercel deployment issues from mixed config (builds vs functions). Fixed voice rotation by removing browser TTS fallback. Managed Claude API token limits and tuned prompts for consistent outputs.

Accomplishments that I'm proud of Complete AI-to-audio pipeline: Claude Sonnet 4.5 analysis, multi-voice TTS, and a responsive 3D globe with 222+ regions. Shipped end-to-end from data ingestion to narrative to speech.

What I learned Handling environment variables across Vercel and local, streamlining API prompts for Claude, and optimizing TTS with clean error handling and a good UX.

What's next for EON - Earth Saga Add historical comparisons, personalized recommendations, Add music based on the region's Environmental data

Built With

• anthropic-claude-api
• express.js
• fish-audio-tts
• node.js
• open-meteo-api
• openweathermap-api
• react
• react-globe-gl
• tailwind-css
• three.js
• typescript
• vercel
• vite