Solar Dash

Built with: NextJS.

In early June 2023, our family was fortunate to have a solar panel system installed. It has been incredibly exciting to power our house with energy from the sun!

Each solar panel is equipped with its own Solar Edge micro-inverter, enabling them to function as individual cells rather than an array. Without getting too much into details the inverter converts the solar panel energy AC to DC which in non-technical jargon - it makes the solar energy compatible to use with the house. I hope I've got that right!

Solar Edge provides a fantastic app called "My Solar Edge" allowing us to track our energy consumption and live energy usage within the last 15 minutes. I love the design of the Solar Edge app, especially the little house with a changing background that corresponds to the time of day. We use Octopus Energy as our energy supplier, and they offer an excellent app for monitoring our energy usage.

Last year, I came across a tweet from Octopus Energy announcing the trial of the Octopus Home Mini . This is a little pink device that connects to our smart meter and provides real-time (to the minute) data through their app. I applied for one and they sent it to us for testing and we've been using it since! It is even showing us negative values for solar export in the app!

Fortunately, both services offer APIs (application programming interface), so after carefully studying their documentation, I was able to retrieve the necessary data. Although I'm still wrapping my head around some of the numbers and ensuring accurate statistics, I managed to implement the data retrieval process.

Once I successfully obtained the data, I began designing a visually appealing graphic to represent our energy import and export. I used simple diagrams and animations to convey the behaviour of our energy data. Such as "green" or "orange" energy sparks going to or away from the house graphic depending on import or export. Using Figma, I created a mock-up design and built the front end using NextJS.