Building Patient Details with IDE

Now let’s add the patient detail page.

Prompting Cursor

The approach here is the same. Give Cursor the spec and let it figure out the data structure by making API calls to the FHIR server. You also don’t need to specify LOINC codes like in the Lovable version. Cursor can query the server, look at what’s there and figure out the right codes.

Tell Cursor to:

• Open a patient detail page at /patient/[id] when a patient is clicked
• Show patient demographics at the top
• Use the following FHIR resources: Observation, MedicationRequest, and Medication (referenced in MedicationRequest), and Condition

The result

Once it’s done, click through to a patient with real data to verify. You should see:

• Patient demographics at the top
• Vital signs as a chart and a table, with a toggle between the two
• Active conditions
• Current medications

On the network tab, you’ll see the same sequence of API calls as before: GET /Patient/[id], then Observations, Conditions, and MedicationRequests, all filtered to active records.

The app stays lean with just React, React DOM, Tailwind, and the Bun Tailwind plugin. No router package or extra dependencies. Cursor handled routing by writing a simple navigation function instead.

This is a starting point. There’s a lot more you can add, e.g. more vitals in the chart, additional condition details, or anything else relevant to your use case. Feel free to experiment.

In the next lesson, we’ll deploy the app.