All Products Page – Filter Menu

[Alexandrbig1]

Priority: High
Difficulty: Advanced
Type: Frontend (UI + API Integration)

---

Description

We need to implement a filter menu on the All Products page (/products).
When the user clicks on the "All Filters" button, a slide-aside filter menu should appear with smooth animation (CSS transitions or Framer Motion).

The filter menu allows filtering products by:

• Price range (min & max slider)
• Category (checkboxes)
• Goals (checkboxes)

---

Requirements

1. Filter Menu UI

   • Slide-in panel (right or left, contributor’s choice)
   • Smooth open/close animation (CSS or Framer Motion)
   • Responsive (mobile & desktop)

2. Price Range

   • Range slider with two handles: min price and max price
   • Default: min = 0, max = highest price fetched from /api/products
   • Updating slider should re-render products in real-time

3. Shop By Category

   • Section title: Shop By Category
   • Categories:
     • Garage Sale (all products with sale > 0)
     • Categories dynamically fetched from /api/products (category field)
   • Multiple selection allowed (checkboxes)

4. Shop By Goal

   • Section title: Shop By Goal
   • Goals dynamically fetched from /api/products (goals field)
   • Multiple selection allowed (checkboxes)

5. Filtering Behavior

   • Products should re-render automatically when filters change (no “Apply” button).
   • Filtering should happen client-side (on already fetched products).
   • Combined filters should work together (e.g., price + category + goals).

---

Assets:

---

Acceptance Criteria

• Clicking "All Filters" smoothly opens a side panel.
• Price slider updates visible products in real-time.
• Selecting multiple categories or goals filters products accordingly.
• Garage Sale correctly shows products with sale > 0.
• Filters can be combined (category + goals + price).
• UX is smooth (no page reloads, only re-render).
• Works across desktop & mobile.

---

🔑 API Reference:

• GET https://corexshoptest.onrender.com/api/products
  • Fields: price, category, goals, sale

[AparAgarwal]

Yes, I would like to work on this. Please assign it to me.

[Alexandrbig1]

@AparAgarwal, you're assigned to this task — thanks!
We really appreciate your contributions. You’re doing great work and have already completed several tasks.