Skip to content
<Hyun/>
All projects

Seoul St. Mary's Hospital

Internship · Clinical record workflow

From paper checklists to a clear care record.

A patient’s documentation stays connected across pre-op, surgery and recovery days, then becomes a structured export.

Interactive explanation · not the live service

Loading interactive explanation…

Watch the original recordingsWeb · Recording notes included

Use the left and right arrow keys to switch slides.

Web

Recorded from a local build with fictional (sample) patients; the Excel slide is the exported file rendered outside the app.

Logging in, searching the October patient list, completing a POD 3 checklist, and exporting selected patients to Excel.

1 / 6
Explore the architectureSystem diagrams, design decisions and detailed flows

System overview

  1. React PWAstaff, tablets and PCs
    SPA + /api
    AWS EC2 · DOCKER COMPOSENginxreverse proxy
    proxy
    AWS EC2 · DOCKER COMPOSESpring Boot appSpring Security, JWT
    Step 1
    AWS EC2 · DOCKER COMPOSEPatients & surgeriesregister, filter, page
  2. Spring Boot app
    Step 2
    AWS EC2 · DOCKER COMPOSEERAS checklistspre-op to POD 3
  3. Spring Boot app
    Step 3
    AWS EC2 · DOCKER COMPOSEExcel exportApache POI workbook

Other connections

  • Excel exporttoERAS checklistscompliance
  • Patients & surgeriestoMySQL
  • ERAS checkliststoMySQL
  • Excel exporttoMySQL
  • GitHub ActionstoDocker Hubimage
  • Docker HubtoSpring Boot apppull + compose up
Staff use a React PWA served from the Spring Boot jar behind Nginx on EC2. The app's JWT-secured endpoints read and write MySQL, and GitHub Actions builds and ships the image. The purple path follows a patient: (1) registration, (2) the daily ERAS checklists, (3) the Excel export.
View the diagram as text

Parts

  • React PWA (staff, tablets and PCs): Client / UI
  • Nginx (reverse proxy): Hosting / CI
  • Spring Boot app (Spring Security, JWT): Owned service
  • Patients & surgeries (register, filter, page): Owned service
  • ERAS checklists (pre-op to POD 3): Owned service
  • Excel export (Apache POI workbook): Owned service
  • MySQL (Spring Data JPA): Data store / broker
  • GitHub Actions (build React + jar): Hosting / CI
  • Docker Hub (amd64 + arm64 image): Hosting / CI

Connections

  • React PWA → Nginx: SPA + /api
  • Nginx → Spring Boot app: proxy
  • Step 1: Spring Boot app → Patients & surgeries
  • Step 2: Spring Boot app → ERAS checklists
  • Step 3: Spring Boot app → Excel export
  • Excel export → ERAS checklists: compliance
  • Patients & surgeries → MySQL
  • ERAS checklists → MySQL
  • Excel export → MySQL
  • GitHub Actions → Docker Hub: image
  • Docker Hub → Spring Boot app: pull + compose up

A patient's checklist, from registration to Excel

  1. Staff sign in

    A login filter checks the staff ID and BCrypt password and returns a JWT. The React app sends it as a bearer token, and a JWT filter authenticates every other API call.

  2. Register patient and surgery

    Staff register the patient (duplicate registration numbers are rejected) and the surgery. The surgery type's default checklist pre-fills which ERAS items apply.

  3. Pre-op and operation-day forms

    Staff fill the pre-operative, intra-operative and post-operative-day forms, each linked one-to-one to the surgery's checklist setup.

  4. Daily checks, POD 1–3

    One daily checklist per post-operative day is saved, and the server slots each by days since surgery. The patient list shows whether today's checklist is missing, done or ready to export, and filters on it.

  5. Export to Excel

    Surgeries with all phase forms and three daily checklists are listed for export. The selected surgeries become one Apache POI row each — ERAS flags, compliance rate, pain scores, blood loss and operation time — streamed as an .xlsx file.

The project & my contribution

Problem
The colorectal surgery division tracked ERAS (Enhanced Recovery After Surgery) care on paper, from admission to discharge.
Solution
A checklist system where staff register a patient and surgery, then record each care item before, during and after surgery, starting from a default checklist per surgery type.
Result
Replaces the paper records, with a compliance rate per surgery, a daily status per patient and formatted Excel exports.
Explore featuresGitHub(opens in a new tab)

How it's built

  • Spring Boot backend by two engineers, React PWA by one frontend engineer
  • Each surgery type has its own default checklist
  • One Docker image with React bundled into the jar, deployed to EC2 by GitHub Actions

Highlights

  • Compliance rate per surgery and a daily status per patient on the main list
  • Filters by status, month, surgery and name or registration number
  • Formatted Excel export with Apache POI; soft deletes with a restorable list