01Built with Claude
The whole app was built through conversations with Claude Code: the pages, the database and the AI features. Nothing started from a template. Every screen exists because of a real request.
02Designed in Claude Design
The poster look began as a Claude Design exploration: framed tiles, a cup for every coffee and one colour for each process family. Claude Code then built that design into the app and carried it across every screen.
03A public page, a private collection
The front page shows the most recent cups, at home and in cafés. The full collection, the stats and the bean finder sit behind a sign-in that only the owner can use.
04Database: Supabase
Beans, cup logs and café cups live in PostgreSQL on Supabase. Row-level security keeps the tables private, and a single database view shares just the recent cups with the public page.
05Frontend: Next.js and React
The interface runs on Next.js 16 and React 18 with no CSS framework. Type is set in Righteous, Space Grotesk and DM Mono, and the scroll animations are plain CSS.
06AI features: Claude API
Two features call Anthropic's Claude. Discover facts writes three specific facts about a bean, covering terroir, genetics and processing. Find my bean picks a coffee from the collection to match the time of day and mood.
07Added from a photo
New beans come from a photo of the bag, and café cups from the café's link and a photo of the menu or box. Claude reads the label, shows what it found, and saves only after a yes.
08Deployed on Vercel
The app is hosted on Vercel at beans.setty.in. Every push to the main branch goes live automatically.
StackNext.js 16React 18SupabasePostgreSQLClaude APIClaude CodeClaude DesignVercel