PERSONALIZAR
Prosciutto di Parma, mozzarella fresca, rúcula y tomates secos
Mozzarella fresca, tomate, albahaca y aceite de oliva
Caso · Menú digital
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
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
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
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
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
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
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
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
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
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
Quién lo hizo
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.
mastrobono.dev