Update the "Open Source Information" page - Frontend | @Hacktoberfest 2024

[NayakPenguin]

Description

Problem:

The current "Open Source Information" page does not allow users to easily filter content based on tags. In sections like the "Beginner Swags" part, we have tags like cash, clothing, hacktoberfest, etc., but there is no mechanism for users to filter the information using these tags. Introducing this functionality will greatly enhance user experience, allowing them to quickly navigate through relevant content.

Solution:

1. Collect Tags:

   • Review the entire page and gather all possible tags (e.g., cash, clothing, hacktoberfest, etc.).

2. Create Filterable UI:

   • Design a filter interface where all collected tags are displayed as clickable filters.
   • When a user clicks on a tag, the page should dynamically update to show only the content that matches the selected tag(s).

3. UI/UX Requirements:

   • Display the tag filters at the top of the page.
   • Allow users to select multiple tags simultaneously.
   • Provide a "Clear Filters" option to reset the view.
   • Make the filtering process smooth and intuitive without requiring a page reload.

Additional Notes:

• This feature will be particularly useful for Hacktoberfest participants, enabling them to quickly find beginner-friendly projects and opportunities.
• Ensure responsiveness across different device sizes (mobile, tablet, desktop).

---

Open to Contributors:
This issue is open for anyone participating in Hacktoberfest 2024! Please feel free to comment if you'd like to take on this issue or need further clarification.

Happy hacking! 💻🎉

[lakshay-saini-au8]

@NayakPenguin
Please assign

[mukulpythondev]

@NayakPenguin i would like to contribute and work on this issue.

[OoONANCY]

@NayakPenguin please assign this to me

[NayakPenguin]

Hello everyone, thank you for your interest in this issue. If you haven't already, please share a brief proposal outlining your approach to resolving it. We will be assigning this issue within the next 18 hours!

[rahul-moondra]

So, I followed the solution proposed in the issue and have a screenshot for the same (not completed the issue completely yet). But its working fine in case of "Beginner-Swags". Once issue gets assigned will work on other categories too.
(When the set of tags don't match)
(When filter applies successfully)