Why I Built NutriNature 🌿

Most of us take dietary supplements—Vitamin D3, Magnesium, Vitamin C, Zinc—hoping to optimize our health. But as I dug deeper into nutritional biochemistry, I realized two frustrating realities:

  1. Synthetic Isolates Often Fail in the Gut: Cheap pills like Magnesium Oxide have an oral bioavailability of ~4% (acting more like a laxative than a nutrient), while raw curcumin passes right through the liver without co-factors. Whole foods contain bound enzymes, phospholipids, and bioflavonoids that dramatically enhance absorption.
  2. Digital Health Apps Harvest Your Data: Almost every health platform requires creating an account and sends your health conditions and dietary habits to analytics trackers.

I wanted to build a solution: NutriNature — an open-source, client-side web engine that converts dietary supplement routines into bio-identical, allergen-safe whole food nutrition with zero server telemetry.

🛠️ The Architecture: Absolute Client-Side Privacy

To ensure no personal health data ever leaves the user's device, the entire app runs with a hardened Content Security Policy (CSP):

<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'none'; font-src 'self' data:;">

By enforcing connect-src 'none', the browser physically refuses to establish any outbound network connections (fetch, XMLHttpRequest, WebSocket, or sendBeacon). Even if an external script were injected, data exfiltration is mathematically blocked by the browser engine.

Persistent Sessions via Local Cookies

Instead of requiring a database login, user state is saved on-device using:

  • document.cookie with SameSite=Strict, Path=/, and a 365-day expiry.
  • Mirrored to localStorage for offline redundancy.
  • A live Cookie & Privacy Vault that displays the exact byte size and raw JSON payload saved in the browser, with a one-click "Wipe All Cookies" button.

🔬 Whole-Food Bio-Equivalency & Biochemical Synergies

NutriNature doesn't just list foods—it accounts for physiological co-factors:

  • Non-Heme Iron + Vitamin C: Plant iron (lentils, spinach) absorption increases by 300% when paired with natural Vitamin C from lemon juice or raw bell peppers.
  • Curcumin + Piperine + Healthy Fats: Grated turmeric simmered in coconut milk or whole milk with black pepper elevates curcumin bioavailability by 2,000%.
  • Vitamin D3 + Vitamin K2 (MK-7) + Magnesium: Vitamin K2 (from fermented Natto or aged Gouda) carboxylates Osteocalcin to guide calcium into bones rather than arterial walls.
  • Low-Oxalate Greens: Bok choy and collard greens yield 54% absorbable calcium, beating cow milk's 30% absorbability rate.

🚫 14-Allergen Filter & Biological Dynamics

The matching engine dynamically adjusts to the user:

  • Allergies: Checks against 14 recognized allergens (peanuts, tree nuts, dairy, eggs, gluten, soy, fish, shellfish, sesame, nightshades, histamines). Selecting an allergen instantly removes all conflicting foods and highlights safe alternatives.
  • Age & Biological Sex: Calibrates iron targets (18mg for menstruating females, 27mg in pregnancy, 8mg for post-menopause/males) and elevates B12/Calcium recommendations for seniors.
  • Chronic Conditions: Applies safeguards for Chronic Kidney Disease (restricting potassium/phosphorus), Hypertension, and Diabetes.
  • 1-Day Meal Plan & Bio-Basket: Synthesizes all selections into a realistic grocery checklist and a unified breakfast, lunch, snack, dinner, and bedtime plan.

🔗 Try It Out & Explore the Code

I’d love to hear your thoughts on the client-side privacy architecture and nutritional mapping logic! Feel free to leave feedback or open an issue on GitHub.