Energy Monitoring Application

Github
Energy Monitoring Application
LinodeVercelPocketBaseNextJSReactJavascriptTailwind

Introduction

In today's world, energy consumption has become a critical area of focus for individuals and organisations alike. Efficient energy management not only helps in reducing costs but also plays a significant role in environmental conservation. With the growing need for sustainability, having accurate and real-time data on energy usage is essential. To address this need, I have developed an application that leverages an energy provider's REST API to monitor energy consumption effectively.

This application offers a comprehensive solution for organisations to manage their energy usage by allowing the creation of organisations within the platform. Users can be added to these organisations, with different roles assigned to them. Administrators have the ability to make changes to the organisations, while normal users can only view the data.

A screen grab of the admin panel for an organisation
A screen grab of the admin panel for an organisation

Sign Up

Users are greeted with a sign-up screen where they just need an email and password to begin. Currently this is the only supported method, however Pocketbase does support OAuth2 authentication so ill be looking to integrate this in the future.

Users are then able to set up their first organisation / account with just their API key, account number and tariff with the application automatically finding the assosiated address, serial numbers, MPRN and MPAN for the property.

Sign up and account screensSign up and account screensSign up and account screens
Sign up and account screens

Account Management

Once a user has created an organisation they will be made an admin for that account, this gives them the ability to change information such as the API key, product, add / remove / edit account numbers as well as the ability to promote users to admin status or remove them from the organisation all together. Invitations can then be sent to other users for them to join the organisation, these will be added with read only permissions by default, which can be upgraded by an admin.

A recieved invitation to join an organisation
A recieved invitation to join an organisation

Information display

Once a user has signed up and filled in all their necessary data they will be able to view their property / properties across a range of views.

Properties overview
Properties overview
In depth view of a propery, with options to view the current month or last 12 months to date
In depth view of a propery, with options to view the current month or last 12 months to date
Organisation dashboard for total combined costs, with views for the current month, last calendar year and current calendar year.
Organisation dashboard for total combined costs, with views for the current month, last calendar year and current calendar year.

Development Relection

For the back end of this application I used Pocketbase, an open source backend as a service, built with GO and SQLite. Once deloyed the admin has access to a dashboard, which allows for the creation of tables and the ability to set API rules for viewing / updating / creating records all from within the dashboard using a custom Pocketbase syntax.

Pocketbase was fantastic to use, being able to change and update rules from the dashboard without having to manually modify end-points saved a significant amount of time in development. The only issue I ran into was the authentication uses local storage so it works well for client side applications but caused issues with NextJS as the server side of the application doesn't have access to the browser APIs. To get round this I exported the token to a cookie and used that to verify the user's status.

I used NextUI to build the majority of the UI, it has a great range of modular components with subtle animations and a sleak minimal design, they also offer a fair amount of customisation using Tailwind.