Cruise

Content Management Application of Patients and their Data

Flexible and Dynamic form builder to collect and collaborate on patient data

Industry : Healthcare

Services Oered : UI/UX Consulting, Application Development, Application Modernization, Application Optimization, DevOps, Data Storage

Overview

Cruise Plastic Surgery is a health care organization which provides comprehensive out-patient surgical services for patients having plastic/cosmetic surgery. MedGuide is a content management application of patients where the complete patient medical history is maintained using patient timelines. By utilizing the exible and dynamic form builder, Doctor/User can create any type of forms in MedGuide without any engineering expertise.

By providing multiple basic form eld additions to the forms like Header (H1, H2, H3, Protocol Group), Date Picker, Dropdown (Single Select, Multi Select), Check Box (Single Select, Multi Select), Radio Button, Input Box, Label, Image, MedGuide allows users to create forms with great ease. In addition, there are options such as Complex Forms (collection of form components), Image Slider and Page Component. Pre-built templates can also be used to create new forms.

A Complex Form is the collection of form components, Image Slider & Page Component. Also, users can utilize Pre-built templates to create new components or they can create new templates from the existing template in MedGuide. In the timeline, we have a Progression Section and Protocol Section. Progression Section helps to track and maintain a record of the patients progress and the Protocol section helps maintain patient data.

MedGuide-SSR is a view-only application integrated with the public website which helps with marketing. This only showcases the relevant information to people who visit the public website.

Dissecting Problem

Create an application to record patient data

Prescribe medication based on patient data

Share patient timeline amongst doctors

Create Form templates

Implement User Roles & Access: Super Admin, Admin, Doctor, Sta, Patient

2 Challenges

Complex application with multiple user roles and access permissions

Lots of elds with relation to patient data meant studying the system extensively and planning accordingly

Our Solution

We proposed GraphQL for data exibility at the BE and React for FE development as the primary technology stack with

Context API for important data transfer across React Components, considering the complexity of the solution required. React was chosen as Component Driven Development (CDD) was at the core of theMedGuide requirement. Provisions were provided to Super Admin and Doctor users to create any number of reusable templates. These templates can be used to create the timeline for patients, which can then be shared with other doctors or the patient. Created the interface in an easy-to-use manner. Forms could be created without any prior expertise to include basic form elds in addition to Image Slider, Page component etc. By using the CDD concept, we also created complex forms which are an amalgamation of dierent basic forms that can be used to store and register complex information like ailments and respective medications prescribed based on criteria like pain, level of infection, swelling etc. To Secure the application we used Auth0.

Technical Architecture

We used a Two-Tier architecture in the application. We have a Presentation Layer and a Database Layer. In the Presentation Layer we used ReactJS with Context API to manage data ow from one component to another. We used Apollo Client to

help GraphQL query fetch data from HASURA. For UI we used Material-UI. In the Database Layer we used Node.js, GraphQL, PostgreSQL with HASURA.

Frontend

React 18.0.X: Foundation

Material UI 4.11.X: UI Toolkit

Auth0: For Authentication

Apollo Client

React-Router-Dom 5.1.2: For Routing

React-Scripts: For Building

ESLint: Find the linting issues

Backend

Nodes.js

Hasura GraphQL Engine : Data instantly accessible over a real-time GraphQL API. It connects to your databases, REST and GraphQL endpoints, and third-party APIs to provide a unied, connected, real-time, secured GraphQL API for all of your data.

PostgreSQL- Database

Development Process

We followed the Agile Development Methodology.

Prepare an approach document, get approval from client and then start implementation phase.

JIRA was used for task tracking and project management.

Sprint planning is done before the start of each sprint and detailed tickets are added to the corresponding JIRA sprint. Work was split between multiple teams from Celestial –

UI/UX, Frontend, Backend, Quality Assurance, and DevOps.

We had two calls per week with clients to handle dynamic requirements and for clarications.

Release Notes were prepared at the end of each sprint, outlining work completed.

Demo sessions were conducted at the end of each sprint.

Clients had the option of understanding the work done and providing feedback on the same.

QA team was actively involved in each sprint, testing functionality implemented.

Code Review was done by the Team Lead, once a task was accomplished and a PR for the same was raised.

The Outcome

The outcome of the engagement was a long-standing relationship between Celestial and theCruise Plastic Surgery. This 3.5 year and still on-going successful engagement with Celestial is a testament to the quality of our output.

Handling patients has been made much easier

With all modications made, the app has grown into a more dynamic, and exible entity

Onboarding new clinics has been made easy

Showcasing work is easily handled by the admin

103-4370 Dominion Street, Burnaby, British Columbia V5G 4L7, Canada

info@celestialsys.com

(+1) 604 779 1465

www.celestialsys.com

Engineering

Consulting Application Development Application Modernization Application Optimization