Magnify

Challenges

1. 01

   Two framework majors without breaking the UI

   Problem

   The app was on Next.js 14 and Tailwind 3, with dependencies falling behind and security findings piling up. A big upgrade on a large app risks small visual regressions nobody notices until a customer does.

   Approach

   I upgraded in steps (Next 14 → 16, Tailwind 3 → 4, Jest 29 → 30, Node 24) and leaned on Playwright screenshot tests as a safety net. I stabilised the screenshots first, hiding dev‑only overlays and loading each app's environment the same way in CI, so every diff that remained was a real change.

   Outcome

   The upgrade shipped with visual baselines updated deliberately rather than by accident, and the dependency findings that triggered it were cleared.

2. 02

   Gaps in time‑series data

   Problem

   Sensors don't report on a perfect schedule. When an export window started between two readings, the first values came back empty, which made charts and exported reports look like the equipment had stopped.

   Approach

   I added optional interpolation that fills the gap from the last known reading before the window, behind an explicit flag so existing consumers kept their behaviour, and covered the edge cases with tests.

   Outcome

   Exports and charts now start with sensible values, and the behaviour is opt‑in and documented.

3. 03

   Making dependency risk visible

   Problem

   Nobody could easily answer which vulnerable packages were shipping in which app.

   Approach

   I added SBOM generation to the CI pipelines and uploads to a dependency‑tracking dashboard, scoped to the branches that matter so the signal stays clean.

   Outcome

   Vulnerabilities are now tracked per app and release, which turned upgrades from guesswork into a prioritised list.

What I took away

• Make visual tests deterministic before trusting them; flaky screenshots are worse than none.
• Behaviour changes in shared APIs should be opt‑in first.
• Security tooling only helps if its output is scoped and actionable.