hngprojects / hng_boilerplate_nextjs

https://deployment.nextjs.boilerplate.hng.tech
206 stars 265 forks source link

[FEATURE]: [PHOENIX] [BE] Implement Filter by Price List Icon #1458

Open Olnuel opened 2 months ago

Olnuel commented 2 months ago

Description

The product listing interface lacks the filter for filtering products based on price ranges. Implement a filter by price list icon that will help users to filter products according to their price preferences.

Acceptance Criteria

  1. A price list filter icon should be added to the product listing interface, representing the filter by price list functionality.
  2. When the price list icon is clicked, a dropdown should appear, displaying a list of price ranges from min to max.
  3. When a user selects a price range from the list, the product list should update immediately to display only the products that fall within the specified price range.

Endpoint

GET /api/products

Links

| FIGMA LINK https://www.figma.com/design/VEItfX6St5NSAqqNHImcxD/HNG-Boilerplate-Designs?node-id=771-13780&t=VEj4y3G0vEn4g18k-4

Images

https://www.loom.com/share/8d931d6ab37942a5a482401f6df0926f?sid=53093542-6803-4ddd-9007-4e376b8e8c18

https://www.loom.com/share/abb2ae7ffb0247c8a7a0537978b41083?sid=592ef2f0-5fc2-4e65-a93b-bb00f2d0edeb

image