Skip to content

User-friendly Dashboard and Tools for Octopus Energy Users using React / D3 data visualisation / Typescript with Octopus API

Notifications You must be signed in to change notification settings

edward-designer/dataviz

Repository files navigation

Octoprice - User-friendly Dashboard for Octopus Energy Users

Octoprice App

Why Octoprice

I am a happy Octopus Energy user, but:

  • it is not easy to get the energy rates from Octopus app or website
  • some 3rd party websites are not user-friendly / visually pleasant
  • there is no fast and convenient way to see how much I have saved or whether I will be better off with alternative tariffs

That's why I decided to create the Octoprice App.

Features

  • visualize the energy consumption pattern in the past year

    octopast

  • get the latest unit rates details for different intelligent tariffs (in pratical the half-hourly rates for Agile) with sensible comparisions for informed decision / choice

  • get historical and geographical unit rates

    tracker agile

  • calculate and visualize how much I have saved using the current tariff

    savings

  • compare different tariffs based on actual annual energy consumption

    compare

  • dynamically generated images of amount of money saved for sharing to social media

  • display results in an user-friendly and intuitive way, even on mobile screens

Tech Stacks

  • NextJS
    • a framework for both frontend and backend api development
    • SSR for faster response
    • SEO for different pages (meta/open graph/image)
  • Typescript - for static type-checking to reduce bugs during development
  • TailwindCSS - fast styling and better CSS rendering performance
  • D3 - for data visualization
  • Figma - for logo and UI design
  • CI/CD for automated testing/linting/prettier/type checking using github actions
  • Spline for 3d modelling and rendering

Todo

  • improve accessibility
  • turn into a real iOS/Andriod app with system notifications and widgets

About

User-friendly Dashboard and Tools for Octopus Energy Users using React / D3 data visualisation / Typescript with Octopus API

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published