Biglo - página de inicio Biglo - sección de misión Biglo - búsqueda de espacios (vista de cuadrícula) Biglo - búsqueda de espacios (vista de lista) Puntuación perfecta en Core Web Vitals (CWV) Cero problemas de accesibilidad en axe DevTools Biglo - vista general de IA

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.