[FE-28] Implement real-time notifications via Socket.io WebSocket connection

[yusuftomilola]

Overview

Notifications should arrive instantly without page refresh. This issue connects the frontend to the WebSocket notifications gateway (BE-55) using socket.io-client and pushes received events into the notification bell (FE-27) and as toast alerts.

Context

• socket.io-client@4.8.3 is already installed in frontend/package.json
• The existing frontend/hooks/useWebSocket.ts file provides a base — extend it for notifications
• Backend WebSocket namespace: /notifications (from BE-55)
• Authentication: pass { auth: { token: accessToken } } in the socket connection options

Acceptance Criteria

• Create frontend/hooks/useNotificationSocket.ts — connects to NEXT_PUBLIC_API_URL on the /notifications namespace, passing the JWT from auth store as auth.token
• On notification event: add the notification to the React Query useNotifications cache and increment the unread count badge
• Show a toast (React Toastify) for each incoming notification: icon matches notification type, title from notification, dismiss after 5 seconds
• Auto-reconnect on disconnect with exponential backoff
• Disconnect the socket cleanly on logout (in the auth store logout() action)
• Call useNotificationSocket() from the dashboard layout (frontend/app/(dashboard)/layout.tsx) so it runs for all authenticated pages

[chisomvictorcv-sketch]

@chisomvictorcv-sketch has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Good day I am a full stack developer with over 6 years of experience and I have good practical knowledge on this kindly assign this to me.

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

[mftee]

@mftee has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

I have reviewed this issue and its acceptance criteria carefully. The requirements are clear and well-scoped (large complexity). I have hands-on experience with React and can implement this following the patterns and conventions already in the codebase. I will deliver complete, tested code that satisfies every acceptance criterion without requiring follow-up corrections. I can start immediately and am happy to discuss approach details with the maintainer beforehand.

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

[drips-wave]

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

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

[drips-wave]

This issue has been completed by @mftee as part of the Stellar Wave Program's 6th Wave 🥳

😎 @mftee: You earned 200 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.