Vaccination Tracker

Inspiration

As a parent juggling my kids’ pediatric vaccines, my annual flu shot, and international work travel, I struggled to keep track of it all—scattered paper records, missed booster reminders, and endless Googling for travel vaccine rules. I wanted a one-stop tool that felt calm, intuitive, and tailored to real family needs, not just a clunky spreadsheet.

What it does

Vaccination Tracker centralizes family vaccine records (for kids, adults, and travelers), sends clear reminders for upcoming/overdue shots, breaks down travel vaccine requirements by destination, and houses trusted vaccine info from CDC/WHO. It exports official PDF records for school/work/travel too.

How we built it

I started with wireframing the core tabs (Records, Reminders, Travel, Info Hub) to prioritize user flow. I coded the UI with HTML/CSS, leaning into glassmorphism and smooth animations (hover effects, fade-ins, timeline cards) for a medical-tech feel. I added mock family data to test usability, built form validation for record entry, and integrated PDF export functionality for official records.

Challenges we ran into

The biggest hurdle was balancing visual flair (animations, gradients) with performance—ensuring micro-animations didn’t slow down the interface. I also struggled with designing the family member selector to be mobile-friendly (eventually landing on a horizontal scrollable avatar row) and making the PDF export format comply with official document standards.

Accomplishments that we're proud of

Creating a UI that’s both beautiful and functional—users comment on how the glassmorphism cards and color-coded status badges make complex info easy to scan. The PDF export feature is now used by friends for school vaccine submissions, and the travel vaccine categorization (Required/Recommended/High-Risk) has simplified pre-trip planning for many.

What we learned

I deepened my understanding of user-centric design—empty states with friendly illustrations matter more than I thought! I also learned to balance animation timing (200-400ms ease-in-out) to keep interactions smooth without feeling distracting. Most importantly, I realized how critical clear, jargon-free language is for healthcare tools.

What's next for this project

First, I want to add push notifications for reminders (SMS/email). Next, integrate live CDC/WHO travel vaccine APIs to replace static destination data. I also plan to add multi-device sync (cloud storage) and support for vaccine QR code scanning—making it even easier to log records on the go. Finally, I’ll refine the PDF export to include regional compliance for EU/US official use cases.

Built With

• css
• css-gradients
• html
• inter
• javascript
• svg