Saltar al contenido principal

🚀 Activación de Supabase Realtime - Pasos Finales

✅ Paso 1: Variables de Entorno - COMPLETADO​

Las variables de entorno ya están configuradas en .env:

NEXT_PUBLIC_SUPABASE_URL=https://suumwzejgazinestdcgr.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

✅ Verificado: Las variables están correctamente configuradas.

🔧 Paso 2: Habilitar Realtime en Supabase Dashboard​

IMPORTANTE: Debes habilitar Realtime para las tablas que quieres monitorear.

Opción A: Desde el Dashboard (Recomendado)​

  1. Ve a tu proyecto en Supabase Dashboard
  2. Ve a Database → Replication
  3. Habilita Realtime para las siguientes tablas:
    • ✅ Hackathon (para cambios de estado y nuevos hackathons)
    • ✅ Submission (para nuevas submissions)
    • ✅ Score (para actualizaciones de evaluación)
    • ✅ ChallengeEvaluation (para evaluaciones de challenges)
    • ✅ Notification (para notificaciones instantáneas)
    • ✅ Team (para cambios en equipos)

Opción B: Desde SQL Editor​

Ejecuta este SQL en el SQL Editor de Supabase:

-- Habilitar Realtime para tablas específicas
ALTER PUBLICATION supabase_realtime ADD TABLE "Hackathon";
ALTER PUBLICATION supabase_realtime ADD TABLE "Submission";
ALTER PUBLICATION supabase_realtime ADD TABLE "Score";
ALTER PUBLICATION supabase_realtime ADD TABLE "ChallengeEvaluation";
ALTER PUBLICATION supabase_realtime ADD TABLE "Notification";
ALTER PUBLICATION supabase_realtime ADD TABLE "Team";

🔒 Paso 3: Configurar Row Level Security (RLS)​

⚠️ CRÍTICO: Sin RLS, cualquier usuario podría ver TODOS los cambios de la base de datos.

Habilitar RLS en las Tablas​

Ejecuta este SQL en el SQL Editor:

-- Habilitar RLS
ALTER TABLE "Hackathon" ENABLE ROW LEVEL SECURITY;
ALTER TABLE "Submission" ENABLE ROW LEVEL SECURITY;
ALTER TABLE "Score" ENABLE ROW LEVEL SECURITY;
ALTER TABLE "ChallengeEvaluation" ENABLE ROW LEVEL SECURITY;
ALTER TABLE "Notification" ENABLE ROW LEVEL SECURITY;
ALTER TABLE "Team" ENABLE ROW LEVEL SECURITY;

Políticas de Seguridad Básicas​

Nota: Estas son políticas básicas. Ajusta según tus necesidades específicas.

1. Hackathon (Lectura Pública para hackathons publicados)​

-- Cualquiera puede ver hackathons publicados
CREATE POLICY "Hackathons are viewable by everyone"
ON "Hackathon"
FOR SELECT
USING (status != 'DRAFT');

2. Notification (Solo el usuario propietario)​

-- Usuarios solo pueden ver sus propias notificaciones
CREATE POLICY "Users can view own notifications"
ON "Notification"
FOR SELECT
USING (
  EXISTS (
    SELECT 1 FROM "Profile" p
    WHERE p.id = "Notification"."profileId"
    AND p."userId" = auth.uid()::text
  )
);

⚠️ IMPORTANTE: Para las otras tablas (Submission, Score, ChallengeEvaluation, Team), necesitarás crear políticas más específicas según tu lógica de negocio. Ver docs/SUPABASE-REALTIME-CONFIGURACION.md para ejemplos completos.

✅ Paso 4: Verificar que Funciona​

Test Rápido​

  1. Reinicia el servidor de desarrollo:

    # Detén el servidor (Ctrl+C) y reinicia
    pnpm dev

  2. Abre la consola del navegador (F12)

  3. Deberías ver mensajes como:

    [Realtime] Suscrito a Hackathon (realtime-Hackathon-xxxxx)

  4. Si ves warnings como:

    ⚠️ Supabase Realtime no configurado...
    • Verifica que las variables de entorno estén correctas
    • Reinicia el servidor después de agregar las variables

Test Manual​

  1. Abre la lista de hackathons en el navegador
  2. En otra pestaña, crea o actualiza un hackathon (desde el dashboard)
  3. La lista debería actualizarse instantáneamente sin recargar

Test con SQL​

  1. Abre el SQL Editor en Supabase
  2. Ejecuta: 
    UPDATE "Hackathon" 
    SET "status" = 'REGISTRATION' 
    WHERE "slug" = 'tu-hackathon-slug';
  3. La página debería actualizarse automáticamente

🐛 Troubleshooting​

Error: "Supabase Realtime no configurado"​

Causa: Variables de entorno no cargadas

Solución:

  1. Verifica que .env existe y tiene las variables
  2. Reinicia el servidor de desarrollo (pnpm dev)
  3. Verifica que las variables tienen NEXT_PUBLIC_ prefix

Error: "No se puede suscribir al canal"​

Causa: Realtime no habilitado o RLS bloqueando

Solución:

  1. Verifica que Realtime está habilitado en la tabla (Database → Replication)
  2. Verifica que las políticas RLS permiten el acceso
  3. Revisa los logs en Supabase Dashboard → Logs → Realtime

No se actualiza automáticamente​

Causa: Realtime no habilitado o problema de conexión

Solución:

  1. Verifica la conexión WebSocket en DevTools → Network → WS
  2. Verifica que Realtime está habilitado en Supabase
  3. Revisa la consola del navegador para errores

📋 Checklist de Activación​

  • Variables de entorno configuradas
  • Realtime habilitado en Supabase Dashboard
  • RLS habilitado en las tablas
  • Políticas de seguridad configuradas
  • Test de funcionamiento realizado

🎯 Próximos Pasos​

Una vez que Realtime esté habilitado:

  1. ✅ Las listas de hackathons se actualizarán instantáneamente
  2. ✅ El leaderboard se actualizará cuando un juez evalúa
  3. ✅ Las notificaciones llegarán instantáneamente
  4. ✅ Los cambios de estado se reflejarán en tiempo real

¡Listo para activar! Solo falta habilitar Realtime en el Dashboard de Supabase. 🚀