La tecnología detrás de nuestros menús digitales: NestJS, Nuxt y Astro

Una arquitectura diseñada para velocidad y experiencia de usuario

Cuando creamos GastroPalette, nuestra plataforma de menús digitales para restaurantes, teníamos claro que la tecnología no era solo un medio, sino una parte fundamental del valor que ofrecemos. Un menú digital exitoso debe cargar rápidamente, funcionar en cualquier dispositivo, y proporcionar una experiencia fluida tanto para los clientes como para los propietarios del restaurante.

En este artículo, exploramos las decisiones técnicas que tomamos para construir una plataforma rápida, segura y escalable, adaptada específicamente a las necesidades del sector hostelero.

Despliegue estático con Astro: Velocidad inigualable

El componente más visible de nuestra solución son los menús digitales en sí. Elegimos Astro como framework para el despliegue de los menús por varias razones fundamentales:

• Rendimiento excepcional: Astro genera páginas estáticas que cargan hasta 3 veces más rápido que las soluciones tradicionales. En un restaurante con mala conexión WiFi o cobertura móvil limitada, cada segundo de carga cuenta.
• Arquitectura Islands: Permite incluir componentes interactivos específicos (como filtros o botones para mostrar información de alérgenos) sin comprometer la velocidad general.
• Zero JavaScript por defecto: Los menús básicos funcionan sin JavaScript, garantizando compatibilidad absoluta con cualquier dispositivo, incluso los más antiguos.

Backend robusto con NestJS

Para la gestión de los datos, el panel de administración y toda la lógica de negocio, utilizamos NestJS, un framework progresivo para Node.js:

• Arquitectura modular: Permite organizar la lógica en módulos claramente definidos, facilitando el mantenimiento y la escalabilidad.
• TypeScript nativo: Garantiza la seguridad de tipos y reduce los errores en producción, especialmente importantes en operaciones críticas como la gestión del menú.
• Decoradores y metadata: Facilitan la validación de datos, documentación automática de API y gestión de rutas.
• Inyección de dependencias: Permite construir servicios altamente testables y desacoplados.

Esta robustez del backend es lo que hace posible actualizar un menú en segundos y que los cambios se propaguen instantáneamente a todos los clientes, sin esperas ni problemas de caché.

Panel de administración con Nuxt

El panel desde donde los restaurantes gestionan sus menús está construido con Nuxt.js, aprovechando Vue.js como framework frontend:

• Experiencia de usuario fluida: Interfaces reactivas que responsen instantáneamente a las acciones del usuario.
• Arquitectura basada en componentes: Permite reutilizar elementos de interfaz y mantener la coherencia visual.
• Rendering universal: Combinamos SSR (Server-Side Rendering) para la carga inicial rápida con interactividad client-side para operaciones complejas.
• Sistema de plugins: Facilita la incorporación de nuevas características y extensiones.

Diseño de temas con TailwindCSS

Para el diseño visual tanto de los menús como del panel de administración, nos apoyamos en TailwindCSS:

• Personalización avanzada: Permite crear temas completamente personalizados para cada restaurante, respetando su identidad de marca.
• Diseño responsive nativo: Garantiza que los menús se adapten perfectamente a cualquier dispositivo, desde móviles hasta tablets o pantallas grandes.
• Sistema de componentes basado en utilidades: Facilita mantener la coherencia visual y la accesibilidad.
• Optimización de producción: Genera CSS mínimo, contribuyendo al rendimiento general.

Arquitectura de despliegue y escalabilidad

Nuestra infraestructura está diseñada para escalar según las necesidades:

• CDN global: Los menús se sirven desde puntos de presencia distribuidos globalmente, minimizando la latencia independientemente de dónde se encuentre el cliente.
• Estrategia JAMstack: La separación de frontend y backend permite escalar cada componente independientemente.
• Webhooks automatizados: Cada actualización de menú desencadena automáticamente un nuevo despliegue estático, manteniendo los menús siempre actualizados.
• Caché inteligente: Implementamos estrategias de caché que mantienen los contenidos estáticos al tiempo que aseguran que los cambios se reflejen rápidamente.

Conclusión: La tecnología importa

Los mejores menús digitales no son solo visualmente atractivos, sino que están respaldados por una arquitectura técnica sólida que garantiza rendimiento, fiabilidad y facilidad de uso.

En GastroPalette, la elección de tecnologías como Astro, NestJS, Nuxt y TailwindCSS nos permite ofrecer una solución que destaca en el mercado por su velocidad, personalización y facilidad de uso. La próxima vez que escanees un código QR en un restaurante, recuerda que hay todo un mundo tecnológico detrás de esa experiencia aparentemente sencilla.