Work

PHP Monitoring

API
Monitoring
TailwindCSS
Chart.js
PHP
Docker

Monitoring webapp with real-time display of system metrics

An image of the PHP monitoring website

To gain more experience in object-oriented development in PHP, as well as in API development and in the usage of AJAX requests, i developed a monitoring website that displays information in real-time.
The api.php file serves as a link between HTTP requests and calls to various methods within the Classes I have developed.

The front-end part, on the other hand, is entirely handled by JavaScript with AJAX requests and ChartJS for the graphs, and by Tailwind for the CSS part.

🗺️ Overview

💻 System

The system page displays a variety of information related to the machine hosting the monitoring website. image

🔳 CPU

The CPU page displays various informations related to the CPU, including real-time updates of the frequency for each thread. You can stop this updating by clicking on the stop button, as demonstrated in this video.

💾 RAM

The RAM page displays various informations related to the volatile memory (RAM) and to the SWAP, with real-time graph and metrics as shown in this video.

⚙️ TOP

The TOP page displays various real-time informations related to the processes. You can sort theses processes by RAM/CPU consumption with the right select menu as demonstrated in the video.

✨ Responsive

All pages of this project are responsive, meaning they adapt to the screen size accordingly.

📂 Source

The source code and installation instructions are accessible here

You’ll also find a Dockerfile there if you want to test the application locally.