canina/.ai_agency/specs/reviews/frontend_review.md

🎨 Frontend & Admin Panel Technical Review (06_dev_frontend)

Architectural Overview

• Customer Application: Next.js (App Router), React 18/19, Tailwind CSS, Lucide Icons, Framer Motion/CSS animations.
• Admin Panel: React + Vite, Tailwind CSS, Recharts / Dashboard UI components.

Critical Review Findings & Required Enhancements

1. Three User Persona Workflows:
   • Persona 1 (Home Pet Owners): Smart Pet Health Advisor wizard / product selector based on species (dog/cat), symptoms, and age. Educational tooltips linking to scientific terms wiki (/wiki/[key]).
   • Persona 2 (Vet Prescribed): Direct quick search by article number (artNo), barcode, or product name, with quick add-to-cart and streamlined checkout.
   • Persona 3 (B2B Wholesale Clients): Dedicated wholesale portal (/b2b), wholesale document upload/verification status, bulk order matrix table, 30% wholesale discount pricing, tier pricing display.
2. Dynamic Content Sync:
   • Replace hardcoded static arrays in Next.js frontend with live backend API queries (/api/v1/hero-banners, /api/v1/vet-testimonials, /api/v1/smart-advisor, /api/v1/ui-texts, /api/v1/scientific-terms, /api/v1/products).
   • Wire Admin Panel pages to manage all these resources via /api/v1/admin/*.
3. UX & Performance:
   • Add Skeleton loaders for dynamic lists, Error Boundaries for server components, and responsive mobile-first layouts.