The Problem
Milania is a small Chilean brand selling handmade crochet bags, earrings, and accessories. Sales happened entirely through Instagram DMs — customers would message to ask about availability, pricing, and colors, creating friction on both sides. The owner needed a standalone catalog that let customers browse the full range, see accurate color options, and reach out to buy without back-and-forth.
The hard constraints: no server, no CMS subscription, no maintenance overhead. It had to be deploy-and-forget.
What I Built
A fully static product catalog built with Next.js 15 (static export), React 19, and Tailwind CSS 4, deployed to Cloudflare Pages.
Product data architecture: All products live in a single products.json file with a colors.json for material-based palettes. Two color systems (trapillo and acrílico) with swatch previews on detail pages. Pricing supports single price, offer price (with badge), and tiered/wholesale pricing by quantity. The schema handles every edge case from the owner’s real inventory.
Image carousel: Direction-aware slide animations with touch support (40px swipe threshold). The previous image stays mounted during transitions to prevent white flash — a small detail that makes the experience feel native on mobile.
Contact integration: WhatsApp and Instagram CTAs pass the selected product color as context, so the customer arrives at the conversation with the relevant information already included.
Image pipeline: A build-time compression script (mozjpeg q82, max 1200px) runs before each deploy. Every product photo is optimized without manual intervention.
Design Decisions
The aesthetic required a deliberate break from tech defaults. Where my other work uses slate + Geist, this needed warmth: cream backgrounds, Playfair Display headings, a deep aubergine dark mode. The goal was “buying from a talented friend,” not a SaaS checkout flow.
Photography drives every layout decision. Cards are image-first with minimal metadata below. The detail page gives the carousel the full width it deserves on mobile, with specs and contact CTAs below the fold.
Outcome
The catalog is live and handles the owner’s full product range, including complex pricing tiers and color availability. Zero ongoing infrastructure cost.