What I Built
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.
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.
Features:
- 🌡️ Live IoT readings — pulls from Blynk Cloud every 5 seconds via your auth token
- 📦 3D cold storage model — draggable Three.js visualization, lid opens on critical alert
- 🤖 AI analysis engine — contextual advice based on temperature trend, not just threshold
- 🔔 Smart alarm system — audio beep + screen flash + banner on critical breach
- 📈 Temperature history chart — 30-reading rolling window with a safe-zone highlight band
- 💉 Vaccine lifecycle tracker — batch ID, manufacture date, days remaining, expiry progress bar
Demo
🔗 Live site: https://yashvendranirwan-alt.github.io/vaxsafesite/
The 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.
To connect your own sensor: paste your Blynk auth token into the header field and hit Connect. Virtual pin V0 should publish your temperature value.
The Comeback Story
This 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.
Before the finish-up sprint:
- Plain HTML page
- Single temperature readout
- No chart history
- No alerts
- No 3D visualization
- Blynk connection but no graceful fallback for offline/demo use
Here's what changed:
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.
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.
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.
Audio alarm — Web Audio API square-wave beep that fires and loops only on critical state, stops cleanly on recovery.
Vaccine lifecycle panel — batch ID, manufacture date, expiry countdown, and a colour-shifting progress bar (green → amber → red as expiry approaches).
My Experience with GitHub Copilot
It turned scaffolding into a conversation.
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.
// Described: "I need 4 vertical corner strips on a 2.2 x 1.5 x 1.3 box"
// Copilot suggested the coordinates — I verified and adjusted:
[[-1.12,-.05,-0.655],[1.12,-.05,-0.655],[-1.12,-.05,0.655],[1.12,-.05,0.655]]
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.
Chart.js custom plugin — the safe-zone highlight band behind the temperature graph is a custom beforeDatasetsDraw plugin. Copilot got me 80% there and I finished the pixel calculations for the safe range overlay.
Where 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.
Tech Stack
- Three.js r128 — 3D cold storage visualization
- Chart.js 4.4 — temperature history graph
- Blynk Cloud API — IoT sensor integration
- Web Audio API — alarm sound system
- Vanilla JS / HTML5 / CSS Grid — no frameworks, no build tools
No npm install. Just a single HTML file that works anywhere — because in healthcare infrastructure, the simpler the deployment, the better.
Built for the GitHub Finish-Up-A-Thon Challenge on DEV.to
Top comments (0)