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:
- 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.
Top comments (1)
Nice one 👏🏻☺️