CATOCA
Online store and brand site for a single-origin coffee from the Sierra Nevada
- company:
- CATOCA (client)
- period:
- Jul 2026 — present
- React 19
- Vite
- TypeScript
- Tailwind CSS v4
- anime.js
- React Router 7
- Vercel Functions
- Wompi (payments)
- Gmail API
// problem
The brand needed a site that was both a showcase, to tell the coffee's origin story, and a direct sales channel, with a reliable checkout for the Colombian market (card, PSE, Nequi or cash) and without paying for an e-commerce platform.
// my role
Full stack development: redesign of the interface and frontend architecture, Vercel serverless functions for checkout, Wompi and Gmail API integration, and image and animation optimization.
// technical decisions
Amounts signed on the server, not in the browser
The serverless function builds the order with the server's catalog prices and generates the SHA-256 integrity signature Wompi requires. The browser only sends which products and how many, so nobody can pay a price that isn't the store's.
Stateless checkout session with an HMAC token
Vercel functions don't share memory, so the checkout session travels with the client as an HMAC-signed token; /api/wompi/confirm verifies it with a constant-time comparison before confirming the order and sending emails.
Verified Wompi events and emails with retries
The events webhook validates Wompi's checksum before accepting a payment. Emails to the customer and the store go out through the Gmail API, with backoff retries, token refresh and HTML escaping to prevent injection.
Performance and accessible motion
I converted the images to WebP (from 33.8 MB to 1.4 MB) and every anime.js animation respects prefers-reduced-motion.
// impact
- Image weight
- -96%
- Routes
- 7
- Payment methods
- 4
- Hosting
- Vercel
33.8 MB → 1.4 MB in WebP
home · store · product · cart · checkout · origin · contact
card · PSE · Nequi · cash (Wompi)
SPA + serverless functions
// screenshots
