O desafio
Sporty Hangover, uma comunidade de running com mais de 12K seguidores, precisava de uma plataforma digital que lhes permitisse oferecer planos de treino personalizados a runners de todos os níveis. O desafio: criar uma experiência web que refletisse a energia e filosofia da comunidade, com ferramentas reais de acompanhamento de progresso.
A equipa da Sporty Hangover já gerava conteúdo e planos em PDFs e folhas de cálculo. A procura tinha crescido ao ponto de precisarem de um sistema estruturado que pudesse escalar sem multiplicar o trabalho manual para cada novo utilizador.
A nossa solução
Desenvolvemos uma plataforma web completa em React com backend em Node.js que permite aos utilizadores aceder a planos de treino personalizados, acompanhar o seu progresso e conectar com a comunidade Sporty Hangover.
Arquitetura e decisões técnicas
A plataforma foi desenhada como uma SPA (Single Page Application) com React no frontend e uma API REST em Node.js, priorizando a experiência de utilizador fluida que uma comunidade ativa exige:
- React SPA — Transições instantâneas entre seções (dashboard, planos, perfil) sem recargas de página. Os runners consultam os seus planos frequentemente e a velocidade percebida é crítica.
- Node.js + Express API — Alto desempenho em operações I/O (leitura de planos, atualização de métricas) com uma única linguagem em todo o stack.
- MongoDB — Modelo de dados flexível para planos de treino que variam muito em estrutura (series, intervalos, tempos, rodagens longas). Um esquema rígido SQL teria complicado a evolução.
Motor de planos personalizados
- Algoritmo de atribuição que adapta o plano segundo o nível (principiante, intermédio, avançado), objetivo (5K, 10K, meia maratona, maratona) e disponibilidade semanal
- Progressão automática — o sistema ajusta volume e intensidade semana a semana com base na resposta do utilizador
- Variedade de sessões — rodagens, series, fartlek, tempos, subidas e descanso ativo, distribuídos de forma equilibrada
- Flexibilidade — o utilizador pode marcar dias não disponíveis e o plano reorganiza-se sem perder coerência
Acompanhamento de progresso
- Dashboard pessoal com métricas chave: km semanais, ritmo médio, consistência de treino
- Gráficos de evolução temporal que mostram a progressão ao longo de semanas e meses
- Registo de sessões onde o runner marca cada treino como concluído, parcial ou saltado
- Feedback loop — os dados do tracking alimentam os ajustes do plano seguinte
Conteúdo editorial
- Blog integrado com artigos sobre nutrição, recuperação, equipamento e mentalidade runner
- Seção de dicas vinculada ao plano ativo do utilizador (ex: “Semana de descarga: porque é importante”)
- Conteúdo exclusivo para utilizadores registados vs. conteúdo público para captação
Perfil e comunidade
- Perfil de utilizador com histórico de treinos, sequências e conquistas desbloqueadas
- Sistema de conquistas que gamifica a constância: “7 dias seguidos”, “100km mensais”, “Primeira meia maratona”
- Integração com a comunidade existente nas redes sociais
Desafios técnicos resolvidos
- Desempenho do dashboard — Pré-cálculo de métricas agregadas para que o dashboard carregue instantaneamente, sem recalcular em cada visita
- Planos dinâmicos — Motor de regras que gera planos coerentes sem intervenção manual, respeitando princípios de periodização desportiva
- Offline-first para sessões — Os treinos podem ser registados sem conexão e sincronizam automaticamente ao recuperar rede
Decisões técnicas chave
| Decisão | Alternativa considerada | Porque escolhemos esta opção |
|---|---|---|
| React SPA | Next.js SSR | Não precisávamos de SEO na app (conteúdo privado do utilizador). SPA pura oferece melhor UX para uma ferramenta usada diariamente |
| MongoDB | PostgreSQL | Estrutura de planos muito variável (diferentes tipos de sessão, progressões, notas). Documentos JSON encaixam naturalmente |
| Node.js + Express | NestJS / Fastify | Simplicidade e velocidade de desenvolvimento para um MVP que precisava de validar o mercado rapidamente |
| JWT + Refresh tokens | Session cookies | Preparado para apps móveis futuras sem alterações na API |
Resultados
A plataforma digitaliza a proposta de valor da Sporty Hangover, permitindo à sua comunidade de 12K+ seguidores aceder a planos de treino personalizados:
- Comunidade de 12K+ seguidores ativada com ferramentas digitais próprias
- Planos 100% personalizados gerados automaticamente segundo o perfil do runner
- Acompanhamento de progresso com métricas visuais que motivam a consistência
- Redução de trabalho manual — de gerir planos individualmente em folhas de cálculo a um sistema automatizado
- Conteúdo editorial integrado que fideliza os utilizadores para além do plano de treino
- Base técnica preparada para evoluir para app móvel nativa
Stack técnico
- React (Frontend SPA)
- Node.js + Express (API REST)
- MongoDB (Base de dados)
- JWT (Autenticação)
- Chart.js (Visualização de progresso)
- Cloud hosting com CDN
Como trabalhamos
Cada projeto segue o nosso processo artesanal, adaptado as necessidades especificas de cada cliente.
Discovery & Requisitos
Imersao no negócio, utilizadores e objetivos. Workshops de ideação, pesquisa de mercado e definição do escopo MVP.
Design & Arquitetura
Wireframes, protótipos interativos e arquitetura técnica. Validação com cliente antes de escrever código.
Desenvolvimento & Testing
Sprints de 2 semanas com demos. CI/CD, code review e testing contínuo. Feedback em cada iteração.
Entrega & Evolução
Deploy em produção, monitorização e suporte. Métricas pos-lançamento e roadmap de melhorias contínuas.