Restaurante · Operación en piso
Grill Perrón OS
Toma de pedidos y pantalla de cocina para una birriería, sincronizadas en tiempo real entre dispositivos.
- Cliente
- Grill Perrón, birriería
- Rol
- Diseño de producto y desarrollo full-stack
- Año
- 2026
- Stack
- Astro 7 · React 19 · TypeScript · Tailwind CSS 4 · nanostores · BroadcastChannel API
El problema
En hora pico, el mesero anota a mano, camina a la cocina y repite el pedido en voz alta. Los platillos se olvidan, la parrilla y la barra no saben qué sigue y nadie sabe cuánto lleva esperando cada mesa.
La solución
Una app para tablet donde el mesero arma la comanda por mesa y una pantalla de cocina (KDS) que la recibe al instante, separada por estación. Cada estación marca lo suyo como listo y el mesero lo ve en su tablet sin levantar la voz.
Lo más relevante
- Sincronización entre dispositivos en menos de 100 ms con BroadcastChannel y respaldo en localStorage.
- Pantalla de cocina por estación (cocina, parrilla y barra) con temporizadores y alerta de pedidos retrasados.
- Flujo completo del mesero, de la apertura de la mesa al cierre de la cuenta: mapa de 12 mesas, comanda, seguimiento y cobro.
- Recorrido automático con dos dispositivos para presentar el sistema sin tocarlo.
- Estado inicial determinista, para que cada demostración arranque con las mismas mesas y pedidos.
Puntos de entrada de la demo
- Recorrido automático La tablet del mesero y la pantalla de cocina lado a lado, con un pedido que avanza solo.(se abre en una pestaña nueva)
- Mesero Elige un mesero, abre una mesa y envía una comanda.(se abre en una pestaña nueva)
- Cocina Ábrela en otra pestaña junto a la del mesero y verás llegar cada pedido.(se abre en una pestaña nueva)
Cómo está hecho
Interfaz por islas. El sitio es Astro y solo hidrata lo que necesita estado: el mapa de mesas, el compositor de comandas, la pantalla de cocina y el recorrido automático son islas de React. Todo lo demás llega como HTML estático.
Una sola fuente de verdad. Mesas, pedidos y sesión viven en stores de nanostores. Cada cambio se publica en un canal de BroadcastChannel; las otras pestañas o dispositivos aplican el mismo evento y convergen al mismo estado. Si el canal no está disponible, un sobre versionado en localStorage hace de respaldo y permite recargar sin perder nada.
Pensado para el piso. Botones grandes para usar con una mano, tipografía legible a dos metros en la pantalla de cocina y estados de color que se distinguen también por texto e icono.
Demo honesta. No hay backend ni cuentas: todo corre en el navegador. Para probar la sincronización, abre la vista del mesero y la de cocina en dos pestañas.
Capturas
