Gaia

Inspiration

"How would your actions change if you knew what their consequences were?"

Gaia was built with that thought in mind, to showcase how small changes in our day-to-day life can compound into a positive difference for the environment and to enlighten individuals of the shadow effects that their actions create which causes harm to the environment.

What it does

Gaia is a mobile-first web application that empowers users to track and reduce their carbon footprint through four key features:

Mirror - A personalized dashboard showcasing user stats including level, XP, carbon savings, and streak days.
Tasks - Daily eco-challenges that users can complete to earn XP and track environmental impact metrics like carbon and plastic saved.
Impact - A 3D visualization of global environmental health metrics.
Trace - A comprehensive carbon calculator that helps users measure emissions from flights, vehicles, shipping, electricity usage, and fuel combustion using the Carbon Interface API.

How we built it

Gaia is built using a modern tech stack:

Frontend:

Next.js - React framework for building the UI with TypeScript
Tailwind CSS - For responsive styling with a custom dark theme
Three.js - For 3D visualizations of the avatar and Earth models
Shadcn/UI - Component library for consistent design elements

Backend:

Express.js - Node.js server framework
MongoDB - Database for storing user data and tasks
Mongoose - ODM for modeling application data
Carbon Interface API - For accurate carbon emissions calculations

We designed the app with a mobile-first approach, creating a tab-based navigation system that makes it easy to switch between features. The application leverages 3D animations to create an engaging and immersive experience, particularly in the Mirror and Impact pages.

Technical challenges

Carbon Calculations: Integrating with the Carbon Interface API required careful mapping of user inputs to API parameters across five different emission types.
3D Rendering on Mobile: Optimizing Three.js performance for mobile devices while maintaining visual quality was challenging.
Data Persistence: Implementing a system to track user progress consistently, including streak maintenance when all tasks are completed.
Real-time Environmental Impact: Converting abstract metrics like "carbon saved" into meaningful visualizations that users can understand.

Accomplishments that we're proud of

Seamless Mobile Experience: We created a responsive, app-like experience in a web application.
Comprehensive Carbon Calculator: Our trace feature supports multiple emission sources with detailed results.
Engaging Gamification: The XP system, levels, and streaks make sustainability fun and habit-forming.
Beautiful Visualizations: The 3D models and animations bring environmental data to life.

What we learned

How to calculate carbon emissions from various sources
Techniques for optimizing 3D rendering in web applications
Effective methods for gamifying sustainability habits
Strategies for translating complex environmental metrics into accessible user experiences
How to create a cohesive design language across a multi-feature application

What's next for Gaia

We have several exciting features planned for future development:

Social Features: Enable users to connect with friends, join teams, and participate in community challenges.
Expanded Impact Data: Include more detailed environmental metrics and personalized recommendations.
Marketplace: Create a platform where users can exchange earned points for eco-friendly products or contribute to environmental projects.
Integrate Carbon Interface's Carbon Ledger API to estimate the carbon emissions of any transaction based on the merchant category code