Biglo
Una plataforma logística B2B que conecta a las empresas con el espacio de almacenamiento y logística que necesitan — construida de principio a fin con métricas perfectas de Core Web Vitals y cero problemas de accesibilidad.
cat biglo.md
- rol
- Desarrollador único
- año
- 2024
- stack
- VueNodeTypeScriptMongoDBTailwind
- estado
- en pausa
- resultado
- 100 / 100 Lighthouse0 problemas de accesibilidad
- demo
- biglosolutions.com
Resumen
Biglo es una plataforma logística B2B que conecta a las tres partes del mercado de almacenamiento y logística — operadores logísticos, propietarios de almacenes y las empresas («seekers») que buscan espacio o servicios. El objetivo era un marketplace seguro, eficiente y moderno donde cada rol tuviera exactamente las herramientas que necesita.
Lo construí en solitario y de principio a fin — el 100% del proyecto: la arquitectura del frontend, la API y el diseño del servidor, el modelado de la base de datos, la capa de autenticación y seguridad, la infraestructura de despliegue y todo el trabajo de rendimiento y UX.
Un marketplace de tres partes
- Los seekers descubren operadores y almacenes en un mapa interactivo, los filtran y comparan en vista de cuadrícula o de lista, y envían y siguen solicitudes de servicio.
- Los propietarios de almacenes registran y configuran sus almacenes, gestionan un calendario de disponibilidad y precios, y manejan documentos de forma segura.
- Los operadores logísticos publican servicios y espacio disponible y gestionan las solicitudes entrantes desde un panel con métricas.
- Alrededor de las tres partes: autenticación por roles, flujos de solicitud seguros, supervisión de administración, un diseño totalmente responsive y una interfaz multilingüe (i18n).
Arquitectura y stack
El frontend es una SPA de Vue 3 — Composition API, Pinia para el estado, Vue Router y vue-i18n — estilizada por completo con TailwindCSS y construida con Vite. La búsqueda interactiva de espacios se apoya en Leaflet con teselas de MapTiler, y Firebase da soporte a servicios del cliente.
El backend es una API REST de Node.js + Express sobre MongoDB (Mongoose), con Redis y una capa de caché a nivel de petición para consultas repetidas rápidas, Sharp para la optimización de imágenes, Google Cloud Storage para los medios y Nodemailer para el correo transaccional. Se ejecuta como un servicio en contenedor en Google Cloud Run (imágenes en Artifact Registry), con el frontend desplegado en Vercel.
Seguridad
Cada flujo sensible se diseñó con la seguridad por delante: autenticación JWT con tokens de acceso y de refresco en cookies HTTP-only, hash de contraseñas con bcrypt y control de acceso por roles entre operadores, propietarios y seekers. Las peticiones pasan por cabeceras de Helmet, reglas de CORS, limitación de tasa, validación con Joi y saneamiento con DOMPurify para cerrar vectores de XSS e inyección — y el árbol de dependencias audita limpio, con cero vulnerabilidades conocidas.
Rendimiento y accesibilidad
El rendimiento y la accesibilidad fueron requisitos desde el primer día, no un repaso final. Biglo obtiene un 100/100 limpio en Rendimiento, Accesibilidad, Buenas prácticas y SEO de Lighthouse, con cero problemas reportados por axe DevTools.
- Code splitting por rutas y carga diferida para mantener el bundle inicial pequeño.
- Imágenes en WebP y un pipeline de optimización con Sharp.
- Caché con Redis y a nivel de petición para evitar trabajo repetido.
- El modo JIT de Tailwind para cero CSS sin usar, además de las optimizaciones de build de Vite.
- Una interfaz responsive totalmente operable con teclado y con lector de pantalla.
en stand-by
Biglo está en pausa: el frontend sigue online como demo, pero el backend está desconectado, así que el inicio de sesión y los datos en vivo no cargan. Las capturas y grabaciones de arriba muestran el producto tal como funcionaba en producción.
La próxima vez que lo retome, quiero volver a levantar la API en un host permanente más barato para que todo el flujo se pueda recorrer de nuevo.