06 — Full Stack Development

Flavory.

A GPT-4o powered food-wine pairing SaaS — AI sommelier with local Italian DOC/DOCG recommendations, freemium usage model with live Stripe subscription at €9.99/month, searchable pairing history, and a full marketing landing page. Built with Node.js, Express, and the OpenAI API.

Role

Designer & Developer

Year

2025

Stack

Node.js, Express, OpenAI GPT-4o, Stripe, JWT

Status

Live

Live Site

Open Site ↗

GitHub

View Source ↗

Perché Flavory — feature list with AI sommelier, local and supermarket sections

Come funziona — Tre passi verso il vino perfetto

CTA section — Pronto per il vino perfetto?

What

Flavory is a full-stack SaaS application that acts as a personal AI sommelier. The public face is a polished marketing landing page with three sections — Funzionalità, Come funziona, Prezzi — built in Playfair Display with a crimson-cream palette that communicates premium and editorial before the user clicks anything. The navbar greets logged-in users by name and offers a direct "Vai all'app →" CTA.

Inside the app, users access a three-tab dashboard: Sommelier, Cronologia, and Abbonamento. The core feature presents two modes — "Ho il cibo" (I have the food, suggest a wine) and "Ho il vino" (I have the wine, suggest food). The user describes their meal in free text, enters their city or region for local recommendations, and sets a per-bottle budget via a slider from €5 to €150+. GPT-4o processes the input and returns named wines with DOC/DOCG appellations, pairing rationale, tasting notes, local availability by specific supermarket chain (Coop, Conad, Esselunga), and price estimates.

The Cronologia tab stores the full history of past queries — each entry shows the dish, the wine preview, and a timestamp, and clicking it reopens the full result in the sommelier. A persistent status bar below the navbar shows remaining free requests as a dot indicator, with a "Sblocca illimitato" button that triggers the Stripe Checkout when the free tier is exhausted.

· · · ◆ · · ·

Why

The idea came from a real frustration: standing in a wine aisle with no idea which bottle pairs with what you are cooking tonight. Online guides are generic, sommelier courses take months, and asking supermarket staff is inconsistent. GPT-4o changes the calculus — it has enough vinology and Italian regional knowledge to give specific, credible recommendations in seconds.

The local dimension was critical. Italian wine culture is intensely regional — a Sangiovese di Romagna from Cantina San Patrignano is a completely different recommendation from a generic Chianti. Naming specific DOC/DOCG producers and pointing to where they are sold nearby makes the output actually actionable, not just educational. A pairing you can act on tonight is worth infinitely more than one you cannot.

The freemium model — 3 free queries, then €9.99/month via Stripe — was a deliberate product decision. It lowers the barrier to try, lets the quality of the AI output speak for itself, and creates a natural conversion moment. Building a real payment flow, not a mock, was as much about learning product architecture as about the feature itself.

Mobile registration form — Accedi / Registrati

Cronologia — pairing history with timestamped entries

Typography & Design System

Flavory's visual identity is built on a deliberate double-serif system. Playfair Display serves as the primary display typeface — its high-contrast thick-thin strokes and editorial character communicate the same sensibility found on a premium wine label or a fine-dining menu. The palette is equally restrained: deep crimson (#b22222) as the sole accent against a near-white cream (#fff2f2). This near-monochromatic warmth carries through every interactive surface: the custom dot cursor, text-selection highlight, login button, CTA background, hover states, and inline text emphasis. The result is a tight system — the sensation that every element was designed by the same hand, for the same purpose. The marketing sections reinforce this language at scale: the "Perché Flavory" feature list, the dark "Tre passi" section with its wave separator, and the dark CTA footer all speak the same visual dialect.

Perché Flavory section showing Playfair Display typography, crimson accents, and wine glass illustration

AI Sommelier dashboard — form with food/wine toggle, city input, budget slider

AI Sommelier Interface

The sommelier form collects three contextual inputs: a free-text meal description (anything from "pizza margherita" to a full multi-course menu), a city or region for local wine sourcing, and a per-bottle budget set via a range slider from €5 to €150+. A mode toggle at the top flips the pairing direction — "Ho il cibo" sends food → wine, "Ho il vino" sends wine → food. A camera icon in the textarea allows photo input for the meal. The left panel occupies roughly a third of the screen width; the right two-thirds is the output area, which shows a subtle wine-glass icon in its empty state and fills with the full recommendation when a query is submitted. The freemium counter sits in a persistent bar just below the tab navigation, showing remaining free requests as red dots alongside the "Sblocca illimitato" upsell button.

GPT-4o Powered Recommendations

The backend constructs a structured prompt from the user's three inputs — meal, location, budget — and sends it to the OpenAI GPT-4o API. The response is rendered in the right panel as a structured wine recommendation: each suggested wine includes its full DOC/DOCG appellation and producer name, a "Perché quest'abbinamento" pairing rationale section, tasting characteristics, a "Dove trovarlo" section naming specific local supermarkets and enoteche, and a price estimate. For a query of "cappelletti al ragù" from Ravenna at €30, the model recommends a Sangiovese di Romagna Superiore DOC from Cantina San Patrignano — a real local producer — alongside a Lambrusco Grasparossa di Castelvetro DOC. Getting this quality of output consistently required careful prompt engineering: the region parameter anchors the model to real Italian producers and prevents hallucinated appellations.

GPT-4o output showing wine recommendation with DOC appellation, pairing rationale, and local sourcing

Stripe Checkout — Abbonati a Flavory Mensile at €9.99/month

Freemium Model & Stripe Subscription

New users receive 3 free AI queries — tracked server-side and displayed in the UI as a dot indicator ("3 richieste gratuite rimaste"). When the limit is reached, "Sblocca illimitato" triggers a hosted Stripe Checkout session: branded with the Flavory name, priced at €9,99/month ("Flavory Mensile — addebito mensile"), with full card entry, promo code support, and Stripe Link for one-click payment. The integration is built server-side through Express: the backend creates the Checkout Session and returns the hosted URL — no card data ever touches the application server. Successful payment upgrades the user's subscription status in the database, lifting the request cap entirely. The subscription is managed via the Abbonamento tab inside the app.

· · · ◆ · · ·

Outcome

What shipped

A complete SaaS product from landing to checkout: a marketing landing page with Perché Flavory feature list (Sommelier AI powered by GPT-4o, Locale & Regionale DOC/DOCG recommendations, Anche al Supermercato sourcing), a "Tre passi verso il vino perfetto" how-it-works section, a dark CTA footer, and a full footer with product, account, and legal columns. Inside the authenticated app: three-tab dashboard (Sommelier, Cronologia, Abbonamento), dual food/wine pairing mode, city and budget inputs, GPT-4o recommendation output with named producers and local sourcing, timestamped pairing history that reopens in the sommelier with one click, freemium request counter with live dot indicators, and a live Stripe Checkout subscription at €9.99/month. Authentication via JWT and bcryptjs on a Node.js/Express backend. Fully responsive — the entire app adapts to mobile with the same three-tab structure.

What I learned

The most technically demanding part was not the backend or the payment flow — it was the prompt. A wine recommendation needs specific structure to be useful: appellation, producer, pairing rationale, tasting notes, where to buy, price. Getting GPT-4o to produce all of this reliably — without hallucinating fake producers or inventing non-existent DOC labels — required significant iteration. The region parameter was the key unlock: anchoring the model to a specific Italian city forced it to name real local producers and actual supermarkets, transforming the output from generic wine-guide content into something genuinely actionable.

The freemium design also taught me that the paywall placement is a product decision with real consequences. Too early and you lose users before they experience the value; too late and the conversion moment feels abrupt. Three free queries was the number that felt right — enough to get one full meal recommendation and experience the quality, but not so many that there is no reason to subscribe. These are the kinds of decisions that have no technical solution; they require thinking like a product designer, not just a developer.

Mobile view of the AI Sommelier — Sommelier / Cronologia / Abbonamento tabs

NEXT PROJECT

Fontara →

↗