Healthcare / Workflow software

ClearFlow

A clearer handoff at every step.

A shared patient queue that connects reception, radiography, and downstairs staff through a defined clinic workflow.

  • JavaScript
  • Firebase Auth
  • Realtime Database
  • HTML & CSS
Connected web appOpen ClearFlow ↗
Comic illustration of clinic teams sharing an arrival notification
Concept illustration of the project workflow. The artwork explains the idea rather than reproducing the application interface or measured results.
4staff roles in the interface
5steps in the main patient journey
LiveFirebase data listeners
The project in brief

Problem. Solution. Evidence.

The problem
Patient handoffs span several teams and stages.
My solution
I modelled the queue as explicit transitions, with role-specific actions and Firebase updates.
The evidence
The reviewed source defines five workflow stages. The authenticated patient workflow has not been exercised for this review.
The story behind the project

One patient journey. Clear handoffs.

Scroll through four steps. Concept illustrations explain the workflow; they are not application screenshots or measured charts.

Comic illustration of a receptionist registering a patient with a shared queue
01 / 04Register the arrival
01 / Register the arrival

Start with a shared place in the queue.

Reception checks the patient in. A visible queue entry gives the team a common starting point for the next handoff.

An arrival becomes a clear next action.Comic illustration of a receptionist registering a patient with a shared queue
02 / Notify the next team

Let radiography know who is waiting.

Reception notifies radiography. Firebase listeners update the shared interface when the patient record changes, helping staff see the next stage.

A shared queue connects the teams.Comic illustration of clinic teams sharing an arrival notification
03 / Call and hand over

Move the patient to the next stage.

Radiography calls the patient. Downstairs staff confirm arrival at the next stage, with role-specific controls guiding the available actions.

Explicit stages make the handoff visible.Comic illustration of a coordinator inviting a patient to the next stage
04 / Complete the workflow

Close the loop with a recorded arrival.

Staff complete the second check-in after confirming arrival. The five-state path runs from checked-in through notified, called, and arrived to complete. This describes administrative coordination, not a clinical outcome.

Four illustrated chapters. Five workflow states.Comic illustration of staff confirming a patient arrival and completing the administrative workflow
The problem

Make the next step clear.

Patient movement involves more than one desk. Reception needs to register an arrival, radiography needs to call the patient, and the next team needs to confirm arrival. ClearFlow makes those handoffs explicit in a shared queue.

How it works
  1. 01Checked in
  2. 02Notified
  3. 03Called
  4. 04Arrived
  5. 05Complete
Inside the project

What the implementation does.

01

Actions that follow the role

Reception checks patients in and notifies radiography; radiographers call patients; downstairs staff confirm arrival and complete the second check-in. The interface exposes actions for each role.

02

A shared view of the queue

Firebase Realtime Database listeners update the interface when shared data changes, instead of relying on manual refreshes.

03

Context around each handoff

Status filters, patient history, activity views, and staff messaging support the work around the main queue.

A technical decision

Model the workflow as explicit transitions.

The main path is defined as checked-in → notified → called → arrived → complete. Role-to-action mappings determine which controls appear at each stage. This makes the handoff rules visible in the code and gives each team a focused set of next actions.

Scope & reflection

What this demonstrates.

The source confirms client-side role controls and Firebase integration. It does not by itself establish the deployed database rules, clinical effectiveness, or regulatory compliance. The authenticated patient workflow has not been exercised for this portfolio review.

A useful next step

A public demo with fictional patient records would let visitors explore the full queue without a clinic account.

Summary based on the clinic workflow source and the public sign-in screen.

Next projectTechDesk