Portal de productos artesanales con e-commerce, autenticación segura y chat en tiempo real
Los artesanos y creadores manuales necesitan una plataforma moderna para vender sus productos directamente a clientes, manteniendo una comunicación personalizada que refleje la naturaleza artesanal de su trabajo.
Las soluciones genéricas de e-commerce no ofrecen la cercanía necesaria para productos hechos a mano, donde la comunicación con el creador es parte fundamental de la experiencia de compra.
💡 El 78% de compradores de productos artesanales valora poder comunicarse directamente con el artesano antes de comprar.
| ❌ Sin Creative Hands | ✅ Con Creative Hands |
|---|---|
| Plataformas genéricas sin personalización | Portal dedicado con identidad de marca artesanal |
| Comunicación por email lenta | Chat en tiempo real con indicadores de escritura |
| Login con tokens en localStorage (vulnerable) | JWT en httpOnly cookies (previene XSS) |
| Sin soporte offline | PWA instalable con funcionamiento offline |
| Gestión manual de pedidos | Panel admin con estados y notificaciones |
| Imágenes pesadas y lentas | Optimización automática via Cloudinary |
Resultado: Plataforma e-commerce completa lista para producción con chat integrado y panel de administración.
Decisiones Clave:
| Elegí esto... | En lugar de esto... | ¿Por qué? |
|---|---|---|
| httpOnly Cookies | localStorage para JWT | Previene ataques XSS, el token no es accesible por JavaScript |
| Express 5 | Express 4 | Soporte nativo de async/await en middlewares, sin wrappers |
| pnpm workspaces | npm/yarn monorepo | Instalación más rápida, menos espacio en disco |
| Tailwind v4 | CSS-in-JS | Tokens CSS nativos, mejor performance, dark mode nativo |
|
|
|
|
El problema: Almacenar JWT en localStorage expone el token a ataques XSS. Cualquier script malicioso puede robarlo.
La solución:
- Configuré cookies httpOnly que el navegador envía automáticamente
- Implementé interceptor axios que detecta 401 y redirige sin recargar
- Creé endpoint
/auth/mepara verificar sesión al cargar la app - Añadí protección brute-force: bloqueo 15 min tras 5 intentos
Tech stack: JWT • bcrypt • Express middleware • Axios interceptors
El problema: Implementar chat en tiempo real con soporte multi-pestaña, typing indicators, y rate limiting para prevenir spam.
La solución:
- Diseñé arquitectura Socket.IO con eventos tipados en TypeScript
- Implementé
Map<userId, Set<socketId>>para múltiples pestañas por usuario - Añadí rate limiting: máximo 30 mensajes/minuto con cleanup periódico
- Creé sanitización HTML para prevenir XSS en mensajes
Tech stack: Socket.IO • TypeScript types • Joi validation • Custom rate limiter
El problema: Configurar Service Worker que cachee recursos estáticos sin interferir con actualizaciones de API en desarrollo.
La solución:
- Desactivé SW completamente en desarrollo (
enabled: false) - Configuré estrategia CacheFirst para fonts (365 días) e imágenes Cloudinary (30 días)
- Usé NetworkFirst para API con fallback de 5 minutos
- Excluí HTML del precache para evitar problemas con CSP headers
Tech stack: Vite PWA • Workbox • Runtime caching strategies
Componentes Principales:
| Componente | Responsabilidad | Tecnologías |
|---|---|---|
| Frontend SPA | UI, estado, routing | React 19, Vite, React Router 7 |
| API REST | CRUD, autenticación | Express 5, Joi, Multer |
| GraphQL | Consultas flexibles | Apollo Server, depth-limit |
| WebSockets | Chat en tiempo real | Socket.IO, eventos tipados |
| Base de datos | Persistencia | MongoDB, Mongoose 9 |
