Modularize BountiesPage Component

[Benjtalkshow]

Refactor: Break Down Bounty Page into Atomic Components

Overview

The main bounty listing page (app/bounty/page.tsx) has grown into a "God Component" (over 400 lines), making it difficult to read, maintain, and extend.

To improve code organization and scalability, we should refactor this page into smaller, reusable atomic components.

---

Goals

• Improve readability and maintainability
• Promote component reusability
• Simplify future feature additions
• Reduce complexity in the main page component

---

Implementation Details

1. Refactor Main Page

Modify: app/bounty/page.tsx

• Break down large JSX blocks into smaller components
• Replace inline logic/UI with extracted components
• Keep the page focused on:
  • Data fetching
  • State management
  • Composition of child components

---

2. Create Atomic Components

components/bounty/filters-sidebar.tsx

• Extract:
  • Filter accordion UI
  • Search input
• Handle filter state and callbacks via props

---

components/bounty/bounty-grid.tsx

• Extract:
  • Grid layout
  • Mapping over bounty items
  • Rendering individual bounty cards
• Accept bounty data as props

---

components/bounty/search-header.tsx

• Extract:
  • "Results found" count
  • Sort dropdown
• Accept count and sorting state as props

---

Files Affected

Modified

• app/bounty/page.tsx

Created

• components/bounty/filters-sidebar.tsx
• components/bounty/bounty-grid.tsx
• components/bounty/search-header.tsx

---

Acceptance Criteria

• app/bounty/page.tsx is significantly reduced in size and complexity
• UI is split into well-structured, reusable components
• Each new component has a single responsibility
• Props are clearly defined and typed
• No change in existing functionality or UI behavior

---

Testing Notes

• Verify UI renders correctly after refactor
• Ensure filters, sorting, and search still function as expected
• Confirm data flows correctly between parent and child components
• Check for any regressions in responsiveness or layout

---

Additional Notes

• Keep components as presentational as possible
• Avoid prop drilling by grouping related props logically
• Consider co-locating types/interfaces with components
• Use consistent naming conventions for clarity

[linear]

BOU-142

[coderabbitai]

🔗 Related PRs

#17 - feat: Built BountyCard component with shadcn composition [merged]
#34 - feat: Implement API-driven bounty fetching and display with dedicated loading, empty, and error UI components. [merged]
#38 - Feat/project details page [merged]
#88 - feat: Implement bounties detail page [merged]
#93 - Fix lint [merged]

---

📝 Issue Planner

_{Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.}

• Create Plan

---

🧪 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!

[KaruG1999]

@KaruG1999 has applied to work on this issue as part of the Stellar Wave Program's 3rd wave.

Hello! I'm Karen, a Full Stack Developer. Throughout the development cycles, I’ve specialized in frontend architecture and refactoring to improve maintainability and developer velocity. I noticed that #127 aims to break down the BountiesPage "God Component," which is a great step toward a more scalable codebase
I could investigate the current app/bounty/page.tsx to systematically extract the Filter Sidebar, Bounty Grid, and Search Header into atomic, reusable components. I will prioritize clear TypeScript definitions for all props to ensure a type-safe data flow and prevent regressions. My goal is to leverage my experience in React best practices to turn this monolith into a clean, modular structure that is significantly easier to test and extend :)

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

[legend4tech]

@legend4tech has applied to work on this issue as part of the Stellar Wave Program's 3rd wave.

Hello, I’m Legend4Tech, a full-stack developer and top open-source contributor, previously a fellow at OnlyDust. I’m interested in contributing to this issue and would be happy to help implement a solution, fix bugs, or improve features as needed. I’m ready to follow the project’s workflow and coding standards to ensure smooth collaboration.

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

[drips-wave]

Congratulations, @KaruG1999! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on March 30, 2026.

🧑‍💻 @KaruG1999: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊