Volver a proyectos
Sitio gastronómicoDesarrollador Web

Delicias de la Urba — Menú digital

Menú digital de Delicias de la Urba con catálogo tipado, precios en colones y navegación que identifica la categoría consultada. Integra accesos a WhatsApp para iniciar la conversación de pedido desde distintos puntos de la página.

Desafío

Presentar una oferta amplia de comida rápida en una página fácil de recorrer desde el teléfono, conservando los precios legibles y el contacto para pedidos al alcance durante la consulta. El contenido visible y la información entregada a buscadores necesitan mantenerse consistentes al cambiar el catálogo.

Solución

Separé el catálogo de su presentación mediante interfaces TypeScript y componentes Astro. Las once categorías alimentan el menú y sus accesos; el layout reutiliza esos productos para construir las ofertas del schema. Los enlaces convencionales permiten recorrer las secciones y una mejora progresiva identifica la categoría visible. WhatsApp actúa como canal externo de conversación para coordinar el pedido.

Arquitectura y decisiones

Astro genera una página estática compuesta por presentación, franja de destacados, navegación de categorías, tarjetas de menú y accesos de contacto. Un módulo TypeScript concentra productos, precios y enlaces del negocio. CSS nativo resuelve las grillas y la navegación fija; IntersectionObserver actualiza la categoría activa con un script pequeño, sin hidratar un framework de interfaz. El layout deriva FoodEstablishment y Offer del catálogo y configura canonical, Open Graph y Twitter Cards. La preferencia de movimiento reducido detiene la animación de la franja de destacados.

Testing y calidad

El proyecto dispone de comandos de compilación y previsualización con Astro para revisar el catálogo y la navegación. El repositorio no incluye una suite automatizada de pruebas.

Impacto

Reúne el menú y sus precios en un enlace público y mantiene disponible el acceso al canal de pedidos durante la consulta. Compartir la fuente de datos entre tarjetas y ofertas estructuradas facilita actualizar el catálogo sin mantener dos versiones de la información.

Puntos clave

  • Modelé el catálogo con interfaces TypeScript; una misma fuente alimenta productos, categorías y ofertas para buscadores
  • Implementé navegación fija por categorías y seguimiento de la sección visible con IntersectionObserver
  • Organicé el menú en una, dos o tres columnas según el espacio disponible, con nombre y precio diferenciados
  • Distribuí los accesos a WhatsApp entre cabecera, presentación, pie de página y un botón flotante en móvil
  • Generé datos estructurados FoodEstablishment con menú, ofertas en CRC y horarios, junto con metadatos canonical y sociales
  • Añadí una franja de productos destacados con pausa al pasar el cursor y ajuste para la preferencia de movimiento reducido