[Feature Request]: Real-time Fuzzy Search and Query Term Highlighting in Notes and PYQs

[deekshinowdu-collab]

Description

Finding notes or PYQs on the study platform can become challenging as the database grows. We need to implement a real-time, responsive query filter input on both the Notes and PYQ pages. As the student types, matches should filter dynamically, and matching letters/words in the titles or descriptions should be highlighted in yellow.

Files Affected

• client/src/pages/Notes.jsx
• client/src/pages/PYQs.js

Requirements

• Add a search bar header to the note and PYQ listings pages.
• Use a lightweight match utility or simple regex filter to search through title, subject, and uploader fields.
• Implement a highlighting utility that wraps matching segments of text in a <mark class="smp-highlight"> element without breaking HTML tags or content.
• Style the highlight to be visually appealing, supporting both light and dark themes using theme variables.
• Verify that backspace clears search filters gracefully and displays a "No results found" placeholder state when no items match.

Difficulty

Easy / Good First Issue

[santoshikumbhar3-art]

Hi, I would like to work on this issue under GSSOC'26. I can implement the real-time search, highlighting, and no-results state for the Notes and PYQs pages. Please assign this issue to me.