CarbonLedger

CarbonLedger is an AI-driven sustainability bank. Chat with your personal AI banker or scan receipts to track, manage, and reduce your daily carbon footprint.

Comment

Here is a highly persuasive, detailed, and robust Devpost submission designed specifically to win over the judges for the "Build the Future with AI" hackathon.

Just copy and paste this directly into your Devpost submission!

Inspiration

Climate change is the defining crisis of our generation, yet tracking personal carbon footprints remains incredibly tedious. Existing solutions rely on overwhelming forms, complex drop-down menus, and manual calculations that cause users to abandon their sustainability goals within days. We realized that to create genuine real-world impact, we didn't just need a carbon calculator—we needed a complete paradigm shift in user experience.

Inspired by the sleekness of modern fintech apps and the conversational power of Generative AI, we built CarbonLedger: an immersive, AI-powered carbon bank. We wanted to make tracking emissions as effortless as sending a text message or snapping a photo, wrapped in a visually stunning, premium UI that users actually want to engage with every day.

What it does

CarbonLedger treats your carbon footprint like a bank account, giving you a "Monthly Carbon Budget" to manage. It completely removes the friction of manual data entry through two core AI features:

  • Greenie (The AI Carbon Banker): Users simply chat with the AI in natural language (e.g., "I drove 15 miles in a gas car and ate a vegan lunch"). The AI extracts the context, calculates the CO2 emissions using real-world metrics, and securely logs the transaction to their ledger.
  • Smart Receipt Scanner: Users can upload a photo of a grocery or shopping receipt. Our Computer Vision integration scans the items, calculates the carbon cost of each product, and instantly logs them to the dashboard.

Beyond functionality, CarbonLedger delivers a cinematic web experience. From the Apple-style scroll animations on the landing page to the interactive 3D WebGL models (Earth and Robot avatars), the platform turns sustainability tracking into an engaging, gamified, and luxurious experience.

How we built it

We utilized a robust, modern full-stack architecture designed for scalability and performance:

  • Frontend (Web): Built with React and Tailwind CSS, delivering a highly responsive, glassmorphism-inspired dark mode UI. We heavily utilized Framer Motion for micro-animations and smooth page transitions.
  • 3D & Graphics: We integrated Spline (WebGL) to render interactive, high-performance 3D scenes directly in the browser (the interactive Earth and the AI Robot avatar), utilizing React Suspense and lazy loading to ensure zero impact on initial page load times. The cinematic scroll sequence utilizes custom aspect-ratio math to remain perfectly responsive across all devices.
  • Backend (API): A scalable Node.js/Express server hosted on Microsoft Azure, handling complex business logic and API routing.
  • AI & Machine Learning: We leveraged Firebase Genkit and Large Language Models to power "Greenie," orchestrating function-calling (tools) so the AI can securely read and write data to the user's database based on natural language inputs. We also utilized AI Vision models for the intelligent receipt scanning feature.
  • Database & Auth: We used Firebase Authentication for secure user login and Firestore as our NoSQL database to securely track user streaks, budgets, and historical carbon transactions in real-time.
  • CI/CD: Automated deployment pipelines via GitHub Actions, instantly building and pushing our frontend updates to Firebase Hosting.

Challenges we ran into

One of our biggest hurdles was seamlessly integrating heavy 3D WebGL scenes without destroying the mobile experience or causing massive page load delays. We had to implement custom CSS clipping masking, React lazy() imports, and asynchronous Suspense fallbacks to ensure the 3D models only rendered exactly when needed, keeping the site lightning-fast.

Additionally, parsing natural language into structured database transactions was complex. We had to carefully engineer system prompts and use strict tool-calling (function calling) with our LLM to ensure the AI didn't just act as a chatbot, but rather as a reliable database agent that calculated math accurately and triggered the correct API endpoints.

Accomplishments that we're proud of

  • The UI/UX Experience: We are incredibly proud of the front-end engineering. The cinematic scroll sequence and 3D Spline integration look and feel like a product built by a massive tech company, not a hackathon project built in a few days.
  • Frictionless Logging: We successfully eliminated the "form-fatigue" that plagues sustainability apps. The fact that a user can upload a crumpled receipt and watch the AI extract, calculate, and log their carbon data automatically is a massive technical win.
  • Production-Ready Architecture: Successfully orchestrating Firebase, Azure, Genkit, and GitHub Actions means this isn't just a prototype—it is a secure, scalable platform ready for real users.

What we learned

  • Advanced Frontend Optimization: We learned how to manage heavy WebGL canvas elements in React, mastering lazy loading and overflow: hidden masking techniques to bypass Shadow DOM limitations.
  • AI Tool Orchestration: We deepened our understanding of how to constrain Large Language Models using strict schemas and function calling, turning unpredictable text generators into reliable, mathematical database agents.

What's next for CarbonLedger

We plan to introduce Plaid API integration, allowing users to link their actual credit cards so CarbonLedger can automatically calculate emissions from their real-world purchases in the background—no chatting or scanning required. We also plan to build out the "Carbon Offset" marketplace, allowing users to buy verified green credits to instantly balance their budget when they go over their monthly limit.

Share this project:

Updates