Feature: Filter and Sort Support for Members Page #4246

Community & Support: LinkedIn Group · Slack #project-nest

Active project leaders: Arkadii Yakovets -- GitHub · LinkedIn · Slack; Kate Golovanova -- GitHub · LinkedIn · Slack

Contributing · Code of Conduct · GSoC Mentors

Is your feature request related to a problem? Please describe.
The Members page (frontend/src/app/members/page.tsx) currently supports only text search—no filtering or sorting. In contrast, the Chapters page already utilizes CountryFilter and SortBy components, making discovery significantly easier. With thousands of OWASP members, finding contributors by role, contribution level, or location is currently difficult for users.

Describe the solution you'd like
Implement filtering and sorting capabilities on the /members page by mirroring the established patterns found on the Chapters page. This involves backend Algolia index updates and frontend UI integration.

Filtering Requirements

The following filters should be added to the Members page:

Sorting Requirements

Add a SortBy dropdown using the following attributes:

• Relevancy (Default)
• Contributions (idx_contributions_count)
• Followers (idx_followers_count)
• Public Repositories (idx_public_repositories_count)
• Date Joined (idx_created_at)
• Last Updated (idx_updated_at)
• Ranking Score (idx_calculated_score)

Acceptance Criteria

1. Filtering Capabilities

Users must be able to filter the member list by the following facets:

• Role: Multi-select (Leader, Member, Candidate).
• Affiliation Toggles: Boolean filters for OWASP Board Member, GSoC Mentor, and OWASP Staff.
• Location: Autocomplete search for Country/Location.
• Company: Autocomplete search for Company names.

2. Sorting Support

A dropdown must allow users to sort results by:

• Relevancy (Default), Contributions, Followers, Public Repos, Date Joined, and Ranking Score.

3. Backend & Search Integration

• Algolia index must be updated with the necessary facet fields (idx_roles, idx_is_owasp_staff, etc.).
• Virtual replicas must be configured to handle real-time sorting without performance degradation.

4. Technical Parity

• Implementation must reuse existing shared components: SortBy, CountryFilter, SearchPageLayout, and the useSearchPage hook.

Notes

• Mobile-First Design: The filter sidebar must be responsive. On smaller screens, filters should be tucked into a collapsible menu or drawer (matching the Chapters page behavior).
• Real-time Feedback: Results should update immediately (debounced) as filters are toggled or sort options are changed.
• Empty States: Ensure a "No members found" message is displayed if a combination of filters returns no results.
• Clean UI: Use consistent spacing, clear labels, and standard OWASP Nest styling for checkboxes and toggles.

Are you going to work on implementing this?

• Yes
• No

Additional context
The Chapters page (frontend/src/app/chapters/page.tsx) serves as the reference implementation for this feature.