Wine guide

Vinería

A guide for choosing wine without knowing about wine. You search, filter by what you like, and each entry tells you more only if you want to keep reading.

Write to me See the project

Vinería home page — Real screenshot of the project

Own product: type of project
React 19 · TypeScript: main tools
5: real screenshots of the project

01 · The challenge

What was going on

Context

Vinería is a project of my own. It comes from something that happens to a lot of people: you want to understand wine, you open any guide, and you hit a vocabulary that assumes you already know.

The problem

Turn a lot of research into something a beginner enjoys, without making it so simple that it stops being useful once you know a bit more.

My part

I wrote the content, decided how it is structured, designed the interface, and coded the site.

02 · How I solved it

How I decided to solve it

01
Organize around what people actually ask (“what goes with this?”, “which one will I like?”) and not around how a sommelier classifies it.
02
Start with few options: one search box and four filters, not thirty.
03
Keep the deep information available, but only show it if you choose to keep reading.

03 · What I made

What got built

Twenty-four varieties documented, all in the same structure.
The explorer: you search, filter, and open an entry without leaving the page.
A map of where each comes from, what food it goes with, a glossary, and my research log.

04 · Charts

The numbers as charts

VIN-PROF

Depth shows up only if you ask

It starts with few options and the detail appears only as you go.

01
You search
One search field, with no technical vocabulary.
02
You filter
Four filters by what you like, not thirty.
03
You open
The entry leads with the essentials.
04
You go deeper
Origin, pairing, and glossary, if you choose to continue.

Describes the designed journey; it does not represent measured user behaviour.

05 · The product

Explore the project

Hero with wine explained without pretension and two entry paths.

01 A warm editorial start for people who know nothing about wine.

Catalog with search, red and white filters, body, acidity, and origin.

02 Filters by sensation, not jargon: 24 findable grapes.

03 A profile in a native dialog: 2/24 navigation without losing the catalog.

04 Sensations as visual scales instead of sommelier vocabulary.

Mexican food pairing: grapes matched with mole, arrachera, and birria.

05 Local pairing: Cabernet with mole, Merlot with arrachera, Syrah with birria.

06 · How it turned out

What changed in the end

Someone who knows nothing about wine can pick one in two minutes and understand why.
The structure holds up as it grows: adding varieties does not mean redoing anything.

What I would not compromise on