Wine Log

A private log of the wines you've had and what you made of them. Photograph the label, tap how much you liked it, add a note. Later, in the shop, search it.

Built for one person. There are no accounts, no social feed, and no ratings from anyone else — the whole point is that it records your opinion, not a consensus that clusters everything between three and four stars.

What it does today

• Photograph a label and have the producer, wine name, vintage, region, country and grapes filled in for you (Claude reads the label). Everything it returns is editable, and you can skip the photo and type it in instead.
• Rate it on four points: loved / liked / didn't like / really disliked.
• Tag what stood out — too sweet, too tannic, smooth, oaky, good value, and so on, grouped so they're quick to tap.
• Free-text notes, plus optional price, shop, and date.
• Browse and search everything you've logged, filtered to just the ones you liked or just the ones you didn't.
• Read up on the grape. Tap any grape on a wine and you get what it's like — acidity, body, tannin and sweetness on the same five-point scales every time, so grapes can be compared by eye — plus what it tastes of, where it grows, what to eat with it, a couple of things worth knowing, and which of your own bottles were made from it. Grapes on the log lists every variety you've drunk, most-drunk first.
• Decode a label. Labels is a glossary of what's actually printed on bottles — Reserva, Cru, Brut, Sur Lie, DOCG — searchable, with a pronunciation for the ones that are hard to say out loud, and a section for the words that are legally meaningless. It leads with the rule that unlocks most of a wine list: European labels name the place, everywhere else names the grape.
• Read up on the bottle itself. Each wine searches the web for that exact producer, name and vintage, and shows what it finds: a couple of sentences on the wine, any scores with their source and scale, awards, hard facts like alcohol and ageing, and links to where each came from. A Refresh on every wine re-runs the search, so older entries pick up an improved lookup. Nothing is written from memory — if the search didn't find it, it isn't shown.
• Installs to your phone's home screen and runs full-screen like an app.

Deliberately not here yet: preference profiles and recommendations. Those want a few dozen logged bottles to be any good — see Where this goes next.

Setup

You need a Neon database, an Anthropic API key, and a Vercel account. All three have free tiers that comfortably cover personal use.

1. Configure

npm install
cp .env.example .env.local

Fill in .env.local:

Variable	Where it comes from
DATABASE_URL	Neon dashboard → your project → Connection string (pooled)
ANTHROPIC_API_KEY	console.anthropic.com → API keys
APP_PASSCODE	You choose it. It's what unlocks the app on your phone.
AUTH_SECRET	node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"

2. Create the tables

npm run db:init

Safe to re-run; it only creates what's missing.

3. Run it

npm run dev

4. Deploy

Push to GitHub, import the repo in Vercel, and add the same four environment variables under Settings → Environment Variables. Deploy.

Then on your phone, open the Vercel URL, enter your passcode, and add it to your home screen — Share → Add to Home Screen on iOS, or ⋮ → Install app on Android. HTTPS is required for the camera, which Vercel gives you by default.

How it's put together

Piece	Choice	Why
Framework	Next.js (App Router)	One deployable for pages and API; first-class on Vercel
Database	Neon Postgres over HTTP	No connection pool to manage from serverless functions
Label reading	Claude vision, server-side	Handles supermarket own-label bottles that catalogues don't have
Grape notes	Claude, cached in Postgres	No wine-encyclopedia API to sign up for, and a grape doesn't change
Bottle lookup	Claude web search, cached	Supermarket bottles aren't in any wine database, but they are on the web
Photos	Base64 in Postgres	One less service to wire up; photos are ~150 KB after downscaling
Auth	One passcode, signed cookie	It's a single-user app on a public URL
Styling	Tailwind v4	—
Type	Fraunces + Schibsted Grotesk	Both OFL, self-hosted at build, so no runtime call to Google

On the type. Fraunces (Undercase Type) for wine names and notes, Schibsted Grotesk (Schibsted's newsroom grotesque) for everything else — chosen partly because neither is the serif-plus-Inter combination every other product ships. Fraunces carries an optical-size axis, so font-optical-sizing: auto lets the browser thin the strokes for a 40px masthead and thicken them for a 17px card title, from one font file. Two classes select the cut: .serif-display adds a little of the WONK axis for character in headings, .serif-text drops it for running text. Around 116 KB of font on first load, cached for a year after.

여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗