Nassim
NASSIM
ESSAIDI

IGTech

Tracking and monitoring your power consumption in real-time.

IGTech

Preview

Preview the live demo:

Tools & Technologies

  • Next.js.
  • Framer Motion
  • TailwindCSS.
    • Headlessui/react
  • Firebase:
    • Firestore (NoSQL Database).
    • Authentication.
  • Node.js / Express.js.

Features

  • Mobile Responsive
  • Track real-time electricity consumption in form of Gauge Chart.
  • Track historical data represented in a charts.
  • Tracking the following values at a certain time:
    • Voltage.
    • Current.
    • Frequency.
    • Power.
    • Energy.
    • App Power.
    • Power Factor.
    • Reactive Power.
  • Get data between specific dates.
  • Get the data in numerical form.
  • Get the estimated cost of your electricity consumption.
  • Get statistics data about the maximum and minimum values.
  • Export report data for every statistic data.
  • Ability to change personal information in the profile tab.
  • Display real-time data without the need to refresh the page.

Project Overview

First, the Arduino setup and configured in the home, then pass those values to an API made by Express.js and hosted on Heroku, the API verify the API_KEY passed in the headers via a POST request, the API check if you are allow to POST the data, then verify if the values passed are corrects. The Arduino is sending the data every 3 minutes.

After checking the values, the API store the data in the Firebase Firestore (NoSQL Database) by using Firebase Admin SDK.

The Next.js get the data from the Firebase Firestore and process them, then display them on the frontend.

The generated PDF from the statistics is using another Express API hosted on Heroku, which generates just the PDF and sends it back to the frontend.

About the cost tab, it is so expensive to resources for the Firestore (NoSQL database), because if we count 1 record per 3 minutes, that means 20 records per hour, which means 14600 records per month. for the first time, it scans the whole collection of the targeted month, then stores that value in another collection, so if come next time it just displays the data stored and does not scan the entire collection in that month. Of course, we can optimize that even more by just adding the current value to a previous value and so on, for better optimization, then we have just the read data once when we want to calculate the cost.

Note

There are even more features and error handling and input validation in every piece of the app.