🔔

Notification System

Real-time notificaties via Socket.IO, Web Push / Service Worker (PWA), badge counts en RBAC-gestuurde notificatietypen.

Fastify 5 PostgreSQL 16 + Drizzle ORM React 19 + TanStack Query v5 Socket.IO Web Push API

📬 Notification Types

Alle notificatietypen, RBAC-gestuurd. Elke type heeft een eigen Socket.IO event en push payload.

💸
Tip Received
Creator only. Bedrag + sender. Badge +1.
👤
New Follower
Alle rollen. Follower-avatar + naam.
💬
New Message
Alle rollen. Sender + preview (max 60 chars).
🎥
Stream Started
Volgers van creator. Push + in-app.
🏆
Achievement Unlocked
Alle rollen. Badge naam + XP reward.
🔓
Content Unlocked
Creator only. Content ID + koper.
⚙️
System Alert
Maintenance, policy update, account action.
🛡️
Moderation Alert
Admin only. Content report, DMCA, ban trigger.

🔐 RBAC – Notificaties per Rol

Notificatietype Member Creator Admin
💸 Tip Received–✓✓
👤 New Follower✓✓✓
💬 New Message✓✓✓
🎥 Stream Started✓✓✓
🏆 Achievement Unlocked✓✓✓
🔓 Content Unlocked–✓✓
⚙️ System Alert✓✓✓
🛡️ Moderation Alert––✓

⚡ Real-time Delivery — Socket.IO

Events

socket.emit →
notification:new

Server emits to user room. Payload: { id, type, actor, message, createdAt }

socket.on →
notification:read

Client emits na lezen. Server markeert als read, update badge count.

Server-side (Fastify 5)

// Fastify plugin: notification emitter
fastify.post('/notifications/emit', async (req) => {
  const { userId, type, payload } = req.body;
  io.to(`user:${userId}`).emit('notification:new', {
    id: crypto.randomUUID(),
    type,
    ...payload,
    createdAt: new Date(),
  });
  await db.insert(notifications).values({
    userId, type, data: payload,
  });
});

📲 Push Notifications — Web Push API / PWA

Service Worker registratie

// main.tsx – SW registratie (VitePWA)
if ('serviceWorker' in navigator) {
  const reg = await navigator.serviceWorker
    .register('/sw.js');
  const sub = await reg.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: VAPID_PUBLIC_KEY,
  });
  await fetch('/api/push/subscribe', {
    method: 'POST',
    body: JSON.stringify(sub),
  });
}

Push vanuit Fastify

import webpush from 'web-push';
webpush.setVapidDetails(
  'mailto:support@teezu.app',
  VAPID_PUBLIC,
  VAPID_PRIVATE
);

// Stuur push naar subscriber
await webpush.sendNotification(subscription, JSON.stringify({
  title: '💸 Tip ontvangen!',
  body: 'LovelyLena stuurde 50 tokens',
  icon: '/icons/icon-192.png',
  data: { url: '/wallet' },
}));
📌 Service Worker flow: PWA registreert SW → vraagt push permission → stuurt VAPID subscription naar POST /api/push/subscribe → server slaat op in push_subscriptions tabel (PostgreSQL) → bij event: Fastify haalt subscription op, roept webpush.sendNotification() aan.

🔴 Badge Count — Bottom Nav & Sidebar

UI: Badge in navigatie

🏠
Home
🔍
Discover
🔔 3
Notifs
💬 7
Chat
👤
Profile

Badge verdwijnt na markeren als gelezen via PATCH /notifications/:id/read of via Socket.IO notification:read event.

TanStack Query v5 hook

// useUnreadCount.ts
export function useUnreadCount() {
  return useQuery({
    queryKey: ['notifications', 'unread'],
    queryFn: () =>
      fetch('/api/notifications?read=false&limit=1')
        .then(r => r.json())
        .then(d => d.totalUnread),
    refetchInterval: 30_000,  // polling fallback
    staleTime: 10_000,
  });
}
// Socket.IO update: queryClient.invalidateQueries(...)
// na ontvangen 'notification:new' event

🛠️ API Endpoints

GET /api/notifications Paginated lijst van notificaties voor ingelogde user
Query params
?page=1&limit=20&read=false&type=tip
Response
{ data:[], total, totalUnread, page, limit }
PATCH /api/notifications/:id/read Markeer één notificatie als gelezen 
// Drizzle ORM
await db.update(notifications)
  .set({ readAt: new Date() })
  .where(and(
    eq(notifications.id, id),
    eq(notifications.userId, req.user.id)
  ));
DELETE /api/notifications/:id Verwijder notificatie (soft delete)
204 No Content op succes. 404 als niet gevonden of niet van deze user.

🗄️ Database Schema — PostgreSQL 16 + Drizzle ORM

// schema/notifications.ts  (Drizzle ORM)
export const notifications = pgTable('notifications', {
  id:         uuid('id').defaultRandom().primaryKey(),
  userId:     uuid('user_id').notNull().references(() => users.id, { onDelete: 'cascade' }),
  type:       varchar('type', { length: 64 }).notNull(),
  // types: tip_received | new_follower | new_message | stream_started
  //        achievement_unlocked | content_unlocked | system_alert | moderation_alert
  data:       jsonb('data').default({}),
  readAt:     timestamp('read_at'),
  deletedAt:  timestamp('deleted_at'),
  createdAt:  timestamp('created_at').defaultNow().notNull(),
});

export const pushSubscriptions = pgTable('push_subscriptions', {
  id:           uuid('id').defaultRandom().primaryKey(),
  userId:       uuid('user_id').notNull().references(() => users.id),
  endpoint:     text('endpoint').notNull(),
  p256dh:       text('p256dh').notNull(),
  auth:         text('auth').notNull(),
  createdAt:    timestamp('created_at').defaultNow(),
});

🎨 Notification Center UI

In-App Toast

L
💸 Tip ontvangen!
LovelyLena stuurde je 50 tokens
nu

Notification Center Feed

💸
Tip ontvangen — 50 tokens
LovelyLena • 2 min geleden
🎥
Stream gestart
SteamyViper is nu live • 15 min geleden
🏆
Achievement: First Fan
Je hebt 10 followers bereikt • gisteren