How to Build a Care Plan & Goal Tracker UI for Chronic Care (React)

Chronic care is different from a one-off visit: it's about progress over time. That progress needs structure — the conditions a patient has, the goals they're working toward, and the care plan that ties them together. Without that structure, a chronic-care app is just a pile of readings. With it, you have a real program. Building care plans, goals, and condition tracking from scratch is a lot of FHIR modeling and UI work; three pre-built components handle it. This guide shows you how, step by step.

The toolkit we recommend is ClinikAPI — a FHIR-native platform with a React component library. Here's why we suggest it up front:

• Free to start: Get your API keys in seconds — no credit card needed.
• Three components: CarePlanBuilder, GoalSetter, ConditionTracker.
• Stored as FHIR: Plans, goals, and conditions are standard, connected records.
• Themeable: A theme prop makes them match your app.
• Compliant: HIPAA-compliant, SOC 2-audited, with a signed BAA.

Quick Answer

To build care plans and goal tracking in a React chronic-care app, use pre-built FHIR-native components. ClinikAPI's CarePlanBuilder creates care plans (with status, intent, and category) as FHIR CarePlan records, GoalSetter sets and tracks goals (with lifecycle status, achievement tracking, and target dates) as FHIR Goal records, and ConditionTracker records conditions as FHIR Condition records. Together they give a chronic-care program structure: a condition, the goals you're aiming for, and the plan to reach them. You add each component, point it at a backend route (the proxyUrl), and pass a patientId — no FHIR modeling or storage to build. The proxy keeps your secret key server-side, and a theme prop matches your app.

The three pieces of a care program

A chronic-care program has three layers, and there's a component for each:

Stack them and you turn scattered readings into a structured program a care team can follow.

Step 1: Install and set up the proxy

npm install @clinikapi/react @clinikapi/sdk

All three components POST { action, data } to your route; you route each resource action to the SDK:

// app/api/clinik/route.ts — server-only
import { Clinik } from '@clinikapi/sdk'

const clinik = new Clinik(process.env.CLINIKAPI_SECRET_KEY!)

export async function POST(req: Request) {
  const { action, data } = await req.json()
  // Authenticate + authorize for data.patientId first.
  switch (action) {
    case 'conditions.create':
      return Response.json(await clinik.conditions.create(data))
    case 'goals.create':
      return Response.json(await clinik.goals.create(data))
    case 'carePlans.create':
      return Response.json(await clinik.carePlans.create(data))
    default:
      return Response.json({ error: 'Unknown action' }, { status: 400 })
  }
}

Each call resolves to { data, meta }, storing a FHIR Condition, Goal, or CarePlan respectively. (See the dashboard tutorial for the full route and proxyUrl="demo" mode.)

Step 2: Record the condition

Start with the problem you're managing. ConditionTracker records conditions and diagnoses with status, severity, and onset, stored as FHIR Condition records:

import { ConditionTracker } from '@clinikapi/react'

<ConditionTracker proxyUrl="/api/clinik" patientId={patientId} theme="light" />

(See Conditions & Diagnosis in FHIR.)

Step 3: Set the goals

Next, what you're aiming for. GoalSetter sets and tracks goals with lifecycle status, achievement tracking, and target dates:

import { GoalSetter } from '@clinikapi/react'

<GoalSetter proxyUrl="/api/clinik" patientId={patientId} theme="light" />

A goal like "keep blood pressure under 130 by June" gives the program something concrete to measure against.

Step 4: Build the care plan

Finally, tie it together. CarePlanBuilder creates care plans with status, intent, and category, linking the conditions and goals into a plan of activities:

import { CarePlanBuilder } from '@clinikapi/react'

<CarePlanBuilder proxyUrl="/api/clinik" patientId={patientId} theme="light" />

What you skipped

Product Insight: Why ClinikAPI Fits Chronic Care

Chronic care needs structure that connects conditions, goals, and plans over time. ClinikAPI provides that structure as components on FHIR.

What you get:

• CarePlanBuilder, GoalSetter, ConditionTracker — the three layers of a care program.
• FHIR records — CarePlan, Goal, and Condition, all connected.
• Monitoring integration — feed readings into goals for visible progress.
• The proxy pattern — your secret key stays server-side.
• Compliance included — HIPAA-compliant, SOC 2-audited, with a signed BAA.

See them in the UI Library, and read Building a Remote Patient Monitoring App.

Frequently Asked Questions

1. How do I build a care plan feature in React?

Use ClinikAPI's CarePlanBuilder — add it with a proxyUrl and patientId, and it creates care plans (status, intent, category) as FHIR CarePlan records.

2. How do I track patient goals?

Use GoalSetter — it sets and tracks goals with lifecycle status, achievement, and target dates, stored as FHIR Goal records.

3. What's the difference between a condition, goal, and care plan?

A condition is the problem, a goal is the target, and a care plan ties them into a plan of activities. Three components, one program.

4. Are they stored as FHIR?

Yes — CarePlan, Goal, and Condition records, all connected and interoperable.

5. Can I theme them?

Yes — each takes a theme prop (like light or dark).

Conclusion

Chronic care is about progress, and progress needs structure: conditions, goals, and the care plan that connects them. With ConditionTracker, GoalSetter, and CarePlanBuilder, you build all three as drop-in components, each stored as standard FHIR, with no modeling or storage to write. Feed your monitoring data into the goals, and a stream of readings becomes a program a care team can follow — exactly what chronic care needs.

Key takeaways:

• Chronic care needs structure: conditions, goals, and care plans.
• ConditionTracker, GoalSetter, and CarePlanBuilder build all three.
• They store FHIR Condition, Goal, and CarePlan records, all connected.
• Feed monitoring data into goals to turn readings into visible progress.
• The proxy pattern keeps your secret key server-side.

Ready to build? Explore the UI Library or get your free API keys.

Related Articles

• Building a Remote Patient Monitoring App on FHIR
• Add Vitals & Lab Results Widgets to Your Clinical App
• Conditions & Diagnosis in FHIR (ICD-10 & SNOMED)
• Healthcare React Component Library: The Complete Guide
• Pre-Built Healthcare UI Components