// project 03 - teardown

Healthcare platform — facility & care search

A map-first directory for finding doctors, clinics, and diagnostic technologies, with appointment booking built directly on top of the map — serving four different user types from one Angular codebase.

Role

Front-End Engineer

Stack

Angular 6 · NgRx · Universal

User Types

Patient · Doctor · Clinic · Tech Provider

Map

Leaflet + OpenStreetMap

Angular 6
NgRx
Angular Universal
Angular Animations
Leaflet
OpenStreetMap
01

Map search

Facility & Care Search
PatientDoctorClinicTech Provider
ClinicsDoctorsMRIX-Ray
Open now
Riverside Clinic0.4 mi

General · Cardiology · Open until 8PM

Dr. Lena Marsh0.9 mi

Family Medicine · Next slot: Today 3:30PM

Metro Diagnostics — MRI1.6 mi

MRI · CT Scan · Same-day booking

Dr. Aaron Cole2.1 mi

Dermatology · Next slot: Tomorrow 9AM

ClinicRiverside Clinic
02

Appointment booking

Riverside Clinic — select a slot
9:009:3010:0010:3011:001:302:003:30
Today · 10:00 AM confirmed
One codebase, four interfaces
PatientSearch + Book
DoctorSchedule + Patients
ClinicStaff + Capacity
Tech ProviderEquipment + Slots
03

Build notes

State shared, not tangled

NgRx kept the same underlying entities — facilities, appointments, providers — consistent across all four interfaces instead of four separate data models drifting apart.

Crawlable directory

Angular Universal server-rendered the facility pages, so a directory people mostly reach through search stayed indexable and fast on first paint.

Motion via the framework

Interface transitions used Angular's declarative trigger/transition API rather than hand-written CSS keyframes — animation logic lived next to component state.

Map as the search surface

Leaflet + OpenStreetMap plotted clinics, doctors, and diagnostic equipment together, with booking layered directly onto the pin — no separate booking flow to leave the map for.