Worker Database with QR Code Scanner to Increased Compliance and Safety on Construction Sites

I've helped to create a worker database to track health and safety certificates and site access for a major construction company. The project was also extended to track construction equipment.

The task was to create a mobile-first, single-page application that foremen and supervisors can use to check the validity of H&S and various other certificates of workers and equipment on a given construction site. As typing in such an environment would be hard, we choose to implement a QR-reader into the application which was used to scan the custom QR-codes printed from the backend system.

Our team consisted of a devOps engineer, a backend developer and myself in the role of frontend developer.

As the client only supplied us with some rudimentary mockups and not too detailed specification, it was largely up to me to figure out the exact UI/UX of the frontend. For this I've used an off-the-shelf UI library (Ant Design) with minimal branding and customization added to it.

Responsibilities

• Implement the decoupled frontend as a single-page application (Vue.js, Pinia, TypeScript, Vite)
• In-browser-design using Ant Design system
• Connect the frontend to the backend using REST API
• Implement IAM functionality, via token based authentication system
• Implement QR-scanning feature