Real-time Activity Feed and In-App Notifications

[Benjtalkshow]

Feature: Real-Time Notifications with GraphQL Subscriptions

Overview

To improve user engagement and responsiveness, we should implement a real-time notification system using GraphQL Subscriptions (graphql-ws). This will allow users to receive instant updates when:

• Their application is reviewed
• A new bounty is posted

---

Goals

• Enable real-time updates via GraphQL Subscriptions
• Notify users of important events (applications, new bounties)
• Provide a centralized notification UI
• Improve overall user experience and engagement

---

Implementation Details

1. Define GraphQL Subscriptions

Modify: lib/graphql/subscriptions.ts

• Add subscription definitions:
  • ON_BOUNTY_UPDATED (e.g., application reviewed, bounty status changes)
  • ON_NEW_APPLICATION (or new bounty events depending on backend naming)
• Ensure compatibility with graphql-ws client setup

---

2. Create Notification Hook

Create: hooks/use-notifications.ts

• Manage subscription lifecycle:
  • Subscribe on mount
  • Handle incoming events
  • Cleanup on unmount
• Normalize incoming data into a consistent notification format
• Optionally integrate with local state or query cache

---

3. Build Notification UI

Create: components/notifications/notification-center.tsx

• Implement a popover/dropdown component
• Display a list of notifications:
  • Message
  • Timestamp
  • Status (read/unread)
• Handle empty states and loading states
• Allow marking notifications as read (optional enhancement)

---

4. Update Global Navbar

Modify: components/global-navbar.tsx

• Add a notification bell icon
• Show unread notification count (badge)
• Toggle the notification center popover on click

---

Files Affected

Modified

• lib/graphql/subscriptions.ts
• components/global-navbar.tsx

Created

• hooks/use-notifications.ts
• components/notifications/notification-center.tsx

---

Acceptance Criteria

• Users receive real-time notifications for relevant events
• Subscriptions are correctly initialized and cleaned up
• Notification bell displays unread count
• Notification center displays incoming notifications
• No memory leaks or duplicate subscriptions

---

Testing Notes

• Simulate subscription events and verify UI updates
• Test multiple notifications arriving in sequence
• Ensure cleanup works when components unmount
• Validate behavior across page navigation

---

Additional Notes

• Consider debouncing or batching notifications if events are frequent
• Ensure proper authentication for subscription connections
• Plan for persistence (e.g., storing notifications) if needed in future
• Keep notification structure extensible for additional event types

[linear]

BOU-145

[coderabbitai]

🔗 Related PRs

#41 - feat: add websocket client module [merged]
#90 - feat:implement sponsor review dashboard. [merged]
#117 - feat: add frontend hooks for submission mutations [merged]
#118 - feat: replace Socket.IO real-time sync with GraphQL subscriptions [merged]
#119 - feat: implement submission draft system [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!

[willkhinz]

I've got a surgical fix for this. Just running some quick local tests and will post the PR soon.

[willkhinz]

I have opened a Pull Request with the fix here: #138

Thanks!

[Oluwatos94]

I have opened a Pull Request with the fix here: #138

Thanks!

Opened PR for something you were not assigned to?

[0xDeon]

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

Hey, 0xDeon here.

I’ll take a clean, lifecycle-focused approach to this. The useNotifications hook will manage subscriptions in a predictable way — initialize on mount, normalize incoming events, and properly clean up to avoid duplicate listeners or memory leaks.

On the UI side, I’ll keep the notification center lightweight but responsive, with clear unread states and smooth updates as events stream in. The navbar integration will include a reliable unread count that stays in sync with incoming data.

I’ll also structure the notification format in a way that makes it easy to extend later as more event types are added.

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

[drips-wave]

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

🧑‍💻 @0xDeon: 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 🌊