NZXT Aviation Gauge

NZXT Aviation Gauge

Aircraft Engine Indicating and Crew Alerting System (EICAS) inspired gauge using the NZXT web integrations API.

Project Information

  • Duration: 1.5 Weeks
  • My role: Front-End Developer
  • Team: 1 developer

Problem

All the available web integrations that I have seen up to this point only displayed a limited amount of monitoring metrics and I wanted to see more of what is going on with my computer at a glance.

Solution

Using the NZXT web integrations API I was able to get access the data I required. Keeping what I had access to in mind, I designed a Aircraft Engine Indicating and Crew Alerting System (EICAS) inspired gauge to fit and display the monitoring data on. Some data is displayed as numbers, some as bar charts and some as a running area chart.

My Role

  • Designed EICAS gauge
  • Developed custom React hook to interface with API
  • Used and customized ApexCharts to display charts

Technologies Used

ReactJS
Typescript
Vite
ApexCharts
Styled Components
NZXT API
GitHub Pages

NZXT Aviation Gauge

Project Demo

Web Integration Recording