1/4 de Milla E-Commerce
E-commerce B2C de indumentaria automotriz con React 18, Vite 6, Express 4, MongoDB, MercadoPago, Meta CAPI y Cloudinary, priorizando escalabilidad, testing y rendimiento.
Plataforma completa construida desde cero con frontend en React 18 + Vite 6 y backend en Express 4 + MongoDB. Integra MercadoPago, Meta CAPI, Google OAuth y Cloudinary. Incluye 119 tests y 11 specs E2E.
Resumen de Arquitectura
Diagrama del Sistema
Características Clave:
Frontend — React 18 + Vite 6
Aplicación SPA moderna con React 18 y Vite 6, reemplazando CRA por HMR instantáneo y mejor tree shaking.
- Code splitting manual: chunks separados para Swiper, SweetAlert2, iconos y MercadoPago SDK
- Lazy loading de todas las páginas con `React.lazy()` + `<Suspense>`
- React Router DOM con paginación en pathname (`/autos-page2`) para SEO
- Tres contextos (Auth, Cart, Products) sin Redux ni Zustand
- Lenis para smooth scroll como singleton
- Cloudinary con buckets de ancho (240–1600px), `f_auto`, `q_auto:good` y cache LRU
- Facebook Pixel + Meta CAPI con `event_id` compartido para deduplicación
Backend — Express 4 + MongoDB
API REST en Express 4 con MongoDB (Mongoose), seguridad multicapa y patrones de robustez.
- Seguridad en capas: sanitización NoSQL, validación de Origen, CSRF, rate limiting, Helmet headers
- JWT en cookies httpOnly con access_token (3h) + refresh_token (30d) y renovación automática
- Lockout de cuenta: 10 intentos fallidos bloquean el login temporalmente
- Reserve/consume para stock, cupones y gift cards — evita race conditions
- Background jobs idempotentes: carritos abandonados, órdenes expiradas, reservas stale
- Graceful shutdown: SIGINT/SIGTERM cierran conexiones sin perder requests
- 30+ endpoints REST y 12 modelos Mongoose
Pagos — MercadoPago
Integración completa con MercadoPago vía Bricks, webhooks y transferencias bancarias.
- Flujo: frontend crea preferencia → Brick renderiza → webhook notifica → backend verifica estado real
- Webhooks idempotentes: verifican estado actual antes de procesar notificaciones duplicadas
- Transferencia bancaria: stock reservado hasta confirmación, liberación automática si expira
- Gift cards con ciclo reserve → consume → auto-release en fallo
- Cupones (porcentaje o fijo) con reserve/consume y distribución por email
Tracking — Meta Pixel + CAPI
Estrategia dual (browser + server) para máxima atribución post-iOS14.
- Facebook Pixel desde browser: ViewContent, AddToCart, InitiateCheckout, Purchase
- Meta CAPI desde backend: mismos eventos con PII hasheada (email, nombre, IP)
- Deduplicación: mismo `event_id` en ambas fuentes
- Server-side tracking funciona incluso con ad blockers
Cloudinary — Imágenes
CDN con optimización automática y transformaciones inteligentes.
- `f_auto`: WebP/AVIF según soporte del browser
- `q_auto:good`: calidad adaptativa por contenido
- `dpr_auto`: soporte retina (2x, 3x)
- Buckets de ancho (240–1600px) para máximos cache hits
- Cache LRU en memoria (500 entradas)
- Validación MIME estricta con file-type en uploads
Testing
Suite completa con cobertura y auditorías de performance.
- 119 unit tests (Vitest + Testing Library)
- 11 E2E specs (Playwright): 122 passed, 2 skipped, 0 failed
- Lighthouse audits automáticas: Desktop 92–98 Performance, CLS <0.01
- Cobertura backend: 70% líneas, 60.5% branches (falla CI si no se alcanza)