FHIR Patients

React and TypeScript patient browser built against a public FHIR R4 API.

Overview

FHIR Patients is a frontend case study for consuming healthcare data through the FHIR standard. The application turns raw Patient resources into a clear list and detail experience while keeping API access and presentation concerns separate.

Features

• Paginated patient list loaded from a FHIR R4 endpoint
• Dedicated patient detail route
• Typed normalization of FHIR resource fields
• Human-readable handling of names, identifiers, addresses, gender, and dates
• Loading, empty, and API error states
• Component and utility tests with React Testing Library

Architecture

• API layer responsible for FHIR requests and response parsing
• TypeScript models defining the application-facing patient shape
• Reusable formatting utilities for optional and nested FHIR fields
• Route-level list and detail views
• Components focused on presentation rather than network logic

Engineering focus

• Creating typed boundaries around a flexible external data standard
• Handling incomplete and variably structured healthcare records defensively
• Keeping routing, API access, transformation, and UI responsibilities distinct
• Designing meaningful states for real external API latency and failures

Technology

React 19, TypeScript, React Router, React Testing Library, and the HAPI FHIR R4 public test server.

Run locally

cd frontend
npm install
npm start

Use the available test script to run the component and utility test suite.

Data source and privacy

The application uses a public FHIR demonstration endpoint and does not persist patient data. It is intended as a technical portfolio and learning project, not for clinical use.

What this project shows

The repository demonstrates frontend integration with a domain-specific API, resilient data transformation, typed React architecture, and user-friendly presentation of complex records.

License

GPL-3.0.