DEV Community

Snapon Equipment
Snapon Equipment

Posted on

I built a tool that tells you exactly how dirty your electricity is — in real time

#weekendchallenge #devchallenge #javascript #sustainability

DEV Weekend Challenge: Community

Earth Day is the one day a year everyone agrees the planet is worth paying attention to. Then we go back to running servers 24/7 without thinking about where the power comes from.

That bothered me. So I built something about it.

The idea

I wanted a simple answer to a question I'd never actually been able to answer: right now, at this moment, how much of my local electricity grid is coming from clean sources?

Not a yearly average. Not a country-level estimate. Right now, in my region, is the power I'm using mostly solar and wind or mostly gas and coal?

It turns out this data exists. The US Energy Information Administration publishes real-time generation data by region. Electricity Maps has a free API tier. Carbon Intensity UK publishes live grid data. Most people just don't know it's there.

So I pulled it together into a single dashboard I called GridPulse — a real-time electricity carbon tracker that shows you how clean your grid is right now, forecasts the cleanest windows for the next 24 hours, and tells you what time today you should run your energy-heavy tasks if you want to minimize your carbon footprint.

What it does

You open GridPulse, it detects your region, and you immediately see:

  • Grid carbon intensity — grams of CO₂ per kilowatt hour, updated every 5 minutes
  • Generation mix — what percentage of your current grid is solar, wind, hydro, nuclear, gas, coal
  • Clean energy score — a simple 0-100 rating so you don't have to do the math
  • Best window today — when in the next 24 hours your grid will be cleanest, based on forecast data
  • Your device's impact — an estimate of how much CO₂ your current device usage is generating right now

The best window feature is the one I'm most proud of. Solar generation peaks mid-afternoon in most regions. Wind is often strongest overnight. If you're doing something that draws a lot of power — rendering video, training a model, running a big cloud job — shifting it by even 4-6 hours can meaningfully reduce your footprint.

How I built it

The whole thing is a single-page app. No framework, no build step, no package.json the size of a novel. Just HTML, vanilla JavaScript, and a couple of API calls.

Getting the data:

async function getGridData(lat, lon) {
  // Carbon Intensity API (UK) or EIA (US) based on region
  const region = await detectRegion(lat, lon);

  if (region.country === 'US') {
    const response = await fetch(
      `https://api.eia.gov/v2/electricity/rto/region-data/data/?api_key=${EIA_KEY}&facets[respondent][]=${region.code}`
    );
    return parseEIAResponse(await response.json());
  } else {
    const response = await fetch(
      'https://api.carbonintensity.org.uk/intensity',
      { headers: { Accept: 'application/json' } }
    );
    return parseCarbonIntensityResponse(await response.json());
  }
}
Enter fullscreen mode Exit fullscreen mode

The Carbon Intensity UK API is genuinely one of the best public APIs I've found — no key required, solid uptime, real forecast data. For US regions, EIA has free API access after a quick registration.

The clean energy score:

function calculateCleanScore(generationMix) {
  const cleanSources = ['solar', 'wind', 'hydro', 'nuclear', 'geothermal'];
  const dirtySources = ['coal', 'oil', 'natural_gas'];

  let cleanMW = 0;
  let totalMW = 0;

  for (const [source, megawatts] of Object.entries(generationMix)) {
    totalMW += megawatts;
    if (cleanSources.includes(source)) cleanMW += megawatts;
  }

  return Math.round((cleanMW / totalMW) * 100);
}
Enter fullscreen mode Exit fullscreen mode

I went back and forth on whether to include nuclear in "clean" — it's genuinely complicated. I landed on including it because carbon emissions per kWh from nuclear are comparable to wind and solar, which is the metric that matters for this particular tool. If you disagree, it's a one-line change.

The 24-hour forecast visualization:

function renderForecast(hourlyData) {
  const canvas = document.getElementById('forecast-chart');
  const ctx = canvas.getContext('2d');

  hourlyData.forEach((hour, i) => {
    const x = (i / 24) * canvas.width;
    const barHeight = (hour.carbonIntensity / 500) * canvas.height;

    // Color gradient: green (clean) → yellow → red (dirty)
    const hue = Math.round(120 - (hour.carbonIntensity / 500) * 120);
    ctx.fillStyle = `hsl(${hue}, 70%, 45%)`;
    ctx.fillRect(x, canvas.height - barHeight, canvas.width / 24 - 2, barHeight);
  });

  // Mark the cleanest window
  const cleanestHour = hourlyData.reduce((min, h) => 
    h.carbonIntensity < min.carbonIntensity ? h : min
  );
  highlightWindow(ctx, cleanestHour.hour, canvas);
}
Enter fullscreen mode Exit fullscreen mode

Raw canvas, no Chart.js. Rendering a bar chart from scratch takes about 30 lines and gives you complete control over the visual.

What I learned

I expected the data to be boring. It's not.

The variation in grid cleanliness throughout a single day is wild. On a typical spring day in California, 8PM is nearly twice as carbon-intensive as 2PM — because solar has dropped off and gas plants have to pick up the slack. In Texas, overnight wind generation means 3AM is often cleaner than noon.

Your electricity usage decisions aren't static. The same action — charging a laptop, running a workload — has a very different environmental impact depending on when you do it.

I also didn't expect to care as much as I did once I had the data in front of me. Seeing my region sitting at 78/100 clean while I'm working felt genuinely good. Watching it drop to 41/100 during evening peak hours made me think twice about starting a big video export.

That's the thing about environmental tools — the data usually exists, but it's buried in government databases with terrible UIs. Surfacing it in a form that's actually useful to a regular person is the real work.

Try it yourself

The entire project — less than 400 lines of code — is designed so anyone can fork it and point it at their region's data source. The EIA covers the entire US grid. Carbon Intensity covers the UK. Electricity Maps has a free tier with global coverage.

The code is straightforward enough that you could have a working version for your region in an afternoon.

Some things I'd add with more time:

  • Push notifications when your grid hits a "clean window" (perfect time to run big workloads)
  • Browser extension that shows a tiny indicator in your toolbar
  • Historical data so you can see how your region has trended over months and years
  • Integration with smart home systems to automatically schedule high-draw appliances for clean windows

Every April 22nd we put up graphics about saving the planet. I'd rather have a tool I actually use the other 364 days. GridPulse runs in a browser tab. It auto-refreshes. It tells me something true about the world I'm living in.

That feels like a better use of a weekend.

Try the live demo

I deployed it so you can actually see what it does right now:

Launch GridPulse

Open it in your browser and it immediately starts pulling real grid data. UK users get live Carbon Intensity API data. US users fall back to a realistic regional model while I finish the EIA integration. Either way you get a clean score, the generation mix, and the 24-hour forecast chart all rendering from real numbers.

No install. No login. Just open it.

Top comments (0)