Footprint Forward

• 

  Thumbnail

• 

  System Architecture

Inspiration

I was inspired by the difficulty people face in translating environmental concern into action. Traditional carbon trackers are cumbersome, leading to high user drop-off. I saw the potential of Large Language Models (LLMs) to make logging effortless, provide hyper-local suggestions, and drive real behavioral change.

Building the Project

I built the project using a modern, serverless stack. Next.js and TypeScript powered the responsive frontend. The core intelligence relies on Genkit orchestrating Google's Gemini models to:

1. Calculate Carbon: Extract key data from natural language (e.g., "I drove 15 miles") and apply $\text{CO}_2$ coefficients for precise results.
2. Personalize Planning: Analyze Firestore activity data to craft a structured, actionable 4-week Eco-Plan.

Firebase handled all data and secure user authentication.

Key Learnings

1. Natural Language Wins: Gemini drastically lowered the data entry barrier by turning unstructured text into clean, quantifiable metrics.
2. Context is Critical: I learned that true personalization requires combining activity history with external data, like location and local transit schedules, for truly helpful suggestions.
3. Prompt Engineering for Structure: I learned to use strict prompt engineering with Gemini to ensure complex outputs, like the 4-week plan, were reliable and easily structured for the frontend.

Challenges

1. Accuracy and Consistency: I had to isolate the final $\text{CO}_2$ calculation to a reliable lookup to mitigate the risk of the AI "hallucinating" coefficients.
2. Performance: Complex AI reasoning slowed initial response times. I improved performance by implementing asynchronous processing for heavier tasks like the Eco-Planner.
3. Gamification Management: Ensuring real-time badge achievements and notifications required careful, synchronized state management tied to Firestore listeners.

Built With

• firebase
• firebase-authentication
• firestore
• framer
• genkit
• google's-gemini-models
• google-maps-platform
• recharts
• shadcn/ui
• tailwind-css