EcoSync, a carbon footprint tracker

This is a submission for Weekend Challenge: Earth Day Edition

What I Built

I created EcoSync, a carbon footprint tracker that uses Google Gemini AI to analyze daily activities and provide personalized eco-tips.

Code

In this project, I combined the power of the MERN stack with Google Gemini AI to create a seamless experience. Here's how the core components work:

1. AI Analysis with Gemini Pro

I implemented a backend route in Node.js that communicates with the Gemini API. To ensure stability, I used a direct REST integration with the Google AI beta v1 endpoint.
The Logic
The backend receives a raw string from the user (e.g., "I drove 5km today"), wraps it in a structured prompt, and asks Gemini to return a strict JSON response. This allows the frontend to display the carbon value and eco-tips easily.

2. Secure Auth with Auth0

To protect user data and provide a personalized dashboard, I integrated Auth0. It handles the entire authentication lifecycle (Login, Logout, and Session Management), so I could focus on building the core features.

3. Frontend with Ant Design

For the UI, I chose Ant Design. Its component-driven approach allowed me to build a professional-looking dashboard with real-time feedback and loading states during AI processing.

Project Links

• GitHub Repository: Ecosync

How I Built It

Building EcoSync was about creating a bridge between complex environmental data and a simple user experience. Here is the step-by-step logic behind the development:

1. Development Environment "GitHub Codespaces" ​To ensure a seamless and efficient development experience, I built EcoSync entirely using GitHub Codespaces. This cloud-hosted environment was a game-changer for this challenge for several reasons:

• Zero-Config Setup: I didn't have to spend time configuring local Node.js or React environments. With a pre-configured container, I could jump straight into coding the Gemini and Auth0 integrations.
  ​

• Portability & Speed: Since the environment is hosted in the cloud, I could test my backend API and frontend transitions instantly without draining my local machine's resources.
  ​

• Consistency: Using Codespaces ensured that my development environment perfectly matched the production-ready structure, making it easier to push clean code to my repository.

​2. Architecting the "Brain" (Gemini AI Integration)
​The core challenge was converting vague user inputs (like "I used the AC for 4 hours") into structured data.

​The Choice: I chose Google Gemini Pro because of its superior natural language understanding.
​The Strategy: Instead of just asking for a summary, I engineered a specific "JSON-only" prompt. This ensures the AI acts as a data processor, returning estimated carbon values and actionable tips that my React frontend can immediately display without manual calculation.

​3. Establishing a Secure Foundation (Auth0)
​Security and personalization were high priorities.

​The Choice: I integrated Auth0 for the identity layer.
​The Strategy: By using the Auth0 React SDK, I was able to wrap my entire application in a secure provider. This ensures that only authenticated users can access the analysis dashboard, protecting the API from bot abuse and setting the stage for future features like personalized history tracking.

​4. Designing for Impact (React & Ant Design)
​Environmental apps need to feel intuitive and clean to encourage daily use.

​The Choice: I used React (Vite) for its speed and Ant Design for the UI components.
​The Strategy: Ant Design’s professional component library (like Cards, Inputs, and Spinners) allowed me to build a responsive, dashboard-style interface very quickly. I focused on a "Green & Clean" color palette to stay consistent with the Earth Day theme.

​5. Solving Technical Hurdles
​The biggest technical hurdle was a versioning mismatch with the AI SDK.

​The Solution: I pivoted from using the high-level library to a direct REST API implementation using Axios. By targeting the v1 stable endpoint of the Google Generative Language API, I achieved 100% stability and learned a lot about how AI endpoints handle headers and payloads.

Prize Categories

The entire project was developed in the cloud using GitHub Codespaces, making it a truly modern, cloud-native submission.
​I am submitting my project for the following categories:
​1. Best Use of Auth0 for Agents
​EcoSync is more than just a landing page; it's a secure platform. I integrated Auth0 to provide a robust authentication layer. By securing the AI analysis dashboard, I ensured that every interaction is tied to a verified user, preventing API abuse and creating a foundation for personalized carbon-tracking history. My implementation demonstrates how Auth0 can be the security backbone for AI-driven applications.
​2. Best Use of Gemini
​I utilized Google Gemini Pro to solve a real-world problem: making environmental data accessible. Instead of complex forms, users can talk to EcoSync in natural language. I implemented a direct REST API integration and sophisticated prompt engineering to ensure the AI returns structured JSON, making the app both smart and reliable.