Feature: Onboarding #497
Description
Fluxo completo (5 telas + celebração)
Tela 0 — Welcome
- Grid de posters populares como background com gradiente escuro
- Título: "Track, discover and never miss a title"
- Subtítulo + botão "Get started"
- Sem coleta de dados
Tela 1 — Nome
- Input de texto com autofocus
- "Tell us your name so we can make Plotwist feel like yours"
- Salva o nome localmente
- Botão desabilitado até preencher
Tela 2 — Tipo de conteúdo (multi-select)
- Grid 2x2 de cards visuais com backdrop do TMDB
- Opções: Movies, TV Series, Anime, K-Drama
- Mínimo 1 seleção para avançar
- Card selecionado ganha checkmark + borda
Tela 3 — Gêneros (personalizado)
- Chips de gêneros em flow layout
- Lista de gêneros muda dinamicamente com base na Tela 2 (ex: se selecionou Anime, mostra gêneros relevantes como Animation, Action & Adventure, etc.)
- Mínimo 1 gênero
- Chip selecionado inverte cor + leve scale up
Tela 4 — Swipe de títulos (estilo Tinder)
- Deck de cards com posters, personalizado pelos gêneros + tipos de conteúdo
- 4 direções: direita (quero assistir), esquerda (pular), cima (já assisti), baixo (assistindo)
- Botões de ação abaixo do card como alternativa ao swipe
- Mínimo 5 títulos salvos para desbloquear o botão "Let's go!"
- Carrega mais cards automaticamente quando restam < 5
Tela 4b — Celebração
- Checkmark animado + "You're all set!"
- Botão "Go to Home" → marca onboarding como completo → modo guest
Pós-onboarding (na Home)
- Login prompt (2s depois) — Apple Sign-In / email+password / pular
- Notification prompt — permitir notificações / pular
- Se fizer login → sincroniza todos os dados locais pro servidor
Decisões-chave para replicar no web
| Princípio | Detalhe |
|---|---|
| Guest-first | Usuário faz tudo sem criar conta. Login vem depois. |
| Sem paywall | Freemium, sem barreira de pagamento no onboarding |
| Dados locais | Tudo salvo em localStorage até o login, depois sync pro backend |
| Personalização cascata | Cada passo influencia o próximo (tipos → gêneros → títulos) |
| Mínimos por tela | 1 tipo, 1 gênero, 5 títulos |
| Progress bar | Aparece a partir da Tela 1 (4 passos visíveis) |
| Analytics | Evento em cada etapa: start, content_type, genres, title_added, complete |