Skip to content

Build "All Products" Page (/products) #84

@Alexandrbig1

Description

@Alexandrbig1

Priority: High
Difficulty: Advanced
Type: Frontend Feature


Description:
Create the All Products page where users can browse all products from the backend. This page will display a banner, filter/sort placeholders, and a product grid with infinite scroll.


Requirements:

  1. Page Layout

    • URL: /products
    • Top section:
      • Banner (placeholder image or styled block).
      • Toolbar below banner:
        • Left: All Filters button (non-functional, just visible).
        • Right: Sort by: Best Selling button (non-functional, just visible).
  2. Product Grid

    • Fetch product data from backend API:
      • Endpoint: GET https://corexshoptest.onrender.com/api/products
    • Display products in card layout. Each card includes:
      • Product image (hover → "View Product" button appears).
      • Rating + reviews (placeholder values if not available).
      • Price.
      • Title.
      • Flavors dropdown.
      • "Wishlist" button (heart icon).
      • "Add to Cart" button.
  3. Wishlist / Cart

    • For now: store wishlist + cart in LocalStorage (backend integration will come later).
    • Clicking wishlist toggles heart state and saves to LocalStorage.
    • Clicking Add to Cart stores product in LocalStorage.
  4. Infinite Scroll

    • Instead of "Load More" button → load 5 more products automatically when scrolling near the bottom.
    • Continue until all products are loaded.
  5. Navigation

    • On hover over product image → show "View Product" button.
    • Clicking it navigates to product details page (/products/:id).

Assets:

Image


Acceptance Criteria:

  • Page available at /products.
  • Banner + toolbar visible.
  • Products load dynamically from backend API.
  • Infinite scroll works (loads 5 at a time until all are shown).
  • Wishlist + cart buttons update LocalStorage correctly.
  • Hover over product image shows "View Product" button, which navigates to correct product details page.

Metadata

Metadata

Assignees

Labels

advancedComplex/advanced tasks or featuresfrontendTasks related to the frontend (React, Vite, TailwindCSS, UI components, pages)hacktoberfestSpecial issue for Hacktoberfesthacktoberfest-2025Special issue for Hacktoberfest 2025priority: highNeeds attention ASAP

Projects

Status

Done

Relationships

None yet

Development

No branches or pull requests

Issue actions