Saltar al contenido principal

🏗️ Infraestructura

Diagrama de Infraestructura Completo​

Stack Tecnológico por Capa​

Frontend​

Next.js 16 con App Router:

  • Server Components: Renderizado en servidor, fetching de datos
  • Client Components: Interactividad, hooks de React
  • Server Actions: Mutaciones de datos sin API routes
  • File-based Routing: Routing automático basado en estructura de archivos

React 19:

  • Hooks personalizados para Realtime
  • Context API para estado global
  • Optimistic updates

Tailwind CSS 4:

  • Utility-first CSS
  • Dark mode support
  • Responsive design

Backend​

Next.js Server:

  • API Routes para endpoints especiales (cron, webhooks)
  • Server Actions para mutaciones
  • Middleware para autenticación y routing

Prisma ORM:

  • Type-safe database client
  • Migrations automáticas
  • Query optimization

Base de Datos​

Supabase PostgreSQL:

  • Base de datos relacional
  • Row Level Security (RLS)
  • Realtime subscriptions
  • Connection pooling

Autenticación​

Clerk:

  • Authentication as a Service
  • User management
  • Session management
  • Social logins (Google, GitHub)

Monitoreo​

Sentry:

  • Error tracking
  • Performance monitoring
  • Release tracking

Flujo de Request Completo​

Deployment​

Vercel​

Configuración:

  • Automatic deployments desde Git
  • Preview deployments para PRs
  • Production deployments desde main
  • Environment variables management

Cron Jobs:

  • Configurado en vercel.json
  • Ejecuta cada minuto: /api/cron/update-hackathon-states
  • Protegido con CRON_SECRET

Variables de Entorno​

Producción:

# Clerk
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_live_...
CLERK_SECRET_KEY=sk_live_...

# Database
DATABASE_URL=postgresql://...
DIRECT_URL=postgresql://...

# Supabase Realtime
NEXT_PUBLIC_SUPABASE_URL=https://...
NEXT_PUBLIC_SUPABASE_ANON_KEY=...

# Sentry
SENTRY_DSN=https://...

# Cron
CRON_SECRET=...

Seguridad​

Autenticación​

  • Clerk: Maneja toda la autenticación
  • Middleware: Verifica sesión en cada request
  • Server Actions: Verifican usuario antes de ejecutar

Autorización​

  • RBAC: Verificación de roles en cada acción
  • Row Level Security: Políticas en Supabase
  • Validations: Zod schemas en cada input

Base de Datos​

  • Connection Pooling: Supabase maneja conexiones
  • SSL: Todas las conexiones son SSL
  • Backups: Automáticos en Supabase

Escalabilidad​

Horizontal Scaling​

  • Vercel: Auto-scaling basado en tráfico
  • Supabase: Auto-scaling de PostgreSQL
  • Clerk: Auto-scaling de auth service

Optimizaciones​

  • Server Components: Menor carga en cliente
  • Realtime: WebSockets más eficientes que polling
  • Caching: Next.js cache automático
  • CDN: Vercel CDN para assets estáticos

Monitoreo y Logging​

Sentry​

  • Error Tracking: Captura todos los errores
  • Performance: Monitorea performance de requests
  • Releases: Trackea deployments

Logs​

  • Vercel Logs: Logs de requests y errores
  • Supabase Logs: Logs de queries y Realtime
  • Clerk Logs: Logs de autenticación

Backup y Recovery​

Base de Datos​

  • Supabase Backups: Automáticos diarios
  • Point-in-time Recovery: Disponible en Supabase Pro

Código​

  • Git: Version control completo
  • Vercel: Deployments históricos

Próximos Pasos​

Siguiente: System Architecture