●React + Healthcare

Healthcare user interfaces face constraints that most industries don't: regulatory requirements, clinical safety concerns, extreme accessibility needs, and unreliable operating environments. React's component model addresses these challenges through explicit data flow and composability. HIPAA compliance starts with understanding where PHI flows through your application. React's props-based data passing creates an explicit audit trail—you can trace exactly how patient data moves from API response through components to display. This explicitness is essential for compliance audits and security reviews. Implicit data flows (global state, event buses) make PHI tracking nearly impossible. The component architecture enables building clinical-specific UI primitives that encode safety patterns. A PatientBanner component always displays the current patient context. A MedicationList component always shows dosing and interaction warnings. A LabResult component always displays reference ranges. These components encapsulate clinical knowledge, preventing developers from accidentally displaying medical data without proper context. Accessibility in healthcare isn't a nice-to-have—it's legally required for federally-funded institutions and ethically essential for serving patients with disabilities. React's ecosystem has excellent accessibility tooling. Radix UI provides accessible primitives. Testing with react-testing-library encourages accessible patterns. axe-core integration catches violations in CI. Building accessibility from the start is vastly cheaper than retrofitting.

Healthcare React projects start with understanding clinical workflows. I shadow actual users—clinicians, nurses, administrators—to understand how they work, what causes friction, and where errors occur. This research directly shapes the component architecture. Multi-patient context is the first architectural decision. I implement a PatientContextProvider that wraps the application, making current patient data available to all components while ensuring cache isolation. Switching patients clears sensitive cached data and resets form state. The patient banner component displays unmistakably at all times. Form architecture for clinical applications requires domain expertise. I work with clinical advisors to encode validation rules: medication dosages have maximum safe limits, vital signs have normal ranges that vary by age, some fields are required only in certain clinical contexts. These rules live in Zod schemas that TypeScript enforces throughout the application. Accessibility is built in from component design, not tested for later. Every interactive element has proper focus management, ARIA attributes, and keyboard navigation. I test with screen readers (NVDA, VoiceOver) during development, not just before launch. Color is never the only indicator of status—patterns, icons, and text supplement color coding. For offline support, I implement React Query's persistence and offline mutation features. The application works without network connectivity, queuing changes for sync when connectivity returns. Clear UI indicators show sync status, and conflict resolution handles the rare case of concurrent edits.