Building a Pharmacokinetic Calculator in Vue 3

Understanding how drug concentrations change over time is fundamental to medical science. This week, I built a pharmacokinetic calculator in Vue 3 + TypeScript that visualizes drug concentrations using one-compartment first-order absorption kinetics. What started as a feature request became a masterclass in systematic software engineering: planning, validation, test-driven development, and mathematical correctness.

The Problem: Visualizing Drug Behavior

When a patient takes a medication, the drug is absorbed into the bloodstream, reaches a peak concentration, and then is eliminated by the body. Pharmacokinetics describes this process mathematically.

The Architecture: Separation of Concerns

Rather than embedding calculations in Vue components, I separated the system into three clean layers: Models and Validation, a Pharmacokinetic Calculator, and Test Fixtures. This layering makes the system testable and maintainable.

Layer 1: Models and Validation

First, I defined a Prescription interface with pharmacological parameters. Then a validatePrescription() function checks every field against constraints: Dose 0.001–10000 units, Half-life 0.1–240 hours, Uptake 0.1–24 hours, and Frequency-to-times matching.

Layer 2: Pharmacokinetic Calculator

The core: a function computing drug concentration using the one-compartment model. Standard formula: C(t) = Dose × [ka/(ka – ke)] × (e^(-ke×t) – e^(-ka×t)). When ka ≈ ke (numerical instability), switch to limit formula: C(t) = Dose × ka × t × e^(-ke×t)

The Process: Orchestration Through Validation

Phase 1: Planning — Created detailed implementation plan. Phase 2: Validation — A validation agent reviewed against best practices and pharmacological correctness. Phase 3: Test-Driven Implementation — RED → GREEN → REFACTOR for each feature.

The Results: Comprehensive Test Coverage

Task 2: Prescription Models — 109 test cases. Task 3: Pharmacokinetic Calculator — 58 test cases. Total: 168 tests passing. All npm scripts pass (build, type-check, lint, test). Zero TypeScript errors in strict mode.

What We Learned

1. Delegation Works. Catching myself before implementing and delegating to planning agents saved rework.

2. Validation Before Implementation. A validation agent reviewing the plan caught edge cases before production code was written.

3. Fixtures First. Creating test fixtures before building the calculator meant tests could reuse the same data.

4. Mathematical Correctness Matters. Using Math.LN2 instead of hardcoded 0.693 provides IEEE 754 double-precision, reducing floating-point error.

5. Single Source of Truth. The KA_KE_TOLERANCE constant referenced in both validation and calculation ensures synchronization.

Key Takeaways

Orchestration matters. Delegating to specialized agents caught issues early. Test-driven design produces focused code. Fixtures are infrastructure. Mathematical correctness requires attention. Separation of concerns scales.

Next: Multi-Dose Accumulation

The single-dose calculator is ready as a building block. Task 4 will implement multi-dose accumulation, summing contributions across doses and normalizing the final curve to peak=1.0. This enables visualization of realistic dosing schedules showing how concentrations build up and eventually stabilize.

«
»

Leave a Reply