Vetegram: React + Tailwind Migration

ROLE

Original design (2024) · Product and technical direction · AI-assisted development

YEAR

2024 · 2026

LINKS

01 —

Vetegram is an early-stage venture, started by the owners of a pet shop, building a management platform for veterinary clinics in Costa Rica and Central America. I designed and built their original marketing site in 2024 from just their logo, without a Figma file and with full creative freedom, in HTML, Bootstrap 4 and jQuery. Before launching, they asked me to refresh it: rebuild it in React and Tailwind CSS, keep the brand, content and layout, and improve accessibility, performance and maintainability. The site content is in Spanish.

02 —

I designed the original site. For the rebuild, I led product, design and technical decisions, the milestone plan, and the review of every milestone in the browser. Claude Code wrote the code from my decisions.

03 —

I split the work into milestones, ten pull requests in total, each on its own branch with a description, verification steps and measured results. CI had to pass before anything merged into a protected main branch, and Vercel previews let me review every change before each deploy. I measured before and after with Lighthouse and axe-core on the production build, so every improvement in this case is a number, not an impression.

04 —

Keep the brand, fix the contrast. Instead of changing Vetegram’s palette, I changed text colors: menu text became dark instead of white on the brand’s sky blue (about 2:1 before), and the contact box went from 50% to 85% opacity, so text meets WCAG AA in the original colors.

Remove autoplay instead of fixing it. The carousels had autoplay with a pause button that seemed to do nothing. Rather than fix the button, I removed autoplay from both: moving content hurts usability and needs a reliable pause control under WCAG 2.2.2.

Native carousels, no library. CSS scroll-snap gives native swipe and scrolling, with a small shared hook that reads the position back from the scroll. The Services slider shows 3, 2 or 1 cards by width, with one indicator per card, measured from the scroll position rather than breakpoints.

No router for a single page. Anchor navigation is enough; a router would add weight without adding anything.

Images from 15.3 MB to 0.89 MB. The original image folder held 15.3 MB of JPG and PNG. The site now ships 12 WebP files totaling 0.89 MB, including the hero photos the original loaded from Unsplash.

A form that can’t send by accident. It validates inline, blocks spam with a honeypot, and only sends through Formspree when it’s configured, so the public demo never sends messages.

Design tokens in one place. All brand tokens live in Tailwind v4’s @theme, in CSS: one source of truth, with no JavaScript config.

05 —

Measured with Lighthouse (median of 3 runs on the production build), mobile performance went from 86 to 93 and LCP from 4.1 s to 3.0 s; best practices and SEO reached 100, and accessibility stayed at 100. axe-core found 1 serious violation before and 0 after. The site has 14 tests and runs CI on every pull request. A demo is live on Vercel; Vetegram hasn’t launched the site yet, and the contact form is in demo mode, so it doesn’t send messages. Mobile LCP is now limited by client-side rendering.

06 —

Turn on Formspree in production.

Real copy for the About accordion and for Services cards 3 and 4, which repeat Grooming and Marketplace, as in the original.

Real social profile URLs (the original used generic ones).

Replace the photos whose source isn’t confirmed.

Prerender the page to lower mobile LCP.

07 —

Directing AI still needs a designer’s eye. Reviewing every milestone in the browser, I caught what the implementation missed: a pause button that seemed to do nothing, a missing pointer cursor, an abrupt hover, and slider dots that didn’t match the number of cards.

Simpler beats clever. Removing autoplay was better for users than fixing its pause button.

Accessibility can keep the brand. Changing text colors reached AA without touching the palette.

Motion principles work on the web. The cat’s jump uses anticipation, stretch and squash, and every animation respects reduced-motion settings.

Process matters, even solo. One branch and pull request per milestone, CI and a protected main made every change reviewable before each deploy.

Hero photos from Unsplash. Other photos carried over from the original site. Vetegram brand shown with permission.