Pitch: fiz um app de espanhol com cenas reais do YouTube (PWA + Android com Capacitor)

O Churro ensina a expressão do jeito que o nativo usa — «ahorita», «vale», «la neta» — mostrando a cena real em que ela foi dita, em vez de frase de livro. Cada aula é um trecho de 10-20 s de um vlog/entrevista, com a fala em espanhol, a tradução e a expressão explicada. Hoje são 383 expressões, 58 vídeos e 15 temas. Seguem as decisões técnicas que talvez sirvam pra quem está fazendo algo parecido.

Stack. React 18 + Vite + TypeScript, zustand e HashRouter. Firebase: Hosting, Auth anônimo, Firestore em southamerica-east1 e GA4. O Android é o mesmo dist/ num WebView via Capacitor 8, com AdMob recompensado.

YouTube IFrame API e a política. O vídeo nunca pode ficar atrás de anúncio ou de pagamento (políticas III.F.3, III.G e III.I.6 dos termos da API). Então o que se cobra é a AULA — tradução, modo Escuta, salvar cena —, nunca o player. Assistir é sempre grátis.

Curadoria. Todo vídeo é testado no Modo restrito antes de entrar no catálogo (um script que checa se o embed toca). O catálogo é servido como /content.json, então conteúdo novo entra sem versão nova na loja.

Offline-first. O store local manda; sincroniza com o Firestore ~1,5 s depois da mudança. No merge, listas são unidas e os créditos seguem o lado mais restritivo (pra ninguém ganhar aula «de graça» trocando de aparelho).

Armadilhas que custaram tempo. O Gradle recusa caminho com acento no Windows. E o Set-Content do PowerShell 5 grava BOM por padrão — isso quebrou o build.gradle de um jeito nada óbvio.

Quem quiser testar: https://churro.app.br/?utm_source=tabnews&utm_medium=post (Android na Play também). Feedback sobre o formato da aula é muito bem-vindo.