CASO DE ESTUDIO · FULL STACK
Panel de redes sociales
Un panel de analítica en tiempo real que unifica las métricas de Instagram, TikTok, LinkedIn y X en una vista en vivo con informes para compartir.
- ROL
- Desarrollador full-stack
- DURACIÓN
- 9 semanas
- EQUIPO
- En solitario
- PLATAFORMA
- App web
IDENTIDAD DE PRODUCTO
signal
Una señal clara.
01 · RESUMEN
Resumen del proyecto
TIEMPO DE DESARROLLO
9 semanas
Del prototipo al primer cliente de agencia
TAMAÑO DEL EQUIPO
En solitario
Frontend, backend, integraciones
LOGRO CLAVE
Datos en < 1 s
Métricas en vivo por WebSockets
EL PROBLEMA
Los equipos de redes exportaban CSV de cuatro plataformas cada lunes y los juntaban en hojas de cálculo, así que los informes tenían una semana antes de que nadie los leyera.
EL ENFOQUE
Signal conecta cada plataforma una sola vez, normaliza sus métricas en un único esquema y envía los cambios a cada panel abierto por WebSockets, para que las cifras estén siempre al día.
6 h
ahorradas por equipo cada semana
< 1 s
del evento en la plataforma al panel
4
plataformas unificadas en un esquema
02 · FUNCIONALIDADES
Qué hace
Analítica unificada
Seguidores, alcance e interacción de todas las plataformas en una vista.
Métricas en tiempo real
Las cifras se actualizan en vivo por WebSockets, sin recargar.
Informes programados
Resúmenes semanales en PDF y por email enviados automáticamente.
Rendimiento de posts
Ordena los posts por alcance, guardados y tasa de interacción.
Roles de equipo
Administradores, editores y clientes ven lo que necesitan.
Exportar a CSV y PDF
Un clic para compartir un informe fuera de la app.
03 · PROCESO
Cómo se hizo
SEMANA 1
Descubrir
Asistí a tres reuniones semanales de reporting para ver qué leían realmente los equipos.
- Inventario de métricas
- Lista de informes deseados
SEMANA 2–3
Diseñar
Diseño del panel, sistema de gráficos y plantillas de informe.
- Prototipo en Figma
- Librería de gráficos
SEMANA 4–8
Construir
Conectores de plataformas, esquema de métricas, servidor de sockets y panel en React.
- App web
- 4 conectores
SEMANA 9
Lanzar
Incorporé a la primera agencia y sus 12 cuentas de clientes.
- Primer cliente
- Página de estado
04 · STACK TÉCNICO
Tecnologías
FRONTEND
- React
- Recharts
- Tailwind CSS
BACKEND
- Node.js
- Express
- Socket.io
DATOS
- PostgreSQL
- Redis
- BullMQ
INTEGRACIONES
- Meta Graph API
- TikTok API
- LinkedIn API
ARQUITECTURA
Panel Signal
React + Recharts
Node + Socket.io
Métricas, salas, auth
APIs de plataformas
IG, TikTok, LinkedIn
PostgreSQL
Métricas normalizadas
Redis + BullMQ
Tareas de sync, pub/sub
05 · APRENDIZAJES
Retos y aprendizajes
Límites de las APIs
RETO
Consultar cada cuenta agotaba los límites de las APIs en menos de una hora.
RESULTADO
Webhooks donde los había y tareas escalonadas en BullMQ mantuvieron todo por debajo de los límites.
Métricas que no significan lo mismo
RETO
Alcance e impresiones significan cosas distintas en cada plataforma.
RESULTADO
Un esquema normalizado con definiciones por plataforma mostradas en tooltips.
¿Te interesa este proyecto?
Te enseño encantado el código, las decisiones que hay detrás o cómo podría funcionar algo parecido para tu equipo.