Implement Global Spotlight Search for Bounties with React Query

[0xdevcollins]

Overview

Implement a global search feature that allows users to quickly search across all bounties using a Spotlight-style modal (similar to macOS Spotlight or VS Code's Command Palette). The modal should be accessible from anywhere in the application via a keyboard shortcut or search button.

Acceptance Criteria

Core Functionality

• Create a search modal component that overlays the entire screen with a backdrop blur
• Implement keyboard shortcut to open search (Cmd+K on Mac, Ctrl+K on Windows/Linux)
• Add a global search button in the header/navbar that triggers the modal
• Close modal on Escape key press, backdrop click, or result selection
• Auto-focus the search input when modal opens
  Search Implementation
• Implement debounced search input (300ms delay) to prevent excessive API calls
• Create GraphQL query for full-text search across bounties:
  • Search in issueTitle, description, projectName, tags
• Use React Query (@tanstack/react-query) for:
  • Query caching and deduplication
  • Stale-while-revalidate pattern for instant results
  • Background refetching
  • Request cancellation on new search terms
    Search Results
• Display results in a scrollable list with keyboard navigation (arrow keys)
• Show relevant bounty information in results:
  • Issue title
  • Project name with logo
  • Reward amount and currency
  • Status badge (OPEN, CLAIMED, CLOSED)
  • Difficulty level
• Highlight matching text in search results
• Show empty state when no results found
• Show loading skeleton during search
• Navigate to bounty detail page on result selection (click or Enter)
  Recent & Suggested Searches
• Store recent searches in localStorage (max 5 items)
• Display recent searches when modal opens with empty input
• Clear individual or all recent searches

[linear]

BOU-61

[drips-wave]

This issue has been added to the Stellar Wave Program and is worth 200 Points.

🧑‍💻 Interested in contributing? Apply to work on this issue on Drips Wave, earn points, and receive rewards.

Warning

Only applications submitted via the apply link above will be considered. Please do not apply by commenting on the issue or opening a PR directly.

🤠 Repo maintainers: You can manage this issue's Points and Complexity on your Maintainer Dashboard here. Please keep an eye on applications and respond quickly 💙

ℹ️ Learn more about Drips Wave

[coderabbitai]

📝 CodeRabbit Plan Mode

Generate an implementation plan and prompts that you can use with your favorite coding agent.

• Create Plan

Examples

• Example 1
• Example 2

---

🔗 Related PRs

#30 - feat: Implement React Query hooks for managing bounties [merged]

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!

[Chucks1093]

@Chucks1093 has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hello boundlessfi, I would like to handle this.

I will implement a global Cmd or Ctrl K Spotlight modal with focus trap, auto focus, and close handlers, and connect it to a 300ms debounced GraphQL search using React Query query keys per term plus request abort on term change.

I will render results with arrow key navigation and Enter to route to the bounty detail page, and keep recent searches in localStorage (max 5) for empty input state.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Chucks1093 to this issue.

[Tybravo]

@Tybravo has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Doing extra tasks I love. Hello, I am a full-stack Software Engineer with 7+ years of experience and a Blockchain Developer. And I do like to work on Issue #48 Implement Global Spotlight Search for Bounties with React Query.

I have strong hands-on experience building advanced, user-friendly and visually engaging frontend interfaces using React, TypeScript, and Next.js, with a focus on reusable component architecture, modern UI patterns, responsive design, state management, and performance optimization. I work across both frontend and backend systems, including backend logic, API design, database architecture, and schema modeling.

I have experience building modern, scalable web applications using React, Typescript, Next.js, Node.js, Java, Rust, and related technologies. Some relevant projects (personal and OPEN SOURCE) I have worked on include:

--> https://www.verilens.xyz/
--> https://repeasy.wal.app/
--> https://docwalrus.vercel.app/
--> https://grainlify.0xo.in/

I am comfortable working within an existing codebase or independently , following project conventions, and delivering clean, maintainable, and well-structured solutions. My GitHub repositories can speak for themselves in demonstrating my experience and consistency across different types of projects.

I am confident I can contribute effectively and deliver high-quality results.

Thank you for your time and considering my application.

Regards,
Tybravo.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Tybravo to this issue.

[Obiajulu-gif]

@Obiajulu-gif has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

GM maintainer, I would love to take Issue #48—because search is the “escape hatch” when users feel lost, and right now they’ll bounce instead of finding bounties fast. I’ll ship a Spotlight modal (Cmd/Ctrl+K) with blur backdrop, instant autofocus, and reliable close paths (Esc/backdrop/select). I’ll wire debounced (300ms) full-text GraphQL search over title/description/project/tags using React Query for caching, SWR, dedupe, and cancellation on new terms. Results will support arrow-key navigation, Enter to open, highlighted matches, skeleton loading, and clean empty states. I’ll add recent searches (max 5) with clear/delete controls.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Obiajulu-gif to this issue.

[kaankacar]

@kaankacar has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

I'd like to work on this issue since it's pretty-straight forward which I have no problem completing.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @kaankacar to this issue.

[solomonadzape95]

@solomonadzape95 has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hi boundlessfi team, I'm Solomon, a fullstack developer with experience building on both web2 and web3.
I have reviewed the requirements for this issue and I'm confident in my ability to deliver this high-impact navigation feature. My approach centers on creating a "Command Palette" experience that feels native to the OS, prioritizing speed through optimized data fetching and keyboard-first accessibility.
Why I’m the right fit: I specialize in building complex, performance-oriented React components. I have a deep understanding of TanStack Query for managing asynchronous state and have previously implemented keyboard-driven navigation systems that handle high-frequency user input with zero lag.
My Plan:

• Performance: I'll implement a 300ms debounced search using React Query’s staleTime and gcTime to ensure the UI remains snappy while minimizing GraphQL server load.
• UX & Accessibility: I will use a robust modal primitive (like Radix or Headless UI) to handle focus traps and implement full keyboard navigation (Arrow keys + Enter) for result selection.
• Intelligence: I’ll build a custom hook to manage localStorage for recent searches, ensuring the modal provides value even before the user starts typing.
• Visual Polish: I will implement high-performance loading skeletons and CSS-based matching-text highlighting to ensure the results are easy to scan at a glance.
  I will submit all deliverables within the expected ETA, and i will communicate my progress through my work period. My previous resolved issues show my work ethic.
  Thanks for your consideration

ℹ️ Repo Maintainers: To accept this application, review their application or assign @solomonadzape95 to this issue.

[EA10-lite]

@EA10-lite has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hi, I’d love to work on this issue.

My name is Emmanuel, and I’m a full-stack developer with 4 years of experience building scalable web and mobile applications with strong focus on UX, performance, and clean architecture.

This task aligns well with my experience building global search experiences, keyboard-driven interfaces, and modal-based workflows that feel fast and intuitive. I’ve implemented features involving debounced search, keyboard navigation, cached queries, and polished empty/loading states, so delivering a Spotlight-style global search is very familiar territory for me.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @EA10-lite to this issue.

[jahrulezfrancis]

@jahrulezfrancis has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

I’d love to implement the global Spotlight-style search for bounties.

The goal would be to make it genuinely fast and intuitive to use anywhere in the app - especially for keyboard users.
I’ll focus on a clean, keyboard-first experience with debounced GraphQL search, React Query caching, and clear, accessible result navigation so users can find and jump to bounties effortlessly.

My ETA is 24 hours

ℹ️ Repo Maintainers: To accept this application, review their application or assign @jahrulezfrancis to this issue.

[Georgechisom]

@Georgechisom has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hi, I love to work on this issue and deliver an excellent result, please help assign it to me

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Georgechisom to this issue.