17 lines
1.4 KiB
Markdown
17 lines
1.4 KiB
Markdown
# 🎨 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.
|