Back to Work

Vibe Coding · Pet Care · Offline Web App

Puppy Watch

A lightweight, offline-first activity tracker for puppy parents — built in a weekend to solve a real daily problem using nothing but browser-native APIs.

RoleSolo Developer
TypeVibe Coding
StackHTML · CSS · JavaScript

My dog needed a schedule. My phone had no good app for it.

When I got my boxer Arya, I kept losing track of when she last ate, went outside, or had a walk. Every app I found was either bloated with social features, required an account, or needed a constant internet connection. So I built my own in a weekend.

Puppy Watch is intentionally minimal — log activities with one tap, run a countdown timer for potty breaks, and have everything persist locally without any backend. It was the first project where I made a deliberate client-first architecture decision from the start.


Puppy routines are time-critical. Existing tools made them complicated.

Young puppies need to go outside every 1–2 hours. Missing that window reliably leads to accidents. The problem isn't awareness — it's that when you're busy, you genuinely lose track. I needed something I could tap in under 2 seconds that would also remind me when the next break was due.

😤

What existing apps got wrong

Most pet trackers required accounts, pushed notifications through cloud services, or buried the core logging action behind several taps. Privacy concerns and offline reliability were afterthoughts.

🎯

What I actually needed

One-tap logging, a visible countdown timer, a running activity history — all of it working offline, with no login, and no data leaving the device. Simple enough to use half-asleep at 6am.


Every API choice was intentional.

I constrained myself to zero dependencies and zero backend — which forced me to think carefully about which browser APIs could replace what I'd normally reach for a server to do.

💾
localStorage API
All activity logs and timer state persist across sessions entirely on-device. No cloud sync, no accounts, no data exposure. Privacy-first by design.
🔔
Web Notifications API
When the potty timer ends, the browser fires a native notification — even if the tab is in the background. No push service or server required.
⌨️
Keyboard Shortcuts
Ctrl/Cmd + Space starts and pauses the timer. Power users shouldn't have to reach for the mouse to do the most common action in the app.

The timer itself uses setInterval with a correction loop to account for browser throttling of background tabs — something I didn't expect to need until I noticed the timer drifting after switching apps on mobile.


Small surface area, complete experience.

I kept the feature set tight on purpose — every addition had to justify itself against the goal of sub-2-second logging.

  • One-tap activity logging — potty breaks, walks, and feedings each get a dedicated button. Each tap timestamps and stores the entry immediately.
  • Potty countdown timer — start, pause, resume, and reset with visual progress feedback. Fires a Web Notification on completion.
  • Persistent activity history — a scrollable log of every entry with timestamps, stored in localStorage and available across sessions.
  • Fully offline — no internet required after the initial page load. Works as a mobile browser bookmark without any PWA setup.
  • Keyboard shortcuts — Ctrl/Cmd + Space for timer control, making it fast to use without breaking focus.

Constraints made it better.

The no-backend constraint forced me to think seriously about data architecture upfront. Deciding what to store, when to write, and how to handle edge cases like a cleared localStorage session made me a more deliberate engineer.

I also learned that responsive design and offline support aren't just technical checkboxes — they're promises you make to the user. Someone reaching for this at 6am with one eye open needs it to just work, on whatever device is nearest.

The best UX for a utility app is the one you don't notice — because it never makes you think.
HTML / CSS / JS localStorage API Web Notifications API Offline-First Client-Side Architecture Responsive Design

Next Vibe Coding Project

AudVis →

View Project