Project 16: E-commerce Product Page

📋 Project Brief

Build a high-conversion e-commerce product page focusing on UI patterns that drive sales: image magnification, variant selection, sticky buy bars, urgency indicators, and review filtering. This is about mastering the "conversion funnel" from a frontend perspective.

✅ Feature Requirements

Feature 1: Image Magnifier

Acceptance Criteria:

• Hovering over the product image shows a magnified view in a lens/panel
• The magnification level is at least 2x
• On mobile, pinch-to-zoom replaces the hover lens
• Multiple product images with thumbnail navigation
• The main image transitions smoothly when thumbnails are clicked

Feature 2: Variant Swapper

Acceptance Criteria:

• Selecting a color/size variant updates the product image, price, and availability
• Out-of-stock variants are visually disabled but still visible
• The URL updates with the selected variant (e.g., ?color=red&size=L)
• Only valid combinations are selectable (e.g., if "Red" has no "XL," disable "XL" when "Red" is selected)

Feature 3: Sticky Buy Bar

Acceptance Criteria:

• On mobile, when the user scrolls past the main "Add to Cart" button, a sticky bar appears at the bottom
• The bar shows: product name, selected variant, price, and an "Add to Cart" button
• The bar has a slide-up animation on appear and slide-down on dismiss
• Use Intersection Observer to detect when the original CTA leaves the viewport

Feature 4: Live Inventory Urgency

Acceptance Criteria:

• Show "Only X left in stock" when inventory is below 10
• Simulate a countdown: stock decreases by 1 every 30-60 seconds (random interval)
• When stock reaches 0, the "Add to Cart" button disables and shows "Sold Out"
• A "Notify Me" option appears when sold out

Feature 5: Review Filter System

Acceptance Criteria:

• Reviews sortable by: "Most Recent," "Most Helpful," "Highest Rating," "Lowest Rating"
• Filter by star rating (click on a star in the distribution bar)
• "Verified Purchase" badge on qualifying reviews
• A distribution bar chart showing the count of 1-star through 5-star reviews
• Pagination: show 5 reviews at a time with "Load More"

🧪 Testing Checklist

• Unit test variant combination validation logic
• Unit test review sorting algorithms
• Integration test: selecting a variant updates image + price
• Integration test: sticky bar appears when scrolling past CTA
• A11y: all interactive elements accessible; images have alt text

🚀 Stretch Goals

• Add a "Compare" feature to view two products side-by-side
• Implement a "Recently Viewed" carousel
• Add a "Questions & Answers" section
• Implement a "Size Guide" modal with measurement charts