GastroLink: Menú Digital Interactivo y Dinámico con QR y Filtros Avanzados

Descripción General

GastroLink es una solución innovadora y robusta diseñada para revolucionar la experiencia de menú en el sector gastronómico. Este proyecto aborda la necesidad creciente de digitalización, higiene y eficiencia operativa en restaurantes, cafeterías y bares. Proporciona una plataforma integral que permite a los establecimientos crear, gestionar y presentar menús digitales interactivos a sus clientes mediante códigos QR. Los usuarios pueden escanear el código QR en su mesa o al entrar al local para acceder instantáneamente a un menú actualizado, navegable y con potentes filtros que facilitan la búsqueda por alérgenos, restricciones dietéticas, categorías y más, elevando la experiencia del cliente a un nuevo nivel de comodidad y personalización.

🛠️ Tecnologías Usadas

Para asegurar la escalabilidad, mantenibilidad, seguridad y una experiencia de usuario excepcional, se ha optado por una pila de tecnologías modernas y ampliamente adoptadas en el ecosistema empresarial:

• Frontend:

  • Next.js (React Framework): Elegido por su capacidad de Server-Side Rendering (SSR) y Static Site Generation (SSG), lo que optimiza el SEO, mejora la velocidad de carga y la experiencia de usuario inicial.
  • TypeScript: Para añadir tipado estático al código JavaScript, mejorando la robustez, la detección temprana de errores y la colaboración en equipos grandes.
  • Tailwind CSS: Un framework CSS de bajo nivel centrado en utilidades, que permite un desarrollo rápido y altamente personalizable de interfaces de usuario sin sobrecarga de CSS.
  • Zustand: Un gestor de estado ligero y flexible para React, ideal para manejar el estado global de la aplicación de manera eficiente y sin complejidad excesiva.
  • React Query (TanStack Query): Para la gestión de datos asíncronos, caching, sincronización y actualización de datos en el lado del cliente, mejorando la experiencia de usuario al reducir cargas repetitivas.

• Backend:

  • NestJS: Un framework progresivo de Node.js para construir aplicaciones del lado del servidor eficientes, escalables y mantenibles. Basado en TypeScript y principios de arquitectura modular, lo que facilita el desarrollo de APIs RESTful.
  • TypeScript: Consistentemente utilizado en el backend para mantener la coherencia y los beneficios de tipado fuerte en toda la pila.
  • TypeORM: Un ORM (Object-Relational Mapper) potente para TypeScript y JavaScript que soporta múltiples bases de datos y facilita la interacción con PostgreSQL.
  • Passport.js: Middleware de autenticación para Node.js, integrado con NestJS para gestionar la seguridad de las APIs de administración (JWT, OAuth2).

• Base de Datos:

  • PostgreSQL: Una base de datos relacional de código abierto, robusta, altamente fiable y escalable, elegida por su integridad de datos, capacidad para manejar datos complejos y soporte para JSON.

• Herramientas y Servicios Adicionales:

  • Docker: Para la contenerización de la aplicación y la base de datos, asegurando un entorno de desarrollo y producción consistente y simplificando el despliegue.
  • Redis: Utilizado para caching de datos frecuentes (ej. menús populares, datos de configuración de restaurantes) y para gestionar la invalidación de caché, mejorando la respuesta del sistema.
  • Stripe API: Para la potencial integración de funcionalidades de pago futuras (ej. pedido en mesa, propinas).
  • Cloudinary / AWS S3: Para el almacenamiento y la entrega eficiente de imágenes de alta calidad de los platos.
  • QRCode.js: Librería para la generación dinámica de códigos QR en el frontend o backend.
  • ESLint & Prettier: Para mantener un código limpio, consistente y siguiendo estándares de calidad.

🚀 Desarrollo del Proyecto

El desarrollo de GastroLink siguió una metodología ágil, dividida en fases incrementales, con un fuerte enfoque en la arquitectura modular y la resiliencia del sistema.

Fases Clave del Desarrollo:

1. Diseño Arquitectónico y Planificación:

   • Se definió una arquitectura de micro-frontend para la parte de cara al cliente (el menú) y un monolito modular para el backend de administración y API principal. Esta decisión permite una alta cohesión dentro de los dominios (ej. Restaurant, Menu, Order) mientras se mantiene la flexibilidad para descomponer servicios en microservicios independientes si la escala lo requiere.
   • Diseño de la base de datos relacional en PostgreSQL, estableciendo un esquema robusto para Restaurantes, Menús, Categorías, Items, Alérgenos y Opciones de Personalización.
   • Definición de las APIs RESTful para la gestión del menú y el consumo del cliente, garantizando una comunicación eficiente y segura.

2. Configuración de la Infraestructura Base:

   • Implementación de Docker Compose para orquestar los contenedores de la aplicación (frontend, backend, PostgreSQL, Redis), facilitando el entorno de desarrollo local.
   • Configuración de pipelines CI/CD iniciales utilizando GitHub Actions para automatizar pruebas y despliegues.

3. Desarrollo del Backend (NestJS):

   • Creación de módulos y servicios para cada dominio (ej. RestaurantModule, MenuModule, AuthModule), adhiriéndose a principios SOLID.
   • Implementación de lógica de negocio para la gestión de menús (CRUD de categorías e ítems), generación y gestión de códigos QR únicos asociados a restaurantes o mesas.
   • Desarrollo de endpoints API protegidos con JWT para la autenticación y autorización de administradores de restaurantes.
   • Integración con TypeORM para la persistencia de datos y Redis para el caching estratégico de menús.
   • Manejo robusto de errores y validación de entrada utilizando class-validator y class-transformer.

4. Desarrollo del Frontend (Next.js):

   • Diseño y desarrollo de la interfaz de usuario con Tailwind CSS, priorizando un enfoque mobile-first y diseño responsivo para garantizar una experiencia óptima en cualquier dispositivo.
   • Creación de componentes reutilizables en React para la visualización del menú, la navegación por categorías y la implementación de los filtros dinámicos.
   • Integración con el backend a través de React Query para la gestión eficiente del estado de los datos del menú, manejo de cargas, errores y optimizaciones de caché.
   • Desarrollo de la interfaz de administración para que los restauradores puedan gestionar sus menús, cargar imágenes y generar códigos QR.

5. Implementación de Filtros y Búsqueda:

   • Diseño de una API eficiente en el backend para la consulta de menús con múltiples criterios (categoría, alérgenos, tags, palabras clave).
   • Desarrollo de una interfaz de usuario intuitiva en el frontend que permite a los usuarios aplicar filtros de manera rápida y ver los resultados en tiempo real, sin recargas de página completas. Se optimizó el proceso de filtrado y búsqueda para minimizar latencias incluso con menús extensos.

6. Pruebas y QA:

   • Implementación de pruebas unitarias y de integración para asegurar la funcionalidad y estabilidad de ambos lados de la aplicación.
   • Realización de pruebas de rendimiento para asegurar que el sistema pueda manejar un alto volumen de solicitudes, especialmente en la parte de consulta de menús.
   • Pruebas de usabilidad para validar la intuición y facilidad de uso tanto para el cliente final como para el administrador del restaurante.

Decisiones de Arquitectura Clave:

• Coherencia de Tipos (TypeScript End-to-End): La decisión de utilizar TypeScript en toda la pila (frontend, backend) garantizó una mayor coherencia, redujo errores en la interfaz de la API y mejoró la productividad del equipo.
• API-First Approach: Se priorizó el diseño de la API antes que la implementación de la UI, asegurando que la interfaz de comunicación entre cliente y servidor fuera robusta y bien definida.
• Modularidad en el Backend: NestJS facilitó una arquitectura de módulos claros y servicios inyectables, lo que mejora la mantenibilidad y permite una futura migración a microservicios si fuera necesario.
• Estrategia de Caching: La implementación de Redis para caching de menús y datos de configuración reduce la carga en la base de datos y acelera la entrega de contenido a los clientes.
• Despliegue con Contenedores: Docker permite un despliegue homogéneo en cualquier entorno compatible, simplificando la gestión de dependencias y la escalabilidad horizontal.

Desafíos Superados:

• Rendimiento de los Filtros Dinámicos: Optimizar las consultas a la base de datos y la lógica de filtrado en el frontend para menús con cientos de ítems y múltiples criterios fue un desafío. Se superó mediante indexación inteligente en PostgreSQL, caching en Redis y la implementación de algoritmos de filtrado eficientes en el cliente que evitan re-renderizados innecesarios.
• Sincronización de Datos en Tiempo Real: Asegurar que los cambios realizados por el administrador se reflejaran instantáneamente en el menú del cliente sin necesidad de recarga manual. Esto se logró con una combinación de invalidación de caché inteligente en el backend y estrategias de stale-while-revalidate en React Query en el frontend.
• Generación Segura y Única de QR: El desafío de generar códigos QR únicos y difíciles de falsificar, que redirigieran a la URL correcta del menú de cada restaurante/mesa, fue abordado implementando un sistema de IDs únicos cifrados para cada QR y gestionando su ciclo de vida y asociación en el backend.
• Diseño Responsivo y Accesibilidad: Crear una interfaz que fuera igualmente funcional y estéticamente agradable en pantallas grandes de tablets y pequeños smartphones, al tiempo que cumpliera con estándares básicos de accesibilidad, requirió una atención meticulosa al diseño con Tailwind CSS y pruebas exhaustivas en diversos dispositivos.

✨ Características Principales

• Menú Digital Interactivo: Presentación clara y atractiva de platos, descripciones, precios e imágenes.
• Acceso mediante Código QR: Generación dinámica de códigos QR únicos para cada restaurante o incluso para mesas específicas, permitiendo un acceso instantáneo y sin contacto al menú.
• Filtros Avanzados y Búsqueda:
  • Por Alérgenos: Filtra platos por ingredientes alergénicos comunes (gluten, lácteos, frutos secos, etc.).
  • Dietas Especiales: Opciones para filtrar por dietas (vegetariano, vegano, sin azúcar, bajo en calorías).
  • Categorías Dinámicas: Navegación sencilla entre categorías del menú (entrantes, platos principales, postres, bebidas).
  • Búsqueda por Palabras Clave: Permite a los clientes buscar elementos específicos del menú.
• Panel de Administración Robusto:
  • Gestión Completa del Menú: CRUD (Crear, Leer, Actualizar, Borrar) de categorías, ítems del menú, precios, descripciones, imágenes y alérgenos asociados.
  • Gestión de Restaurantes: Creación y edición de perfiles de restaurantes.
  • Generación y Gestión de QR: Herramientas para generar, visualizar y gestionar los códigos QR asociados a los menús.
• Actualizaciones en Tiempo Real: Cualquier cambio realizado por el administrador en el menú se refleja instantáneamente para los clientes.
• Diseño Totalmente Responsivo: Experiencia de usuario optimizada para dispositivos móviles, tablets y ordenadores de escritorio.
• Experiencia sin Contacto: Elimina la necesidad de menús físicos, mejorando la higiene y la seguridad tanto para clientes como para el personal.
• Internacionalización (i18n): Preparado para soportar múltiples idiomas, permitiendo a los restaurantes ofrecer su menú en diferentes lenguas a clientes internacionales.
• Optimización SEO (Next.js): El uso de SSR/SSG en Next.js asegura que los motores de búsqueda puedan indexar el contenido del menú, mejorando la visibilidad en línea de los restaurantes.