Implement product catalog page

[brolag]

Create a product catalog page that displays coffee products, allowing users to browse available offerings.

• Steps:

  1. Build the catalog UI with product listing, pricing, and descriptions.
  2. Fetch product data from the available NFTs.
  3. Implement pagination or infinite scrolling if necessary.

• Acceptance Criteria: Users can browse coffee products with pricing and descriptions displayed correctly.

[muguika]

This is the design for the catalog homepage:

The product card should show (see next image for detail):

1. Region and Farm's name. Ex. Poás by Beneficio Las Peñas
2. Coffee Variety. Ex. Geisha or Marsellesa
3. Price per unit

Notice the orange tag over the photo: it refers to the roast level (strong, medium, light)

[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!

[Benjtalkshow]

Hello @brolag,

I am Nnaji Benjamin, and I am eager to take on this task. With 4 years of experience as a full-stack JavaScript developer, I have a solid background in building dynamic product interfaces and web applications using Next.js. I’ve contributed to over 18 projects on OnlyDust involving Next.js, TypeScript, and JavaScript, including complex implementations like dashboards on OP Stack and transaction details pages. I’m confident in my ability to tackle this task effectively and would be grateful if you could assign it to me.

Technical Approach:

1. Build the Catalog UI: I will design and implement a visually appealing and responsive product catalog page that displays coffee products, with key details like pricing, descriptions, and product images. The layout will be intuitive, ensuring users can easily navigate the offerings.

2. Fetch Product Data: I will integrate API calls to retrieve product data, including coffee offerings and their corresponding details from the available NFTs, ensuring accurate representation of each product.

3. Implement Pagination or Infinite Scrolling: Depending on the number of products, I will implement pagination or infinite scrolling to improve the user experience, ensuring smooth browsing without overwhelming the interface.

[onlydustapp[bot]]

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

[evgongora]

Hello hello @brolag!

My name is Erick, I'm a student from Costa Rica and have experience working with Javascript, TypeScript and Next.js, which aligns with the tech stack of this project. I can implement the following steps:

• Build the catalog UI based on the provided design, ensuring product listings, pricing, and descriptions are displayed correctly.
• Fetch product data from the available NFTs.
• Implement infinite scrolling to load more products dynamically as the user reaches the bottom of the page for better UX.

Let me know if there are any additional details you'd like me to consider!

Thanks!

[onlydustapp[bot]]

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

[brolag]

Hey @evgongora assigning this to you.