Proyecto 03: Carta de vinos digital para un restaurante

ENCARGO · 2026

La carta de vinos de un restaurante, pensada para usarse en la mesa: explorar la bodega o dejar que un sumiller digital recomiende tres vinos y explique por qué.

Tipo: Encargo para un restaurante
Año: 2026
Mi papel: Diseño y desarrollo completo
Estado: Entregada al restaurante para su revisión

Next.js 16 · React 19 · TypeScript · CSS Modules · Vitest · Playwright · axe · Python (datos)

El problema de UX

Elegir vino en una carta larga, desde el móvil y en mitad de la cena. Hay dos tipos de cliente: quien sabe lo que busca necesita buscar y filtrar rápido; quien no, necesita ayuda sin sentir que rellena un test.

Cómo funciona

Sumiller, pregunta 2 de 4: tipo de vino, con el número de vinos de cada opción — 1Preguntas que cambian el resultadoEl sumiller solo pregunta lo que puede cambiar la recomendación. Cada opción dice cuántos vinos quedan y las que dejarían cero no aparecen.

Sumiller, pregunta 3 de 5: intensidad del vino, que solo aparece para tintos y blancos — 2Un recorrido que se adaptaLa pregunta de intensidad solo aparece si se eligió tinto o blanco; por eso el recorrido pasa de cuatro a cinco preguntas. Las respuestas viven en la URL: el botón Atrás vuelve a la pregunta anterior.

Explorar la bodega: buscador y pestañas por tipo de vino — 3Explorar la bodegaBúsqueda tolerante a acentos, apóstrofos, sinónimos de uva y una errata, con filtros por tipo, precio, país, región, denominación y uva.

Decisiones de producto y técnicas

Un sumiller determinista y explicable

No simula inteligencia: con las mismas respuestas devuelve siempre los mismos tres vinos, y cada motivo que muestra procede de un dato de la carta. La puntuación combina la afinidad entre tipo de vino y comida, la intensidad y lo que el restaurante destaca.

Sin backend

La aplicación se exporta como sitio estático. Los datos de la carta se generan con un script en Python y se publican como JSON: no hay base de datos, ni cuentas, ni datos personales.

Funciona sin conexión

Un service worker generado tras el build precarga lo mínimo en el móvil del cliente, que llega por un QR. En la tableta de sala se precarga la carta entera, para que siga funcionando si cae el wifi de la terraza.

La navegación usa red primero con tres segundos de margen y la caché como respaldo; los ficheros con hash, caché primero.

Dos idiomas y un modo sala

Rutas /es y /en, con la raíz redirigiendo según el idioma del navegador. En la tableta, la carta vuelve al inicio tras un tiempo sin uso.

Calidad

Tests unitarios con Vitest para el sumiller, la búsqueda, los filtros y el catálogo.
Tests de extremo a extremo con Playwright en cuatro perfiles: accesibilidad con axe, sin desbordes de 320 a 1440 px, dianas táctiles de 44 px, movimiento reducido y modo sin conexión.
Pendiente: probarla en las tabletas reales del restaurante y con lectores de pantalla con usuarios.

Capturas de una copia local con el nombre del restaurante sustituido.