hngprojects / hng_boilerplate_nextjs

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

[FEATURE]: [PHOENIX] [BE] Implement Filter by Categories Icon #1457

Open Olnuel opened 2 months ago

Olnuel commented 2 months ago

Description

The product listing interface do not have filtering products by categories. Implementing a filter by categories icon will help users to filter products based on their selected categories.

Acceptance Criteria

  1. An icon should be added to the product listing interface, representing the filter by categories functionality.
  2. When the categories icon is clicked, a dropdown menu should appear, allowing users to select from available categories such as Breakfast, Appetizers, Lunch.
  3. When a user selects a category from the dropdown, the product list should update immediately to display only the products that match the selected category.

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