Maletero luggage service (MVP)
Desarrollé una web app que permite a los usuarios reservar espacios para almacenar su equipaje de forma rápida y segura, ideal para viajeros que necesitan guardar sus maletas por uno o más días. Desde la aplicación, el usuario puede visualizar un mapa con los puntos de almacenamiento más cercanos, indicar cuántas maletas desea dejar y completar su reservación en pocos pasos.
Características principales del sistema:
- Reservas rápidas: Selección del punto de almacenamiento más cercano, cantidad de maletas y fecha de almacenamiento.
- Pago integrado: Pasarela de pago con tarjeta de crédito o débito.
- Notificación en tiempo real: Al confirmar una reserva, el sistema notifica automáticamente al establecimiento correspondiente vía correo electrónico.
Panel para socios (Maletero Partners):
La plataforma incluye una sección dedicada para los socios comerciales (Maletero Partners), con acceso a un dashboard personalizado donde pueden:
- Visualizar todas las reservas realizadas en su punto.
- Recibir notificaciones automáticas por email con los detalles de cada reserva.
- Gestionar disponibilidad y monitorear el rendimiento del punto de almacenamiento.
Para este proyecto, desarrollé una web app utilizando Next.js y Tailwind CSS como base del frontend, integrando Mapbox para el despliegue de los puntos de almacenamiento geolocalizados. El backend fue implementado por un tercero; sin embargo, integré y gestioné las APIs de lógica de negocio, asegurando una experiencia fluida mediante el adecuado manejo de errores y validaciones en el cliente.
La aplicación se construyó sobre Firebase, utilizando los siguientes servicios:
- Firebase Authentication para la gestión de usuarios.
- Firestore como base de datos en tiempo real.
- Firebase Storage para el almacenamiento de archivos.
- Integración con Cloud Functions para operaciones específicas del sistema.
Además, desarrollé completamente la sección de Maletero Partners, que incluye un dashboard de reservas y un módulo de reportes en formato de listas. Esta área permite a los socios visualizar reservas en tiempo real y recibir notificaciones por correo al generarse una nueva.
El diseño fue provisto por un diseñador UI/UX. Aunque no se utilizó un design system formal, trabajé sobre un diseño personalizado, optimizando y adaptando los assets gráficos cuando fue necesario, dado que el diseñador no participaba a tiempo completo. La colaboración fue fluida y enfocada en mantener una interfaz visualmente coherente y funcional.
Durante todo el desarrollo, mantuve comunicación constante con el cliente (product owner del MVP). Realizamos sesiones colaborativas en las que propuse ajustes y mejoras en el flujo de navegación, con el objetivo de optimizar la experiencia del usuario final desde el primer uso.
Infraestructura y despliegue:
- Utilicé Netlify para el despliegue automático de la aplicación.
- El repositorio se gestionó en GitHub, y se implementó un flujo CI/CD utilizando la integración nativa de Netlify:
- La rama master se desplegaba automáticamente en el entorno de producción.
- Cada Pull Request generaba una URL temporal para pruebas, facilitando la validación visual y funcional antes de aprobar los cambios.
Stack tecnológico
Frontend:
- Next.js
- Tailwind CSS
- Mapbox (mapas interactivos)
Backend / Servicios:
- Firebase Authentication
- Firestore (base de datos en tiempo real)
- Firebase Storage
- Cloud Functions (integraciones específicas)
- APIs externas de lógica de negocio (consumo y manejo de errores)
DevOps / Infraestructura:
- GitHub (control de versiones)
- Netlify (hosting y despliegue automático)
- CI/CD configurado:
- master → despliegue a producción
- Pull Requests → URLs temporales para testing y QA
Colaboración y diseño:
- Figma (diseño UI/UX externo)
- Comunicación directa con el cliente (Product Owner)
- Validación y propuesta de mejoras en flujos UX
- Optimización de assets gráficos entregados por el diseñador
Rol en el proyecto
- Desarrollador Fullstack Frontend responsable de la construcción completa de la interfaz web.
- Integración con servicios de Firebase para autenticación, almacenamiento y base de datos.
- Consumo e integración de APIs externas, gestionando errores y asegurando estabilidad.
- Implementación completa del dashboard para socios (Maletero Partners), con panel de reservas y reportes.
- Configuración de CI/CD en Netlify para automatizar despliegues y generar entornos de prueba por Pull Request.
- Participación activa en sesiones con el cliente, proponiendo mejoras en la experiencia de usuario.
- Soporte y colaboración con el diseñador UI/UX para mantener coherencia visual y funcional.
Retos técnicos y aprendizajes
- Optimización del rendimiento en el uso de mapas: El uso de Mapbox implicó trabajar cuidadosamente en la carga de mapas interactivos, especialmente en dispositivos móviles con recursos limitados. Se implementaron estrategias de rendimiento y carga condicional para evitar bloqueos en la experiencia de usuario.
- Diseño responsivo completo: Las interfaces para desktop y mobile eran sustancialmente diferentes, lo que implicó un diseño minucioso de componentes reutilizables y responsivos, sin comprometer la experiencia en ningún dispositivo.
- Cambios en la lógica de negocio durante el desarrollo: El proyecto experimentó cambios importantes en los requisitos mientras ya estaba en desarrollo. Esto exigió flexibilidad, comunicación constante con el cliente y ajustes técnicos rápidos sin comprometer la calidad del producto.
