Workplace Safety Heatmap

An industrial client needed a safety heatmap for one of its sites: a view that maps recorded incidents onto the site by zone, so safety leads can see where accidents cluster and drill into the detail behind each marker.

I built the frontend, through the agency, working from the project’s Figma design system. The brief was focused — translate that system into a working, faithful Angular implementation.

I implemented the design system on the frontend as a reusable component set — buttons, modal and forms — and wired them into the heatmap’s flows. The incident form pairs a map position picker with validated fields and image upload; the modals cover area switching, incident detail with CSV export, and the per-position incident list.

The work was about fidelity: matching the tokens, states and spacing of the Figma system so the implemented UI reads as the same product the designers drew, not an approximation of it.

Everything is built as standalone Angular 17 components with OnPush change detection, so each piece of the heatmap re-renders only when its own inputs change. The component set — buttons, modal and forms — mirrors the design system one layer down: SCSS reads the same tokens as CSS custom properties, and every interactive state the designers specified — hover, focus, disabled, error — is wired explicitly rather than left to browser defaults.

The incident form is a reactive form: the map position picker emits the chosen coordinates straight into the form model, validators gate the required fields, and image upload is handled inline before submit. Incident detail exports to CSV from the client, and the modals — area switching, detail, and the per-position list — share a single overlay path, so they open, trap focus and dismiss the same way instead of each reinventing it.

Turning a design system into components is exactly where AI earns its place in my workflow — drafting the component boilerplate from the specs and validating each state against the Figma source — so I spend my time on the details that matter rather than on the repetitive scaffolding.

From the Figma frame to a merged pull request: the same path on every project.