Este documento contém o mapeamento completo das funcionalidades do site web e as tarefas necessárias para criar um aplicativo React Native equivalente.
- Setup Inicial
- Autenticação
- Navegação
- Home/Dashboard
- Catálogo de Filmes
- Catálogo de Séries
- Detalhes de Mídia
- Sistema de Reviews
- Listas Personalizadas
- Perfil do Usuário
- Coleção do Usuário
- Estatísticas
- Sistema Social
- Busca
- Configurações
- Internacionalização
- Funcionalidades Premium
- Importação de Dados
- Criar projeto com Expo ou React Native CLI
- Configurar TypeScript
- Configurar ESLint e Prettier (usar biome como no web)
- Configurar path aliases (@/ para src/)
- Instalar React Navigation (navegação)
- Instalar React Query / TanStack Query (gerenciamento de estado servidor)
- Instalar Axios (requisições HTTP)
- Instalar React Hook Form + Zod (formulários e validação)
- Instalar AsyncStorage (persistência local)
- Instalar react-native-fast-image (imagens otimizadas)
- Instalar react-native-reanimated (animações)
- Instalar Nativewind ou Tamagui (estilização)
- Criar arquivo de configuração de ambiente (.env)
- Configurar variáveis:
API_URL,TMDB_API_KEY - Criar serviço de API base (axios instance)
src/
├── api/ # Serviços de API (mesmo padrão do web)
├── components/ # Componentes reutilizáveis
├── screens/ # Telas do app
├── navigation/ # Configuração de navegação
├── context/ # Contextos React
├── hooks/ # Hooks customizados
├── types/ # Tipos TypeScript
├── utils/ # Utilitários
└── i18n/ # Internacionalização
-
Tela de Login
- Campo de login (email ou username)
- Campo de senha com toggle de visibilidade
- Botão de login
- Link para "Esqueci a senha"
- Link para cadastro
- Validação com Zod
-
Tela de Cadastro
- Campo de username (validação de disponibilidade)
- Campo de email (validação de disponibilidade)
- Campo de senha (mínimo 8 caracteres)
- Validação em tempo real
- Termos de uso
-
Tela de Esqueci a Senha
- Campo de email
- Envio de email de recuperação
-
Tela de Reset de Senha
- Campo de nova senha
- Confirmação de senha
- Validação de token
- Armazenar token JWT no AsyncStorage/SecureStore
- Criar contexto de autenticação (SessionContext)
- Implementar refresh de sessão
- Implementar logout
- Proteção de rotas autenticadas
-
Tab Navigator Principal
- Home
- Filmes
- Séries
- Busca
- Perfil
-
Stack Navigators
- Stack de Autenticação (Login, Cadastro, Reset)
- Stack de Filmes (Lista, Detalhes)
- Stack de Séries (Lista, Detalhes, Temporadas, Episódios)
- Stack de Listas (Minhas Listas, Detalhes da Lista)
- Stack de Perfil (Perfil, Editar, Configurações)
- Configurar deep links para filmes
- Configurar deep links para séries
- Configurar deep links para listas
- Configurar deep links para perfis
-
Header
- Logo
- Botão de busca
- Avatar do usuário (se logado)
-
Seção: Última Review do Usuário
- Card com a última review feita
- Link para o item avaliado
-
Seção: Reviews Populares
- Lista horizontal de reviews em destaque
- Filtros por período (hoje, semana, mês, todos)
- Paginação infinita
-
Seção: Atividades da Rede
- Feed de atividades de usuários seguidos
- Tipos de atividade:
- Mudança de status (watched, watching, etc)
- Nova review criada
- Nova lista criada
- Follow/Unfollow
- Episódios assistidos
- Likes em reviews/listas
-
Sidebar: Filmes Populares
- Grid 3x1 de posters
- Link para ver mais
-
Sidebar: Séries Populares
- Grid 3x1 de posters
- Link para ver mais
-
Filmes Populares
- Lista em grid com posters
- Paginação infinita
- Pull to refresh
-
Em Cartaz (Now Playing)
- Lista de filmes em exibição
-
Em Breve (Upcoming)
- Lista de lançamentos futuros
-
Mais Bem Avaliados (Top Rated)
- Lista ordenada por rating
-
Descobrir Filmes
- Filtros avançados:
- Gêneros (múltipla seleção)
- Ano de lançamento
- Nota mínima
- Ordenação (popularidade, data, nota)
- Provedores de streaming
- Região
- Filtros avançados:
-
PosterCard
- Imagem do poster
- Título
- Ano
- Rating
-
MovieListFilters
- Bottom sheet com filtros
- Chips de gêneros
- Slider de rating
- Date picker para ano
-
Séries Populares
- Lista em grid com posters
- Paginação infinita
-
No Ar Hoje (Airing Today)
- Séries com episódios hoje
-
Em Exibição (On The Air)
- Séries em exibição atual
-
Mais Bem Avaliadas (Top Rated)
- Lista ordenada por rating
-
Descobrir Séries
- Mesmos filtros dos filmes
- Filtro adicional: status (em andamento, finalizada)
-
Animes
- Filtro pré-aplicado para animação japonesa
-
Doramas
- Filtro pré-aplicado para séries coreanas
-
Banner/Backdrop
- Imagem de fundo com gradiente
- Botão de voltar
-
Informações Principais
- Poster
- Título (original e traduzido)
- Ano de lançamento
- Duração
- Gêneros (chips clicáveis)
- Sinopse (expandível)
- Rating TMDB
-
Ações do Usuário
- Botão de Status (Watchlist, Watching, Watched, Dropped)
- Botão de Adicionar à Lista
- Botão de Escrever Review
-
Informações Adicionais
- Diretor
- Elenco principal (lista horizontal)
- Orçamento e Receita
- Idioma original
- País de produção
-
Seções em Abas
- Reviews (do app)
- Elenco e Equipe completos
- Imagens (posters, backdrops)
- Vídeos (trailers, teasers)
- Filmes Relacionados
- Onde Assistir (streaming)
-
Coleção
- Se pertence a uma coleção, mostrar outros filmes
-
Todos os itens de filme +
-
Lista de Temporadas
- Cards de cada temporada
- Número de episódios
- Data de exibição
- Progresso de assistidos
-
Progresso da Série
- Barra de progresso geral
- Episódios assistidos / Total
- Informações da temporada
- Lista de episódios
- Botão "Marcar todos como assistidos"
- Navegação entre temporadas
- Informações do episódio
- Sinopse
- Elenco convidado
- Botão de marcar como assistido
- Seção de review do episódio
- Navegação entre episódios
- Foto
- Nome
- Biografia
- Data de nascimento
- Local de nascimento
- Filmografia (filmes e séries)
-
ReviewItem
- Avatar do usuário
- Username (link para perfil)
- Rating (estrelas)
- Texto da review
- Data
- Badge de PRO
- Indicador de spoiler
- Contador de likes
- Botão de like
- Botão de responder
- Menu de ações (editar, excluir)
-
ReviewFormDialog
- Modal/Bottom sheet
- Seletor de rating (0-10 ou estrelas)
- Campo de texto da review
- Toggle de spoiler
- Botão de publicar
-
ReviewReply
- Lista de respostas
- Formulário de resposta
- Like em respostas
- Reviews do item (filme/série/episódio)
- Reviews do usuário (no perfil)
- Reviews populares (na home)
- Filtros por idioma
- Ordenação (data, likes)
-
Minhas Listas
- Grid de listas do usuário
- Botão de criar nova lista
- Pull to refresh
-
Descobrir Listas
- Listas públicas populares
- Filtro por listas com banner
-
Detalhes da Lista
- Banner customizável
- Título e descrição
- Criador (link para perfil)
- Contador de likes
- Botão de like
- Progresso (itens assistidos)
- Grid de itens da lista
- Reordenação por drag and drop (modo edição)
- Botão de adicionar item
- Campo de título
- Campo de descrição
- Seletor de visibilidade (Pública, Rede, Privada)
- Upload de banner (image picker)
- Busca de filme/série
- Quick add (a partir da tela de detalhes)
- Sugestões baseadas em outras listas
-
Header do Perfil
- Banner customizável
- Avatar customizável
- Username
- Badge PRO (se aplicável)
- Biografia
- Botão de seguir/deixar de seguir
- Botão de editar (próprio perfil)
-
Estatísticas Resumidas
- Filmes assistidos
- Séries assistidas
- Seguidores
- Seguindo
-
Links Sociais
- TikTok
- YouTube
- X (Twitter)
-
Navegação em Abas
- Atividades
- Coleção
- Listas
- Reviews
- Estatísticas
- Upload de avatar (image picker + crop)
- Upload de banner (image picker + crop)
- Edição de username
- Edição de biografia
- Edição de links sociais
-
Filtros
- Status (Todos, Watchlist, Watching, Watched, Dropped)
- Tipo de mídia (Filmes, Séries, Ambos)
- Rating dado
- Ordenação (data adição, data atualização, rating)
- Apenas sem review
-
Lista de Itens
- Grid de posters
- Indicador de status
- Rating dado (se existir)
- Paginação infinita
- Alterar status rapidamente
- Remover da coleção
- Ver detalhes
-
Total de Horas
- Cálculo baseado em runtime dos filmes
- Cálculo baseado em episódios assistidos
-
Contagem de Reviews
- Total de reviews feitas
-
Séries Mais Assistidas
- Top 5 séries por episódios
- Gráfico de barras
-
Gêneros Assistidos
- Distribuição por gênero
- Gráfico de pizza/barras
-
Atores Mais Vistos
- Top atores nas mídias assistidas
-
Países de Produção
- Mapa ou lista de países
- Distribuição por país
-
Melhores Avaliações
- Itens com nota 10
- Média geral do usuário
-
Status das Mídias
- Distribuição por status
- Gráfico de pizza
-
Lista de Seguidores
- Avatar
- Username
- Botão de seguir de volta
- Paginação infinita
-
Lista de Seguindo
- Avatar
- Username
- Botão de deixar de seguir
- Paginação infinita
- Busca por username
- Resultados em tempo real
- Indicador se já segue
- Like em reviews
- Like em respostas
- Like em listas
- Animação de like
- Lista de quem curtiu
-
Campo de Busca
- Debounce de 300ms
- Limpeza rápida
- Histórico de buscas recentes
-
Resultados Multi-tipo
- Seção de Filmes
- Seção de Séries
- Seção de Pessoas
- Ver todos de cada tipo
- Atalho para busca rápida (pull down?)
- Resultados inline
- Navegação por teclado (se tablet)
-
Preferências de Streaming
- Seleção de provedores favoritos
- Região de streaming
-
Preferências de Exibição
- Tema (claro, escuro, sistema)
- Idioma do app
- Idioma preferido para dados do TMDB
- Alterar senha
- Notificações
- Privacidade
- Excluir conta
- Logout
- Português (pt-BR)
- Inglês (en-US)
- Espanhol (es-ES)
- Francês (fr-FR)
- Alemão (de-DE)
- Italiano (it-IT)
- Japonês (ja-JP)
- Instalar i18next + react-i18next
- Copiar dicionários do web (public/dictionaries/)
- Criar contexto de idioma
- Persistir preferência de idioma
- Badge PRO no perfil
- Importação de dados externos
- [Outras features PRO a definir]
- Tela de Pricing
- Integração com Stripe (via WebView ou deeplinking)
- Ou: usar In-App Purchases nativas
-
MyAnimeList
- Upload de arquivo XML
- Processamento e mapeamento
-
Letterboxd
- Upload de arquivo CSV
- Processamento e mapeamento
- Seleção de provedor
- Upload de arquivo (document picker)
- Progresso de importação
- Resultados (sucesso/falha por item)
- Button (variantes: default, outline, ghost, destructive)
- Input
- Textarea
- Select / Picker
- Checkbox
- Switch
- Slider
- Avatar
- Badge
- Card
- Skeleton
- Toast / Snackbar
- Dialog / Modal
- Bottom Sheet
- Tabs
- Accordion
- Separator
- PosterCard
- PosterGrid
- Banner
- PersonCard
- RatingStars
- StatusBadge
- GenreChip
- LikeButton (com animação)
- FollowButton
- StatusDropdown
- AddToListButton
- ShareButton
- Gestos de swipe para navegação
- Pull to refresh em todas as listas
- Haptic feedback em ações importantes
- Splash screen
- App icon
- Lazy loading de imagens
- Cache de imagens com react-native-fast-image
- Virtualização de listas longas (FlashList)
- Skeleton loading em todas as telas
- Cache de dados visualizados recentemente
- Indicador de modo offline
- Retry automático quando online
- Novo seguidor
- Like na review
- Resposta na review
- Lançamento de filme/série na watchlist
| Módulo | Complexidade | Prioridade |
|---|---|---|
| Setup Inicial | Baixa | Alta |
| Autenticação | Média | Alta |
| Navegação | Média | Alta |
| Catálogo de Filmes | Média | Alta |
| Catálogo de Séries | Média | Alta |
| Detalhes de Mídia | Alta | Alta |
| Sistema de Reviews | Alta | Alta |
| Listas | Alta | Média |
| Perfil | Média | Alta |
| Coleção | Média | Média |
| Estatísticas | Alta | Baixa |
| Sistema Social | Média | Média |
| Busca | Baixa | Alta |
| Configurações | Baixa | Baixa |
| i18n | Média | Média |
| Premium | Média | Baixa |
| Importação | Alta | Baixa |
- Setup inicial
- Autenticação (login/cadastro)
- Navegação básica
- Catálogo de filmes (popular, detalhes)
- Busca simples
- Catálogo de séries
- Sistema de status (watchlist, watched, etc)
- Perfil básico
- Coleção do usuário
- Sistema de reviews completo
- Likes
- Follow/Unfollow
- Feed de atividades
- Listas personalizadas
- Detalhes de temporadas/episódios
- Internacionalização
- Performance e polish
- Estatísticas
- Configurações avançadas
- Funcionalidades PRO
- Importação de dados
- API Backend:
apps/api/- Mesma API usada pelo web - Schemas Gerados:
apps/web/src/api/endpoints.schemas.ts - Dicionários i18n:
apps/web/public/dictionaries/ - Componentes Web:
apps/web/src/components/(referência de UI) - Serviços TMDB:
apps/web/src/services/tmdb.ts
Documento gerado em: Janeiro 2026 Versão do projeto web: 0.1.0