Building the Patient List with IDE

Now let’s build the app with an IDE. You have lots of options here, we’re using Cursor, a fork of VS Code with AI built in. It’s free and anyone can use it without a subscription. There are other options too like VS Code with Claude Code or Codex CLI.

Setting up

We’ll use TypeScript with Bun. TypeScript is close to plain English most of the time, making it readable and beginner-friendly. It also lets you use the same language for both the front end and back end. Bun is a JavaScript runtime that runs both together in a single process, which makes the development cycle faster. If you prefer Node.js, that works too.

Install Bun if you haven’t already (version 1.3+). Then create a new folder and run:

bun init

Select React and Tailwind CSS when prompted. Tailwind is a CSS class system that handles styling without you having to write CSS yourself.

Open the project in Cursor and run:

bun dev

This starts a server at localhost:3000.

Setting up FHIR proxy

Create a .env file and add your FHIR base URL and bearer token. You can get both from the Export section of the Medblocks platform.

Next, set up a proxy route in index.ts that forwards all requests to your FHIR server with the authorization header attached. This keeps the bearer token out of the front end.

You can use the AI chat in Cursor to write this, just describe what you want and review what it produces before accepting. If the proxy isn’t working immediately, check what headers are being passed through. The fix is usually to set the Content-Type header to application/json.

Building the patient list

Once the proxy is working, prompt Cursor to build a patient list component that fetches from /fhir/Patient and displays name, gender, and date of birth.

Then, add the remaining features:

• Create and edit patients via a modal form
• Search by name using the name FHIR search parameter
• Debounce the search input. This will likely add a 250ms delay before making the API call, which prevents a new request firing on every keystroke

If you’re using TypeScript, use the @types/fhir library for FHIR resource types instead of declaring your own. Prompt Cursor to clean up any hand-rolled types and replace them with fhir4.Patient and fhir4.Bundle.

Verifying the output

Open the network tab and confirm:

• Page load triggers GET /Patient
• Search triggers GET /Patient?name=[query]
• Creating a patient triggers POST /Patient with a 201 response
• Editing a patient triggers PUT /Patient/[id]

The whole patient list component ends up around 100 lines of code. In the next lesson, we’ll build the patient detail page.