[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

[Muhamadmust]

Hi @Rampop01
I noticed you've been quite busy lately and haven't had as much time for this repo during the last Grantfox wave.

I really appreciate the work you've put into this project, and I'd love to help take some of the weight off your shoulders. If you are open to it, I would be happy to assist with managing the repo—whether that means triaging issues, reviewing pull requests, or helping out with the next wave.

No pressure at all, but if you'd like an extra pair of hands, let me know how you'd prefer to coordinate!

[rupesh-kumar-sah]

Hey maintainers,

I can tackle [UI/UX] Build Marketplace Discovery Grid View (Desktop & Mobile). Proposed implementation roadmap:

• Analysis: Inspect current behavior and edge cases in Veloxous/Frontend
• Core Implementation: Implement [UI/UX] Build Marketplace Discovery Grid View (Desktop & Mobile) following the existing UI design system, accessibility standards, and responsive styling.
• Quality Assurance: Verify UI performance and zero console errors.

Looking forward to collaborating on this—please assign!