[UI/UX] Build Marketplace Discovery Grid View (Desktop & Mobile)

[Rampop01]

Issue #61

[UI/UX] Build Marketplace Discovery Grid View (Desktop & Mobile)

🔴 Priority: Critical
Difficulty: Hard
Estimated Effort: 4-5 days
Relevant Files: src/app/marketplace/page.tsx, src/components/marketplace/ProductCard.tsx, src/components/marketplace/FilterSidebar.tsx, src/components/marketplace/Grid.tsx
Labels: ui, marketplace, priority:critical, figma

Requirements

1. Responsive Grid Architecture

   • Build the highly responsive electronics grid view from Figma using CSS Grid (grid-cols-1 md:grid-cols-3 lg:grid-cols-4).
   • Create a ProductCard component displaying: Device image (Next.js <Image>), Title, Condition badge (New, Used, Refurbished), Price in USDC, and a Seller Trust Score badge.
   • Implement hover states: card elevates (hover:-translate-y-1) and image scales up (hover:scale-105) to create the premium feel defined in the Figma design.
   • Build a sticky filter sidebar on desktop (collapsible drawer on mobile) with: Category, Price Range slider, Condition checkboxes, and Minimum Seller Trust Score.

2. Screenshot Requirement

   • Capture and commit screenshots of the Desktop grid view (populated with at least 12 product cards) and the Mobile grid view.
   • Include a screenshot of the filter sidebar in its open state on both desktop and mobile.
   • Place all screenshots in src/components/marketplace/screenshots/.

3. Testing Requirements

   • Component test (React Testing Library): Render the grid with mocked product data and assert that ProductCard renders the correct title, price, and condition badge.
   • E2E test: Verify that changing a filter (e.g., Category = Phones) updates the URL query params and the displayed grid refreshes correctly.

---

[Muhamadmust]

Hi maintainer
I have reviewed this issue and I'd like to work on it, PR 2days