Build Notification Center Component

[mftee]

Description:
Implement a notification center that displays system alerts, verification updates, and document-related events.

Requirements:

• NotificationBell icon with badge counter
• Dropdown notification panel
• Notification categories (info, success, warning, error)
• Mark as read/unread functionality
• Mark all as read option
• Filter by notification type
• Real-time updates (WebSocket or polling)
• Notification preferences settings
• Archive notifications
• In-app and browser notifications

Acceptance Criteria:

• Notifications display in real-time
• Badge count updates correctly
• Filtering works as expected
• Preferences are saved properly
• Browser notifications with permission handling
• Accessible keyboard navigation
• Mobile-optimized dropdown

Tech Stack: Next.js, TypeScript, Tailwind CSS, WebSocket or Server-Sent Events

[drips-wave]

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

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

🤠 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

[vic-Gray]

@vic-Gray 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 because I have experience building real-time notification systems using Next.js, TypeScript, and Tailwind CSS, including dropdown UIs, badge counters, filtering, and read/unread states. I’ve worked with WebSockets and polling for live updates, implemented browser notifications with permission handling, and ensured responsive, accessible components. I focus on clean architecture, good UX, and maintainable code.

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

[Sendi0011]

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

Hello, i will like to work on this, i am a frontend/smartcontract developer with experience skill solving issues like this. i am also an active Open source contributor.
ETA: 4 hours

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Sendi0011 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 like to work on this issue, I’m a full-stack developer with 4 years of experience building Web and mobile applications.

This issue aligns closely with my experience, and I’m confident I can deliver a clean, efficient solution within a short timeframe. I invite you to review my portfolio to see my previous projects and hands-on experience across real-world applications.

Here is my portfolio and projects I have handled:

https://ecohotels.com
https://loveping.vercel.app
https://proposelyai.com
https://www.usememora.xyz
https://360comms.network
https://ea10.vercel.app
https://novacrust-exercise.vercel.app/

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

[Marvelousmicheal]

@Marvelousmicheal 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 because I have experience building real-time notification systems using Next.js,

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Marvelousmicheal 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 the Issue #131 Build Notification Center Component.

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.

[Jeyvers]

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

Jeyi (Senior Frontend Engineer, 6+ years experience)

Hello there,

I’d like to work on the Notification Center component. I’ve implemented real-time notification systems with WebSockets and SSE before, so this is pretty comfortable for me. Looking forward to it!

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

[Jeyvers]

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

Jeyi (Senior Frontend Engineer, 6+ years experience)

Hello there,

I’d like to work on the Notification Center component. I’ve implemented real-time notification systems with WebSockets and SSE before, so this is pretty comfortable for me. Looking forward to it!

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

[Emmzyemms]

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

Interested in this frontend issue. Experienced with Web3 UIs and wallet integrations. Ready to start.

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

[edehvictor]

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

Hi Team,

I am a fullstack engineer with experience building real-time feedback systems. I can implement the Notification Center, ensuring it provides timely updates while remaining unobtrusive and accessible.

Implementation Plan:

Real-Time Architecture: I will implement a custom hook using Server-Sent Events (SSE) or WebSockets to push updates instantly to the client, updating the badge count without page refreshes.

State Management: I will use a lightweight global store (like Zustand) to manage the unread count, read status, and filtering logic across the app.

UI Components:

Notification Bell: A distinct icon with an animated badge counter.

Dropdown Panel: Built with Headless UI to ensure full keyboard navigation and screen reader accessibility (ARIA live regions).

Preferences: A settings modal allowing users to toggle specific categories (e.g., mute "Info" but keep "Error").

Browser Integration: I will handle the Notification.requestPermission() flow gracefully to enable system-level alerts for critical updates.

ETA: 8–12 hours.

I am ready to start immediately.

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