Estudo de caso 01 · App de corrida
Racecraft
Um plano de treino até uma prova, que muda quando você perde um treino.
- Papel
- Produto, marca, design e front-end
- Data
- Novembro de 2026
- Stack
- React, TypeScript, TanStack Query, Tailwind CSS, Radix, MSW, Cloudflare Pages
- Links
- Demo ao vivo Código
O problema
São 6h10 de uma terça e a Luísa vai sair para correr. Ela está na semana 7 de 12 da preparação para a primeira meia maratona. Antes de sair ela precisa de uma resposta: qual é o treino de hoje, e em que ritmo. Na semana passada ela perdeu um treino de ritmo (tempo run), e quer saber o que aconteceu com ele sem fazer a conta sozinha.
O Racecraft responde às vagas que pedem um app de consumo pensado primeiro para o celular, em que o dado é o produto. Cada treino aparece desenhado como uma forma, e o plano remaneja um treino perdido por uma regra fixa e diz o que mudou de lugar. Os gráficos respondem ao toque e ao teclado, além do mouse.
Veja funcionando
Três coisas para testar:
- 01
Em Today, passe o dedo sobre a forma do treino, ou dê foco nela e use as setas. Cada barra é um bloco da corrida: a largura é o tempo, a altura é o esforço.
- 02
Em Plan, mova o tempo run desta quinta, o que veio da semana passada, para quarta. O Racecraft avisa que ele cai no dia seguinte aos tiros e deixa mover mesmo assim.
- 03
Em You, Demo, troque para "Watch not syncing" e tente mandar o treino para o relógio.
Como foi feito
Especificação
O produto, a corredora da demo, a regra que remaneja um treino perdido, e um nome conferido na web e no endereço.
Marca
Três direções nas mesmas duas telas, uma mantida.
Protótipo
Três layouts para a primeira tela, um escolhido pela rapidez com que responde "o que eu corro agora".
Construção
A stack de produção com uma API simulada, e o gerador do plano, a regra de ajuste e a conta dos ritmos sob testes unitários.
Verificação
Cada estado renderizado em 1440 e 390 px com checagem de acessibilidade, e a primeira tela comparada pixel a pixel com o protótipo aprovado.
Escala
6
telas, mais uma página de não encontrado e uma página de erro.
27
estados verificados, 53 renderizações em duas larguras.
3
direções de marca e 3 layouts para a primeira tela, em 5 rodadas de decisão.
16
endpoints de API simulados e 5 cenários de demonstração; cada estado também abre por um link.
30
ícones e 5 ilustrações desenhados para o produto.
19
testes unitários e 48 testes ponta a ponta.
1 h 19 min
do ticket à especificação aprovada, e depois 1 h 18 min de construção.
O que deu errado e o que eu mudei
A primeira rodada de testes do gerador do plano falhou num número. A meta é 1:52:00 na meia maratona, e todo ritmo do plano sai do ritmo da meta. O gerador arredondava 5:18,5 por km para 5:19, então os tiros, o tempo run e as corridas leves ficavam todos um segundo mais lentos do que a especificação dizia.
O teste comparava os ritmos com os números escritos na especificação, e por isso pegou o erro. Mudei o arredondamento para descartar o meio segundo, do jeito que um relógio de corrida mostra o ritmo. O ritmo da meta agora aparece como 5:18 em todo lugar, e os outros ritmos saem dele.
Limites e próximos passos
- O relógio, a sincronização e as corridas são simulados no navegador. Não há GPS, nem conta, nem relógio de verdade.
- A demo roda numa manhã fixa, terça, 3 de novembro de 2026, às 6h10, então o plano e os números se leem iguais em toda visita.
- Os planos vão até a meia maratona, e não dá para editar os blocos de um treino.
- O app está só em inglês.