The visible feature was only the surface
Automated movement analysis can place measurement geometry on an imperfect frame or anatomical position. Clinical reviewers need a precise, explainable way to choose the right frame, correct lines and angles, compare reference guidance, and save revised measurements without losing the original exercise context.
The system also had to respect concrete constraints. Measurement geometry must remain correct while media is scaled, points are dragged, and line types restrict movement to one axis. The workflow depends on multiple tenant-specific legacy APIs and session values whose payloads can be missing, stale, or inconsistent. Large video frames and rendered canvas images must be validated and processed without freezing the review interface. Clinical reviewers need explicit unavailable, loading, validation, save, retake, and completion states rather than ambiguous canvas failures.
My role covered frontend architecture and modernization within the mymedicalhub team, with responsibility for clinical review workflow, canvas geometry, legacy api integration, validation, error recovery, and automated testing.
I turned the constraints into boundaries
A Next.js and React review shell separates workflow state from Konva geometry, validates upstream payloads through Zod, maps legacy responses into typed domain models, and coordinates frame selection, alignment, verification, and persistence through a reducer-driven controller.
Pure coordinate and measurement functions can be tested without Konva, while the interface focuses on interaction and presentation.
Frame selection, alignment, and verification form a controlled sequence so save behavior cannot run against incomplete media or geometry.
Upstream payloads are parsed and mapped before reaching UI state, turning malformed contracts into diagnosable unavailable states instead of downstream exceptions.
Line type, direction, measurement type, left and right values, and plumb-line relationships remain explicit throughout editing and persistence.
The key decision: Separate geometry from the canvas renderer.
The implementation had to prove the model
I delivered the work across the full path: Rebuilt the re-annotation experience around Next.js, React, TypeScript, and a structured clinical review flow. Separated annotation geometry, schemas, API mapping, reducer state, asset preloading, and canvas presentation into testable boundaries. Implemented frame selection, draggable line and angle correction, automated-analysis comparison, reference guidance, save, retake, and completion states. Added unit, integration, and browser-oriented coverage for geometry, upstream mappings, API contracts, and critical review interactions.
The result is concrete: Reviewers can correct automated clinical measurements through a guided workflow instead of manipulating an opaque legacy canvas. Typed domain models preserve line, angle, direction, and measurement semantics across load, edit, render, and save operations. Malformed or unavailable upstream data produces explicit recovery guidance rather than partially initialized review state. The modernized boundaries make geometry and API behavior independently testable while legacy services continue to operate.
The senior engineering lesson was that solving the visible workflow is only half the job. The architecture must also make constraints, failure modes, evidence, and ownership explicit enough for the next change to remain safe.