Site multilíngue (PT/EN/ES) para empresa industrial com catálogo personalizado por cliente, autenticação via magic link sem senha e formulário de assistência técnica com upload e limpeza automática a cada 30 dias.
DesignAgência Ade!
↗ Ver projeto ao vivo
01
Visão Geral
A Watanabe é uma empresa industrial que opera com clientes em diferentes países e precisava de um site que comunicasse seus produtos em três idiomas, centralizasse documentação técnica por cliente e oferecesse um canal para solicitações de assistência técnica com envio de arquivos. O público divide-se entre visitantes que buscam informações institucionais e clientes pré-cadastrados que acessam catálogos personalizados com dados relacionados aos seus maquinários e documentos.
Uma das funcionalidades centrais é o formulário de assistência técnica, que permite enviar arquivos de mídia de alta qualidade em grandes volumes. Esses arquivos são armazenados em um bucket do Supabase e removidos automaticamente por cron jobs na Vercel a cada 30 dias, evitando acúmulo de dados obsoletos no storage.
O projeto foi desenvolvido com Next.js, React e TypeScript, com Tailwind CSS para estilização. O conteúdo multilíngue — português, inglês e espanhol — é gerenciado no WordPress via WPGraphQL, com plugins de internacionalização. A autenticação dos clientes pré-cadastrados usa magic link, sem necessidade de senha permanente. Formulários validados com Zod e React Hook Form.
02
Desafio
Internacionalização real — não apenas tradução de strings, mas detecção automática de idioma pelo navegador e roteamento dinâmico por locale — exigiu configuração cuidadosa do middleware do Next.js com rotas [lang]. O WordPress também precisava de suporte multilíngue completo para que o conteúdo gerenciado no CMS aparecesse no idioma correto sem duplicar a estrutura de dados ou criar posts separados por idioma sem vínculo entre si.
O sistema de autenticação por magic link foi construído do zero: o cliente pré-cadastrado informa seu e-mail, recebe um código temporário e o insere em uma segunda etapa do formulário — que só então libera o acesso ao catálogo personalizado. O acesso expira com o código, sem senha permanente e sem sessões abertas indefinidamente. O formulário de assistência técnica precisava aceitar arquivos grandes em alta qualidade, mas armazená-los indefinidamente não era viável — o sistema exigia uma rotina automática de limpeza sem depender de intervenção manual.
03
Solução
Configurei o middleware do Next.js nas rotas dinâmicas [lang] para detectar o idioma pelo navegador e redirecionar automaticamente. O WordPress foi configurado com plugins de internacionalização e o conteúdo é consumido via WPGraphQL já segmentado por locale — garantindo que cada idioma carregue o conteúdo correto sem duplicação de lógica no front-end.
O fluxo de magic link foi integrado ao formulário de acesso ao catálogo em duas etapas: o código é gerado no servidor, enviado por e-mail e validado no segundo passo antes de liberar o catálogo personalizado. Para o armazenamento de arquivos, integrei o formulário ao Supabase Storage, com cron jobs na Vercel executando limpeza automática a cada 30 dias — mantendo o bucket enxuto sem qualquer intervenção manual.