Plataforma de Ensino

Transluter

O português do dia a dia da tecnologia

Plataforma de um projeto de extensão para ensinar o português usado em programação e TI: lições de vocabulário, entrevistas e reuniões, com atividades que o professor corrige e comenta.

ver detalhes técnicos
Página inicial: proposta do curso e chamada para entrar com o Google

O desafio

Quem quer trabalhar como desenvolvedor no Brasil precisa do português do dia a dia da área — entrevista, reunião, vocabulário técnico — e o material comum de idiomas não cobre isso. O projeto de extensão precisava de um lugar para publicar as lições, receber as respostas dos alunos e devolver retorno sem planilhas nem e-mails.

O que foi feito

  • Login com a conta Google, separando automaticamente aluno e professor
  • Lições organizadas em módulos, com tabelas português–inglês, vídeo, áudio e leitura em voz alta
  • Atividades com questões abertas e de múltipla escolha, rascunho salvo e envio final
  • Correção automática da múltipla escolha e painel do professor para ler as respostas, dar nota e escrever o retorno
  • Editor de atividades para o professor criar e alterar lições pelo próprio site, com pré-visualização
  • Interface em português e inglês, tema claro e escuro, e layout pensado para o celular

Resultado

No ar em devpt.lotmhub.com.br com 3 módulos e 4 lições publicadas em português e inglês. Alunos entram com a conta Google e o professor acompanha e corrige as atividades em um painel próprio.

Telas do projeto

Como funciona e a grade de módulos e lições do curso
Como funciona e a grade de módulos e lições do curso
A mesma página em inglês, para quem ainda está começando no português
A mesma página em inglês, para quem ainda está começando no português
Tema claro, aplicado conforme a preferência do sistema
Tema claro, aplicado conforme a preferência do sistema
Página inicial no celular
Página inicial no celular
Módulos e lições empilhados no celular
Módulos e lições empilhados no celular
Entrada com a conta Google, sem cadastro de senha
Entrada com a conta Google, sem cadastro de senha

// por dentro

Como foi construído

Aplicação Next.js 16 (App Router) com React 19 e Server Components, em que todo acesso a dados acontece no servidor. O Firebase Auth é usado no navegador só para o login com Google; o ID token é trocado por um cookie de sessão httpOnly emitido pelo Firebase Admin SDK, e a partir daí páginas e Server Actions leem e gravam no Firestore com credenciais de serviço. O conteúdo é Markdown com frontmatter versionado no repositório, sobreposto por versões que o professor salva no Firestore, com i18n PT/EN resolvido por cookie e Accept-Language sem mudar as URLs. Hospedado na Vercel.

Front-end
Next.js 16.2 (App Router, Server Components, Server Actions)React 19.2TypeScript 5.9Tailwind CSS 4
Conteúdo
Markdown com frontmatter (gray-matter)react-markdown 10 + remark-gfmdiretivas próprias para YouTubeáudio e TTS
Autenticação
Firebase Auth 12 (Google) no cliente + cookie de sessão do Firebase Admin SDK 14 no servidor
Banco
Cloud Firestore (coleções users, submissions e activities)
Infra
Vercelcom sitemaprobotsmanifest e imagens Open Graph geradas pelo próprio Next.js

Segurança

Sessão por cookie httpOnly, não por token no navegador

Depois do login com Google, o cliente envia o ID token para uma Route Handler que o valida com verifyIdToken e emite um session cookie de 14 dias (httpOnly, secure, sameSite=lax). Cada request do servidor valida esse cookie com verifySessionCookie; o SDK do Firebase no navegador não lê nem grava dados.

Segurança

Papéis decididos no servidor

O papel de professor vem de uma allowlist de e-mails em variável de ambiente, aplicada na sincronização do usuário no login; a regra promove, mas nunca rebaixa um professor existente. Toda Server Action começa com requireUser ou requireProfessor, então a autorização não depende do que a interface mostra.

Arquitetura

Conteúdo em duas camadas: repositório + banco

As lições base são arquivos .pt.md/.en.md versionados no git; o professor pode criar ou sobrescrever uma lição pelo editor do site, e a versão salva no Firestore tem prioridade no mesmo slug e idioma. Excluir a versão do banco volta a valer a do repositório, e o frontmatter é validado antes de salvar.

Dados

Atividades com correção automática e modelo idempotente

Cada atividade aceita questões abertas e de múltipla escolha definidas no frontmatter; a nota da múltipla escolha é calculada na Server Action, não vem do cliente. A submissão usa id determinístico uid_slug, então rascunho e envio fazem upsert no mesmo documento, e o professor grava nota e retorno nele.

Arquitetura

i18n sem mudar URLs, com fallback por lição

O idioma vem do cookie lang ou, na falta dele, do Accept-Language. Se uma lição não tem versão no idioma pedido, cai na versão em português e é sinalizada como não traduzida, para nenhuma lição sumir do catálogo.

Performance

Mídia leve e build resiliente

O vídeo do YouTube usa uma fachada que só carrega o iframe (youtube-nocookie) no clique, e a leitura em voz alta usa a Web Speech API do navegador, sem custo de servidor. O Admin SDK é inicializado de forma preguiçosa e marcado como serverExternalPackages, para o next build funcionar sem credenciais.

Quer um projeto como este?

Conte o que você precisa e receba uma proposta sem compromisso.

Pedir orçamento