Atlas Copco Logger/Display App

Frontend development for a web application that logs and visualises measurement data from industrial equipment.

ReactTypeScriptAuth0C#Node.jsPostgreSQL

Overview

A web application built for Atlas Copco to streamline the process of logging and sharing measurement data from their machines.

The tool needed to serve both technicians performing measurements (air, electricity) and representatives who need to share and input this data for clients. The goal: a central, user-friendly interface for data management and configuration.

Approach

As a Frontend Developer, I worked within a team of three (Frontend, Backend, Integration). We followed an Agile methodology with weekly sprints and meetings — both internally and with stakeholders at Atlas Copco.

Although my focus was the frontend (React, TypeScript), significant interaction with the backend team (C#, Node.js, PostgreSQL) was necessary due to limited documentation. We co-defined custom endpoints and TypeScript interfaces to ensure smooth communication between front and back.

MeasurementTypes.ts

export interface Measurement {
  id: string;
  clientId: string;
  machineId: string;
  timestamp: Date;
  readings: MeasurementReading[];
  createdBy: string;
  notes?: string;
}

export interface MeasurementReading {
  sensorId: string;
  value: number;
  unit: 'bar' | 'psi' | 'celsius' | 'fahrenheit' | 'kWh';
  status: 'normal' | 'warning' | 'critical';
}

We used Auth0 for authentication and authorisation, providing a secure way to manage user roles and permissions.

Features

Data entry
Enter measurement data per client or machine via a structured form.
Data visualisation
Tabular view with relevant units and clear readings.
Configuration management
Per-client and per-installation configurations.
Role-based access
Auth0 manages user roles so the right people see the right data.

Challenges

Implementing authentication and authorisation with Auth0 — especially passing and validating tokens for various roles — was the trickiest part.

The project emphasised the importance of:

·Intensive use of debugging tools (Postman, browser inspector) to identify communication issues quickly
·Clear communication and close collaboration in the team, especially with incomplete documentation
·Proactively creating documentation (TS interfaces) to make integration easier

Strong improvement in front-end skills, API integration, and working with authentication systems in a professional environment.