I Built a Live UK Electricity Price Dashboard. Here's What Went Wrong (and Right)

Subhashree Ayyappan — Tue, 02 Jun 2026 23:16:15 +0000

I'm on Agile Octopus, where electricity prices change every 30 minutes. Every evening I'd open the Octopus app trying to figure out when to run the dishwasher. The app shows you the rates, but not "the cheapest 2-hour window tonight", which is the thing you actually need to know when you're standing in the kitchen at 8pm.

So I built ukelectricityprices.co.uk. A dashboard that shows live half-hourly prices, finds the cheapest slots for appliances, and compares tariffs across all 14 UK regions. Next.js 16, TypeScript, Tailwind, deployed on Vercel. No database. It pulls live from the Octopus API on each request.

This is the story of building it, including the bugs that cost me the most time.

"The API is free? Seriously?"

The Octopus Energy API is public, well-documented, and doesn't need an API key for tariff data. You just hit https://api.octopus.energy/v1/products/ and you're off. I had half-hourly Agile rates rendering in a table within an hour of starting.

Then two weeks later, the dashboard silently broke. No errors. Just empty data.

Turns out Octopus periodically releases new Agile product versions. The product code I'd hardcoded (AGILE-FLEX-22-11-25) was no longer active. The API didn't return an error. It just returned nothing.

The fix: query the products endpoint first, find the currently active Agile product, then use that code for the rates call. One extra API call, but I'll never have to manually update a config again.

Lesson: if an API has versioned product codes, don't hardcode them.

The Bug That Only Appeared at 12:40am

Everything worked perfectly for weeks. Then one night I noticed the dashboard was showing yesterday's prices at 00:40.

The Octopus API returns timestamps in UTC. "Today" on the dashboard means today in London time. Most of the year that's fine. But during British Summer Time, 00:40 BST is actually 23:40 UTC the previous day. My code was asking the API for "today in UTC" and getting yesterday's London prices.

I burned a full evening on this. The fix uses Intl.DateTimeFormat to figure out London's UTC offset dynamically:

// sv-SE locale reliably gives YYYY-MM-DD format
const londonToday = now.toLocaleDateString("sv-SE", {
  timeZone: "Europe/London"
});

// Check what hour London shows at noon UTC
// (noon is safe, never hits a DST boundary)
const noonUTC = new Date(`${dateStr}T12:00:00Z`);
const londonHour = parseInt(
  new Intl.DateTimeFormat("en-GB", {
    timeZone: "Europe/London",
    hour: "numeric",
    hour12: false,
  }).format(noonUTC),
  10,
);
const offsetHours = londonHour - 12; // 1 in BST, 0 in GMT

The sv-SE locale trick for getting ISO date strings looks weird but works everywhere. Found it on Stack Overflow after three other approaches all had edge cases.

Finding the Cheapest Window

The feature people actually use most is "when's the cheapest time to run my washing machine?" A washing machine cycle is about 2 hours, so I need the cheapest 4 consecutive half-hour slots.

It's a sliding window:

function findBestWindowN(slots: AgileSlot[], n: number) {
  let bestStart = 0;
  let bestAvg = Infinity;

  for (let i = 0; i <= slots.length - n; i++) {
    const avg = slots.slice(i, i + n)
      .reduce((sum, s) => sum + s.price, 0) / n;
    if (avg < bestAvg) {
      bestAvg = avg;
      bestStart = i;
    }
  }

  return {
    startTime: formatTime(slots[bestStart].validFrom),
    endTime: formatTime(slots[bestStart + n - 1].validTo),
    avgPrice: Math.round(bestAvg * 100) / 100,
  };
}

It also shows the most expensive window so you can see what you'd pay if you ran the dishwasher at 5pm like a normal person. The difference is usually 3-5x.

14 Regions, Wildly Different Prices

I didn't realise UK electricity regions varied so much until I built the comparison page. Sometimes the cheapest region is half the price of the most expensive at the same time of day. The region code is just a letter (A through P, skipping I and O). I handle it through URL search params rather than cookies, so when someone shares a link the region comes with it.

The SEO Mistake That Wasted Weeks

This one still annoys me. I set a canonical URL in the root layout pointing to the homepage. Every page on the site (/deals, /compare, /tips/...) was telling Google "the real version of this page is the homepage." Google treated all 28 pages as duplicates and only indexed one.

I spent weeks wondering why Search Console showed "Alternate page with proper canonical tag" on everything. The fix was two lines of code:

metadataBase: new URL("https://ukelectricityprices.co.uk"),
alternates: { canonical: "./" },

Now each page gets its own canonical. Indexing started improving within days. I could have saved a month of SEO progress if I'd gotten this right from the start.

What It Costs to Run

Nothing. Vercel free tier. Octopus API is free. Carbon Intensity API is free. The domain is about ten quid a year. That's it.

What I'd Do Differently

Cache API responses from day one. I added Redis caching late. A 5-minute cache cuts response times and is polite to their servers.
Never hardcode anything a provider might change. Product codes, tariff names, rate structures. Fetch them dynamically.
Test during BST. Timezone bugs only show up when you're not looking for them.
Get canonical URLs right immediately. Self-inflicted SEO wound that took weeks to notice.

Try It

ukelectricityprices.co.uk. Free, no sign-up. If you're on Agile Octopus, the appliance timer and EV charging optimiser are worth a look.

DEV Community: Subhashree Ayyappan