HL7 FHIR APIs can fundamentally transform the rapid development of frontend web application

 Just imagine if all your backend APIs is based on HL7 FHIR API, how it will fundamentally transform your frontend web application development

One immediate benefit is that your frontend developer will not be pressing you to come up the running APIs, because he/she can just pick any publicly available HL7 FHIR Server to test and integrate. 

Another greater benefit is that we can fundamentally re-design the web application to take full advantage of the consistent APIs that are based on HL7 FHIR. 

Let me walk through the 2nd benefits here

I am going to walk through a simple ReactJS Single Page Application (SPA) I have created in the past, the actual source code is hosted on code sandbox - https://muqhwj.csb.app/patients. This demo SPA is integrated with the live APIs hosted in HealthX Sandbox - https://api.healthx.sg/.../2807f247634c4f3c941568d460835a71. (Note the last part of the URL is the tenant ID)

For the demo ReactJS SPA, pls take note that the intent of the demo app is NOT to demonstrate the coding best practice for ReactJS SPA, eg I did not use TypeScript in the demo yet, the configuration is not maintained in external configuration settings etc. I only spent 1 or 2 days to put up the demoReactJS SPA.

The demo application shows whatever health records available in the backend system with a simple UI design - summary view and detail view. There is only one API component and oneUI component regardless of how many resources you like to show on the UI

All the backend API integration is coded in this API slice - https://codesandbox.io/p/sandbox/muqhwj...
I use the method - getResourcesEntries for getting ALL kinds of resources (other than Patient record) and also do transformation from backend process API to experience API for the Summary View (I moved the included patient resources into respective patient data resource eg Condition under the element "_includedPatient", so that it is easier for UI to render the data). 
The second method is getResourceDetail which is to get the detail payload of the specific record for any given type of resource for the Detail View
The UI layout is implemented in these two files
Summary View - https://codesandbox.io/p/sandbox/muqhwj...
Detail View - https://codesandbox.io/p/sandbox/muqhwj...

If you want to try out yourself, you can fork to a new project, and then try to modify these two files to add additional record type to be shown in UI, or update the data elements to be shown for each record type

Add new record type and corresponding menu item name in this file - https://codesandbox.io/p/sandbox/muqhwj...
Add/update data elements to be shown for the corresponding record type - update function resourceSummaryElements in this file - https://codesandbox.io/p/sandbox/muqhwj...