DripClock

A phone-friendly pour-over coffee timer with classic recipes, custom recipes, and shareable codes. Built as a PWA (Vite + React + TypeScript + Tailwind).

Prereqs

Install Node.js 18+ from https://nodejs.org (LTS .msi on Windows).

Run locally

npm install
npm run dev

Vite prints a Network: URL — open it on your phone (same Wi-Fi) to test on a real device.

Type-check & production build

npm run build
npm run preview

Deploy to Vercel

npm i -g vercel
vercel        # first time, walks you through linking
vercel --prod # deploy

vercel.json is already configured for SPA rewrites.

How the recipe scaling works

Every step stores a percent of total water, not absolute grams. The Brew screen computes pour_g = (pour_pct / 100) * dose * ratio at render time, so changing dose or ratio rescales the whole plan linearly. See src/lib/scale.ts.

Share format

drip1: followed by URL-safe base64 of a compact JSON payload. Implemented in src/lib/share.ts. Deep links use the bare base64 in ?r= so the URL doesn't contain a literal :.

What's not in v1

• Vibration cues (Vibration API is unreliable on iOS Safari)
• Cloud sync / accounts (sharing is via codes)
• Espresso / AeroPress recipe shapes
• Multi-language UI
• Brew history / journal

Optional polish

The PWA manifest currently references /icons/icon.svg. iOS prefers PNG. To add proper PNGs:

1. Open public/icons/icon.svg in any vector editor (or use npx @resvg/resvg-cli).
2. Export 192×192 and 512×512 PNGs to public/icons/.
3. Update vite.config.ts to add those entries to the manifest's icons array.