Cruise
Content Management Application for Patient Data
- Industry : Healthcare
Service Offered
UI/UX Consulting
App Development
DevOps
App Optimization
App Modernization
Data Storage
Overview
Cruise Plastic Surgery is a healthcare organization that provides comprehensive outpatient surgical services for patients having plastic/cosmetic surgery. MedGuide is a content management application where the complete patient medical history is maintained using patient timelines. By utilizing the flexible and dynamic form builder, Doctor/User can create any type of form in MedGuide without any engineering expertise.
By providing multiple basic form field 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. The progression Section helps to track and maintain a record of the patient’s progress and the Protocol section helps maintain patient data.
Dissecting Problem
Business Requirement
- 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, staff, patient
Challenges
Lots of fields related to patient data required studying the system extensively and planning accordingly
Our Solution
We proposed GraphQL for data flexibility 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 fields in addition to Image Slider, Page component, etc. By using the CDD concept, we also created complex forms which are an amalgamation of different 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 flow 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 unified, 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 clarifications.
- 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.
Outcomes
-
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 modifications made, the app has grown into a more dynamic, and flexible entity
- Onboarding new clinics has been made easy
- Showcasing work is easily handled by the admin
