real-time-featureslisted
Install: claude install-skill Whaleylaw/llm-lawyer
# Real-Time Features
## When to Use
- Implementing live data updates
- Building collaborative features (live cursors, presence)
- Setting up WebSocket connections
- Using Supabase Realtime subscriptions
- Synchronizing data across clients in real-time
## Process
### 1. Setup Supabase Realtime (Recommended)
☐ Enable Realtime in Supabase dashboard
☐ Configure table-level replication
☐ Set Row Level Security (RLS) policies
☐ Install Supabase client (if not already)
```tsx
// lib/supabase.ts - Already configured from auth setup
import { createClient } from '@supabase/supabase-js';
export const supabase = createClient(
import.meta.env.VITE_SUPABASE_URL,
import.meta.env.VITE_SUPABASE_ANON_KEY
);
```
### 2. Subscribe to Database Changes
☐ Create subscription to table
☐ Handle INSERT, UPDATE, DELETE events
☐ Update local state on changes
☐ Cleanup subscription on unmount
```tsx
// hooks/useRealtimeMessages.ts
import { useEffect, useState } from 'react';
import { supabase } from '../lib/supabase';
interface Message {
id: string;
content: string;
created_at: string;
user_id: string;
}
export function useRealtimeMessages(channelId: string) {
const [messages, setMessages] = useState<Message[]>([]);
useEffect(() => {
// Fetch initial messages
const fetchMessages = async () => {
const { data } = await supabase
.from('messages')
.select('*')
.eq('channel_id', channelId)
.order('created_at', { ascending: true });