Realtime Collaboration

Problem this solves

Collaboration features feel broken when state updates are delayed or users lose presence context.

When to use it

• Multiple users edit or review a project in parallel.
• You need typing indicators, cursors, or active-session visibility.
• You need low-latency updates without page reloads.

Code snippet

// app/api/projects/[projectId]/presence/route.ts
import { NextResponse } from 'next/server';

export async function POST(
  req: Request,
  { params }: { params: Promise<{ projectId: string }> }
) {
  const { projectId } = await params;
  const payload = await req.json();

  await presenceStore.set(projectId, payload.userId, {
    status: payload.status,
    updatedAt: Date.now(),
  });

  await realtime.broadcast(`project:${projectId}:presence`, payload);
  return NextResponse.json({ ok: true });
}

Integration guide

1. Track presence in a fast store (Redis or in-memory edge cache).
2. Broadcast only small payloads and hydrate details separately.
3. Expire stale sessions with TTL-based cleanup.
4. Use optimistic UI updates and reconcile from server events.