Caso · Menú digital
MANGI
El menú de un foodtruck de café, pensado para pedir de pie y con una sola mano. Al costado no hay un video ni capturas: es la aplicación corriendo. Scrolleá y se usa sola, o tocala y tomás el control.
Caso · Menú digital
MANGI
El menú de un foodtruck de café, pensado para pedir de pie y con una sola mano. No hace falta que te lo muestre: lo estás usando ahora mismo, esta página es la app.
01El producto
Un menú que se lee con una mano
Mangi es un foodtruck de café. El cliente pide de pie, con el teléfono en una mano y a veces un vaso en la otra. Todo el menú está diseñado para ese gesto: una columna, objetivos de toque grandes, y ninguna decisión que exija zoom.
Next.js · App Router · mobile-first
02La carta
Tres categorías y nada más
Dulce, salado y bebidas. La home no muestra productos: muestra tres puertas. Recién adentro aparece la lista, ya filtrada por contexto, así que nadie scrollea entre cafés buscando un sandwich.
Navegación por categoría · estado en Zustand
Ver la carta dulce03El sistema visual
Dulce en claro, salado en oscuro
Los dos temas no son el mismo diseño con los colores bajados: están invertidos. La carta dulce respira en blanco, la salada es negra y densa. Un mismo set de design tokens resuelve las dos, así que un componente cambia de mundo sin una sola clase condicional.
CSS custom properties · dos temas sobre los mismos tokens
04El armador · Paso 1
La primera decisión está afuera
El paso del pan vive en la página de salado, no adentro del armador. Elegir pan abre el flujo con esa opción ya tomada: el visitante entra al wizard con avance hecho en vez de con una pantalla en blanco.
Estado inicial pasado por props al abrir
Armar un sandwich05El armador · Paso 2
Una decisión por pantalla
Cuatro pasos, una pregunta cada uno. Nada de un formulario largo con todo a la vez. El indicador de arriba dice siempre en cuál vas, y volver atrás no pierde lo que ya elegiste.
Transición de paso animada con GSAP
06El armador · Paso 3
El precio se arma mientras elegís
Arriba a la derecha el total se recalcula en cada toque, sumando el precio base y el extra de cada ingrediente. Nadie llega al final del flujo y se sorprende con el número.
Precio derivado del estado, sin efectos ni sincronización
07El armador · Paso 4
Lo que no hay, no se puede pedir
Mirá la rúcula: está sin stock y el armador la bloquea en el lugar donde el cliente la iba a elegir. La misma regla se propaga hacia arriba — un sandwich de firma se deshabilita solo si cualquiera de sus ingredientes falta, sin tener que marcarlo a mano.
Resolución de stock por composición · productHasStock()
08El pedido
Del armador a la comanda
El sandwich armado entra al pedido como un producto más, con sus ingredientes listados y su precio ya calculado. El pedido sobrevive a cerrar la pestaña, porque se persiste en el dispositivo. No es un checkout: es la comanda que el cliente le muestra al mostrador.
Zustand + persist · localStorage
Ver el pedido09Cómo está hecho
El teléfono de al lado es la app real
En una notebook esta misma app se presenta dentro de un marco de teléfono, y el scroll la va usando sola mientras el texto explica cada decisión. Abrila desde una pantalla ancha si querés ver esa versión.
React · TypeScript · Tailwind · GSAP ScrollTrigger
Ficha técnica
Cómo está construido
- Framework
- Next.js · App Router
- Lenguaje
- TypeScript
- Estilos
- Tailwind · design tokens propios
- Estado
- Zustand con persistencia
- Animación
- GSAP · ScrollTrigger
- Arquitectura
- Atomic Design
- Datos
- Mocks tipados, listos para un CMS
- Deploy
- Vercel
Quién lo hizo
Leandro Mastrobono
Diseño y construyo sitios donde la narrativa importa tanto como el código: identidad visual, storytelling con scroll, performance y SEO. Me hago cargo de la cadena entera, del primer boceto al deploy.
- Portfolio
mastrobono.dev- in/leandro-mastrobono