canina/docs/audit/06-storefront-audit.md

React / Vite Storefront Audit Report

• Auditor Role: React / Vite Storefront Auditor
• Date: 2026-08-06
• Repository HEAD: 715873b2ecc3a72ba974bb2a2be87c5ba82bd4e7
• Included Scope: src/**/*, index.html, vite.config.ts, root tsconfig.json, root package.json, root test files.
• Excluded Scope: **/node_modules/**, **/.next/**, **/dist/**, frontend/application/**, frontend/admin-panel/**.
• Files Inspected: src/App.tsx, src/services/api.ts, src/store/userStore.ts, src/store/cartStore.ts, src/components/Header.tsx, src/components/ProductPage.tsx, src/main.tsx, vite.config.ts.
• Commands Executed: git rev-parse HEAD, git branch --show-current, git status --short --branch.
• Commands Blocked: Interactive Vite dev server (npm run dev), production Vite build (npm run build).
• Audit Limitations: SPA layout evaluated via static AST/JSX code inspection without browser rendering tests.

---

Architecture Overview & Confirmed Strengths

• Modern React Setup: React 19 with Vite 6 providing fast client-side rendering and module reloading.
• Optimized Code Splitting: Utilizes lazy() and Suspense fallback boundaries for secondary page routes (ProductPage, PetProfile, SmartAdvisor, IngredientWiki).
• Centralized Axios Client: src/services/api.ts implements interceptor injection for Authorization: Bearer <accessToken> retrieved from localStorage.

---

Findings

FE-001

Title

SPA Direct Window Location Manipulation Bypasses Routing State Management

Domain

React / Vite Storefront

Category

Routing Architecture & Client Navigation

Severity

MEDIUM

Confidence

CONFIRMED

Status

OPEN

Affected Application

React Storefront (src/)

Affected Files

• src/App.tsx
• src/components/Header.tsx

Relevant Symbols or Lines

• src/App.tsx#L92-L100 (handlePopState)

Evidence

In App.tsx, view changes rely on custom state (currentView, setCurrentView) paired with manual window history manipulations (window.history.pushState) and parsing URLSearchParams manually inside useEffect.

Problem

Lacks a formal router abstraction (e.g. React Router or TanStack Router). Browser forward/back navigation events and direct link share URLs frequently result in state desynchronization or reset to default "home" view.

Root Cause

Ad-hoc view switching logic implemented via useState instead of a declarative client-side router.

Why It Matters

Degrades user navigation experience, breaks deep linking for specific products or pet profiles, and impedes shareable e-commerce links.

User or Business Impact

Customers sharing product links via messaging apps arrive on the home page instead of the specific supplement detail view, increasing bounce rate.

Technical Impact

Increases component state complexity and introduces potential navigation race conditions.

Security or Data-Integrity Impact

Low security risk; primarily usability and state integrity impact.

Recommended Direction

Adopt React Router v6/v7 or TanStack Router to manage client routes declaratively.

Alternative Direction

Centralize custom URL search param parsing into a custom custom hook (useQueryRouter).

Implementation Complexity

MEDIUM

Dependencies

None.

Risks

Minor refactoring needed across navigation callback props passed down to Header and Footer.

Verification Requirements

Test direct browser URL bar navigation to /shop?category=dog and verify corresponding view renders consistently.

Testing Requirements

Unit test query param state synchronization in navigation hooks.

Acceptance Criteria

Deep links to products render the target product page on initial browser page load.

Notes and Limitations

Current SPA relies on standard HTML canvas and modal overlays.

---

Finding Summary

• CRITICAL: 0

• HIGH: 0

• MEDIUM: 1

• LOW: 0

• INFO: 0

• CONFIRMED: 1

• HIGH_CONFIDENCE: 0

• NEEDS_VERIFICATION: 0

• SPECULATIVE: 0

Completion Statement

React / Vite Storefront audit completed. 1 MEDIUM severity finding confirmed.