Salsa Candela Bar: Aplicación Web para Comprar Bebidas

Salsa Candela organiza fiestas de baile mensuales que atraen a más de 500 asistentes. Durante estos eventos, el servicio del bar se convierte en un cuello de botella: largas filas, pedidos perdidos y transacciones en efectivo reducen los ingresos del negocio y la satisfacción del cliente.

Esta aplicación web mejora la experiencia en el bar, permitiendo a los clientes explorar el menú, hacer pedidos y pagar desde sus teléfonos.

Al finalizar reciben un código QR para recogerla en la barra, sin esperar en la fila.

Si quieres explorar la aplicación en vivo, visita bar.salsa-candela.com.

Resumen del Proyecto

En este proyecto desarrollé un sistema que permite a los clientes ordenar y pagar bebidas desde su celular durante las fiestas de baile.

Alcance del Proyecto

• Menú digital: Lista de bebidas categorizada con imágenes, descripciones y precios
• Pedidos móviles: Los clientes compran desde sus teléfonos sin hacer fila
• Promociones automatizadas: Ofertas por tiempo limitado y combos aplicados automáticamente
• Pagos con Stripe: Pagos seguros con tarjeta procesados a través de Stripe
• Recogida con código QR: Código QR por pedido que permite recoger de forma rápida y verificada en la barra
• Panel de administración: Gestión de pedidos en tiempo real para los bartenders

Impacto en el Negocio

• Operación Sin Efectivo: Reduce el riesgo de robo y acelera las transacciones
• Servicio Más Rápido: Elimina las filas para pedir y pagar
• Reducción de Errores: Los pedidos digitales eliminan la mala comunicación en un lugar ruidoso
• Automatización de promociones: Las ofertas de happy hour y combos se aplican sin intervención del bartender

El Problema

Operar un bar dentro de un evento de baile tiene muchos desafíos:

1. Largos Tiempos de Espera

Los clientes esperan 10-15 minutos para hacer un pedido. Muchos se rinden y no compran, reduciendo los ingresos.

2. Pagos en Efectivo

Los pagos en efectivo hacen más lenta cada transacción. Dar cambio genera errores y es difícil trazar las ventas y conciliar ingresos al final de la noche.

3. Promociones Perdidas

Las ofertas de hora feliz y promociones de combos requieren que en la barra recuerden reglas y calculen descuentos manualmente. En la práctica, las promociones se aplican de forma inconsistente o se omiten por completo durante los períodos de mayor demanda.

4. Mala Comunicación de Pedidos

Gritar pedidos de bebidas sobre música fuerte lleva a errores. Los pedidos incorrectos crean frustración en el cliente.

La Solución

Una aplicación web a la que los clientes acceden escaneando un código QR en su mesa o en la entrada del bar.

No requiere descarga de app y funciona en cualquier navegador móvil.

Cómo Funciona

1. El cliente escanea un código QR para abrir el menú
2. Navega las bebidas por categoría, agrega artículos al carrito
3. Las promociones se aplican automáticamente al pagar
4. Paga de forma segura vía Stripe (pago con tarjeta)
5. Recibe un código QR único para su pedido
6. Muestra el código QR en la barra para recoger sus bebidas

¿Por Qué una Web App?

Una app nativa requeriría que los clientes descarguen e instalen antes de pedir. Una aplicación web progresiva accesible vía URL significa cero fricción: escanea, navega, pide.

Características Principales

La aplicación incluye varias características diseñadas para maximizar los ingresos del bar, reducir tiempos de espera y crear una experiencia fluida para el cliente.

Menú Digital

El menú está organizado por categoría (cócteles, cerveza, jugos, bebidas sin alcohol) con imágenes, descripciones y precios. Los artículos se pueden agregar a un carrito con selección de cantidad.

Valor para el Negocio:

• Venta visual: Las fotos de cócteles aumentan el valor promedio del pedido comparado con menús solo de texto
• Actualizaciones fáciles: Artículos del menú, precios y disponibilidad gestionados a través de configuración
• Venta adicional: Combinaciones sugeridas y artículos populares destacados automáticamente

Promociones Automatizadas

Las promociones se definen en un archivo de configuración y se aplican automáticamente cuando se cumplen las condiciones. No se necesita intervención del bartender. Cualquier promoción puede activarse o desactivarse según el evento.

Tipos de Promociones:

• Basadas en Tiempo: Precios de hora feliz activos durante tiempos específicos (ej. 9:00-10:00 PM)
• Ofertas combo: Compra 2 cócteles, llévate un shot gratis
• Descuentos por volumen: Precios de cubeta para pedidos de cerveza

// Configuración de reglas de promoción
const promotions = [
  {
    name: "Happy Hour",
    type: "time-based",
    startTime: "21:00",
    endTime: "22:00",
    discount: { type: "percentage", value: 20 },
    appliesTo: "cocktails",
  },
  {
    name: "Oferta Combo",
    type: "combo",
    requirements: { category: "cocktails", quantity: 2 },
    bonus: { category: "shots", quantity: 1, price: 0 },
  },
];

Pagos con Stripe

Todos los pagos se procesan a través de Stripe, proporcionando pagos seguros con tarjeta con confirmación instantánea. No se requiere manejo de efectivo.

Flujo de Pago:

1. El cliente revisa el total del pedido con promociones aplicadas
2. Ingresa los datos de la tarjeta en el formulario seguro de pago de Stripe
3. El pago se procesa y confirma instantáneamente
4. El pedido se envía al panel del bartender

Valor para el Negocio:

• Conciliación instantánea: Cada transacción registrada automáticamente con acceso al panel de Stripe
• Sin riesgo de efectivo: Elimina robo, errores de conteo y demoras por dar cambio
• Mayor gasto: Los pagos con tarjeta típicamente aumentan el ticket promedio vs. efectivo

Recogida con Código QR

Después del pago, los clientes reciben un código QR único en su teléfono. Luego muestran el código QR en la barra para verificación y recogida instantánea.

Cómo Funciona:

1. El pedido se paga y confirma
2. Se genera un código QR único y se muestra en el teléfono del cliente
3. El bartender prepara el pedido (visible en el panel de administración)
4. El cliente muestra el código QR en la barra
5. El bartender escanea el QR para verificar y marcar como recogido

Valor para el Negocio:

• Sin doble servicio: Cada código QR solo puede canjearse una vez
• Seguimiento de pedidos: Visibilidad completa de pedidos pendientes, listos y recogidos
• Recogida más rápida: Sin confirmación verbal—escanea y listo

Diseño y Experiencia de Usuario

La app fue diseñada para un entorno específico: un lugar oscuro y ruidoso donde los usuarios están de pie, sosteniendo un teléfono con una mano, y quieren pedir rápidamente.

Decisiones de Diseño

• Objetivos táctiles grandes: Botones y artículos del menú dimensionados para uso con una mano
• Pasos mínimos: Tres toques desde el menú hasta el pago (agregar al carrito, revisar, pagar)
• Alto contraste: Texto y precios claramente legibles en cualquier condición de iluminación
• Sin cuenta requerida: Los clientes piden como invitados para eliminar fricción de registro

Optimización del Flujo de Usuario

Ruta de pedido:

1. Escanear QR: Abre el menú instantáneamente en el navegador
2. Navegar y Agregar: Toca artículos para agregar, ajusta cantidades
3. Revisar Carrito: Ve artículos, promociones aplicadas, total
4. Pagar: Pago seguro con Stripe
5. Obtener QR: Código de recogida mostrado inmediatamente

Enfoque Tecnológico

El stack fue elegido por capacidad de respuesta en tiempo real, rendimiento móvil e integración con la infraestructura de pagos de Stripe.

Stack Tecnológico

• Frontend: React (SPA móvil-primero)
• Backend: Node.js + Express.js
• Pagos: API de Stripe
• Generación de QR: Generación de código QR del lado del servidor por pedido
• Panel de Administración: Interfaz de gestión de pedidos en tiempo real para bartenders

¿Por Qué React?

A diferencia del sitio web principal de Salsa Candela (que usa plantillas EJS renderizadas en el servidor), la app del bar necesita interactividad en tiempo real: gestión del carrito, cálculos de promociones en vivo y retroalimentación instantánea de pagos. El modelo de componentes de React y la gestión de estado lo hacen directo.

Estructura de Datos del Pedido

// Estructura de creación de pedido
const order = {
  items: [
    { id: "mojito-classic", name: "Mojito", quantity: 2, price: 120 },
    { id: "shot-tequila", name: "Shot de Tequila", quantity: 1, price: 0 },
  ],
  promotions: [
    { name: "Oferta Combo", discount: 80 },
  ],
  subtotal: 320,
  discount: 80,
  total: 240,
  paymentMethod: "stripe",
  status: "pending", // pending, ready, picked-up
  qrCode: null, // Generado después de confirmación de pago
};

Desafíos y Soluciones

Construir para un entorno de evento en vivo introdujo desafíos que las apps típicas de e-commerce no enfrentan.

Desafío 1: Conectividad No Confiable

Problema: Lugares concurridos con más de 500 teléfonos compitiendo por ancho de banda. Conexiones caídas a mitad del pedido perderían ventas.

Solución: Tamaños de carga optimizados e implementación de persistencia de estado local. Si la conectividad cae, el carrito se preserva y el pago reintenta automáticamente cuando se restaura la conexión.

Desafío 2: Pedidos Concurrentes Durante Horas Pico

Problema: Las horas pico generan docenas de pedidos simultáneos. Los bartenders necesitan priorización clara sin confusión.

Solución: El panel de administración muestra pedidos en tiempo real con indicadores de estado (pendiente, preparando, listo). Los bartenders actualizan el estado con un toque, y los clientes ven el progreso de su pedido.

Desafío 3: Casos Límite de Promociones

Problema: ¿Qué pasa cuando el happy hour termina a mitad del pedido? ¿O cuando una promoción de combo aplica parcialmente?

Solución: Las promociones se bloquean en el momento de revisión del carrito. Una vez que un cliente ve su total con descuento, ese precio se respeta incluso si la ventana de promoción cierra antes de que complete el pago.

Mejoras Futuras

La aplicación está diseñada para crecer con el negocio. Las mejoras planificadas incluyen:

Billetera de Crédito Prepago

Los clientes compran crédito por adelantado con una sola transacción de Stripe—similar a comprar boletos en una feria—y luego gastan de su billetera por cada bebida. Esto reduce las comisiones de transacción por pedido, acelera el servicio y fomenta mayor gasto durante el evento.

Seguimiento de Inventario

Niveles de stock en tiempo real que automáticamente marcan artículos como no disponibles cuando el inventario está bajo, previniendo pedidos que no pueden cumplirse.

Panel de Análisis

Reportes post-evento mostrando horas pico de pedidos, bebidas más populares, efectividad de promociones e ingresos por hora para informar la planificación de eventos futuros.

Soporte Multi-Evento

Menús y promociones configurables por tipo de evento, permitiendo diferentes configuraciones para fiestas de baile, eventos privados y ocasiones especiales.