Tandem
Tandem is a clinician-first workspace for turning patient visits into structured notes without hiding the human review step. For a frontend design exercise, I evolved the starter into a responsive clinical workspace and designed Magic Edit so AI suggestions stay separate until the clinician approves them.
The idea
AI-assisted documentation can save time, but opaque edits are risky in a clinical workflow. I kept the clinician in control: patient context, visit navigation, recording status, note structure, template, and writing style stay visible together. A quiet visual hierarchy and restrained purple accents make actions easy to find without competing with the note itself.
Magic Edit
Magic Edit can work across the note or on selected text entries. The clinician describes a change, reviews each current and suggested value side by side, and chooses exactly what to apply. Targeted fields stay locked while the request runs, numeric entries are excluded from AI editing, and the original note remains unchanged until the clinician confirms.
How it’s built
React 19, TypeScript, TanStack Router, Tailwind CSS, Radix UI, and Phosphor Icons power the prototype. The desktop workspace adapts into mobile drawers and sheets, with keyboard-friendly controls and live announcements for async states. Magic Edit uses a three-second in-browser mock rather than a real model, recording is simulated, and note edits persist only during the current browser session.
