DEV Community

Botánica Andina
Botánica Andina

Posted on

I Built an Embeddable Supplement Interaction Checker — Here's What Surprised Me

#health #webdev #javascript #opensource

The Problem Nobody Talks About

There are hundreds of drug interaction checkers online. WebMD has one. Drugs.com has one. Medscape has one. They all answer the same question: "Will this pill interact with that pill?"

But none of them answer the question millions of people actually need answered:

"Are the 5 supplements I take every morning fighting each other?"

I take vitamin D, magnesium, omega-3, and zinc. Nothing exotic. But here's what I didn't know: calcium inhibits iron absorption by up to 60%. And fiber reduces iron absorption significantly through phytate binding. And caffeine blocks iron absorption by 39%.

So if you're taking an iron supplement with your morning coffee and a fiber-fortified breakfast — you might as well be throwing that iron pill in the trash.

What I Built

A Supplement Stack Safety Checker that focuses exclusively on supplement-supplement interactions — not drug interactions, not food interactions. Just the supplements you actually take.

The numbers:

  • 78 supplements (vitamins, minerals, herbs, amino acids, adaptogens, nootropics)
  • 102 documented interactions
  • Every interaction backed by a published study (PubMed, EFSA)
  • Runs entirely in the browser — zero server calls, zero tracking, zero accounts

The Surprising Findings

Building the interaction database from clinical literature revealed patterns that most supplement users (myself included) had no idea about.

1. The Anticoagulant Stack Problem

Omega-3, ginkgo biloba, garlic, and curcumin are four of the most popular supplements. They're all anticoagulants. Taking all four together significantly increases bleeding risk.

This isn't theoretical. Case reports document spontaneous bleeding in patients combining just two of these. Yet "heart health" supplement bundles routinely include 3-4 of them together.

2. The Absorption Competition Wars

Minerals are the worst offenders. Here's the conflict map:

Calcium ←→ Iron (60% absorption reduction)
Calcium ←→ Zinc (moderate reduction)
Calcium ←→ Magnesium (compete for same transporters)
Iron ←→ Zinc (compete for DMT1 transporter)
Caffeine → Iron (39% reduction via chelation)
Fiber → Iron (phytate binding)
Curcumin → Iron (chelation)
Enter fullscreen mode Exit fullscreen mode

The fix is simple: timing separation. Take competing minerals at different times of day. Iron on an empty stomach in the morning. Calcium with lunch. Magnesium at night.

The Stack Checker generates an optimal timing schedule automatically.

3. The Serotonin Trap

5-HTP (tryptophan) + St. John's Wort is a dangerous combination. Both increase serotonin levels through different mechanisms. Together, they can cause serotonin syndrome — a potentially life-threatening condition with symptoms including agitation, rapid heart rate, and high body temperature.

This is the same mechanism that makes combining SSRIs with MAOIs dangerous. Yet 5-HTP and St. John's Wort are both sold over-the-counter with no warnings about combining them.

4. The Synergies You're Missing

Not all interactions are negative. Some combinations are genuinely better together:

  • Vitamin D + Vitamin K2: D increases calcium absorption, K2 directs that calcium to bones instead of arteries. Without K2, high-dose vitamin D may promote arterial calcification.
  • Iron + Vitamin C: Vitamin C increases non-heme iron absorption by up to 67%.
  • NMN + Resveratrol: NMN raises NAD+ levels directly. Resveratrol activates sirtuins that USE NAD+. They work on the same longevity pathway from different ends.
  • L-Theanine + Caffeine: Theanine reduces caffeine's anxiety and jitters while preserving focus. The classic 2:1 ratio (200mg theanine : 100mg caffeine) is supported by controlled trials.

The Technical Build

The entire tool is a single HTML file. No React. No build step. No dependencies. Under 200KB.

<!-- The entire stack checker is embeddable -->
<iframe
  src="https://botanicaandina.com/herramientas/stack-checker/?embed=true"
  width="100%" height="600"
  frameborder="0"
  style="border:1px solid #e0e0e0;border-radius:8px;">
</iframe>
Enter fullscreen mode Exit fullscreen mode

Why single-file?

Because health tools need to be fast, reliable, and private. No loading spinners. No cookie banners. No "sign up to see your results."

The data structure is straightforward:

const SUPPLEMENTS = [
  { id: "vitd", name: "Vitamin D",
    aliases: ["vitamin d3", "cholecalciferol", "d3"],
    group: "vitamin", timing: "morning" },
  // ... 77 more
];

const INTERACTIONS = [
  { a: "calcium", b: "iron", type: "competition", severity: "high",
    effect: "Calcium inhibits iron absorption by up to 60%.",
    action: "Separate by 2+ hours. Iron on empty stomach.",
    source: "Hallberg et al. Am J Clin Nutr 1991;53(1):112-9" },
  // ... 101 more
];
Enter fullscreen mode Exit fullscreen mode

Each interaction includes:

  • Type: competition (absorption), synergy (better together), potentiation (risk amplification), antagonism (opposing effects)
  • Severity: high (avoid), medium (caution), low (adjust timing)
  • Action: what to actually do about it
  • Source: published study citation

The Embed System

The ?embed=true parameter triggers compact mode: no navigation, no footer, just the tool with a "Powered by Botánica Andina" attribution link. PostMessage API handles dynamic height adjustment.

If you run a health blog and want to add this tool for your readers:

<iframe id="stackChecker"
  src="https://botanicaandina.com/herramientas/stack-checker/?embed=true"
  width="100%" frameborder="0"
  style="border:1px solid #e0e0e0;border-radius:8px;">
</iframe>
<script>
window.addEventListener('message', function(e) {
  if (e.data && e.data.type === 'ba-stack-checker-height') {
    document.getElementById('stackChecker').style.height = e.data.height + 'px';
  }
});
</script>
Enter fullscreen mode Exit fullscreen mode

You can also pre-load specific stacks:

  • Sleep stack: ?embed=true&stack=magnesio,melatonina,ltheanine,valeriana
  • Joint health: ?embed=true&stack=glucosamina,condroitina,msm,curcuma,omega3
  • Brain stack: ?embed=true&stack=omega3,lions_mane,bacopa,alpha_gpc

Full embed documentation: botanicaandina.com/herramientas/stack-checker/embed/

Data Sources

All interactions are sourced from:

  • PubMed clinical trials and systematic reviews
  • European Medicines Agency (EMA) monographs
  • ESCOP (European Scientific Cooperative on Phytotherapy)
  • FDA adverse event reports (FAERS)

Each interaction entry includes the specific study citation. No "we think" or "some experts say" — just published evidence.

What's Next

The database currently covers 78 supplements. The gap is largest in:

  • Specific herbal extracts (standardized vs. whole herb interactions)
  • Dose-dependent interactions (many interactions only matter above certain thresholds)
  • Temporal interactions (some combinations are safe short-term but risky long-term)

If you know of supplement interactions backed by published research that we're missing — I'd love to hear about them.

Try It

→ Check your supplement stack

→ Embed on your site

The interaction data comes from our 592-entry herb-drug interaction database at Botánica Andina. If you're interested in the data side, check out our previous article on the full database.

Top comments (0)