Atlas Copco Logger/Display App

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 was to provide a central, user-friendly interface for data management and configuration.

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 on the frontend (React, TypeScript, Tailwind CSS), significant interaction with the backend team (C#, Node.js, PostgreSQL) was necessary due to limited documentation. This led to co-defining and implementing custom endpoints and TypeScript interfaces to ensure smooth communication between front and backend.

// Example of the TypeScript interfaces we created
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';
}

export interface MeasurementFilter {
  clientId?: string;
  machineId?: string;
  startDate?: Date;
  endDate?: Date;
  sensorIds?: string[];
}

We used Auth0 for user authentication and authorization, which provided a secure way to manage user roles and permissions.

The application enables users to: