MedMinder — About the Project
Inspiration
The idea for MedMinder came from watching my grandparents struggle with a weekly pill organizer and handwritten sticky notes on the fridge. Managing multiple medications — each with different schedules, food requirements, and refill dates — is genuinely hard, especially when memory isn't as sharp as it once was. Most medication apps I found were either cluttered with features, required account signups, or used tiny text that was difficult to read.
I wanted to build something that felt calm and trustworthy, not clinical. Something an elderly person could hand to their grandchild and say, "Can you set this up for me?" — and have it done in five minutes.
What I Learned
- How to build a fully functional Progressive Web App (PWA) with zero dependencies — no React, no bundler, just HTML, CSS, and JavaScript.
- How LocalStorage works as a lightweight persistence layer, and where its limits are (data loss on cache clears, ~5MB cap).
- How to design for accessibility first — high contrast, large touch targets, and reduced motion — rather than retrofitting it at the end.
- That glassmorphism looks great in screenshots but needs careful contrast tuning to actually be readable for users with low vision.
How I Built It
MedMinder is a single-file PWA built with vanilla HTML5, CSS3, and JavaScript.
All data is stored client-side using localStorage, so no backend or account
is needed. The UI is built around CSS custom properties (variables), which
makes theming — including dark mode — straightforward to implement.
The core adherence metric I track is the adherence rate $A$, defined as:
$$ A = \frac{T}{T + M} \times 100 $$
where $T$ is the number of doses marked taken and $M$ is the number of doses missed over a given period. A 7-day rolling window is used for the dashboard display, so the stat stays actionable rather than being dragged down by a bad week months ago.
The streak counter increments by 1 for each calendar day where $A = 100\%$ and resets to 0 on any day where at least one dose is missed:
$$ S_n = \begin{cases} S_{n-1} + 1 & \text{if } A_n = 100\% \ 0 & \text{otherwise} \end{cases} $$
Challenges
Designing for elderly users without being patronizing. There's a fine line between "accessible and calm" and "dumbed down." I went through several iterations of font sizes, button sizes, and color palettes before landing on something that felt respectful and clean.
No notifications without a backend. The Web Notifications API can schedule alerts, but a closed browser tab won't fire them reliably without a Service Worker — and Service Workers have their own lifecycle quirks across iOS Safari, Chrome, and Firefox. Getting consistent reminder behavior cross-platform is still an open problem I'm working on.
Single-file architecture doesn't scale. Starting with everything in
index.html was great for rapid prototyping, but as features grew, the file
became hard to navigate. Refactoring into separate style.css and app.js
files is on the immediate roadmap.
Data loss risk. Storing everything in localStorage means a single
"Clear browser data" tap wipes everything. Adding JSON export/import is a
top priority — medication history is too important to lose.
Log in or sign up for Devpost to join the conversation.