A project by Dylan

NSCC CARE

Healthcare training app built to replace pen-and-paper data entry for nursing students at Nova Scotia Community College. I designed and co-developed a React SPA with bed-rotation visualization, patient profile builders, and multi-step clinical assessment flows.

NSCC CARE project preview
Project still · NSCC CARE

Role

Frontend Developer

Released

Stack

  • React
  • Vite
  • JavaScript
  • MUI / Bootstrap
  • Figma
  • GitHub Actions
  • Azure

See it

Private academic repo
NSCC CARE training app home screen
CARE home
NSCC CARE Cognitive assessment page
Cognitive Assessment
Home screen with shift selector
Shift selection modal
Form screen asking for basic patient information
Patient Intake Form
Patient profile page with demo data
Patient Profile (demo data)
Assessment page with shift change modal
Patient Assessment (with shift change modal)

The problem

CARE started as an NSCC capstone project where a small team would run a short 5-7 week sprint to replace a pen-and-paper clinical documentation workflow used by nursing students at another campus. A faculty member approached our instructor with an idea for a tablet-based web application that fixed the slow, and inconsistent workflow currently in use. Most current LTC and Acute Care facilities use software for clinical data entry, so the instructor wanted to give the students a chance to become familiar with the process before joining the workforce.

The product needed to feel like real hospital software, and needed to include bed assignments, shift handoffs, and structured assessments. All without overwhelming the students who were still learning the clinical workflow itself.

Role

I was assigned to own the look and feel of the app based on prior design experience. That quickly expanded into de facto frontend leadership:

  • Product & UI/UX design: low-fidelity wireframes, interactive Figma prototypes, and visual direction approval by stakeholders and team.
  • Frontend architecture: React SPA structure, routing, auth guards, shared state, and API integration patterns the rest of the team could build on.
  • Component development: most of the initial page layouts and reusable UI for patient workflows.
  • Team liaison: met with faculty liason for feedback, requirements gathering, facility tours, and communicated with other teammates frequently.
  • Initial CI/CD: GitHub Actions pipelines deploying the frontend to Azure Static Web Apps across dev and production environments.

Once design was approved, the frontend team translated those flows into working React pages, ensuring the prototype and the implementation stayed aligned met requirements.

Approach

The frontend is a React SPA organized around reusable profile sections and typed multi-step flows. The goal was to keep clinical data entry guided and scannable. Additionally, the app would primarily be viewed on tablets which meant the components needed to be big, responsive, and highly readable.

Additional stills from the profile builder and form flows are coming once screens are scrubbed of any sensitive training data.

Hard parts

Design is very tough. Creating designs that are responsive on all types of devices feels impossible. It’s very typical for project requirements to evolve during development, but building an application for desktop and finding out it’ll be used almost exclusively on tablet can make for a rough day for a beginner.

NSCC CARE patient assessment page. Showing a parent child tab/page architecture.
Application would primarily be used on tablets provided by the college.

Results

  • Awarded 2024–2025 Student of the Year for technical contribution on CARE.
  • Co-delivered an MVP pitch to college admin, helping secure funding and a Fall 2025 production pilot in the nursing curriculum.

Reflection

In the year since I graduated, the app has been used by subsequent cohorts looking to get some experience working within a team. The scope of the project has expanded to Acute Care and LTC classrooms across the province, and will be able to help provide students with some real world experience, which in turn will help deliver higher quality healthcare to people across Nova Scotia. It’s an amazing feeling knowing that the team and I created something that has a positive impact on people’s lives.