/
OPD overview
Arrivals, active consultations and same-day metrics in one command centre.
Full-stack MVP case studyLive MVP
Nadi · Clinical operations
Turning the design system into a working hospital app.
Nadi is the interactive OPD workspace built on Spine — patient access, scheduling, clinical consultation, diagnostics, pharmacy and billing wired into one authenticated Next.js and Supabase application. Not a click-through prototype. A product you can sign into.
8
Connected workspaces
From patient arrival to visit closure
1
Governed patient journey
One identity bar, every workspace
Real
Authentication
Supabase-backed staff sign-in
0
Static screenshots
It is the deployed application
- Role
- Product Designer · Front-end Engineer
- Scope
- Full-stack build · Auth · Design system integration
- Status
- Live MVP
- Built with
- Next.js · TypeScript · Supabase · Spine
01 / From system to software
A case study only proves so much. Software people can log into proves the rest.
Hospital OS mapped the domain. Spine turned the safety and workflow requirements into reusable components. Nadi is where those decisions meet real routes, real authentication and a real deployment — the point where a design system either holds up under implementation or doesn’t.
Nadi
This project
Spine's tokens and patterns, wired into real routes, real Supabase auth and a real deployed URL.
You are here02 / The workspace
Eight workspaces, one patient, no re-entered data.
Every route below sits behind the same authenticated layout and the same persistent patient-identity bar. Reception, clinical, diagnostics, pharmacy and billing are different screens over the same encounter, not five separate applications glued together.
/patients
Patient access
Progressive, privacy-safe search with duplicate review before any merge.
/appointments
Appointments
Conflict-safe booking, slot locking, rescheduling and waitlist review.
/consultation
Consultation
SOAP notes, coded diagnoses, allergy blocking and deliberate clinical signing.
/diagnostics
Diagnostics
Order acceptance through specimen accession to verified, versioned results.
/pharmacy
Medication
Prescription review, interaction checks and dispensing handoff.
/billing
Billing
Insurance, payments and reconciliation tied back to the same encounter.
/visit-closure
Visit closure
Immutable signed records with attributed addenda before a visit ends.
03 / Product & engineering decisions
Small choices that only matter once something is live.
A prototype can fake authentication, routing and state. A deployed app can’t. These are the decisions that only came up because Nadi actually has to run.
Decision 01
The workspace is a route group, not a role check sprinkled everywhere
Every authenticated screen lives under a single (workspace) route group with one layout that verifies the Supabase session and redirects otherwise. Auth is enforced once, structurally — not re-implemented per page.
Decision 02
Server Actions own the state that matters
Sign-in and sign-out are Server Actions, not client-side fetches to an API route. The form works before any client JavaScript hydrates, which matters more in a hospital than it does almost anywhere else.
Decision 03
Tokens travel with the product, not just the docs
Nadi imports Spine's semantic color, spacing and elevation tokens directly rather than re-deriving a palette. A design system that only looks right in its own documentation site hasn't proven anything yet.
Decision 04
The login screen is not a formality
It carries the brand, states the security posture, and — because this build exists to be reviewed — surfaces a demo account a recruiter can use with one click instead of asking me for credentials.
Decision 05
A boot sequence, once per session
A brief system-initialization animation plays on first load and is remembered for the session via sessionStorage, so it reads as a deliberate detail on a first visit rather than friction on every navigation.
Decision 06
Mock data, real plumbing
Clinical records are illustrative and session-scoped by design — this is a portfolio MVP, not software handling real patients. Authentication, routing, and the interface layer underneath it are not mocked.
04 / The app itself
Everything above, deployed and behind a real login.
A design system that only exists as a case study is a proposal. This is built and running, with a demo account left on the door for anyone reviewing it.
Live application
Sign in and look around
Not screenshots — the deployed app. The login screen ships with a recruiter demo account, filled in with one click, so you can walk the real OPD workspace instead of reading about it.
hospital-os-mvp.vercel.app/login
1440 × 900Loading the workspace…
Demo access — the credentials on screen unlock patient access, scheduling, consultation, diagnostics, pharmacy, billing and visit closure.
Scope, honestly
Nadi is a portfolio MVP built around Hospital OS, a conceptual platform. It is not production medical software and has not been through clinical validation. Clinical data is illustrative and session-scoped by design. What’s real is the authentication, the routing architecture and the interface layer — the parts of a clinical product that are hardest to fake convincingly.
Continue exploring