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.
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
03El 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
05El 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
09Cómo está hecho
El teléfono de al lado es la app real
No es un video ni una secuencia de capturas: es la aplicación corriendo, servida en un iframe con el ancho de un teléfono. Podés agarrarla cuando quieras — tocá la pantalla y el recorrido automático te cede el control.
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 - LinkedInin/leandro-mastrobono
- Emailmastrobonoleandro@gmail.com