Add notification system with SSE Events

README.md

@@ -1,4 +1,5 @@
 # Nomey Web App
+
 This is the official repository for the Nomey web app, built on the T3 Stack with custom extensions.
 
 ## Tech Stack
@@ -12,7 +13,7 @@ This is the official repository for the Nomey web app, built on the T3 Stack wit
 - [tolgee](https://tolgee.io/) - Translation Management
 - [Meilisearch](https://www.meilisearch.com/) - Full-text search
 - [Upstash](https://upstash.com/) Next compatible redis
-- [Qstash](https://upstash.com/docs/qstash) Next compatible queue handling 
+- [Qstash](https://upstash.com/docs/qstash) Next compatible queue handling
 - [Vitest](https://vitest.dev/) - Testing Framework
 
 ## Testing
@@ -42,6 +43,7 @@ npm run test
 ## Local Development
 
 ### Clone and Install
+
 ```bash
 git clone git@github.com:nomeyy/nomey-next.git
 cd nomey-next
@@ -62,7 +64,7 @@ npm run dev
 
 ## Learn More
 
- - [Nomey Documentation (WIP)](https://nomey.mintlify.app/)
- - [Next Documentation](https://nextjs.org/docs)
- - [T3 Stack Documentation](https://create.t3.gg/en/usage/first-steps)
- - [Mux Documentation](https://www.mux.com/docs)
+- [Nomey Documentation (WIP)](https://nomey.mintlify.app/)
+- [Next Documentation](https://nextjs.org/docs)
+- [T3 Stack Documentation](https://create.t3.gg/en/usage/first-steps)
+- [Mux Documentation](https://www.mux.com/docs)

package.json

@@ -35,6 +35,8 @@
     "@mux/mux-player-react": "^3.4.0",
     "@mux/mux-uploader-react": "^1.2.0",
     "@prisma/client": "^6.10.0",
+    "@radix-ui/react-checkbox": "^1.3.2",
+    "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-slot": "^1.2.3",
     "@react-email/components": "^0.0.42",
     "@t3-oss/env-nextjs": "^0.12.0",
@@ -60,6 +62,7 @@
     "server-only": "^0.0.1",
     "superjson": "^2.2.1",
     "tailwind-merge": "^3.3.1",
+    "uuid": "^11.1.0",
     "zod": "^3.24.2"
   },
   "devDependencies": {

src/app/(protected)/sse/notifications/error.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import ErrorBoundary from "@/shared/components/ErrorBoundary";
+
+const Error = ({ error }: { error: Error & { digest?: string } }) =>
+  ErrorBoundary({ error });
+
+export default Error;

src/app/(protected)/sse/notifications/page.tsx

@@ -0,0 +1,17 @@
+import { paths } from "@/config/routes";
+import { getSession } from "@/features/auth";
+import { Notifications } from "@/features/notifications";
+import { redirect, RedirectType } from "next/navigation";
+import React from "react";
+
+const SSENotificationsPage = async () => {
+  const session = await getSession();
+
+  if (!session?.user) {
+    redirect(paths.landingPage, RedirectType.replace);
+  }
+
+  return <Notifications user={session.user} />;
+};
+
+export default SSENotificationsPage;

src/app/api/sse/route.ts

@@ -0,0 +1,31 @@
+import { getSession } from "@/features/auth";
+import { SSEManager } from "@/lib/sse";
+
+export async function GET() {
+  const session = await getSession();
+  const user = session?.user;
+
+  if (!user) {
+    return new Response("Unauthorized client", {
+      status: 401,
+      headers: { "Content-Type": "text/plain" },
+    });
+  }
+
+  const stream = new ReadableStream({
+    start(controller) {
+      SSEManager.getInstance().addClient(controller, user);
+    },
+    cancel() {
+      SSEManager.getInstance().removeClient(user.id);
+    },
+  });
+
+  return new Response(stream, {
+    headers: {
+      "Content-Type": "text/event-stream",
+      "Cache-Control": "no-cache",
+      Connection: "keep-alive",
+    },
+  });
+}