Bean Journal

Built with Claude

This entire app (frontend, backend, database schema, and AI features) was designed and built through conversations with Claude (Anthropic). No boilerplate, no templates; every component and query was written iteratively in response to real feature requests.

Database: Supabase

Bean data, drink logs, and user accounts live in PostgreSQL via Supabase. Row-level security keeps each user's collection private. The anon key powers read access in the browser; a service-role key is used server-side for trusted writes.

Frontend: Next.js + React

The UI is built with Next.js 16 and React 18. No CSS framework; all styling uses inline styles with a warm editorial design system. Playfair Display for headings, DM Sans for body text, cream-and-terracotta palette throughout.

AI Features: Claude API

Two AI features powered by Anthropic's Claude: "Discover Facts" streams 3 specific facts about any bean covering terroir, genetics, and processing. "Find My Bean" recommends a bean from your collection based on mood and time of day.

Add Bean from Photo

A Claude Code skill lets you photograph any coffee bag and add it directly to the database. Claude's vision extracts the name, origin, variety, process, and tasting notes from the label. You review and confirm before it hits Supabase.

Deployed on Vercel

The Next.js app is deployed on Vercel and served at beans.setty.in. Every push to the main branch triggers an automatic deployment. Environment variables keep the Supabase service role key secure on the server side.