Server Dashboard

This is a project for learning purposes, developed during my training period before becoming a member of the Software Subsystem at Hyperloop UPV.

The application is a dashboard that simulates the performance of a web server, displaying fictitious data (randomly generated) on CPU usage, RAM usage, and other performance metrics.

Project Structure

The project has the following simple structure:

/server-dashboard
   /client
   /server

Client (Front End)

Technologies

• TypeScript
• ReactJS
• SCSS
• Zustand
• React-Router
• CanvasJS

Server (Back End)

Technologies

• Go

How does it work? (WIP)

The back end receives packets via TCP/UDP, extracts the payload, checks that all is correct, and sends it to the front end via WebSocket connection (real-time communication).

It is possible also to activate a logger functionality to log into the operating system (CSV file) all the data received in a session (by passing a flag when executing the back end).

Then. the front end receives the data and displays it on real-time charts by using a third-party library called CanvasJS.

Screenshots

Home Route

Server performance metrics route

App performance metrics route