Caso de Estudio
Fandoms.io
Plataforma social completa para comunidades de fans • 32,000+ usuarios activos
Ver Proyecto en VivoResumen y resultados
Fandoms.io es una plataforma social para comunidades de fans, desarrollada desde cero como proyecto individual. Diseñada para soportar alto volumen de contenido, interacciones frecuentes y rendimiento escalable.
Rol y Alcance
Mi Rol
Fui responsable del ciclo de desarrollo completo del proyecto, incluyendo diseño de arquitectura, implementación frontend y backend, autenticación, modelado de datos y despliegue en producción.
Alcance
- Diseño de arquitectura del sistema
- Implementación completa del frontend
- Desarrollo de backend y API
- Modelado de datos y seguridad
- Configuración de infraestructura y despliegue
Arquitectura
La plataforma está construida con Next.js 15 (App Router) y React 19, con una estructura modular que separa UI (src/components), lógica de negocio/estado (src/hooks, src/contexts, src/store) y acceso a datos/servicios (src/lib).
El backend de datos se apoya en Supabase (PostgreSQL + Auth + RPC), usando Row Level Security (RLS) para aplicar permisos a nivel de base de datos y reducir lógica de permisos en la app.
A nivel de rendering, el proyecto usa un enfoque híbrido: páginas públicas/SEO aprovechan Server Components + SSG/ISR (revalidate/metadata), mientras que flujos altamente interactivos (feed, mensajes, moderación) se implementan con Client Components y consumen Supabase desde el navegador cuando aplica.
Para media, se usa Cloudflare R2 con URLs presignadas (generadas por Route Handlers en Node.js) y subida directa desde el cliente a R2; la app guarda las URLs en Postgres y gestiona borrados cuando corresponde.
[Usuario/Navegador]
│ HTTP
▼
[Vercel Edge Network]
│
├─(Middleware Edge, solo rutas match)
│
▼
[Next.js App Router (Node.js runtime)]
├─ Server Components (SSG/ISR/SEO) ────▶ [Supabase Postgres + RLS + RPC]
├─ Route Handlers /api (Node.js) ──────▶ [Supabase Auth/RPC] / [Resend] / [R2]
└─ Client Components (React) ──────────▶ [Supabase Auth/DB/RPC]
└────────────────WS▶ [Supabase Realtime]
└───────────────PUT▶ [Cloudflare R2 (upload directo)]Funcionalidades Principales
Una plataforma unificada con sistema de comunidades, moderación, contenido interactivo, chat en tiempo real y gamificación.
Sistema de comunidades con roles jerárquicos y control de acceso basado en roles
Sistema de contenido basado en comunidades con posts, comentarios y votaciones
Panel de moderación completo con políticas a nivel de base de datos
Sistema de votaciones interactivas con soporte para modo clásico y multi-voto
Sistema de badges y logros con gamificación
Chat en tiempo real por comunidad y mensajería directa vía Supabase Realtime
Decisiones Técnicas
Next.js 15 + React 19
Elegido para aprovechar App Router, Server Components y las últimas optimizaciones de React 19, manteniendo la aplicación escalable y con mejor DX.
Supabase (PostgreSQL + RLS)
Seleccionado para reducir overhead de backend, aprovechando PostgreSQL con Row Level Security para aplicar permisos a nivel de base de datos.
Rendering Híbrido
Server Components + SSG/ISR para páginas públicas/SEO, Client Components para flujos interactivos (feed, mensajes, moderación).
SEO desde el Diseño
Las consideraciones de SEO se incorporaron temprano, usando revalidate y metadata para páginas dinámicas indexables.
Stack Tecnológico
Frontend
Backend
Infrastructure
Tools & Libraries
Desafíos Técnicos
Autenticación Robusta en PWA
La autenticación OAuth y el manejo de sesiones presentaban edge cases complejos en entornos PWA.
Sistema híbrido de persistencia de sesión con fallbacks, detección de conflictos multi-sesión y timeouts adaptativos.
Real-time Escalable
Mantener conexiones Realtime eficientes sin degradar el rendimiento.
Patrón de canales broadcast reutilizables con reference counting y cleanup automático.
Feed Performante
Cargar feeds con datos complejos sin queries N+1.
Paginación eficiente con scroll infinito, queries optimizadas con JOINs selectivos y cache con TanStack Query.
Sistema de Permisos Granular
Diferentes permisos según el contexto (admin, moderador, autor).
Row Level Security con políticas compuestas en PostgreSQL y verificación dual cliente-servidor.
Métricas de Código
Trade-offs y Mejoras Futuras
Aunque la arquitectura actual soporta los objetivos del proyecto, hay mejoras identificadas para el futuro:
Background jobs para tareas de procesamiento intensivo
Capas adicionales de caching para endpoints de alto tráfico
Mayor optimización de queries de base de datos conforme crezca el uso
Internacionalización completa para expandir a otros mercados
Aprendizajes Clave
Lecciones técnicas y de producto aprendidas durante el desarrollo de la plataforma.
La arquitectura inicial importa: refactorizar tablas con datos es complejo
RLS es poderoso pero requiere planificación cuidadosa
El caching agresivo mejora UX pero complica la invalidación
Los edge cases de autenticación en PWA requieren testing exhaustivo
Métricas en tiempo real ayudan a tomar decisiones de producto