CATOCA
Tienda en línea y sitio de marca de un café de origen de la Sierra Nevada
- empresa:
- CATOCA (cliente)
- periodo:
- Jul 2026 — actualidad
- enlace: https://www.catoca.cafe
- React 19
- Vite
- TypeScript
- Tailwind CSS v4
- anime.js
- React Router 7
- Vercel Functions
- Wompi (pagos)
- Gmail API
// problema
La marca necesitaba un sitio que fuera a la vez vitrina, para contar el origen del café, y canal de venta directa, con un checkout confiable para el mercado colombiano (tarjeta, PSE, Nequi o efectivo) y sin pagar una plataforma de e-commerce.
// mi rol
Desarrollo full stack: rediseño de la interfaz y de la arquitectura del frontend, funciones serverless en Vercel para el checkout, integración de Wompi y de Gmail API, y optimización de imágenes y animaciones.
// decisiones técnicas
Montos firmados en el servidor, no en el navegador
La función serverless arma el pedido con los precios del catálogo del servidor y genera la firma de integridad SHA-256 que exige Wompi. El navegador solo envía qué productos y cuántos, así que nadie puede pagar un precio que no es el de la tienda.
Sesión de compra sin estado con un token HMAC
Las funciones de Vercel no comparten memoria, así que la sesión de compra viaja con el cliente como un token firmado con HMAC; /api/wompi/confirm lo verifica con comparación en tiempo constante antes de confirmar el pedido y enviar los correos.
Eventos de Wompi verificados y correos con reintentos
El webhook de eventos valida el checksum de Wompi antes de aceptar un pago. Los correos al cliente y a la tienda salen por Gmail API, con reintentos con backoff, renovación del token y escape del HTML para evitar inyecciones.
Rendimiento y movimiento accesibles
Pasé las imágenes a WebP (de 33,8 MB a 1,4 MB) y todas las animaciones de anime.js respetan prefers-reduced-motion.
// impacto
- Peso de imágenes
- -96%
- Rutas
- 7
- Medios de pago
- 4
- Hosting
- Vercel
33,8 MB → 1,4 MB en WebP
home · tienda · producto · carrito · checkout · origen · contacto
tarjeta · PSE · Nequi · efectivo (Wompi)
SPA + funciones serverless
// capturas
