Tao Ch'an Mandarim: Plataforma EdTech

Da ideia à produção: como minha necessidade de guiar meu alunos de mandarim do Tao Ch’an, onde voluntario, me levou a produzir com conhecimentos base fortes em programação, assistidos por uma curiosidade própria em desenvolvimento assistido por IA, uma plataforma de estudos com sintaxe complexa, tomando cuidados com requisições, segurança e otimização

📌 Visão Geral & Contexto

• Meu papel: Product owner, arquiteto de software e desenvolvedor full stack (AI-Assisted)
• Contexto: EdTech / Ensino de Mandarim (Tao Ch’an)
• Escopo: Ecossistema Web App Completo (LMS + SRS + Dicionário + Avaliação por Áudio)
• Ferramentas & Stack: Next.js (App Router), TypeScript, React 19, Supabase (PostgreSQL, RLS, Storage, Auth), FSRS (ts-fsrs), TanStack Query/Table, Tailwind CSS, Framer Motion, Tiptap, PostHog.

🛠️ A necessidade

Como professor de mandarim, vivenciei diariamente as limitações das plataformas genéricas. Ensinar o idioma chinês a falantes de português apresenta desafios pedagógicos e cognitivos únicos que os sistemas tradicionais de gestão de aprendizagem não conseguem resolver:

• Coloração tonal de pinyin: O mandarim é uma língua tonal (4 tons principais + tom neutro). Sem diferenciação visual de tons, a assimilação auditivo-visual é prejudicada.
• Avaliação de pronúncia e prática auditiva: Alunos precisam gravar e enviar áudios de pronúncia diretamente nos treinos e provas para receberem feedback.
• Curva de esquecimento de ideogramas: Caracteres requerem um sistema rigoroso de Repetição Espaçada (SRS) baseado em memória de longo prazo, inviabilizando decodificação por simples memorização passiva.
• Falta de prática conversacional interativa: Falta de ambientes seguros para simulação de diálogo em contexto real.

Para superar essas barreiras, decidi projetar e construir o portal do Tao Ch’an Mandarim, uma solução criada para cobrir todo o ciclo de aprendizagem.

⚙️ Stack tecnológica e arquitetura

A arquitetura do sistema foi desenhada para garantir tipagem rigorosa, segurança em nível de linha (RLS) e resposta em tempo real:

🚀 Funcionalidades chave e engenharia

[ Aluno / Interface React ] 
       │
       ├──> [ Motor FSRS & Dicionário Pinyin ] ──> Cache TanStack Query
       ├──> [ Gravação WebM (MediaRecorder) ] ──> Supabase Storage (Bucket Privado)
       └──> [ Server Actions / Next.js ] ───────> PostgreSQL + Supabase Auth & RLS

1. 🧠 Motor de Repetição Espaçada (SRS) com FSRS

• Algoritmo FSRS de 4ª geração: Uso do algoritmo FSRS (ts-fsrs), ajustando intervalos de revisão com base na estabilidade e dificuldade calculadas da memória.
• Métricas acadêmicas em tempo real: Painel visual com cálculo de retenção estimada, taxa de recall, streaks diários e heatmap de consistência de estudo.
• Sincronização em lote: Processamento eficiente de cartões revisados minimizando chamadas ao banco PostgreSQL.

Painel de Flashcards SRS com métricas do algoritmo FSRS e agendamento de revisões.

Interface de estudo de flashcard: exibição de Hanzi, notação Pinyin, áudio nativo e classificação FSRS.

2. 📖 Dicionário Inteligente de Mandarim

• Coloração tonal dinâmica de pinyin: Algoritmo automatizado que mapeia cada sílaba ao seu respectivo tom (1º, 2º, 3º, 4º ou neutro) e aplica estilos HSL contrastantes.
• Busca fuzzy e scroll infinito: Pesquisa instantânea por ideogramas (Hanzi), leitura em Pinyin ou tradução em português.
• Complementação com Recursos: Indexação de áudios, explicação etimológica, e exemplificação com frases.

Dicionário inteligente: busca por Hanzi/Pinyin, coloração tonal dinâmica e complementos.

3. 🎙️ Avaliação de Pronúncia & Motor de Provas

• Gravação de áudio não-bloqueante: Captura nativa via API MediaRecorder em formato WebM, com gerenciamento estrito de ciclo de vida de streams de microfone e liberação de periféricos para evitar vazamentos de memória.
• Polimorfismo de questões: Sistema flexível que suporta múltipla escolha, associação de caracteres, transcrição auditiva e envio de resposta falada.
• Armazenamento seguro no supabase storage: Sanitização de nomes de arquivos, criação de slugs únicos por aluno e permissões de leitura restritas ao professor e ao próprio estudante.

Motor de provas e exercícios com captura de áudio ao vivo e envio de respostas faladas.

4. 💬 Simulador de Diálogos Estilo WhatsApp

• Conversação contextual: Interface interativa imitando chat moderno para prática imersiva de diálogos em situações reais (pedir comida, transporte, reuniões).
• Máquina de estados de turnos: Controle dinâmico de turnos de conversa, estados de digitação, marcações de leitura e players de áudio nativos.

Simulador de diálogos estilo chat moderno para imersão conversacional em situações práticas.

5. 🎓 Dashboard do Aluno & Painel Administrativo

• Interface otimizada: Pilha animada 3D para aulas pendentes, histórico unificado de progresso e navegação intuitiva.
• Gestão pedagógica centralizada: Painel completo para o professor gerenciar turmas, publicar materiais e auditar revisões.

Interface de lição aberta com visualização interativa de conteúdo e mídia.

Central de publicações e artigos de aprofundamento linguístico e cultural.

🤖 A Jornada com a IA

Por ter background de marketing na época de criação do sistema, transformei os modelos de Inteligência Artificial em parceiros de co-pilotagem de arquitetura e código.

Atuando como Product Owner, arquiteto de requisitos e testador de produção, conduzi o ciclo completo de desenvolvimento:

• Arquitetura e segurança: Especifiquei a modelagem relacional de tabelas no PostgreSQL e supervisionei a criação de políticas RLS (Row Level Security) para garantir isolamento estrito de dados.
• Resolução de gargalos complexos: Trabalhei na identificação e depuração de vazamentos de periféricos de mídia em navegadores mobile (MediaRecorder), invalidação correta de caches no React Query e otimização de renderização no Next.js.
• Padrões de qualidade: Aplicação prática de princípios de Clean Code, modularização de componentes React, segurança em chamadas API e integração contínua.

A IA acelerou a escrita do código, mas a visão de produto, a sensibilidade pedagógica, a curadoria arquitetural e o rigor de validação em produção foram frutos de aprendizado prático e dedicação contínua.

📈 Impacto & Aprendizados

• Aplicação real em produção: O sistema é o ambiente diário de estudo de alunos reais de mandarim, provando sua estabilidade e valor prático.
• Fluência full stack: Domínio prático de todo o fluxo moderno de desenvolvimento web (App Router, banco relacional, autenticação, storage de mídia e analytics).
• Inovação EdTech: Demonstração de como requisitos pedagógicos complexos podem ser traduzidos em software elegante, seguro e de alto desempenho.