Página con panel administrativo
Commercial web platform for a Basset Hound breeder in Costa Rica. Real-time puppy catalog powered by Google Sheets, direct WhatsApp integration for frictionless sales, and an emotionally-driven design optimized for conversion.
Cachorros Petchochos — Web Platform for a Pet Breeder
Production website for a Basset Hound breeder in Alajuela, Costa Rica, live since 2020. The core challenge: let the client update their puppy inventory without relying on a developer or paying for a backend.
Standout technical solution
Google Sheets as a headless CMS: the client edits a spreadsheet and the site
reflects changes automatically. A custom React hook (useSheetCsv) handles fetch,
CSV parsing via PapaParse, multilingual column and status normalization, state
management, error handling, and cleanup — all encapsulated in a single reusable hook.
Key features
- Dynamic catalog with availability filtering (available / reserved / sold), updated in real time from Google Sheets — no backend, no database.
- WhatsApp deep link integration — each puppy card generates a pre-filled message with the puppy's name, gender, age, and temperament. One tap connects the buyer directly to the seller.
- Sold puppies carousel with smooth scrolling and manual navigation.
- Content blog with 6 breed-focused articles for SEO positioning.
- Real customer testimonials from Costa Rica and El Salvador as social proof.
- Schema.org microdata on product listings for rich snippets in search results.
Design & frontend
Fully hand-crafted CSS with no external UI framework — custom design system built on CSS Custom Properties, CSS Grid, Flexbox, and gradients. Typography and color palette chosen to convey warmth and trust in the context of a family pet business. Mobile-first responsive layout with lazy-loaded images for optimal Core Web Vitals.
Stack
React 19 · Vite · PapaParse · CSS3 · Bootstrap (utilities via CDN) · Google Sheets API (CSV) · Schema.org · WhatsApp Business deep links
Stack