Case study · Personal project
Asthma Log
Managing a child's asthma means a rescue inhaler, a twice-a-day nebulizer and caregivers trading shifts. At 2am the question was always the same: when was the last dose, and is another one OK now? I designed and built a small web app that answers that at a glance on any family member's phone, and is clear enough for the child to log their own doses.
The problem
Three questions, asked half asleep
Asthma medication comes with timing rules. The rescue inhaler needs at least four hours between doses. The controller nebulizer is morning and night. When two people share the job, memory and sticky notes stop working fast.
Every night came down to three questions: when was the last dose, is it too soon for another, and were both nebulizer treatments done today? At checkups the pediatrician adds a fourth: how often is the rescue inhaler being used?
Walkthrough
A morning, start to finish
It's 7:45 and the morning nebulizer is due. Pick the medicine, add a note and save. Then check it in History, add a new medication, and head back to Dosage, where its card is already waiting.
The core pattern
The answer first, the form second
The app opens on a Next dose card for each medication, before any form. A medication with spacing, like the rescue inhaler, shows the earliest next dose as a day and a time: Tomorrow, 12:30am, with a Too soon or OK to give label and a countdown.
A medication on a schedule, like the twice-a-day controller, works differently. It shows whether today's doses are done and when the next one is due, for example Completed and Tomorrow, Morning. One glance, no math.
Logging
Clear enough for a child to log a dose
The person taking the medicine is young but capable, and does their own treatments. So the form had to be clear enough for them to log a dose themselves, without turning into a kids' app.
Logging is three numbered steps: pick the medicine, check the amount and time, save. Each medicine is a large button that says whether it's time, like Due this morning or Wait until 12:30am. The amount and time fill in on their own, the note waits behind Add a note, and the Save button names the medicine, so it's clear what's about to be logged.
Small hands tap twice. Save locks after the first tap, a confirmation with Undo takes its place, and the medicine buttons pause for two seconds. Logging the same medicine again within ten minutes asks first.
Each medication has one type that matters, rescue or controller, and it drives both the schedule and the chart. How a medication is given doesn't change anything, so the app doesn't ask. A floating Log dose button jumps to the form from any tab.
History
A week at a glance, ready for the doctor
History opens on a Last 7 days card: the week's totals, then rescue and controller doses side by side for each dated day, with today marked. A day with more red than usual is easy to spot, and that's the pattern a pediatrician asks about.
The dose list below starts with Today and Yesterday, with Load more for older days. Copy 30-day summary turns the log into plain text that pastes straight into a message or a patient portal.
Sharing
Anyone can look, only family can log
Everyone who opens the link sees the same live log, so a grandparent can check the last dose without calling. Logging, deleting and changing medications take a family password, entered once per phone, and the floating Log dose button only appears after that.
The password is checked by the database's own sign-in service, and its security rules refuse any change that doesn't come from the family account. Editing the page can't get around it.
Details
Built for 2am
Most doses get logged in a dark room by someone who just woke up. The small decisions were about that moment.
- A dark mode that doesn't light up the room, with a manual switch
- Source Sans 3, a humanist sans that stays readable at small sizes, and compact times like 12:30am
- Add to Home Screen, so it opens like an app, plus offline support that syncs once the phone is back online
- A Last Dose line under the title on every tab, naming the most recent medication and how long ago
- A white light mode and neutral wording, since anyone in the family might be the one logging
Process
Shipped in an evening, refined by real use
I worked with Claude as a build partner. I set the direction and made the design calls, and Claude wrote the code. The first version went from idea to a live, shared tool in one evening. The days of real use that followed shaped the rest: catching double taps, dropping the inhaler and nebulizer labels, trimming History to the last two days, and rebuilding the form so the child could log doses on their own.
It's one HTML file hosted on GitHub Pages, with Firebase for the shared database and sign-in. That costs nothing to run and leaves very little to maintain.
Front end
One HTML file with CSS and JavaScript and no build step, installable to the home screen with offline support.
Data
Firebase Firestore keeps one shared log in sync live across every phone, with offline caching.
Security
Anyone can read, and only the family account can write, enforced by Firebase Auth and database rules.
What's next
Things to improve
- Reminders. The app shows when the next dose is due, but it doesn't nudge anyone. A notification when the controller is due, or when a rescue dose is allowed again, would close the loop.
- Who gave it. Everyone logs through one family password, so the log can't say whether a parent or the child logged a dose. Separate sign-ins would add that without adding steps.
- Real schedules. Morning and night split at noon, so a 2am dose counts as morning. Time windows set per medication, like 6 to 10am and 6 to 10pm, would match how doses are actually given.
- Test the fast path first. After launch, a quick double tap could save the same dose twice. A save lock, an Undo and a two-second cooldown fixed it. Next time, rapid-tap testing comes before launch, not after.
- A report for the doctor. The 30-day summary is plain text. A one-page chart of rescue use across the month would make checkups faster.
Available for work