Feature: Filter and Sort Support for Members Page
- Dominant language
- Python
- Stars
- 451
- Forks
- 702
- Avg merge
- 22h 59m
- Merged PRs (30d)
- 91
Description
Community & Support: [LinkedIn Group](https://www.linkedin.com/groups/14656108/) · [Slack #project-nest](https://owasp.slack.com/archives/project-nest)
Active project leaders: Arkadii Yakovets -- [GitHub](https://github.com/arkid15r/) · [LinkedIn](https://www.linkedin.com/in/arkid15r/) · [Slack](https://owasp.slack.com/team/U060W3NKLTF); Kate Golovanova -- [GitHub](https://github.com/kasya/) · [LinkedIn](https://www.linkedin.com/in/kate-golovanova/) · [Slack](https://owasp.slack.com/team/U07PWB1JZ6Z)
[Contributing](https://github.com/owasp/nest/blob/main/CONTRIBUTING.md) · [Code of Conduct](https://github.com/owasp/nest/blob/main/CODE_OF_CONDUCT.md) · [GSoC Mentors](https://github.com/owasp/nest/blob/main/MENTORS.md)
---
**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:
| Filter | Type | Source / Notes |
| :--- | :--- | :--- |
| **Role** | Multi-select | `Leader`, `Member`, `Candidate` — sourced from `EntityMember.Role` |
| **OWASP Board Member** | Toggle | `is_owasp_board_member` field on `MemberProfile` |
| **GSoC Mentor** | Toggle | `is_gsoc_mentor` field on `MemberProfile` |
| **OWASP Staff** | Toggle | `is_owasp_staff` field on `User` model |
| **Location / Country** | Autocomplete | Reuse `CountryFilter` pattern from `frontend/src/components/CountryFilter.tsx` |
### 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?**
- [x] Yes
- [ ] No
**Additional context**
The Chapters page (`frontend/src/app/chapters/page.tsx`) serves as the reference implementation for this feature.
Contributor guide
Assessment
This issue has not been assessed yet.