From Claude Artifact to Production PWA: Building VitaminD Explorer

From Claude Artifact to Production PWA: Building VitaminD Explorer

JaviMaligno transformed a simple query about vitamin D synthesis into a production-ready PWA using Next.js and D3.js. The system utilizes Spencer’s 1971 formula for solar declination and the equation of time to calculate UV synthesis windows.

Why This Matters

Theoretical solar geometry often fails to account for the complex biological reality of vitamin D synthesis. While basic models look at solar elevation, actual production is limited by a saturating exponential curve where previtamin D3 photodegrades into inert compounds like lumisterol. Engineering a tool for this requires reconciling astronomical data with dermatological variables like the Fitzpatrick scale and body area exposure percentages. Synthesis efficiency is not static, decreasing by approximately 1.3% every year after age 20, requiring precise modeling to provide accurate health data.

Key Insights

• Vitamin D synthesis efficiency decreases by approximately 1.3% per year after age 20, as documented by Holick et al. (1989).
• The body has a built-in overdose protection where previtamin D3 photodegrades under continued UVB into inert lumisterol and tachysterol (Holick 1982).
• Canvas rendering was required over SVG to maintain mobile performance for a 47,450-cell heatmap (130 latitudes x 365 days).
• The difference in Minimal Erythemal Dose (MED) between Fitzpatrick skin types I and VI is a factor of 6x.
• VAPID key corruption occurred during Vercel environment setup because the ‘echo’ command appended a newline character; ‘printf’ is required for cryptographic keys.

Working Examples

Saturating exponential model for vitamin D production accounting for photodegradation.

IU(t) = IU_sat * (1 - e^(-R * t / IU_sat))

Practical Applications

• Use Case: Cross-platform deployment via PWA to avoid Apple’s $99/year developer fee and manual app store reviews. Pitfall: Missing native features like background location tracking and Apple Health integration.
• Use Case: Real-time UV monitoring via Open-Meteo API for cloud-adjusted exposure times. Pitfall: Double-counting cloud cover factors when using APIs that already integrate cloud data into their UV index.

References:

• https://dev.to/javieraguilarai/from-claude-artifact-to-production-pwa-building-vitamind-explorer-3om3