Implement Persistent User Review System

[smgrow-lantern]

Overview

Implement a persistent user review system for The Daily Harvest e-commerce application. Currently, reviews are stored in component state and are lost on page refresh. This enhancement will add proper review persistence, user attribution, and improved review management.

Current State

• ✅ ReviewModal component exists for submitting reviews
• ✅ Products have a reviews property in the type definition
• ✅ Reviews displayed on ProductsPage
• ❌ Reviews stored in local component state (lost on refresh)
• ❌ No user attribution for reviews
• ❌ No review persistence mechanism

Implementation Plan

Phase 1: Data Model & Storage

1. Extend Review Type (src/types/index.ts)

   • Add userId field to associate reviews with users
   • Add createdAt timestamp
   • Add verified flag for verified purchases
   • Add unique id field for each review

2. Local Storage Implementation

   • Create ReviewStorageService utility in src/utils/reviewStorage.ts
   • Store reviews in localStorage keyed by product ID
   • Implement CRUD operations (Create, Read, Update, Delete)
   • Add data validation and migration logic

Phase 2: Review Context

1. Create ReviewContext (src/context/ReviewContext.tsx)

   • Manage reviews globally (similar to CartContext pattern)
   • Provide addReview, getReviewsByProduct, deleteReview functions
   • Initialize from localStorage on mount
   • Sync to localStorage on changes

2. Update App.tsx

   • Wrap routes with ReviewProvider
   • Ensure ReviewContext is accessible throughout app

Phase 3: Component Updates

1. Update ProductsPage

   • Replace local review state with ReviewContext
   • Load reviews from context instead of product.reviews
   • Display reviews with user attribution and timestamps
   • Add review sorting options (newest, highest rated, lowest rated)

2. Enhance ReviewModal

   • Add form validation (minimum review length, rating required)
   • Display user's name/email in review preview
   • Add confirmation message on successful submission
   • Handle submission errors gracefully

3. Update Product Display

   • Show review count and average rating
   • Add "Write a Review" button more prominently
   • Display verified purchase badge when applicable

Phase 4: User Integration

1. Link Reviews to User Context

   • Reviews should include user's name from login
   • Only logged-in users can submit reviews
   • Show "Please log in to review" for anonymous users

2. User's Review Management

   • Add "My Reviews" section to user profile/admin page
   • Allow users to edit their own reviews
   • Allow users to delete their own reviews

Phase 5: Testing

1. Unit Tests

   • Test ReviewStorageService CRUD operations
   • Test ReviewContext state management
   • Test ReviewModal validation logic
   • Test ProductsPage review display and sorting

2. Integration Tests

   • Test end-to-end review submission flow
   • Test review persistence across page refreshes
   • Test user authentication requirements
   • Test review filtering and sorting

Phase 6: UI/UX Enhancements

1. Review Display

   • Star rating visualization component
   • Review helpful votes (thumbs up/down)
   • Pagination for products with many reviews
   • Filter reviews by rating

2. Review Form

   • Character counter for review text
   • Preview before submission
   • Photo upload capability (future enhancement)

Technical Requirements

Type Definitions

export interface Review {
  id: string;
  productId: string;
  userId: string;
  userName: string;
  rating: number;
  comment: string;
  createdAt: string;
  updatedAt?: string;
  verified: boolean;
  helpful?: number;
}

Testing Framework

• Use Vitest (NOT Jest) with vi.mock() for mocking
• Follow existing test patterns from CartPage.test.tsx
• Target 80% code coverage for new components

File Structure

src/
├── context/
│   └── ReviewContext.tsx           # New: Review state management
├── utils/
│   └── reviewStorage.ts            # New: localStorage operations
├── components/
│   ├── ReviewModal.tsx             # Update: Add validation
│   ├── ProductsPage.tsx            # Update: Use ReviewContext
│   └── ReviewList.tsx              # New: Dedicated review display component
└── types/
    └── index.ts                    # Update: Enhanced Review interface

Success Criteria

• ✅ Reviews persist across page refreshes
• ✅ Reviews are associated with logged-in users
• ✅ Users can view all reviews for a product
• ✅ Users can edit/delete their own reviews
• ✅ Review submission includes validation
• ✅ Average ratings displayed on products
• ✅ All tests pass with 80%+ coverage
• ✅ Follows existing Vitest testing patterns

Future Enhancements (Out of Scope)

• Backend API integration for review storage
• Review moderation/flagging system
• Photo uploads with reviews
• Review reply threads
• Email notifications for new reviews

Related Files

• src/components/ReviewModal.tsx
• src/components/ProductsPage.tsx
• src/types/index.ts
• src/context/CartContext.tsx (reference for context pattern)
• src/components/CartPage.test.tsx (reference for test patterns)

Labels

enhancement, good first issue, help wanted