Como criei uma plataforma Local-First com Web Audio API para destravar meu inglês para a gringa

Da trava nas daily meetings à construção de um estúdio de shadowing com fonética offline, waveforms e IA sob demanda.

A Ideia: O paradoxo do dev brasileiro com o inglês

Se você é desenvolvedor de software no Brasil, muito provavelmente compartilha da mesma realidade que eu:

Lemos documentações complexas em inglês sem piscar, assistimos a keynotes inteiras sem legendas, mas… na hora de abrir o microfone em uma Daily Standup, defender um Pull Request ou encarar uma entrevista técnica internacional (Live Coding / System Design), as palavras simplesmente somem.

Durante muito tempo, tentei resolver isso usando as soluções tradicionais do mercado:

Apps gamificados: ótimos para streaks e traduzir "a maçã é vermelha", mas inúteis para explicar por que uma query no PostgreSQL está sofrendo lock contention.
Prompts manuais no ChatGPT: geravam paralisia por decisão. Eu gastava 15 minutos montando o contexto do prompt e quase nenhum tempo praticando a fala em si.
Estudo de palavras isoladas: na hora da reunião, tentar traduzir termo por termo na cabeça gera pausas longas e quebra o ritmo da comunicação.

Percebi que o que eu precisava não era de "mais gramática", mas de prática deliberada de produção oral (speaking) com foco em frases técnicas reais(que chamei de chuncks).

Decidi, então, colocar a mão na massa e construir a ferramenta que eu gostaria que existisse: o English for Developers.

Como estruturei o projeto base (A Arquitetura)

O objetivo principal era fricção zero: abrir a aplicação e, em menos de 2 cliques, começar uma sessão diária guiada de 10 a 45 minutos.

Para que a experiência fosse ultrarrápida, segura e confiável, defini 3 pilares arquiteturais:

┌─────────────────────────────────────────────────────────────┐
│                  English for Developers                     │
├──────────────────────────────┬──────────────────────────────┤
│       FRONTEND & CORE        │        ÁUDIO & IA            │
│  • Next.js 16 (App Router)   │  • Web Audio API             │
│  • React 19 & TypeScript 5   │  • Motor Fonético IPA Local  │
│  • Tailwind CSS v4 & Base UI │  • OpenAI & Google Gemini    │
├──────────────────────────────┴──────────────────────────────┤
│                   LOCAL-FIRST STORAGE                       │
│    • IndexedDB (Áudios & TTS Cache) + LocalStorage (Dados)  │
└─────────────────────────────────────────────────────────────┘

1. Stack Moderna & Minimalista

Next.js 16 (App Router) + React 19 + TypeScript: Para garantir renderização eficiente, roteamento ágil e tipagem estrita de ponta a ponta.
Tailwind CSS v4 + Base UI / Lucide React: Para uma interface limpa, focada em produtividade e acessibilidade visual (Dark/Light mode).

2. Filosofia Local-First & Privacidade Radical

Como a plataforma grava a voz do usuário para autoavaliação e estudos diários, eu não queria (nem deveria) enviar gigabytes de áudio para servidores centrais.

IndexedDB: Utilizado para persistir todas as gravações de voz (Blob), histórico de áudio e cache inteligente de TTS.
LocalStorage com Validação Zod-like: Guarda o roadmap de 6 meses, sessões concluídas, biblioteca de chunks e anotações.
BYOK (Bring Your Own Key): O usuário pode inserir sua própria chave da OpenAI (gpt-4o-mini, tts-1) ou Google Gemini (gemini-2.0-flash), salvas localmente e trafegadas via headers customizados, ou rodar a aplicação em modo 100% offline.

3. O Loop de Aprendizado Deliberado

A aplicação foi estruturada em torno de um ciclo prático:

Chunks Contextuais: Expressões completas agrupadas por cenários reais (Incident Management, Code Review, Architecture Decisions, Star Method Interviews).
Estúdio de Shadowing com IPA: Repetição frase a frase com transcrição fonética General American (GA), marcação de sílaba tônica (stress) e reduções de fala conectada.
Waveform Visualizer Comparativo: Análise de forma de onda da minha voz contra o áudio-modelo em tempo real.
Speaking & Autoavaliação: Gravação de desafios reais com uma rubrica reflexiva de 4 perguntas (sem notas arbitrárias de IA que geram falsa precisão).
Caixa de Vocabulário Perdido (Lost Vocabulary): Travou em uma reunião no trabalho? Anote em português na caixa $\rightarrow$ a IA gera a formulação técnica ideal $\rightarrow$ transforma-se em um novo chunk na sua biblioteca.

As Dificuldades e Desafios Técnicos no Caminho

Construir uma ferramenta rica em áudio, fonética e IA no navegador trouxe desafios de engenharia bem peculiares:

1. Manipulação e Comparação de Áudio no Browser (Web Audio API)

Desenvolver o comparador de Waveform (Forma de Onda) foi uma das etapas mais desafiadoras. Eu precisava decodificar streams de áudio do microfone e arquivos de TTS, calcular envelopes de volume e renderizar visualizações (lado a lado e curvas sobrepostas) sem travar a thread principal de renderização do React 19.

A solução: Implementei um pipeline com AudioContext.decodeAudioData(), AnalyserNode e amostragem por normalização de RMS. Isso permitiu criar uma faixa interativa com scrubbing e detecção visual de hesitações e pausas de fala.

2. Fonética em Tempo Real sem Latência de Rede

Fazer chamadas de API externas para obter a transcrição em IPA (Alfabeto Fonético Internacional) e a sílaba tônica de cada palavra gerava latência e custo desnecessários.

A solução: Desenvolvi um motor fonético offline embutido com mais de 1.200 termos técnicos de engenharia de software e negócios, com derivação morfológica (plurais, gerúndios, particípios) e detecção de content words vs. function words executada em 0ms diretamente no cliente.

3. Cache de TTS para Economia e Velocidade

Se você está fazendo shadowing, vai ouvir a mesma frase 5 ou 10 vezes seguidas. Fazer requisições repetidas à API de TTS da OpenAI tornaria o uso caro e lento.

A solução: Criei uma camada de cache em IndexedDB (tts_audio_cache) indexada por hash de ${voice}__${speed}__${text}. Uma vez gerado o áudio, ele nunca mais consome banda ou créditos de API.

4. A Armadilha da Gamificação vs. Métricas Reais

No início do projeto, pensei em colocar pontuações automáticas de pronúncia usando speech-to-text. No entanto, modelos de STT comuns tentam "adivinhar" o que você disse e mascaram erros reais de ritmo e prosódia, dando falsas sensações de fluência.

A decisão de produto: Troquei a pontuação automática por métricas de produção real: minutos totais de fala gravados, consistência semanal e uma autoavaliação reflexiva orientada:
1. Consegui terminar sem trocar para o português?
2. Usei os chunks pretendidos?
3. Onde perdi ritmo ou clareza?
4. Qual frase preciso praticar novamente?

Resultados e Próximos Passos

Desenvolver o English for Developers transformou não apenas a minha própria rotina de estudos para o mercado global, mas me deu uma visão prática sobre como projetar aplicações Local-First, aproveitando a Web Audio API moderna e integrando LLMs de forma realmente útil, e não como mero artifício.

O projeto agora conta com:

✅ Roadmap estruturado de 6 meses (de Standups à Liderança Técnica).
✅ Estúdio de Shadowing com visualização comparativa de ondas sonoras.
✅ Gerenciador BYOK (OpenAI + Gemini) com suporte a exportação completa de dados em JSON.
✅ Exportação de prompts contextualizados para continuar a simulação de entrevistas no ChatGPT/Claude.

Tags: #programming #webdev #nextjs #career #english #typescript #ai