PC Ressources Monitoring App

This was my introduction project to javascript and web dev. I wanted to make an app that I can run on a tablet installed next to my computer to display the ressources usage on a pretty graph. I know I could have used Grafana for the display part, but I wanted to make it myself with javascript/HTML/CSS to get more familiar with it. So basically the app collects data on the pc using APIs that I built (cpu usage, ram usage, running apps...) and sends it to a dashbord that displays it all.

I made the backend using Python, nothing too complicated since my main goal was to focus on the frontend part. I made APIs using Flask. There is built-in encryption, token based authentication and of course functions to get the data for the CPU, RAM, Disk, Network and running apps with their ressource consumption.

For the authetication part, I used environment variables instead of database to store the credentials since I made the app to be used by a single user.

As or the frontend, as I mentioned before, I used javascript/HTML/CSS. I made the login page (nothing too crazy) and the dashboard page. The dashboard makes API calls to the Flask backend and requests the data that is sent with the token. The token validity is checked and then the data is formatted to be displayed correctly. The graphs are made using chart js. The refresh rate can be changed in the config file. You can also choose between dark and light mode in the dashboard.