Implement Product Listing Feature for Farmers' Marketplace 🛒

[aguilar1x]

Product Listing Technical Specification

📝 Description

Create a comprehensive product listing page that displays farmers' products with relevant filtering, sorting, and search capabilities. The listing should focus on agricultural products and provide essential information for both farmers and customers.

⚙️ Technical Requirements

Mock Data Structure

We will use static mock data in JSON format instead of consuming an API. The data will represent agricultural products and their attributes:

const productsMock = [
  {
    id: '1',
    name: 'Organic Tomatoes',
    description: 'Fresh organic tomatoes from local farms.',
    price: { amount: 3.5, unit: 'per kg' },
    farmer: {
      id: 'f1',
      name: 'John Doe',
      farmName: 'Green Acres Farm',
      location: {
        latitude: 37.7749,
        longitude: -122.4194,
        address: '123 Green Farm Road, CA',
      },
    },
    category: 'Vegetables',
    subCategory: 'Tomatoes',
    images: ['tomatoes.jpg'],
    stockQuantity: 50,
    harvestDate: new Date('2024-06-01'),
    certifications: ['organic'],
    seasonality: ['Summer'],
    farmingMethod: 'organic',
    availableForDelivery: true,
    pickupAvailable: true,
  },
  {
    id: '2',
    name: 'Fresh Eggs',
    description: 'Free-range eggs from happy hens.',
    price: { amount: 4.0, unit: 'per dozen' },
    farmer: {
      id: 'f2',
      name: 'Jane Smith',
      farmName: 'Sunny Farm',
      location: {
        latitude: 40.7128,
        longitude: -74.006,
        address: '456 Sunny Lane, NY',
      },
    },
    category: 'Eggs',
    subCategory: '',
    images: ['eggs.jpg'],
    stockQuantity: 30,
    harvestDate: new Date('2024-06-10'),
    certifications: ['non-GMO'],
    seasonality: ['All Year'],
    farmingMethod: 'conventional',
    availableForDelivery: false,
    pickupAvailable: true,
  },
];

UI Components

1. Product List/Grid

   • Supports switching between grid and list views

   interface ProductGridProps {
     products: Product[];
     viewMode: 'grid' | 'list';
     onProductClick: (productId: string) => void;
   }

2. Filter Panel

   • Allows filtering products based on attributes

   interface FilterOptions {
     categories: string[];
     farmingMethods: string[];
     seasons: string[];
     certifications: string[];
     priceRange: {
       min: number;
       max: number;
     };
     distance: number;
   }

3. Search Bar

   • Includes additional search filters

   interface SearchProps {
     onSearch: (searchTerm: string) => void;
     searchFilters: {
       searchInProducts: boolean;
       searchInFarms: boolean;
     };
   }

4. Product Card

   • Displays:
     • Product image
     • Farm name and logo
     • Product name
     • Price and unit
     • Available quantity
     • Harvest date and distance

🎨 Visual Design

Responsive Layout

• 4 columns on desktop
• 2 columns on tablets
• 1 column on mobile
• Sticky filter panel on desktop, collapsible on mobile

UI States

• Skeleton loading state for products
• Toggle between grid and list views
• Infinite scroll or pagination support

🎯 Filtering Capabilities

Static filters based on mock data:

• Category: Vegetables, Fruits, Dairy, Eggs, Meat, etc.
• Season: Spring, Summer, Fall, Winter
• Farming Method: Organic, Conventional, Hydroponic
• Price Range: User-specified
• Distance: Based on simulated locations
• Certifications: Organic, Non-GMO, etc.
• Delivery Options: Available for delivery or pickup

Mock Categories Data

const categoriesMock = [
  {
    id: 'c1',
    name: 'Vegetables',
    subCategories: ['Tomatoes', 'Carrots', 'Lettuce'],
  },
  {
    id: 'c2',
    name: 'Fruits',
    subCategories: ['Apples', 'Bananas', 'Oranges'],
  },
];

🛠 Local Implementation

• Use mock data directly in code or import as JSON files
• Example implementation using React components or other front-end frameworks
• Avoid backend dependencies until later project stages

[khayss]

I'm a full-stack developer. I'm good with backend and frontend development hence working on either is seamless for me especially when connecting both.

For this issue, I'll:

• Create the product listing page base on the project structure.
• Implements all the required and useful functionalities such as filtering, search, pagination, etc.
• Ensure the page is flexibly designed for future updates.
• Test to ensure the page functionalities works as expected without interfering with any previous app functionality.

I'll be glad to work on this.

[therealemino]

Hi, I've over 4 years professional experience working on frontend applications (React, Vue, Next, Nuxt, TS). I've gone through the requirements and I believe I can get this done.

How I'll tackle this:

1. Create the product card component that displays the image, name and other metadata provided.
2. Fetch the products and categories (from the API) and Create the product listing page.
3. Loop through the array of products and render them via the component provided in step 1. I'll also implement responsive design based on the requirements (4 columns on desktop, 2 on tablet, 1 on mobile).
4. Setup the search and filtering functionalities.

Can I take on this task?

[Bran18]

Hello Team,

My name is Brandon Andrey Fernandez, and I am part of the Dojo Coding Community ⛩️💻 KindFi and https://bitcash.org/en. I’m excited about the opportunity to contribute to your project during Only Dust Hackathon #11! 🚀

I am a full-stack developer with experience in Web3 and blockchain technologies, particularly in projects involving smart contracts, AI integration, and decentralized solutions. I have worked on a large number of web3 projects and solutions as for example:

https://masterbots.ai/
https://bitlauncher.ai/en

I am interested in this specific issue because it combines my passions: blockchain, AI technology, and modern web development. I am motivated by the opportunity to improve my skills and contribute to the project. I have participated in hackathons like ODH and other web2 based hackathons.

During the hackathon, I can dedicate approximately 5h min hours per day to working on this issue. I am committed to active collaboration, delivering high-quality code, and maintaining open communication with the team.

You can find my profiles and links here:

• GitHub: https://github.com/Bran18?tab=repositories
• OnlyDust: https://app.onlydust.com/u/Bran18
• X https://x.com/branfdez_18
• LinkedIn: https://www.linkedin.com/in/brandonfdez18/

Thank you for considering my application. Please let me know if you have any questions or need any additional information.

[mimisavage]

I’d like to resolve this.

[michojekunle]

Hi, could I tackle this issue?

[ShantelPeters]

Let me try this one!

[Benjtalkshow]

I am a Full Stack Developer with a strong background in blockchain and extensive experience in Next.js/React, TypeScript, and Rust. I’ve made over 49 contributions to over 17 projects in the OnlyDust ecosystem, solving complex issues and delivering efficient, scalable solutions.

I can handle this task.
ETA is 3days.

[davedumto]

Hi. I'm David, a new open-source contributor, proficient in TypeScript, JavaScript, Tailwind CSS, and ShadCN. I can help develop the product listing page by:

Implementing a Product Grid/List with filtering, sorting, and search capabilities.
Creating a responsive layout with sticky/collapsible filters and grid/list view toggle.
Designing the Product Card and integrating infinite scroll or pagination.
Fetching data via the provided API endpoints.
ETA 2 days

[Ekene001]

Hello I'm Ekene, a frontend and blockchain developer, and I’m new to the OnlyDust platform. This is my first time contributing to this repository, and I’m excited about the opportunity to collaborate and bring my skills to the table.

How I'll tackle this:

I'll create a reusable product card component to display key details like the image, name, price, and farmer information.
I'll fetch product and category data from the API, ensuring it matches the provided structure.
I'll develop the product listing page by looping through the product array and dynamically rendering the cards.
I'll implement responsive design to ensure the page looks great.
I'll add search functionality so users can filter products by keywords and categories.
I'll also add filtering and sorting options for attributes like price, certifications, and harvest date to enhance usability.
Finally, I'll test everything to make sure it works smoothly on all devices and covers various use cases.

Can i handle this task?

[kayceeDev]

My name is @kayceeDev,

I am a fullstack engineer and frontend oriented.
I will utilize my ReactJS and typescript skill to make sure i study the code and understand it. Then go ahead and create the relevant components to create a comprehensive product listing page that displays farmers' products with relevant filtering, sorting, and search capabilities.

All of these features and components will be made reusable as possible. I will utilize custom hooks to make sure that the search components is scalable.

Please assign me.

ETA is 48hrs

[BigBen-7]

Hey may I solve this??

[josephchimebuka]

I am a fullstack developer and blockchain developer and I am also an active contributor here on only dust here is my profile https://app.onlydust.com/u/josephchimebuka. This is my first time to contribute to this repo ill appreciate the opportunity to contribute. this is a couple of frontend and blockchain projects i have built https://metacrypt.vercel.app/ https://mattedsgn.com/ I can implement the product listing feature in 2 days

[caxtonacollins]

I am a Full Stack Developer with two years of professional experience, specializing in web3. I have strong background in blockchain and extensive experience in Next.js/React, TypeScript, Cairo and Rust.

To tackle this;
i will create the product listing page base on the project structure. implements all the required and useful functionalities such as filtering, search, pagination, etc.
Test to ensure the page functionalities works as expected without interfering with any previous app functionality.

I will like to take care of this.

[Supa-mega]

Is it okay if I tackle this? first time contributor

[Jagadeeshftw]

hi @aguilar1x, I would like to work on this.

[Luluameh]

Can I contribute to this one?

[DioChuks]

May I pick this up? i have worked on something similar for a product listing page that displays products with relevant filtering, sorting, and search capabilities

[kcmikee]

Hi, I'm mike, I’d like to work on this.
I'm a frontend developer who has experience in developing e-commerce websites

ETA: 1 day

[FrankiePower]

Request to Create a Comprehensive Product Listing Page

Hello, team!

I would like to take on the task of creating a comprehensive product listing page that displays farmers' products with relevant filtering, sorting, and search capabilities. This page will be essential for showcasing agricultural products and providing the necessary information for both farmers and customers.

I am Super Franky, a frontend developer and recent graduate from Web3Bridge Africa, Africa's premier and biggest blockchain developer community. Below is the plan of action for developing the product listing page:

Plan of Action:

1. Design and Layout
2. Product Information
3. Search Functionality
4. Filters and Sorting
5. Responsive Design
6. Pagination or Infinite Scroll
7. Integration with Backend

I look forward to contributing to this project and ensuring a smooth experience for both farmers and customers.

Thank you!

Super Franky

[3th-Enjay]

i love this project and would love to be part of this , i have experience with ecommerce and i am an agric economist Could I try solving this?

[Dorcas18]

Can I work on this, please?

[ekumamatthew]

May I take care of this?

[vic-Gray]

I'd be happy to do this.

[aguilar1x]

@ShantelPeters

assigned issue 🚀

[ShantelPeters]

@ShantelPeters

assigned issue 🚀

Thank you sir will get to work immediately

[aguilar1x]

Updates of how are you doing with the issue? @ShantelPeters

[ShantelPeters]

Updates of how are you doing with the issue? @ShantelPeters

It’s going just fine sir .. creating a PR soon sir

[aguilar1x]

Perfect!

[ShantelPeters]

I can’t find env.example file @aguilar1x

[aguilar1x]

Read the issue again and continue with the task to complete!