⚙️ Configuración de Supabase Realtime

📋 Requisitos Previos

1. ✅ Proyecto Supabase creado
2. ✅ Base de datos PostgreSQL configurada
3. ✅ Prisma conectado a Supabase

---

🔧 Paso 1: Obtener Credenciales de Supabase

1. Ve a tu proyecto en Supabase Dashboard
2. Ve a Settings → API
3. Copia los siguientes valores:
   • Project URL (ej: https://xxxxx.supabase.co)
   • anon public key (ej: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...)

---

🔐 Paso 2: Configurar Variables de Entorno

Agrega estas variables a tu archivo .env.local:

# Supabase Realtime
NEXT_PUBLIC_SUPABASE_URL=https://tu-proyecto.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=tu-anon-key-aqui

⚠️ IMPORTANTE:

• Usa NEXT_PUBLIC_ para que estén disponibles en el cliente
• NO commits estas variables a Git (ya están en .gitignore)

---

🗄️ Paso 3: Habilitar Realtime en Supabase

Opción A: Desde el Dashboard (Recomendado)

1. Ve a Database → Replication
2. 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 4: 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

-- 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

1. Hackathon (Lectura Pública)

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

-- Organizadores pueden ver sus hackathons (incluso DRAFT)
CREATE POLICY "Organizers can view own hackathons"
ON "Hackathon"
FOR SELECT
USING (
  EXISTS (
    SELECT 1 FROM "Profile" p
    WHERE p.id = "Hackathon"."organizerId"
    AND p."userId" = auth.uid()::text
  )
);

2. Submission (Solo miembros del equipo y jueces)

-- Miembros del equipo pueden ver su submission
CREATE POLICY "Team members can view own submission"
ON "Submission"
FOR SELECT
USING (
  EXISTS (
    SELECT 1 FROM "TeamMember" tm
    JOIN "Profile" p ON p.id = tm."profileId"
    WHERE tm."teamId" = "Submission"."teamId"
    AND p."userId" = auth.uid()::text
  )
);

-- Jueces asignados pueden ver submissions
CREATE POLICY "Assigned judges can view submissions"
ON "Submission"
FOR SELECT
USING (
  EXISTS (
    SELECT 1 FROM "HackathonJudge" hj
    JOIN "Profile" p ON p.id = hj."profileId"
    WHERE hj."hackathonId" = "Submission"."hackathonId"
    AND p."userId" = auth.uid()::text
  )
);

3. Score (Solo jueces asignados)

-- Jueces pueden ver sus propios scores
CREATE POLICY "Judges can view own scores"
ON "Score"
FOR SELECT
USING (
  EXISTS (
    SELECT 1 FROM "Profile" p
    WHERE p.id = "Score"."judgeId"
    AND p."userId" = auth.uid()::text
  )
);

4. 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
  )
);

5. ChallengeEvaluation (Jueces y sponsors)

-- Jueces pueden ver sus evaluaciones
CREATE POLICY "Judges can view own evaluations"
ON "ChallengeEvaluation"
FOR SELECT
USING (
  EXISTS (
    SELECT 1 FROM "Profile" p
    WHERE p.id = "ChallengeEvaluation"."judgeId"
    AND p."userId" = auth.uid()::text
  )
);

-- Sponsors pueden ver evaluaciones de sus challenges
CREATE POLICY "Sponsors can view challenge evaluations"
ON "ChallengeEvaluation"
FOR SELECT
USING (
  EXISTS (
    SELECT 1 FROM "Challenge" c
    JOIN "Sponsorship" s ON s.id = c."sponsorshipId"
    JOIN "OrganizationMember" om ON om."organizationId" = s."organizationId"
    JOIN "Profile" p ON p.id = om."profileId"
    WHERE c.id = "ChallengeEvaluation"."challengeId"
    AND p."userId" = auth.uid()::text
  )
);

---

✅ Paso 5: Verificar Configuración

Test Rápido

1. Inicia el servidor de desarrollo:

   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.

---

🧪 Paso 6: Probar Realtime

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 faltantes o incorrectas

Solución:

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

Error: "No se puede suscribir al canal"

Causa: RLS bloqueando el acceso o Realtime no habilitado

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 está habilitado o hay un 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

---

📚 Recursos Adicionales

• Documentación oficial de Supabase Realtime
• Guía de RLS (Row Level Security)
• Realtime Inspector - Para depurar suscripciones

---

🎯 Próximos Pasos

Una vez configurado Realtime:

1. ✅ Reemplazar polling en lista de hackathons
2. ✅ Implementar Realtime para leaderboard
3. ✅ Implementar Realtime para notificaciones
4. ✅ Agregar Realtime a dashboard de juez

¡Listo! Tu aplicación ahora tiene actualizaciones en tiempo real. 🚀