Medplum Hello World
Digital health companies often build custom UIs on top of the Medplum platform to design streamlined patient and physician experiences. This tutorial will cover to run the Medplum "Hello World" example, a simple React app that visualizes patient information.
Hello World is built with Medplum'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:
- Registered for a Medplum account. (If not registration instructions)
- Imported one or more sample patients. (If not import sample data)
First, make sure you have Node JS and npm installed. If not, follow instructions here.
Next, clone the Medplum Hello World repo
git clone https://github.com/medplum/medplum-hello-world.git
Next, install the dependencies
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
Explore Medplum Hello World
The Medplum 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.
The first page of the demo asks you to sign in using the Medplum credentials you set up in the the registration tutorial.
After entering your credentials, you will prompted to select a Medplum project. Click on the name on the project that you registered in the Tutorial 1, and you'll be redirected to the Hello World home page.
Once you log in, you'll be presented with a greeting, along with a list of all the patients in your Medplum project. Assuming you imported sample data, there will be two patients.
Click on the link in the "Welcome" greeting to access the Practitioner profile page.
This page uses the Medplum's
ResourceTable component to display basic data about the profile resource of the logged-user. You can read more about profile resources here.
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 Medplum's built-in
PatientTimelinecomponent to add comments, upload files, and display relevant events related to the Patient.
- The History A view uses the Medplum's built-in
ResourceHistoryTablecomponent to display the history of changes to the Patient resource.
You've now built and run a simple custom UI built on top of the Medplum platform!
Medplum Hello World is a very simple app intended to help developers learn the Medplum platform. The following tutorials will dive into details of how this application was built.
Medplum 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.
- Foo Provider (under construction): An example provider portal, with Patient records, task lists, questionnaires, and care plans.