Implement filter popup for the product catalog

[brolag]

Add a popup that allows users to apply filters (e.g., product type, price range) to the catalog.

• Steps:

  1. Create a filter component that opens as a popup.
  2. Implement filtering logic on the frontend and backend.

• Acceptance Criteria: Users can apply filters to the product catalog and see updated results based on selected criteria.

Blocked by: https://github.com/Vagabonds-Labs/cofiblocks/issues/7

[muguika]

User should be able to filter by roast level, region and price to start with

[muguika]

We could use the same pages from the Search, to show results of filter... image has a little typo *found :)

if the filter doesn't return any results

[Benjtalkshow]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello @brolag,

Can I work on this task? I am ready and available to take it on. I’m an experienced full-stack JavaScript developer with 4 years of experience and a passion for developing frontend web applications. I specialize in using Next.js to build full-stack applications. I have made over 18 contributions on OnlyDust in Next.js, Cairo, TypeScript, and JavaScript projects. I would be glad if this task is assigned to me.

How I plan on tackling this issue

1. Create a filter component: I will build a reusable filter component that opens as a popup. This will allow users to select filters like product type, price range, and other relevant criteria.
2. Implement filtering logic: I will handle the filtering logic on both the frontend and backend. On the frontend, I'll apply the selected filters to the product catalog, updating the displayed results in real time. On the backend, I will ensure the filtered data is correctly fetched based on the selected criteria.

[0xdevcollins]

Hello @brolag,

I am Collins Ikechukwu, and I am eager to take on this task. With 4 years of experience as a full-stack JavaScript developer, I have a strong background in developing frontend web applications, particularly using Next.js. I’ve contributed to OnlyDust in projects involving Next.js, Cairo, TypeScript, and JavaScript. I’m confident that I can handle this task effectively and would be grateful if you could assign it to me.

[onlydustapp[bot]]

Hey @devcollinss! Thanks for showing interest. We've created an application for you to contribute to Cofiblocks. Go check it out on OnlyDust!

[AnoukRImola]

Hi! @brolag I have experience with this type of issues, can I take it? :)

[onlydustapp[bot]]

Hey @AnoukRImola! Thanks for showing interest. We've created an application for you to contribute to Cofiblocks. Go check it out on OnlyDust!

[brolag]

@AnoukRImola assigning this to you.