Ir al contenido
T A R O .
← Volver

Gastronómico · Next.js 14 · Carrito y pedidos

Smash The Burger

2026

Contexto

Un local necesitaba web + menú + pedidos sin depender de comisiones de marketplace: canal propio con WhatsApp y aviso al negocio cuando entra un pedido.

Problema

Había que unir marketing, catálogo navegable, flujo de compra claro (resumen → pago efectivo o transferencia con adjunto) y cierre con mensaje prearmado a WhatsApp, sin que el equipo tenga que rearmar el pedido a mano.

Decisiones

  • Next.js 14 (App Router) con TypeScript estricto, Tailwind y tokens en CSS; animaciones con Framer Motion para secciones y modales sin sobrecargar.
  • Carrito global con useReducer + Context: acciones explícitas, drawer y checkout por pasos.
  • Rutas API server-side: POST /api/orders con Resend (HTML del pedido + comprobante) y POST /api/newsletter con validación básica; deep link a wa.me con mensaje formateado.
  • Catálogo tipado en un solo módulo (menu) como fuente de verdad para menú y previews.
  • Nota de producto: parte del UI aún reflejaba naming heredado frente al branding objetivo — encuadre de rebrand en curso o unificación en una pasada.

Tecnología

SPA multipágina sobre Next.js 14 y React 18: UI con Tailwind y mini design system, motion con Framer Motion, e integraciones puntuales (Resend, variables de entorno para WhatsApp y alias de transferencia). Listo para Vercel con flujo end-to-end de pedido; APIs con validación mínima y respuestas JSON claras — con líneas abiertas de hardening (recálculo de totales en servidor, alineación HTTP/body con el resultado real de Resend, rate limiting y límites de adjuntos en base64).

Ver sitio en vivo →