Skip to main content

Supabase Realtime Setup

This application uses Supabase Realtime to sync data changes across all connected clients in real-time. When any user makes a change (e.g., admin updates course status), all other users see the update instantly without refreshing.

How It Works​

  1. Database Changes → Any INSERT, UPDATE, or DELETE on tracked tables
  2. Supabase Realtime → Broadcasts changes to all connected clients via WebSocket
  3. React Query Cache → Automatically invalidated, triggering a fresh data fetch
  4. UI Update → All users see the latest data instantly

Enabled Tables​

Currently, realtime sync is enabled for:

  • ✅ nova_tracks - Course/track updates (status, title, description, etc.)

Supabase Configuration Required​

1. Enable Realtime on Tables​

In your Supabase Dashboard, you need to enable Realtime for the nova_tracks table:

  1. Go to Database → Replication
  2. Find the nova_tracks table
  3. Toggle Enable Realtime to ON
  4. Save changes

Alternatively, run this SQL in the SQL Editor:

-- Enable realtime for nova_tracks
ALTER PUBLICATION supabase_realtime ADD TABLE nova_tracks;

2. Verify Realtime is Working​

Open your browser console and look for these messages:

🔄 Setting up realtime sync for tracks...
✅ Realtime sync active for tracks

When you update a course in the admin panel, you should see:

🔔 Tracks updated in database: UPDATE {eventType: 'UPDATE', ...}

3. Security Considerations​

⚠️ Important: Realtime broadcasts respect Row Level Security (RLS) policies. Make sure your RLS policies allow users to SELECT the data they should see.

For public courses (visible to everyone):

-- Allow everyone to read tracks
CREATE POLICY "Tracks are viewable by everyone"
ON nova_tracks FOR SELECT
USING (true);

Implementation Details​

Main Hook: useTracksRealtimeSync​

Location: src/hooks/useTracksRealtimeSync.js

This hook is called once in App.jsx and runs globally for all users. It:

  • Creates a WebSocket channel to Supabase
  • Listens for changes to nova_tracks table
  • Invalidates React Query cache when changes occur
  • Cleans up connection on unmount

Manual Cache Invalidation​

In admin pages, we also manually invalidate cache after updates:

import { useQueryClient } from '@tanstack/react-query';

const queryClient = useQueryClient();

// After updating course
queryClient.invalidateQueries({ queryKey: ['tracks'] });

This provides instant feedback for the admin making changes, while realtime ensures all other clients also update.

Adding More Tables​

To enable realtime for other tables (e.g., course_enrollments, lesson_progress):

  1. Enable Realtime in Supabase Dashboard
  2. Create a similar hook (e.g., useEnrollmentsRealtimeSync)
  3. Add it to App.jsx

Example:

export const useEnrollmentsRealtimeSync = () => {
  const queryClient = useQueryClient();

  useEffect(() => {
    const channel = supabase
      .channel('enrollments_changes')
      .on('postgres_changes', {
        event: '*',
        schema: 'public',
        table: 'course_enrollments'
      }, () => {
        queryClient.invalidateQueries({ queryKey: ['enrollments'] });
      })
      .subscribe();

    return () => supabase.removeChannel(channel);
  }, [queryClient]);
};

Performance Notes​

  • Connection overhead: Each realtime channel uses a WebSocket connection
  • Bandwidth: Only changes are sent, not full data
  • Scaling: Supabase Realtime scales automatically with your plan
  • Free tier: Up to 200 concurrent connections
  • Production: Consider paid plan for higher limits

Troubleshooting​

Realtime not working?​

  1. Check Supabase Dashboard → Project Settings → API → Realtime is enabled
  2. Verify table replication is enabled (Database → Replication)
  3. Check browser console for error messages
  4. Verify RLS policies allow SELECT access
  5. Check Supabase project status (no outages)

Changes not appearing?​

  1. Open browser DevTools → Console
  2. Look for 🔔 Tracks updated in database messages
  3. Check Network tab for WebSocket connection
  4. Verify you're on the same Supabase project

Multiple tabs behavior​

Realtime works across:

  • ✅ Multiple browser tabs (same user)
  • ✅ Different browsers (different users)
  • ✅ Different devices (mobile, desktop)
  • ✅ Admin and regular users simultaneously

Benefits​

✅ Instant updates - No manual refresh needed ✅ Multi-user collaboration - Multiple admins can work together ✅ Better UX - Users always see fresh data ✅ Production ready - Built on Supabase's enterprise infrastructure ✅ Simple implementation - One hook in App.jsx

Cost Considerations​

Supabase Realtime is included in all plans:

  • Free: 200 concurrent connections, 2GB bandwidth
  • Pro: 500 concurrent connections, 50GB bandwidth
  • Enterprise: Custom limits

For most applications, the free tier is sufficient.