The Cheers — espresso martini ratings
The Cheers is a mobile-first web app for rating espresso martinis at bars and restaurants.
Log each drink against a five-part rubric, record what went into the glass, pin the
venue on a map, and let the leaderboard, history and stats tell you where to go next.
It is a Progressive Web App with no build step and no runtime dependencies:
plain HTML, CSS and ES modules. Open it in a phone browser, "Add to Home Screen", and
it works offline (map tiles and address search need a connection).
Features
- Rating function — five weighted criteria scored 1–5 (Coffee 30%, Balance 25%,
Foam 20%, Presentation 15%, Chill 10%) roll up into a 0–10 overall score with a grade
band (Exceptional / Excellent / Good / Fine / Skip). Live score while you tap.
- Ingredient list — per drink: base spirit, coffee, coffee liqueur, sweetener,
garnish and free-form extras, with quick-pick chips and autocomplete from your own
history. Stats show which ingredients correlate with your best drinks.
- Map — every venue with a location appears as a score-coloured pin on an
OpenStreetMap map. Set a venue's location from the device GPS or by address search
(Nominatim). "Near me" lists the closest rated venues with distances, and venue pages
link straight to directions.
- Find bars nearby — one tap on the Map tab queries OpenStreetMap for bars, pubs,
restaurants and cafes around you (or around the map centre), shows unrated ones as hollow
pins and a distance-sorted list, flags the ones your group has already scored, and "Rate
here" opens the form with name, address and location filled in. No API key needed.
- Venues leaderboard with search and sort (top rated, most visited, recent,
cheapest, A–Z), venue pages with per-criterion breakdown, most-common build, and
full tasting history.
- History grouped by month, Stats (KPIs, best drink, best value, score
distribution, criterion averages, ingredient insights).
- Venue photo gallery (add several at once, full-screen viewer, remove) plus a photo per tasting, all downscaled on device; notes, price, "would order again".
- Groups — rate together on one shared leaderboard: create a group, share a six-letter
code or invite link, and everyone's venues, ratings and photos sync (offline-first, with
names on each rating). Backed by a free Supabase project you own; setup in
docs/GROUPS.md.
- Light / dark theme, currency symbol, JSON export/import (merge or replace), sample data.
- In solo mode all data lives in the browser's local storage on your device, and nothing is
sent anywhere except tile and address requests to OpenStreetMap. In a group, shared data
also goes to your own Supabase project.
Run it
npm start # serves http://localhost:8080 (zero dependencies)
Any static file server works too (python3 -m http.server, GitHub Pages, Netlify…).
Serve over HTTPS or localhost so geolocation and the service worker are allowed.
Test it
npm test # unit tests for scoring, ingredients, store and geo (node:test)
npm run e2e # Playwright browser tests: solo smoke test + two-phone group test
npm run icons # regenerate PNG icons from icons/icon.svg (needs Playwright)
The browser test stubs map tiles, place search and geolocation, so it runs offline and
deterministically; it walks the whole app: load sample data, search/sort, map pins and
"near me", rate a new venue with address lookup and ingredients, edit, delete, export,
theme switch, and persistence across reload.
Project layout
index.html app shell (header, view container, tab bar)
styles.css design tokens, components, map styling, light/dark themes
manifest.webmanifest PWA manifest
sw.js offline app-shell service worker
src/app.js router and all views
src/scoring.js rubric, overall score, aggregates, ranking (pure)
src/ingredients.js ingredient model and insights (pure)
src/store.js persistence, validation, import/export (pure, Storage-agnostic)
src/geo.js haversine, Web Mercator tile math, geocoding (pure)
src/places.js nearby-places discovery via OpenStreetMap Overpass (pure + fetch)
src/map.js dependency-free slippy map (tiles, pan, pinch, pins)
src/ui.js DOM/format helpers
src/sample-data.js demo venues and tastings
src/config.js Supabase URL + anon key (empty = solo mode)
src/cloud.js Supabase REST client over fetch (auth, tables, RPC, storage)
src/sync.js offline-first sync engine for groups
supabase/schema.sql database schema, security rules and functions
tests/fake-supabase.js in-memory Supabase stand-in used by the tests
tests/*.test.js unit tests
tests/e2e.smoke.js Playwright smoke test
scripts/serve.js static dev server
scripts/make-icons.js icon generator
docs/DESIGN.md design rationale, data model, scoring maths
docs/GROUPS.md group setup and how sync works
Map data and place listings © OpenStreetMap contributors. Please respect the
Overpass API usage guidance,
OSM tile usage policy and
Nominatim usage policy if you
deploy this for more than personal use; swap OSM_TILE_URL in src/map.js for your own
tile provider at scale.
