Las necesidades del cliente
El cliente necesitaba una herramienta que digitalizara la operación sin complejidad, permitiéndole recibir pedidos online tanto para retiro como para entrega, con un flujo de compra ágil y moderno que incluya carrito, variantes y promociones. También era fundamental contar con un panel de administración unificado desde donde gestionar fácilmente productos, categorías, precios, promociones y el historial de ventas, todo actualizado en tiempo real para reflejar los cambios de forma inmediata sin depender de procesos manuales. Además, surgió la necesidad de ofrecer una versión simplificada del menú pensada para clientes presenciales. Esta vista, accesible mediante un código QR desde la mesa, permite visualizar la carta sin necesidad de pasar por un proceso de compra. Esta funcionalidad debía mantenerse sincronizada con el ecommerce, de modo que cualquier modificación hecha desde el panel se reflejara automáticamente en ambas versiones del menú.
Mi solución
Para dar respuesta a estas necesidades, desarrollé una plataforma integral dividida en dos grandes módulos: un
ecommerce funcional y un panel de administración robusto. El ecommerce permite a los usuarios realizar pedidos personalizados,
seleccionando productos, variantes y promociones mediante un flujo de carrito intuitivo y fluido. Todo el proceso está diseñado para ser rápido, claro y adaptable tanto a desktop como mobile, permitiendo completar un pedido desde cualquier dispositivo de forma eficiente.
Por otro lado, el panel de administración fue construido con un enfoque en la usabilidad y el control total del negocio.
Desde allí, el equipo puede gestionar en tiempo real productos, categorías, ventas, cupones y configuraciones clave.
Cada cambio realizado se refleja automáticamente tanto en la tienda online como en la versión simplificada del menú,
lo que asegura coherencia en la información sin necesidad de pasos intermedios. Esta solución no solo optimiza la gestión
operativa, sino que también mejora la experiencia del cliente final, tanto remoto como presencial.
Información Técnica
Tecnologías utilizadas:
Next.js 14 (App Router): Aprovechando su enfoque híbrido SSR/CSR para rendimiento óptimo y experiencia fluida.
Firebase:
- Firestore: Base de datos en tiempo real.
- Auth: Autenticación segura.
- Security Rules: Validación basada en roles.
TypeScript: Para garantizar seguridad y mantenibilidad del código.
Zustand (con persistencia): Para el estado del carrito y la sesión.
Tailwind CSS: Para un diseño limpio y responsivo.
Heroui: Para el sistema de diseño y componentes reutilizables.
React Hook Form: Validación eficiente y segura.
Autenticación y seguridad:
El sistema utiliza Firebase Auth para registrar y autenticar usuarios. Al iniciar sesión, se genera un token que se guarda en la cookie segura __session.
Este token es luego verificado desde el servidor (en las rutas protegidas como /admin) para garantizar que el usuario esté logueado antes de cargar cualquier dato sensible.
Las reglas de Firestore fueron configuradas para que:
- Usuarios no autenticados puedan leer información pública (como productos y promociones).
- Y únicamente los usuarios validados puedan escribir en otras colecciones protegidas.