HPC
Four products for Hospital Privado de Comunidad in Mar del Plata, on web and mobile, sharing one design system.
The hospital had a design for four products: a patient app, a doctor's office, a front desk and a management panel. That meant 60 screens across desktop web and mobile. The design's palette also failed WCAG 2.1 AA, which the proposal had promised.
Three decisions that shaped it.
- 01
One token package for web and native
Why. Color, type, spacing and icons live in TypeScript in @hpc/tokens. The web primitives and the React Native primitives both read them. The patient app looks like the desktop apps without copying values.
Trade-off. Only tokens and logic are shared, not components. There are two primitive libraries to keep in step: CSS Modules on web and React Native on mobile.
- 02
The API contract is generated, not written
Why. The Go API publishes OpenAPI 3.1 from its own types. A package turns that into the TypeScript types the API client imports. A satisfies check breaks the build when the backend adds an enum value nobody mapped.
Trade-off. There is a generation step, and the backend owns the shape of the data. A golden test catches a stale contract, but only when it runs.
- 03
Realtime says what changed, not the new state
Why. Each app opens one WebSocket and subscribes to topics like an agenda or a waiting room. An event only invalidates the cache, and the screen refetches through the normal path. A booking in the patient app shows up at the front desk by itself.
Trade-off. Every event costs one extra request. Bursts would trigger several server renders in Next.js, so the channel can batch events.
HPC
Four products for Hospital Privado de Comunidad in Mar del Plata, on web and mobile, sharing one design system.
- Role
- Architecture and full build
- Stack
- Next.js 16, Expo / React Native, TypeScript, TanStack Query, Turborepo, Go
The hospital had a design for four products: a patient app, a doctor's office, a front desk and a management panel. That meant 60 screens across desktop web and mobile. The design's palette also failed WCAG 2.1 AA, which the proposal had promised.
Three decisions that shaped it.
One token package for web and native
Why. Color, type, spacing and icons live in TypeScript in @hpc/tokens. The web primitives and the React Native primitives both read them. The patient app looks like the desktop apps without copying values.
Trade-off. Only tokens and logic are shared, not components. There are two primitive libraries to keep in step: CSS Modules on web and React Native on mobile.
The API contract is generated, not written
Why. The Go API publishes OpenAPI 3.1 from its own types. A package turns that into the TypeScript types the API client imports. A satisfies check breaks the build when the backend adds an enum value nobody mapped.
Trade-off. There is a generation step, and the backend owns the shape of the data. A golden test catches a stale contract, but only when it runs.
Realtime says what changed, not the new state
Why. Each app opens one WebSocket and subscribes to topics like an agenda or a waiting room. An event only invalidates the cache, and the screen refetches through the normal path. A booking in the patient app shows up at the front desk by itself.
Trade-off. Every event costs one extra request. Bursts would trigger several server renders in Next.js, so the channel can batch events.