El reto
Sporty Hangover, una comunidad de running con más de 12K seguidores, necesitaba una plataforma digital que les permitiera ofrecer planes de entrenamiento personalizados a runners de todos los niveles. El reto: crear una experiencia web que reflejara la energía y filosofía de la comunidad, con herramientas reales de seguimiento de progreso.
El equipo de Sporty Hangover llevaba tiempo generando contenido y planes en PDFs y hojas de cálculo. La demanda había crecido al punto de que necesitaban un sistema estructurado que pudiera escalar sin multiplicar el trabajo manual para cada nuevo usuario.
Nuestra solución
Desarrollamos una plataforma web completa en React con backend en Node.js que permite a los usuarios acceder a planes de entrenamiento personalizados, hacer seguimiento de su progreso y conectar con la comunidad Sporty Hangover.
Arquitectura y decisiones técnicas
La plataforma se diseñó como una SPA (Single Page Application) con React en el frontend y una API REST en Node.js, priorizando la experiencia de usuario fluida que una comunidad activa demanda:
- React SPA — Transiciones instantáneas entre secciones (dashboard, planes, perfil) sin recargas de página. Los runners consultan sus planes frecuentemente y la velocidad percibida es crítica.
- Node.js + Express API — Rendimiento alto en operaciones I/O (lectura de planes, actualización de métricas) con un solo lenguaje en todo el stack.
- MongoDB — Modelo de datos flexible para planes de entrenamiento que varían mucho en estructura (series, intervalos, tempos, rodajes largos). Un esquema rígido SQL habría complicado la evolución.
Motor de planes personalizados
- Algoritmo de asignación que adapta el plan según nivel (principiante, intermedio, avanzado), objetivo (5K, 10K, media maratón, maratón) y disponibilidad semanal
- Progresión automática — el sistema ajusta volumen e intensidad semana a semana basándose en la respuesta del usuario
- Variedad de sesiones — rodajes, series, fartlek, tempos, cuestas y descanso activo, distribuidos de forma equilibrada
- Flexibilidad — el usuario puede marcar días no disponibles y el plan se reorganiza sin perder coherencia
Tracking de progreso
- Dashboard personal con métricas clave: km semanales, ritmo medio, consistencia de entrenamiento
- Gráficas de evolución temporal que muestran la progresión a lo largo de semanas y meses
- Registro de sesiones donde el runner marca cada entrenamiento como completado, parcial o saltado
- Feedback loop — los datos del tracking alimentan los ajustes del plan siguiente
Contenido editorial
- Blog integrado con artículos sobre nutrición, recuperación, equipamiento y mentalidad runner
- Sección de consejos vinculada al plan activo del usuario (ej: “Semana de descarga: por qué es importante”)
- Contenido exclusivo para usuarios registrados vs. contenido público para captación
Perfil y comunidad
- Perfil de usuario con historial de entrenamientos, rachas y logros desbloqueados
- Sistema de logros que gamifica la constancia: “7 días seguidos”, “100km mensuales”, “Primera media maratón”
- Integración con la comunidad existente de Sporty Hangover en redes sociales
Retos técnicos resueltos
- Rendimiento del dashboard — Precálculo de métricas agregadas para que el dashboard cargue instantáneamente, sin recalcular en cada visita
- Planes dinámicos — Motor de reglas que genera planes coherentes sin intervención manual, respetando principios de periodización deportiva
- Offline-first para sesiones — Los entrenamientos se pueden registrar sin conexión y sincronizan automáticamente al recuperar red
Decisiones técnicas clave
| Decisión | Alternativa considerada | Por qué elegimos esta opción |
|---|---|---|
| React SPA | Next.js SSR | No necesitábamos SEO en la app (contenido privado del usuario). SPA pura da mejor UX para una herramienta que se usa a diario |
| MongoDB | PostgreSQL | Estructura de planes muy variable (distintos tipos de sesión, progresiones, notas). Documentos JSON encajan naturalmente |
| Node.js + Express | NestJS / Fastify | Simplicidad y velocidad de desarrollo para un MVP que debía validar mercado rápidamente |
| JWT + Refresh tokens | Session cookies | Preparado para apps móviles futuras sin cambios en la API |
Resultados
La plataforma digitaliza la propuesta de valor de Sporty Hangover, permitiendo a su comunidad de más de 12K seguidores acceder a planes de entrenamiento personalizados:
- Comúnidad de 12K+ seguidores activada con herramientas digitales propias
- Planes 100% personalizados generados automáticamente según el perfil del runner
- Seguimiento de progreso con métricas visuales que motivan la consistencia
- Reducción de trabajo manual — de gestionar planes individualmente en hojas de cálculo a un sistema automatizado
- Contenido editorial integrado que fideliza a los usuarios más allá del plan de entrenamiento
- Base técnica preparada para evolucionar hacia app móvil nativa
Stack técnico
- React (Frontend SPA)
- Node.js + Express (API REST)
- MongoDB (Base de datos)
- JWT (Autenticación)
- Chart.js (Visualización de progreso)
- Cloud hosting con CDN
Cómo trabajamos
Cada proyecto sigue nuestro proceso artesanal, adaptado a las necesidades específicas del cliente.
Discovery & Requisitos
Inmersión en negocio, usuarios y objetivos. Workshops de ideación, research de mercado y alcance MVP.
Diseño & Arquitectura
Wireframes, prototipos interactivos y arquitectura técnica. Validación con cliente antes de escribir código.
Desarrollo & Testing
Sprints de 2 semanas con demos. CI/CD, code review y testing continuo. Feedback en cada iteración.
Entrega & Evolución
Deploy a producción, monitorización y soporte. Métricas post-lanzamiento y roadmap de mejoras.