DEV Community: George Angel

CarbonTrace

George Angel — Mon, 20 Apr 2026 05:55:40 +0000

This is a submission for Weekend Challenge: Earth Day Edition

"my inbox already knows everything I do, so I built an agent to read it"

Project Overview

CarbonTrace is an AI-powered web application that automatically tracks a user's personal carbon footprint by scanning their Gmail inbox. Instead of asking users to manually log activities, the app connects to Gmail via OAuth, reads receipts and booking confirmations, and uses Google Gemini to classify each activity and estimate its CO₂ emissions. The result is a personalised carbon dashboard with actionable nudges.

What is a carbon footprint?

Every action you take that consumes energy or resources releases greenhouse gases into the atmosphere. Driving to work, ordering food, buying a new phone, flying to another city. All of these activities burn fuel or require manufacturing processes that emit gases, primarily carbon dioxide (CO₂) and methane (CH₄).
A carbon footprint is the total sum of all those emissions. That is everything you personally released into the atmosphere over a period of time, measured in kilograms or tonnes of CO₂ equivalent (CO₂e).
The "equivalent" part matters because methane is far more potent than CO₂, so scientists convert all greenhouse gases into a single CO₂ unit for comparison.

How it connects to CarbonTrace

The Metric Concept The definition says carbon footprints measure the impact of individuals on climate change. That is exactly the problem CarbonTrace solves at the personal level. For every activity, the energy is usually generated by burning fossil fuels, which releases Carbon Dioxide into the atmosphere. The "KG CO₂" number is an estimation of exactly how heavy those invisible greenhouse gas emissions are for that specific receipt.

For example, a 15-mile Uber ride might produce roughly 5.2 kg CO₂.
A domestic flight from NY to LA might produce 400.5 kg CO₂.

How CarbonTrace App Calculates It (The AI Magic) Instead of forcing users to navigate complex scientific emission tables, your backend relies entirely on Google Gemini 2.5 Flash. When your API pulls the receipt text from a user's Gmail, it sends it to Gemini with this internal prompt.

CarbonTrace simply takes the abstract definition: "total greenhouse gases from human activities", and makes it concrete and personal.

The average Nigerian emits roughly 0.5 tonnes of CO₂ per year. The global average is 4.7 tonnes. A single Lagos–London flight emits approximately 0.5 tonnes per passenger, wiping out an entire year of average Nigerian emissions in one trip.
Most people have no idea their flight just did that. CarbonTrace makes that invisible number visible.

Because you cannot reduce what you cannot measure

Demo

Live App:

How it Works:

Visit the live URL
Click "Get started with Google"
Sign in and grant Gmail read access
Click "Scan my emails"
Watch your carbon footprint appear in seconds

Demo Video: (embed your Loom link here)
In the video I walk through the full user journey — from signing in with Google, through the Auth0 consent screen, to the dashboard populating with real CO₂ data classified by Gemini. The entire flow from login to result takes under 30 seconds.

Code

Github link:
The repository is fully public. Here is a quick map of the most important files:

src/
  app/
    page.tsx              → Landing page with login button
    dashboard/
      page.tsx            → Server component, pre-fetches Supabase data
      DashboardClient.tsx → Client component, handles scan button and live results
    api/
      scan/
        route.ts          → Core agent: Gmail fetch, Gemini parse,
Supabase save
  lib/
    auth0.ts              → Auth0 client initialisation
    supabase.ts           → Supabase client initialisation
middleware.ts             → Auth0 v4 middleware, mounts /auth/*routes automatically

The most interesting file is src/app/api/scan/route.ts — that is where the entire agent loop lives. Everything else is just plumbing to support it.

How I Built It

I built CarbonTrace in 48 hours for the Earth Day 2026 hackathon. Here is the technical story.

The stack
The app is built on Next.js 15 App Router with TypeScript and Tailwind CSS. I used pnpm as the package manager and deployed to Vercel. The entire project: frontend, backend API routes, and middleware, all in a single Next.js repository.

Auth0 for Agent: The hardest part
The most technically interesting decision was using Auth0 for Agents to handle the Gmail OAuth consent flow. This is not regular login. it is agentic authentication, where the user grants the app permission to act on their behalf and read their Gmail even when they are not actively present.
Auth0 v4 completely changed the SDK architecture from v3. Routes are no longer manually registered. The middleware mounts /auth/login, /auth/logout, and /auth/callback automatically. The Auth0Client is initialised once in src/lib/auth0.ts and shared across all server components and API routes:

import { Auth0Client } from '@auth0/nextjs-auth0/server';
export const auth0 = new Auth0Client();

This single line handles the entire session lifecycle, which includes token storage, rotation, and expiry, without any additional configuration.

Google Gemini: the brain
The intelligence layer is a single POST route at /api/scan. Instead of asking Gemini to return free-form text and parsing it with regex, I used Gemini's structured output feature with a responseSchema. This forces Gemini to return exactly the JSON shape I need, every time, with zero parsing failures:

const model = genAI.getGenerativeModel({
  model: 'gemini-2.5-flash',
  generationConfig: {
    responseMimeType: 'application/json',
    responseSchema: scanSchema,
  },
});

Gemini reads each email and classifies it into one of three categories: Travel, Food, or Shopping. It estimates the CO₂ in kilograms using its knowledge of emissions factors. It also generates a personalised nudge based on the user's biggest emission source. The whole thing runs in under 3 seconds.

Supabase: persistence
Every activity Gemini detects gets saved as an individual row in a carbon_logs table in Supabase Postgres. Row Level Security is enabled so users can only ever query their own data, even if there is a bug in the API, one user can never see another user's logs.
When you open the dashboard, the server component pre-fetches your existing logs from Supabase and passes them as initialData to the client component. This means the dashboard loads with your historical data immediately, no scan required on every visit.

The biggest challenge

Auth0 v4 was a significant hurdle. The SDK is a complete rewrite from v3: the UserProvider, handleAuth, and /api/auth/[auth0] patterns that every tutorial on the internet uses are all gone. I spent roughly 2 hours debugging import errors before finding the v4 migration guide and understanding that middleware now handles everything automatically.

The lesson:

always check the major version before installing a package.

What I would build next

Bank transaction scanning via Open Banking APIs for a more complete footprint picture
Team and company accounts so organisations can track collective emissions
Integration with verified offset registries like Gold Standard and Verra so users can take direct action from the dashboard

Prize Categories

I am submitting to these categories:

Best Use of Auth0 for Agents
Best Use of Google Gemini

I would love to get a feedback, if you happen to actually read to the end of this blog.Thanks for participating!

HTML Templating in NodeJs

George Angel — Tue, 28 Feb 2023 14:19:43 +0000

HTML templating is a technique that allows us to create a base HTML structure and use placeholders to dynamically generate content based on data retrieved from our JSON file or database.

Let's consider a hypothetical instance where our website consists of numerous product cards, each containing specific product details that are retrieved from the JSON file.

Now, if we were to add or remove any products from our JSON file, how would we update the corresponding cards on the front-end dynamically?

Considering our content-based data is stored in a JSON file, we can proceed with creating reusable templates from our existing HTML code.

Step 1: Building the templates
As a developer, you're probably familiar with the concept of serving dynamic web content. One way to achieve this is by using templates.

We would create two HTML templates, one for the product overview page and one for the individual product cards.

The first template template-card.html is used as a blueprint for the individual product cards, and the second template-overview.html is used as a blueprint for the overview page. These templates contain placeholders that will be replaced with actual content when the page is requested by a user.

Ensure that your placeholder does not contain any symbols that are part of the HTML code. A commonly used syntax for placeholders is{%PLACEHOLDER_NAME%}.

Here is template-card.html our first template used as a blueprint to create as many cards as needed dynamically.

<figure class="card">
    <div class="card__emoji">{%IMAGE%}{%IMAGE%}</div>
    <div class="card__title-box">
      <h2 class="card__title">{%PRODUCTNAME%}</h2>
    </div>

    <div class="card__details">
      <div class="card__detail-box">
          <h6 class="card__detail card__detail 
               {%NOT_ORGANIC%}"> Organic!</h6>
      </div>

      <div class="card__detail-box">
        <h6 class="card__detail">{%QUANTITY%} per 📦</h6>
      </div>

      <div class="card__detail-box">
        <h6 class="card__detail card__detail--price"> 
            {%PRICE%}€</h6>
      </div>
    </div>

    <a class="card__link" href="/product?id={%ID%}">
      <span>Detail <i class="emoji-right">👉</i></span>
    </a>
  </figure>

As this card will serve as a template, the information contained within it should be replaced with placeholders as well. Once the placeholders have been added, the card will resemble the following:

<figure class="card">
    <div class="card__emoji">🥦🥦</div>
    <div class="card__title-box">
      <h2 class="card__title">Apollo Broccoli</h2>
    </div>

    <div class="card__details">
      <div class="card__detail-box">
          <h6 class="card__detail card__detail--organic">Organic!</h6>
      </div>

      <div class="card__detail-box">
        <h6 class="card__detail">3🥦 per 📦</h6>
      </div>

      <div class="card__detail-box">
        <h6 class="card__detail card__detail- 
              price">5.50€</h6>
      </div>
    </div>

    <a class="card__link" href="/product?id=">
      <span>Detail <i class="emoji-right">👉</i></span>
    </a>
  </figure>

The anchor tag contains an href link that includes a placeholder for an ID. This indicates that each card or product in our JSON file has a distinct ID. These IDs are unique and will be utilized in identifying each product during routing.

Also, when we need to style elements based on their category, CSS classes and IDs can be substituted with placeholders as is done in the image examples. This approach can prove especially useful in such cases.

<body>
    <div class="container">
      <h1>🌽 Node Farm 🥦</h1>

      <div class="cards-container">
        {%PRODUCT_CARDS%}
      </div>
    </div>
  </body>

In this example, we have substituted our template card with a placeholder. It's important to keep in mind that we will generate multiple cards dynamically using this single template card.

Note: This is our second template card, template-overview.html

Step 2: Filling the templates
Here comes the fun part, filling our templates by replacing our placeholders with actual content.

When a user requests a URL, the code reads the relevant template file (either template-overview.html or template-card.html) synchronously, fills it dynamically with content from a JSON file, and sends back the relevant content as a response to the user.

This is achieved through the use of the replaceTemplate function, which replaces the placeholders in the template with actual content.

// SECOND STEP:
const replaceTemplate = (temp, product) => {
    let output = temp.replace(/{%PRODUCTNAME%}/g, product.productName);
    output = output.replace(/{%IMAGE%}/g, product.image);
    output = output.replace(/{%PRICE%}/g, product.price);
    output = output.replace(/{%ID%}/g, product.id); 
     // /g is a regex global flag
    return output;
}

// FIRST STEP:
const tempOverview = fs.readFileSync(`${__dirname}/templates/template-overview.html`, 'utf-8');
const tempCard = fs.readFileSync(`${__dirname}/templates/template-card.html`, 'utf-8');
const data = fs.readFileSync(`${__dirname}/dev-data/data.json`, 'utf-8');
const dataObj = JSON.parse(data);

// THIRD STEP:
const server = http.createServer((req, res) => {
    const pathName = req.url;

    //FOURTH STEP:
    //Here is the Overview
    if(pathName === '/' || pathName === '/overview') {
        res.writeHead(200, {'Content-type': 'text/html'});
        const cardsHtml = dataObj.map(el => replaceTemplate(tempCard, el)).join('');
        const output = tempOverview.replace('{%PRODUCT_CARDS%', cardsHtml);

        res.end(output);

        //API
    } else if(pathName === '/api') {
        res.writeHead(200, {'Content-type': 'application/json'});
        res.end(data);
    // Not Found
    } else {
            res.writeHead(404, {
            'Content-type': 'text/html', //standard header
            'my-header': 'hello-world'
        });
        res.end('<h1>This page cannot be found.</h1>');
    }
});

server.listen(8000, '127.0.0.1', () => {
    console.log('Listening to requests on port 8000');
});
    res.writeHead(404, {
            'Content-type': 'text/html', //standard header
            'my-header': 'hello-world'
        });
        res.end('<h1>This page cannot be found.</h1>');
    }
});

server.listen(8000, '127.0.0.1', () => {
    console.log('Listening to requests on port 8000');
});

Don't worry, we will take a closer look at the big block of code up there and figure out what it does in simpler terms.

First, read the two HTML template files and the product data that is stored in a JSON file
Second, define a function that replaces placeholders in the templates with product-specific data. Here, our function is named replaceTemplate
Third, listen to incoming HTTP requests and check the pathname of the request URL
Fourth, If the pathname is /or /overview, generate HTML code for each product card by replacing placeholders in the tempCard template using the replaceTemplatefunction and the product data from the JSON file.
The resulting HTML for each card is then concatenated to create the cardsHtmlstring. The tempOverview template is then modified to include the cardsHtml string and the resulting HTML code is sent back as the response.
Also, if the pathname is /api it sends back the product data in JSON format as the response
Finally, if the pathname is anything else, sends back a 404 error message.

Wow, that code did look like a lot, but if we look closely and take it one step at a time, it's not that complicated.

All it's doing is replacing some special words with real information and sending it back to the website so people can see it!

Benefits of HTML templating
HTML templating offers several benefits that make it a popular choice among web developers:

By utilizing HTML templating, we separate content from the presentation allowing developers to generate reusable templates that can handle varying amounts of data from multiple sources, and maintain multiple copies of similar code.
HTML templates provide a standard structure for presenting data, improving user experience and easy navigation on the site.
The flexibility of templating makes it easier to modify the underlying data. This saves time and effort, as developers don't need to change the HTML code manually.
Since HTML templates are reusable, they are easier to maintain and update. Changes to the underlying data can be made without modifying the template code, which reduces the likelihood of errors.
HTML templating can handle large amounts of data without compromising performance. This makes it an ideal choice for websites with a significant amount of dynamic content.

In summary, HTML templating is an efficient, consistent, flexible, and scalable technique that simplifies the development and maintenance of dynamic web content.

By separating content from presentation, HTML templating enables developers to create reusable templates that can handle varying amounts of data, without having to hard-code the content into each page.

Bonus Section:
There are several other templating engines available in Node.js, such as EJS, Pug (formerly known as Jade), Handlebars, and Mustache, among others.

To use a templating engine in Node.js, you'll need to install it via npm and then require it in your code. These engines provide a way to generate HTML by inserting data into placeholders within the template.

You've reached the end of the article! 🎉 Hope you enjoyed this post and learned something new 💡.
Thanks for sticking around.