Caso de Estudio

Caso de Estudio

Fandoms.io

Fandoms.io

Visitar Proyecto

Resumen del Proyecto

Fandoms.io es una plataforma social completa para comunidades de fans, similar a Reddit con funcionalidades de Discord, desarrollada desde cero como proyecto individual.

32,000+
Usuarios
4,200+
Posts
41,000+
Comentarios
273,000+
Interacciones
19,000+
Mensajes
448,000+
Votos en Encuestas
21
Comunidades

El Problema

Las comunidades de fans necesitaban una plataforma en español que combinara la estructura de comunidades de Reddit con la interacción en tiempo real de Discord, sin la complejidad de configuración.

La Solución

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

Feed de contenido con posts, comentarios y votaciones

Panel de moderación completo

Sistema de encuestas interactivas

Sistema de badges y logros

Chat en tiempo real por comunidad

Stack Tecnológico

Frontend

Next.js 15React 19TypeScriptTailwind CSSFramer Motion

Backend

PostgreSQLSupabaseAPI RoutesWebSockets

Infrastructure

VercelCloudflare R2Supabase Cloud

Tools & Libraries

TanStack QueryZustandRadix UIResend
[Usuario] ──▶ [Vercel Edge] ──▶ [Next.js App]
                                      │
                    ┌─────────────────┼─────────────────┐
                    │                 │                 │
              [API Routes]    [Server Components]   [Client]
                    │                 │                 │
                    └────────┬────────┘                 │
                             │                          │
                       [Supabase]                       │
                      /    │    \                       │
            [PostgreSQL] [Auth] [Realtime] ◀───────────┘
                             │
                      [Cloudflare R2]

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 WebSocket eficientes sin degradar el rendimiento.

Patrón de canales reutilizables con reference counting y actualización de JWT en tiempo real.

Feed Performante

Cargar feeds con datos complejos sin queries N+1.

Paginación por cursor, 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

150+
Componentes React
36
Custom Hooks
20+
API Endpoints
9
Servicios de Negocio
50+
Tablas PostgreSQL
100+
Políticas RLS
~35,000
Líneas de TypeScript

Aprendizajes Clave

1

La arquitectura inicial importa: refactorizar tablas con datos es complejo

2

RLS es poderoso pero requiere planificación cuidadosa

3

El caching agresivo mejora UX pero complica la invalidación

4

Los edge cases de autenticación en PWA requieren testing exhaustivo

5

Métricas en tiempo real ayudan a tomar decisiones de producto

¿Interesado en trabajar juntos?

Contacto