PicTrack

Inspiration

Most digital immunization tools like hospital portals, government e-health apps, commercial baby trackers are built for a literate, smartphone-fluent, always-connected user. That assumption quietly excludes the caregivers most affected by preventable child mortality under SDG Target 3.2: people with limited formal schooling, migrants navigating a healthcare system in a non-native language, and grandparents or other non-primary caregivers who didn't grow up with digital literacy. A missed or misunderstood vaccine appointment isn't usually a vaccine-availability problem, it's a design problem. We wanted to build for the accessibility floor, not the median smartphone user.

What it does

PicTrack lets a caregiver add a child with just a name and date of birth; no account, no email, no password. It shows a visual timeline of the child's vaccine schedule using icons and calm color coding (done / upcoming / still due). Tapping an item shows a large icon, a one-line plain-language label, and a Listen button that speaks a short explanation aloud via the Web Speech API with a real-time transcript underneath that highlights each word as it's spoken, so the caregiver can follow along whether they read, listen, or both. Marking an item done automatically highlights the next one. On first use, an icon-and-audio walkthrough explains how the app works and states clearly, out loud, that it's not medical advice; just a reminder and explainer of a public schedule. Everything lives in the browser's local storage; nothing is sent to a server.

How we built it

Next.js (App Router) with Tailwind CSS and a single consistent icon set (Lucide), split into a lib/ layer (schedule.js, storage.js, dateUtils.js) and small, single-responsibility components (AddChildForm, TimelineItem, AudioButton, IconLegend, Onboarding). The vaccine schedule isn't invented, it's transcribed and cited directly from WHO's official "Recommended Routine Immunizations for Children" table, with month-based ages converted to a single sortable weeks field. The audio system is built on SpeechSynthesisUtterance, extended with the onboundary event to map each spoken word's character offset back to a word index, driving the live-highlighted transcript. We deployed to Vercel with the GitHub repo connected directly, so every push auto-deploys.

Challenges we ran into

The Web Speech API is notoriously inconsistent across browsers, so we didn't just test in Chrome and hope, we drove Chromium, Firefox, and WebKit headlessly through the actual "Listen → Stop" interaction to confirm it reset cleanly everywhere, and built a visual-only fallback transcript for devices where speech synthesis isn't available at all. Icon-first design also carries a real risk: icons aren't universally understood, so every icon is paired with a one-word label and a full spoken explanation rather than standing alone. We also had to keep the "overdue" state calm rather than alarming amber "Still due" instead of a harsh red "OVERDUE", so a stressed caregiver isn't shamed into disengaging entirely.

Accomplishments that we're proud of

A full core loop: see the next vaccine, hear it explained with a synced transcript, mark it done, get auto-advanced to the next one, that's demoable in under a minute and genuinely usable without reading a word. Real, cited medical data instead of placeholder content. A mobile-viewport check with actual touch-target measurements and a three-browser Speech API smoke test, both driven through a real headless browser rather than assumed. And a visible, spoken, icon-paired medical disclaimer at first use, instead of a buried line of fine print.

What we learned

Accessibility isn't a visual style, it's a set of constraints (no reliance on reading, no reliance on icon-only meaning, no accounts or forms) that shape every technical decision, down to which lint warnings are safe to suppress and which color to use for "still due." We also learned that "it works in Chrome" is not evidence it works, cross-browser testing surfaced real gaps even in something as ostensibly standard as SpeechSynthesisUtterance.

What's next for PicTrack

Partner with a local clinic or NGO to pilot with real caregivers and test icon comprehension directly with the target population, since icon literacy like text literacy isn't universal and needs validation, not assumption. Replace local storage with a lightweight backend plus real SMS/USSD integration for caregivers on feature phones, not just smartphones. Localize icon sets, spoken language, and voice per region. And extend beyond a single child once the one-child MVP has been validated with real users.

Built With

• css
• eslint
• javascript
• localstorage
• lucide
• next.js
• react
• tailwind
• vercel
• webspeechapi