{"slug": "from-half-built-to-live-how-i-completed-my-vaccine-cold-chain-dashboard", "title": "From Half-Built to Live: How I Completed My Vaccine Cold Chain Dashboard", "summary": "Yashvendra Nirwan completed VaxSafe AI, a real-time vaccine cold chain monitoring dashboard that connects to IoT temperature sensors via the Blynk Cloud API. The system features a 3D interactive dashboard with Three.js visualization, an intelligent state engine that tracks temperature change rates for predictive warnings, and automatic simulation fallback when sensors are offline. The project, built as a single HTML file for simplified deployment, includes audio alarms, vaccine lifecycle tracking, and a lid animation that opens during critical temperature alerts.", "body_md": "Vaccines are fragile. A few degrees too warm for a few hours can silently destroy an entire batch — and nobody knows until it's too late. That's the problem I wanted to solve.\n\n**VaxSafe AI** is a real-time cold chain monitoring dashboard that connects directly to an IoT temperature sensor via the Blynk Cloud API. It watches vaccine storage conditions 24/7, visualizes everything in a 3D interactive dashboard, and raises the alarm the moment something goes wrong — before any damage is done.\n\n**Features:**\n\n🔗 **Live site:** [https://yashvendranirwan-alt.github.io/vaxsafesite/](https://yashvendranirwan-alt.github.io/vaxsafesite/)\n\nThe live site connects to my actual IoT device. If the sensor is offline, simulation mode kicks in automatically — you'll still see the full dashboard, trend analysis, and alarm system in action.\n\nTo connect your own sensor: paste your Blynk auth token into the header field and hit **Connect**. Virtual pin V0 should publish your temperature value.\n\nThis project started as a rough prototype — a basic temperature gauge that pinged a sensor and showed a number. Functional, but completely bare. No context, no visual feedback, nothing that would tell a real healthcare worker whether to panic or relax.\n\n**Before the finish-up sprint:**\n\n**Here's what changed:**\n\n**Three.js cold storage visualization** — I built a full 3D animated vaccine box with a canvas-texture medical label, frost particles that shift color by state, and a lid that physically opens when a critical alert fires. Drag to rotate, works on mobile.\n\n**Intelligent state engine** — instead of a simple threshold alert, the system now tracks the rate of temperature change over a rolling window. Rising at 0.6°/interval inside the safe range? The AI message already tells you to pre-cool the storage — before the breach happens.\n\n**Simulation fallback** — if the IoT device is offline (or you're just demoing), the dashboard simulates a realistic cold-chain sine-wave pattern so the UI is always live and demonstrable.\n\n**Audio alarm** — Web Audio API square-wave beep that fires and loops only on critical state, stops cleanly on recovery.\n\n**Vaccine lifecycle panel** — batch ID, manufacture date, expiry countdown, and a colour-shifting progress bar (green → amber → red as expiry approaches).\n\n**It turned scaffolding into a conversation.**\n\n**Three.js geometry suggestions** — when I was building the vaccine box, I described what I wanted and Copilot filled in the corner strip coordinates and lid hinge group structure. Getting the spatial math right manually would have taken an hour of trial and error.\n\n```\n// Described: \"I need 4 vertical corner strips on a 2.2 x 1.5 x 1.3 box\"\n// Copilot suggested the coordinates — I verified and adjusted:\n[[-1.12,-.05,-0.655],[1.12,-.05,-0.655],[-1.12,-.05,0.655],[1.12,-.05,0.655]]\n```\n\n**Web Audio API boilerplate** — the alarm beep function uses oscillator nodes and gain ramps. Copilot drafted the structure; I tuned the frequency and interval to get a sound that feels urgent without being ear-splitting.\n\n**Chart.js custom plugin** — the safe-zone highlight band behind the temperature graph is a custom `beforeDatasetsDraw`\n\nplugin. Copilot got me 80% there and I finished the pixel calculations for the safe range overlay.\n\nWhere I still had to think for myself: the state machine logic (especially the trend-based warnings vs. raw threshold alerts), the Three.js lid animation lerp, and making the simulation fallback feel realistic rather than robotic. Copilot is great at structure and boilerplate — the product decisions are still yours to make.\n\nNo npm install. Just a single HTML file that works anywhere — because in healthcare infrastructure, the simpler the deployment, the better.\n\n*Built for the GitHub Finish-Up-A-Thon Challenge on DEV.to*", "url": "https://wpnews.pro/news/from-half-built-to-live-how-i-completed-my-vaccine-cold-chain-dashboard", "canonical_source": "https://dev.to/yashvendra_nirwan_6dcc24c/vaxsafe-ai-cold-chain-monitoring-system-for-vaccines-published-true-tags-github-javascript-1m0f", "published_at": "2026-05-29 13:25:32+00:00", "updated_at": "2026-05-29 13:43:28.244030+00:00", "lang": "en", "topics": ["ai-products", "ai-tools"], "entities": ["VaxSafe AI", "Blynk Cloud API", "Three.js"], "alternates": {"html": "https://wpnews.pro/news/from-half-built-to-live-how-i-completed-my-vaccine-cold-chain-dashboard", "markdown": "https://wpnews.pro/news/from-half-built-to-live-how-i-completed-my-vaccine-cold-chain-dashboard.md", "text": "https://wpnews.pro/news/from-half-built-to-live-how-i-completed-my-vaccine-cold-chain-dashboard.txt", "jsonld": "https://wpnews.pro/news/from-half-built-to-live-how-i-completed-my-vaccine-cold-chain-dashboard.jsonld"}}