Task: Add Product Reviews to Product Details

Add Product Reviews to Product Details

Objective

Display customer reviews on the Product Details page using the mock review data.

Why It Matters

Reviews build trust and influence purchase decisions. This task involves data fetching, rendering lists, and computing aggregates.

Technical Requirements

• Import and call getReviewsByProductId() from the service layer
• Display reviews in the "Customer Reviews" placeholder section
• Show: reviewer name, rating (stars), comment, and date
• Show average rating and total review count at the top
• Sort reviews by date (newest first)

Expected Behavior

• Reviews load when the product page loads
• Each review shows the user name, star rating, comment, and date
• An aggregate section shows average rating and "X reviews"
• Products with no reviews show "No reviews yet"

Acceptance Criteria

• Reviews are fetched using getReviewsByProductId
• Each review displays all fields (user, rating, comment, date)
• Average rating is calculated correctly
• Reviews are sorted newest first
• Empty state shown for products without reviews

Edge Cases

• Products with zero reviews
• Products with many reviews (consider showing top 5 with "Show all")
• Reviews with ratings of 1 or 5 (star rendering edge)

Hints

• Use the existing renderStars() function already in the component
• Calculate average: reviews.reduce((sum, r) => sum + r.rating, 0) / reviews.length
• Format the date nicely using new Date(date).toLocaleDateString()