Skip to main content

Fanoni Hello World

Digital health companies often build custom UIs on top of the Fanoni platform to design streamlined patient and physician experiences. This tutorial will cover how to run the Fanoni "Hello World" example, a simple React app that visualizes patient information.

Hello World is built with Fanoni's React Component library, which is a great resource for rapid prototyping and building internal tools.

Clone and Run the App​

This tutorial assumes you have already:

First, make sure you have Node JS and npm installed. If not, follow instructions here.

Next, clone the Fanoni Hello World repo

git clone https://github.com/medplum/medplum-hello-world.git
cd medplum-hello-world

Next, install the dependencies

npm install

Then, run the app

npm run dev

You should be able to access the Hello World app at http://localhost:3000/. You can stop the Node JS process using Ctrl+C.

Explore Fanoni Hello World​

The Fanoni Hello World demo is a simple application that presents a list of current patients, along with detailed patient information.

In this section, we'll familiarize ourselves with functionality of the Hello World demo. Follow-on tutorials will dive deeper into how the app was built.

Sign-in​

The first page of the demo asks you to sign in using the Fanoni credentials you set up in the registration tutorial.

After entering your credentials, you will be prompted to select a Fanoni project. Click on the name of the project that you registered in Tutorial 1, and you'll be redirected to the Hello World home page.

Home Page​

Once you log in, you'll be presented with a greeting, along with a list of all the patients in your Fanoni project. Assuming you imported sample data, there will be two patients.

Practitioner Profile​

Click on the link in the "Welcome" greeting to access the Practitioner profile page.

This page uses Fanoni's ResourceTable component to display basic data about the profile resource of the logged-user. You can read more about profile resources here.

Patient Profile​

Click on the "Hello World" link in the top left corner to return to the homepage.

Click on any individual patient name to navigate to the patient details page. This page has three different views of the patient data:

  • The Overview panel demonstrates how to use plain HTML to create a custom view of patient data, including linked ServiceRequests and DiagnosticReports.
  • The Timeline panel uses Fanoni's built-in PatientTimeline component to add comments, upload files, and display relevant events related to the Patient.
  • The History A view uses the Fanoni's built-in ResourceHistoryTable component to display the history of changes to the Patient resource.

Conclusion​

You've now built and run a simple custom UI built on top of the Fanoni platform!

Fanoni Hello World is a very simple app intended to help developers learn the Fanoni platform. The following tutorials will dive into details of how this application was built.

Fanoni also maintains more feature-rich example applications that companies can use as a starting point for building their own experiences:

  • Foo Medical: An example patient portal, complete with messaging, vital signs, and vaccination records.
Last updated on