NatArt
Cliente: Natalia Heller — artista y tatuadora
Stack
Descripción
El proyecto arrancó como SPA en Vite y se migró completo a Next.js 16 App Router para poder indexar y servir contenido desde el servidor. Sigue iterando: falta el dominio definitivo para cerrar la cadena de SEO y mails.
El desafío
Vender obra física online tiene un problema que no aparece en un catálogo común: cada pieza tiene una proporción distinta y recortarla la arruina. Sumado a eso, las fotos llegan desde un iPhone en HEIC y pesan varios megas cada una, y el checkout tenía que aceptar tanto Mercado Pago como transferencia con comprobante, porque no todos los compradores usan lo mismo.
La solución
La ficha de producto lee las dimensiones reales de cada imagen pidiendo solo los primeros 64 KB del archivo, con un parser propio de JPEG, PNG y WebP validado contra `sharp`: el contenedor toma la forma de la obra en vez de recortarla. Las fotos se convierten de HEIC a JPEG en el navegador antes de subirse, y un script no destructivo recomprimió el catálogo existente. Checkout doble — Mercado Pago con validación HMAC del webhook, y transferencia con comprobante — sobre PocketBase, con panel de administración para órdenes, stock, envíos, blog y galerías.
Resultados
Las imágenes del catálogo bajaron de 17,06 MB a 3,17 MB (-81%) sin perder calidad percibida, y el detalle de producto dejó de recortar hasta un 40% de una pieza. Las reglas de acceso del backend quedaron cerradas y versionadas en un script idempotente, y el repo pasa typecheck y lint sin advertencias.