Building Patient Details Page with Lovable

Let’s extend the app to add the patient details page.

Understanding the prompt

The same principle applies here: give the prompt as much domain context as possible. The most important addition is the LOINC codes for vital signs. Each observation type in FHIR has a specific code, heart rate, blood pressure, etc. Including the right codes in the prompt means the app will fetch the right data. You can look these up by making a GET /Observation request in Postman, and browsing results.

The prompt

Extend this app to add a patient details page.

Make each patient in the list clickable. Clicking a patient should navigate to a new page at /patient/[id]. On that page, show the following:

At the top, show the patient’s demographics fetched from GET /Patient/\[id]:

• Full name
• Gender
• Date of birth

Below that, show a vitals section. Fetch the patient’s vital signs using:

GET /Observation?subject=Patient/[id]&code=8867-4,8310-5,9279-1,59408-5,8302-2,29463-7,39156-5,55284-4

Display the following vital signs, each as a separate time-series line chart showing how the value changes over time. LOINC codes are provided:

• Heart rate: 8867-4
• Temperature: 8310-5
• Respiratory rate: 9279-1
• Oxygen saturation: 59408-5
• Height: 8302-2
• Weight: 29463-7
• BMI: 39156-5
• Blood pressure: Show systolic (LOINC 8480-6) and diastolic (LOINC 8462-4) as two lines on the same chart.

Add a toggle above the vitals section that switches between chart view and table view. The table should show each reading with its date and value.

Fetch the patient’s conditions using: GET /Condition?patient=[id] Display them in a table showing the condition name and onset date.

Fetch the patient’s current medications using: GET /MedicationRequest?patient=[id] Display them in a table showing the medication name and status.

Running the prompt

Paste the prompt into Lovable as a follow up in the same project. Lovable will extend the existing app instead of rebuilding from scratch.

Once you submit, it will take some time to build. As with the first prompt, it may not get everything right the first time. That’s normal with vibe coding.

The result

Once Lovable finishes, click on any patient in the list to open the detail page. Verify the output with the below checklist:

• Does clicking a patient navigate to a new page?
• Does the page show patient demographic details?
• Do vital signs load and display correctly?
• Do conditions and medications show up?

If a vital sign isn’t appearing, check the network tab on the published app and verify in Postman that the observation exists for that patient. Most of the time the data is there, it’s just a code mismatch. Paste the actual observation from Postman into the prompt and ask Lovable to fix it.

(Note: The prompt is edited to use MedicationRequest instead of MedicationStatement)

In the next lesson, we’ll look at the API calls this page is making and understand how it works.