ClimaSphere AI

Inspiration I was inspired by the critical intersection of personal health and environmental well-being. I realized that traditional climate education often feels disconnected from daily life. By creating an interactive platform that links individual choices—like nutrition and exercise—to broader environmental impacts, I aimed to make learning about climate action and health more personal, engaging, and motivating.

What it does ClimaSphere AI is an accessible, AI-powered educational web app. It combines gamification, interactive storytelling, and personalized tutoring to teach valuable lessons about health, wellness, and environmental sustainability. The core features include:

Interactive Storytelling: Users progress through narrative-driven stories (e.g., "The Green Revolution," "The Air We Breathe") by making choices that influence the plot and teach key concepts.

AI-Powered Tutoring: An integrated AI tutor provides on-demand, personalized help with questions about health, climate, and game concepts.

Accessibility: The app is designed for everyone, with full keyboard navigation, screen reader support, and voice interaction.

Progress Tracking: The app tracks user progress through stories and achievements.

How I built it I built ClimaSphere AI as a single-page application using React and TypeScript to create a modular and type-safe codebase. I used Tailwind CSS for a responsive and consistent design system, allowing me to quickly style components.

For the AI functionality, I used the Groq API to power the AI tutor. I chose Groq for its speed and efficiency, which allows for near-instantaneous responses in the chat interface. I configured the AI model with a specific system prompt to ensure it maintains an educational and encouraging persona, connecting personal health topics with planetary well-being.

The app's navigation is handled with a state-based system, allowing a seamless user experience between different views (e.g., Dashboard, AI Tutor, Story World).

Challenges I ran into One of the main challenges was integrating the Web Speech API with TypeScript. The standard window object in TypeScript doesn't include definitions for webkitSpeechRecognition or SpeechRecognition, which caused compilation errors. I solved this by creating a custom declaration file (global.d.ts) to extend the Window interface and define the necessary types for the SpeechRecognitionEvent. This was a valuable lesson in managing browser-specific APIs in a type-safe environment.

Another challenge was securely managing the Groq API key in the front end. While using a .env file is standard for development, I recognized the security risk of exposing the key on the client side in a production environment. I noted that for a professional deployment, the API calls should be routed through a secure backend proxy.

Accomplishments that I'm proud of I am most proud of successfully integrating multiple complex technologies—the Web Speech API, React state management, and the Groq API—to create a cohesive and functional application. I'm also proud of my commitment to accessibility, which ensures the tool is usable by a wide range of people, regardless of ability. Seeing the seamless voice interaction and the smooth navigation was a major milestone for me.

What I learned I learned the importance of robust type-checking with TypeScript and how to handle non-standard browser APIs safely. I also gained practical experience with a modern build toolchain (Vite) and a powerful API for fast AI inference (Groq). This project taught me that complex systems can be built from simple, well-integrated components.

What's next for ClimaSphere AI My next steps for ClimaSphere AI include:

Expanding the Content Library: Adding more interactive stories and game levels to cover a wider range of health and climate topics.

Enhanced Gamification: Integrating a more robust achievement system and progress tracking to better motivate users.

Backend Integration: Building a secure backend to manage API keys, user profiles, and game progress, allowing for cross-device synchronization and improved security.

Built With

• css
• groq
• javascript
• netlify
• react
• tailwind
• typescript
• vite