ua-academy-projects · isaistvo · Jun 22, 2026 · Jun 22, 2026 · Jun 23, 2026 · Jun 23, 2026
diff --git a/frontend/README.md b/frontend/README.md
@@ -20,7 +20,7 @@ go run ./cmd/notifications-service
 Run the SPA:
 
 ```bash
-cd business-frontend
+cd frontend
 npm install
 npm run dev
 ```

diff --git a/frontend/index.html b/frontend/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>business-frontend</title>
+    <title>Share Bite</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/frontend/package.json b/frontend/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "business-frontend",
+  "name": "share-bite-frontend",
   "private": true,
   "version": "0.0.0",
   "type": "module",

diff --git a/frontend/src/api/client.ts b/frontend/src/api/client.ts
@@ -330,17 +330,22 @@ export const apiClient = {
     }));
   },
 
-  createPost: async (data: CreatePostInput) => {
+  createPost: async (data: CreatePostInput, token?: string) => {
+    const config = token ? { headers: { Authorization: `Bearer ${token}` } } : undefined;
     const createFormData = new FormData();
     createFormData.append("venueId", data.venueId.toString());
     createFormData.append("text", data.text);
     createFormData.append("rating", data.rating.toString());
     if (data.images?.length) {
       data.images.forEach((img) => createFormData.append("images", img));
     }
+    if (data.invitedCustomerIds?.length) {
+      data.invitedCustomerIds.forEach((id) => createFormData.append("invitedCustomerIds", id));
+    }
     const createRes = await guestApi.post<{ post: RawPost }>(
       "/posts/",
-      createFormData
+      createFormData,
+      config
     );
     const newPostId = createRes.data.post.id;
     const patchFormData = new FormData();
@@ -351,7 +356,8 @@ export const apiClient = {
       try {
         const patchRes = await guestApi.patch<{ post: RawPost }>(
           `/posts/${newPostId}`,
-          patchFormData
+          patchFormData,
+          config
         );
         return mapRawPostToPost(patchRes.data.post);
       } catch {
@@ -404,8 +410,9 @@ export const apiClient = {
     await guestApi.delete(`/posts/${postId}`);
   },
 
-  likePost: async (postId: string) => {
-    await guestApi.post(`/posts/${postId}/like`);
+  likePost: async (postId: string, token?: string) => {
+    const config = token ? { headers: { Authorization: `Bearer ${token}` } } : undefined;
+    await guestApi.post(`/posts/${postId}/like`, {}, config);
   },
 
   unlikePost: async (postId: string) => {
@@ -432,20 +439,25 @@ export const apiClient = {
     return mapCustomer(res.data.customer);
   },
 
-  createCustomer: async (data: {
-    email: string;
-    userName: string;
-    firstName: string;
-    lastName: string;
-    bio?: string;
-  }) => {
-    const res = await guestApi.post<{ customerId: string }>("customers/", data);
+  createCustomer: async (
+    data: {
+      email: string;
+      userName: string;
+      firstName: string;
+      lastName: string;
+      bio?: string;
+    },
+    token?: string
+  ) => {
+    const config = token ? { headers: { Authorization: `Bearer ${token}` } } : undefined;
+    const res = await guestApi.post<{ customerId: string }>("customers/", data, config);
     markGuestHasCustomer();
     return res.data;
   },
 
-  getCurrentCustomer: async () => {
-    const res = await guestApi.get<{ customer: RawCustomerResponse }>("customers/");
+  getCurrentCustomer: async (token?: string) => {
+    const config = token ? { headers: { Authorization: `Bearer ${token}` } } : undefined;
+    const res = await guestApi.get<{ customer: RawCustomerResponse }>("customers/", config);
     markGuestHasCustomer();
     return mapCustomer(res.data.customer);
   },
@@ -503,10 +515,12 @@ export const apiClient = {
     return res.data;
   },
 
-  createComment: async (postId: string | number, text: string) => {
+  createComment: async (postId: string | number, text: string, token?: string) => {
+    const config = token ? { headers: { Authorization: `Bearer ${token}` } } : undefined;
     const res = await guestApi.post<{ comment: CommentResponse }>(
       `/posts/${postId}/comments/`,
-      { text }
+      { text },
+      config
     );
     return res.data.comment;
   },
@@ -656,4 +670,53 @@ export const apiClient = {
   ) => {
     await guestApi.post(`/collections/${collectionId}/invitations`, { email });
   },
+
+  followUser: async (customerId: string | number, token: string) => {
+    await guestApi.post(`/customers/id/${customerId}/follow`, {}, {
+      headers: { Authorization: `Bearer ${token}` },
+    });
+  },
+
+  unfollowUser: async (customerId: string | number, token: string) => {
+    await guestApi.delete(`/customers/id/${customerId}/follow`, {
+      headers: { Authorization: `Bearer ${token}` },
+    });
+  },
+
+  getPostInvitations: async (token: string) => {
+    const res = await guestApi.get<{ invitations: any[] }>("/posts/invitations", {
+      headers: { Authorization: `Bearer ${token}` },
+    });
+    return res.data;
+  },
+
+  acceptPostInvitation: async (id: number | string, token: string) => {
+    await guestApi.post(`/posts/invitations/${id}/accept`, {}, {
+      headers: { Authorization: `Bearer ${token}` },
+    });
+  },
+
+  labRegister: async (data: RegisterRequest) => {
+    const res = await authApi.post<AuthResponse>("/register", data);
+    return res.data;
+  },
+
+  labLogin: async (data: LoginRequest) => {
+    const res = await authApi.post<AuthResponse>("/login", data);
+    return res.data;
+  },
+
+  getNotificationHistory: async (limit: number, offset: number, token: string) => {
+    const res = await apiRoot.get(`/notifications/history`, {
+      params: { limit, offset },
+      headers: { Authorization: `Bearer ${token}` },
+    });
+    return res.data;
+  },
+
+  markNotificationsRead: async (notificationIDs: string[], token: string) => {
+    await apiRoot.post(`/notifications/mark-read`, { notificationIDs }, {
+      headers: { Authorization: `Bearer ${token}` },
+    });
+  },
 };
diff --git a/frontend/src/api/notifications.ts b/frontend/src/api/notifications.ts
@@ -68,6 +68,35 @@ export async function markNotificationsRead(
   }
 }
 
+export async function fetchNotificationPreferences(
+  token: string
+): Promise<Record<string, boolean>> {
+  const response = await fetch(`${API_BASE_URL}/preferences`, {
+    headers: authHeaders(token),
+  });
+
+  if (!response.ok) {
+    throw new Error(`Failed to load notification preferences: ${response.status}`);
+  }
+
+  return response.json();
+}
+
+export async function updateNotificationPreferences(
+  token: string,
+  preferences: Record<string, boolean>
+): Promise<void> {
+  const response = await fetch(`${API_BASE_URL}/preferences`, {
+    method: "PUT",
+    headers: authHeaders(token),
+    body: JSON.stringify(preferences),
+  });
+
+  if (!response.ok) {
+    throw new Error(`Failed to update notification preferences: ${response.status}`);
+  }
+}
+
 export function buildNotificationsStreamUrl(token: string) {
   return `${API_BASE_URL}/stream?access_token=${encodeURIComponent(token)}`;
 }
diff --git a/frontend/src/components/Notifications/NotificationBell.tsx b/frontend/src/components/Notifications/NotificationBell.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useRef } from "react";
 import { Link } from "react-router-dom";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Bell, CheckCheck } from "lucide-react";
@@ -12,6 +13,7 @@ import {
 } from "@/components/ui/popover";
 import { pageLinkAccent } from "@/components/layout/pageStyles";
 import { cn } from "@/lib/utils";
+import { playNotificationSound } from "@/utils/audio";
 
 type NotificationBellProps = {
   variant?: "default" | "compact";
@@ -30,6 +32,39 @@ export function NotificationBell({ variant = "default" }: NotificationBellProps)
     enabled: !!token,
   });
 
+  const prevNewestIdRef = useRef<string | null>(null);
+  const isInitialMountRef = useRef(true);
+
+  useEffect(() => {
+    if (!token || notifications.length === 0) {
+      prevNewestIdRef.current = null;
+      isInitialMountRef.current = true;
+      return;
+    }
+
+    const newestNotification = notifications[0];
+    const newestId = newestNotification.id;
+
+    if (isInitialMountRef.current) {
+      prevNewestIdRef.current = newestId;
+      isInitialMountRef.current = false;
+      return;
+    }
+
+    if (newestId !== prevNewestIdRef.current) {
+      prevNewestIdRef.current = newestId;
+
+      if (!newestNotification.read) {
+        const soundEnabled = localStorage.getItem("notification_sound_enabled") !== "false";
+        if (soundEnabled) {
+          const volStr = localStorage.getItem("notification_sound_volume");
+          const volume = volStr ? parseFloat(volStr) / 100 : 0.5;
+          playNotificationSound(volume);
+        }
+      }
+    }
+  }, [notifications, token]);
+
   const markRead = useMutation({
     mutationFn: (ids: string[]) => markNotificationsRead(token!, ids),
     onSuccess: () => queryClient.invalidateQueries({ queryKey: ["notifications"] }),

diff --git a/frontend/src/hooks/useRealtimeNotifications.tsx b/frontend/src/hooks/useRealtimeNotifications.tsx
@@ -0,0 +1,85 @@
+import { useEffect, useRef, useState } from 'react';
+
+export interface LabNotification {
+    id: string;
+    type: string;
+    entityID: string;
+    metadata?: any;
+    isRead: boolean;
+    createdAt: string;
+    readAt?: string;
+}
+
+export type ConnectionStatus = 'disconnected' | 'connecting' | 'connected';
+
+export function useRealtimeNotifications(token: string | null) {
+    const [notifications, setNotifications] = useState<LabNotification[]>([]);
+    const [status, setStatus] = useState<ConnectionStatus>('disconnected');
+    const eventSourceRef = useRef<EventSource | null>(null);
+    const reconnectTimeoutRef = useRef<number | null>(null);
+
+    useEffect(() => {
+        if (!token) {
+            setStatus('disconnected');
+            setNotifications([]);
+            return;
+        }
+
+        const connect = () => {
+            if (eventSourceRef.current) {
+                eventSourceRef.current.close();
+            }
+
+            setStatus('connecting');
+            const url = `/api/notifications/stream?access_token=${encodeURIComponent(token)}`;
+            const es = new EventSource(url);
+
+            es.onopen = () => {
+                console.log("[SSE] Connection established");
+                setStatus('connected');
+            };
+
+            es.onmessage = (event) => {
+                try {
+                    const data = JSON.parse(event.data) as LabNotification;
+                    setNotifications((prev) => [data, ...prev].slice(0, 100));
+                } catch (err) {
+                    console.error("[SSE] Failed to parse event data", err);
+                }
+            };
+
+            es.onerror = () => {
+                console.error("[SSE] Connection error, retrying in 5s");
+                setStatus('connecting');
+                es.close();
+
+                if (reconnectTimeoutRef.current) {
+                    clearTimeout(reconnectTimeoutRef.current);
+                }
+                reconnectTimeoutRef.current = window.setTimeout(connect, 5000);
+            };
+
+            eventSourceRef.current = es;
+        };
+
+        connect();
+
+        return () => {
+            if (reconnectTimeoutRef.current) {
+                clearTimeout(reconnectTimeoutRef.current);
+            }
+            if (eventSourceRef.current) {
+                eventSourceRef.current.close();
+            }
+        };
+    }, [token]);
+
+    const clearNotifications = () => setNotifications([]);
+
+    return {
+        notifications,
+        setNotifications,
+        status,
+        clearNotifications
+    };
+}