Todos los proyectos
Delivery · Monorestaurant

Sabor Urbano

Demo funcional de delivery con menú, carrito, checkout con mapa, admin y repartidor.

Next.js 16 (App Router)React 19SupabaseMapLibre + MapTilerZustandTypeScript

Demo · admin@sabor-urbano.com / demo1234

Sabor Urbano
01 / Entender

El contexto

Un restaurante pequeño quiere vender online pero las apps de delivery comen su margen con comisiones del 20-30%.

02 / Detectar

El problema

Montar un sistema propio de delivery es caro y complejo. Pero depender de terceros significa perder margen y control de la experiencia.

01

Apps de delivery cobran comisiones altas que erosionan el margen.

02

El restaurante pierde contacto directo con el cliente.

03

Montar un sistema propio parece inalcanzable para un negocio pequeño.

03 / Enfocar

La idea

Demostrar que un restaurante puede tener su propio canal de pedidos sin depender de terceros, con la misma calidad de experiencia.

04 / Construir

La herramienta

Flujo completo en un solo sitio: menú público por categorías, carrito persistente, checkout con mapa que valida zona de reparto, pago contra entrega/transferencia, y paneles separados para administrador y repartidor.

01

Menú y carrito

Catálogo navegable con cantidades y checkout guiado.

02

Zona geográfica

Verifica si la dirección está en rango y calcula tarifa por distancia.

03

Panel admin

KPIs, estado de pedidos en tiempo real, asignación de repartidor.

04

Repartidor móvil

Ubicación en vivo desde el navegador del repartidor.

05

Seguimiento público

El cliente sigue su pedido sin login ni app instalada.

06

Seguridad por filas

Row-level security vía roles de Supabase.

05 / Recorrer

La experiencia, paso a paso

Cada captura muestra una acción y su lugar dentro del recorrido.

06 / Aportar valor

Lo que cambia

Una misma herramienta, vista desde tres necesidades distintas.

Para el usuario

Pide directo al restaurante. Sigue su pedido en tiempo real. Sin app adicional.

Para el negocio

Controla su canal. Sin comisiones de terceros. Datos propios del cliente.

Para el equipo

El panel admin unifica pedidos, estado y asignación. Una pantalla para todo.

07 / Dar forma

Diseño y tecnología

Las decisiones visibles y la base técnica que las sostiene.

Lenguaje visual

Decisiones de diseño

Paleta cálida (oro/ámbar) sobre oscuro. La experiencia de pedido prioriza velocidad y claridad. El mapa es funcional, no decorativo.

Verde oscuro#0d2518
Verde hoja#1a3a22
Crema#f2e8d5
Dorado#c8922a
08 / Seguir mejorando

Aprendizajes y siguiente paso

Lo aprendido

La separación de roles (cliente, admin, repartidor) con row-level security de Supabase eliminó la necesidad de un backend custom complejo.

Próxima versión

Próxima versión: múltiples restaurantes, programa de fidelidad y integración con pagos locales (WebPay, MercadoPago).

Del problema a una herramienta útil

¿Tus clientes repiten una pregunta parecida?

Podemos convertirla en una experiencia clara que entregue valor y abra una conversación con más contexto.