Building Dependency-Free Health APIs: A Client-Side Architecture Case Study

How I Built a Health Data API With Zero Dependencies (And Why You Should Too)

Developer Botánica Andina engineered an herb-drug interaction checker that processes nearly 600 medical records entirely within the browser. The system performs fuzzy matching and DOM updates in approximately 0.5ms per keystroke without any external API calls. This architecture ensures that sensitive health queries never leave the user’s local device.

Why This Matters

Health data is uniquely sensitive; server-side queries for drug interactions automatically generate logs that reveal patient diagnoses and medication history. This architecture forces developers to manage heavy HIPAA and GDPR compliance burdens for data that often doesn’t need to be centralized. Moving the database to the client side removes the server as a middleman, ensuring the query never leaves the browser. This technical shift eliminates breach notification obligations and provides a 400x speed advantage over standard API round-trips on high-speed connections, while remaining functional in low-connectivity environments like rural clinics.

Key Insights

• Client-side fuzzy matching on 592 items takes just 0.12ms, outperforming 3G network API round-trips by over 800ms.
• Accent normalization using NFD form is essential for internationalized medical tools to handle interchangeable inputs like ‘maca’ and ‘máca’.
• Evidence levels including Clinical, Pharmacological, and Theoretical serve as a technical liability shield by contextualizing data reliability.
• Zero-dependency vanilla JS architectures result in ultra-portable tools, with this entire application weighing only 127KB gzipped.
• The threshold for requiring server-side search is approximately 50,000+ records; below this, client-side iteration is more efficient.

Working Examples

Structured JavaScript constant used as a client-side database.

const INTERACTIONS = [{ id: "int-001", substance_a: { id: "warfarin", name: "Warfarin", type: "drug" }, substance_b: { id: "ginkgo", name: "Ginkgo biloba", type: "herb" }, severity: "high", effect: "Increased bleeding risk", mechanism: "Ginkgo inhibits platelet-activating factor (PAF)", evidence: "clinical", sources: ["Bent et al. 2005", "WHO Monographs"] }];

Fuzzy matching logic with NFD normalization for accent-insensitive search.

function fuzzyMatch(query, items) { const q = query.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, ""); return items.map(item => { const name = item.name.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, ""); if (name.startsWith(q)) return { item, score: 100 }; if (name.includes(q)) return { item, score: 80 }; const words = name.split(/[\s.-]+/); if (words.some(w => w.startsWith(q))) return { item, score: 60 }; return { item, score: 0 }; }).filter(r => r.score > 0).sort((a, b) => b.score - a.score).slice(0, 8).map(r => r.item); }

Practical Applications

• Use Case: Rural medical clinics utilizing offline-first PWAs to check drug interactions without internet connectivity. Pitfall: Using flat text storage which complicates scaling; structured objects with IDs and enums are required for long-term maintenance.
• Use Case: Health education sites embedding interactive tools via iframes to generate SEO backlinks. Pitfall: Omitting Schema.org markup like WebApplication or FAQPage, which limits rich result visibility in search engines.
• Use Case: Internationalized health tools using NFD normalization for Spanish-language medical search. Pitfall: Relying on auto-translation for clinical terms like ‘anticoagulante’ which may lack precise equivalence in different medical contexts.

References:

• https://dev.to/botanica_andina/how-i-built-a-health-data-api-with-zero-dependencies-and-why-you-should-too-577o