NatArt
Client: Natalia Heller — artista y tatuadora
Stack
Description
The project started as a Vite SPA and was fully migrated to Next.js 16 App Router to make it indexable and server-rendered. Still iterating: the final domain is pending to close the SEO and email chain.
The challenge
Selling physical artwork online has a problem a regular catalog does not: every piece has a different aspect ratio and cropping it ruins the work. On top of that, photos arrive from an iPhone in HEIC weighing several megabytes each, and checkout had to accept both Mercado Pago and bank transfer with receipt, because not every buyer uses the same method.
The solution
The product page reads each image's real dimensions by fetching only the first 64 KB of the file, with a custom JPEG, PNG, and WebP parser validated against `sharp`: the container takes the shape of the artwork instead of cropping it. Photos are converted from HEIC to JPEG in the browser before upload, and a non-destructive script recompressed the existing catalog. Dual checkout — Mercado Pago with HMAC webhook validation, and bank transfer with receipt — on PocketBase, with an admin panel for orders, stock, shipping, blog, and galleries.
Results
Catalog images dropped from 17.06 MB to 3.17 MB (-81%) with no perceived quality loss, and the product detail page stopped cropping up to 40% of a piece. Backend access rules were locked down and versioned in an idempotent script, and the repo passes typecheck and lint with no warnings.