FETCH VET FINDER

An interactive vet finder app that helps pet owners discover nearby veterinary clinics with real-time search, smart filters, and an intuitive map interface.

LIVE DEMO →  GITHUB →

Features — Vet search powered by Google Places API, interactive Google Maps with custom markers and search radius overlay, Google Places Autocomplete for location search, smart filters for distance, rating and open status, map-to-list sync where clicking a card pans the map and clicking a marker scrolls the list, a slide-in detail panel with photos, hours, reviews, phone and directions, and full mobile responsiveness with a bottom sheet drawer on mobile and split layout on desktop.

Architecture — The app uses a server-side API proxy pattern where the Google API key is hidden in Next.js API routes and never exposed to the client. A token-based design system built with CSS custom properties handles colors, spacing, radius and shadows for consistent, scalable styling that matches the Fetch brand. The codebase follows a component-driven approach with reusable UI primitives like Button, Badge, Skeleton and EmptyState separated from feature components.

UX & Accessibility — Optimistic UX patterns throughout with skeleton loading states, smooth animations, and empty states for every data-fetching scenario. Accessibility is built in with ARIA labels on map markers, keyboard-navigable cards, and semantic HTML.

Testing — Unit tested with Vitest and React Testing Library to cover key component behavior and interactions.

AI Workflow — Built with AI assistance as a core part of the development workflow. Claude was used for PRD drafting, component architecture planning, code review and debugging. Cursor provided code autocompletion, refactoring and inline suggestions. AI accelerated the scaffolding and boilerplate, while design decisions, UX flows and architectural choices were made independently.