[{"data":1,"prerenderedAt":260},["ShallowReactive",2],{"portfolio-doc-email-platform-lab-br":3},{"id":4,"title":5,"body":6,"description":234,"extension":235,"meta":236,"navigation":252,"path":253,"seo":254,"stem":255,"__hash__":256,"baseSlug":257,"localeTag":258,"image":238,"category":237,"stack":240,"tags":259,"projectUrl":239,"date":184,"featured":252},"portfolio/portfolio/email-platform-lab.pt-BR.md","E-mail Platform Lab",{"type":7,"value":8,"toc":216},"minimark",[9,14,22,26,32,48,52,62,87,94,115,122,140,144,161,165,186,190,193],[10,11,13],"h2",{"id":12},"resumo-do-projeto","Resumo do Projeto",[15,16,17,18,21],"p",{},"Email Platform Lab é uma plataforma de e-mail em estilo de produção que construí de ponta a ponta para demonstrar templating avançado e operações de campanhas.",[19,20],"br",{},"\nO projeto evoluiu de um exercício de template estático para um sistema completo de workflow, com proteções de renderização, checkpoints de QA e ferramentas internas para aprovação de campanhas.",[10,23,25],{"id":24},"por-que-eu-construí","Por Que Eu Construí",[15,27,28,29,31],{},"Eu queria um projeto de portfólio que comprovasse entrega prática, não apenas acabamento visual.",[19,30],{},"\nE-mail é um canal de alta fricção, no qual pequenos erros de HTML/CSS podem quebrar comunicações críticas para o negócio, então construí este laboratório para demonstrar:",[33,34,35,39,42,45],"ul",{},[36,37,38],"li",{},"desenvolvimento robusto de templates responsivos para e-mail;",[36,40,41],{},"engenharia de compatibilidade entre clientes de e-mail;",[36,43,44],{},"automação de fluxo para operações de marketing;",[36,46,47],{},"arquitetura sustentável para iteração rápida.",[10,49,51],{"id":50},"estrutura-da-plataforma","Estrutura da Plataforma",[53,54,56,57,61],"h3",{"id":55},"_1-email-lab-appsemail-lab","1) Email Lab (",[58,59,60],"code",{},"apps/email-lab",")",[33,63,64,67,81,84],{},[36,65,66],{},"Templates HTML artesanais para casos de uso de newsletter, promoções e transacionais.",[36,68,69,70,73,74,73,77,80],{},"Partials em estilo de componentes (",[58,71,72],{},"header",", ",[58,75,76],{},"button",[58,78,79],{},"footer",") com hidratação de tokens.",[36,82,83],{},"Pipeline de build que sanitiza a saída, compila templates e gera um índice de preview.",[36,85,86],{},"Monitoramento de tamanho de payload para evitar clipping no Gmail e melhorar a prontidão de entregabilidade.",[53,88,90,91,61],{"id":89},"_2-portal-growth-admin-appsadmin-portal","2) Portal Growth Admin (",[58,92,93],{},"apps/admin-portal",[33,95,96,99,109,112],{},[36,97,98],{},"Interface em React + TypeScript para gerenciar status de campanhas e fluxo de revisão.",[36,100,101,102],{},"Modelo de estado com Zustand e transições protegidas:\n",[33,103,104],{},[36,105,106],{},[58,107,108],{},"Draft -> In Review -> Approved/Rejected",[36,110,111],{},"Permissões por papel e eventos de auditoria para rastreabilidade.",[36,113,114],{},"Validação de QA e conteúdo antes da aprovação para reduzir erros de publicação.",[53,116,118,119,61],{"id":117},"_3-construtor-visual-de-e-mail-appsemail-builder","3) Construtor Visual de E-mail (",[58,120,121],{},"apps/email-builder",[33,123,124,131,134,137],{},[36,125,126,127,130],{},"Editor drag-and-drop em Next.js + React com ",[58,128,129],{},"@dnd-kit",".",[36,132,133],{},"Composição baseada em blocos para seções reutilizáveis de e-mail.",[36,135,136],{},"Controles de inspeção para espaçamento, tipografia e sobrescritas de conteúdo.",[36,138,139],{},"Importação/exportação em JSON para conectar prototipação visual e templates de produção.",[10,141,143],{"id":142},"decisões-técnicas-e-soluções","Decisões Técnicas e Soluções",[33,145,146,149,152,155,158],{},[36,147,148],{},"Implementei comportamento bulletproof para CTAs com fallback em VML para Outlook e links padrão para clientes modernos.",[36,150,151],{},"Adicionei regras de sanitização para normalizar padrões problemáticos de markup e reduzir regressões de renderização.",[36,153,154],{},"Incluí padrões de resiliência para dark mode, lidando com inversão forçada e troca de logotipo com segurança.",[36,156,157],{},"Criei templates de teste de acessibilidade/localização para validar textos longos, RTL e estrutura semântica.",[36,159,160],{},"Montei um checklist de QA realista considerando comportamento em Apple Mail, Gmail, Outlook e Yahoo.",[10,162,164],{"id":163},"linha-do-tempo-de-build-a-partir-do-git-history","Linha do Tempo de Build (a partir do Git History)",[166,167,168,174,180],"ol",{},[36,169,170,173],{},[58,171,172],{},"2026-02-09",": scaffold inicial do email lab orientado por curso e workflow de administração.",[36,175,176,179],{},[58,177,178],{},"2026-02-22",": lançamento do construtor visual de e-mail e expansão da documentação.",[36,181,182,185],{},[58,183,184],{},"2026-02-23",": refinamentos de nomenclatura e estrutura após estabilização.",[10,187,189],{"id":188},"resultados-relevantes-para-freelance","Resultados Relevantes para Freelance",[15,191,192],{},"Este projeto demonstra as capacidades exatas necessárias para engenharia moderna de e-mail em contexto freelance:",[33,194,195,198,201,204,207,210,213],{},[36,196,197],{},"codificação de e-mails HTML responsivos;",[36,199,200],{},"sistemas de templates para newsletters;",[36,202,203],{},"implementação de e-mails transacionais;",[36,205,206],{},"correções de compatibilidade para Outlook/Gmail;",[36,208,209],{},"desenho de processo de QA de e-mail;",[36,211,212],{},"ferramentas internas para times de marketing e CRM;",[36,214,215],{},"ownership full-stack do produto, da arquitetura à qualidade de entrega.",{"title":217,"searchDepth":218,"depth":218,"links":219},"",2,[220,221,222,231,232,233],{"id":12,"depth":218,"text":13},{"id":24,"depth":218,"text":25},{"id":50,"depth":218,"text":51,"children":223},[224,227,229],{"id":55,"depth":225,"text":226},3,"1) Email Lab (apps/email-lab)",{"id":89,"depth":225,"text":228},"2) Portal Growth Admin (apps/admin-portal)",{"id":117,"depth":225,"text":230},"3) Construtor Visual de E-mail (apps/email-builder)",{"id":142,"depth":218,"text":143},{"id":163,"depth":218,"text":164},{"id":188,"depth":218,"text":189},"Um laboratório completo de engenharia de e-mail com templates artesanais, portal de aprovação e construtor visual por blocos.","md",{"category":237,"image":238,"projectUrl":239,"stack":240,"tags":241,"date":184,"featured":252},"Aplicação Full-Stack","/images/works/work8.jpg","https://github.com/alefb/kake/tree/main","Node.js, React, TypeScript, Next.js, Vite, Tailwind CSS, Zustand, dnd-kit",[242,243,244,245,246,247,248,249,250,251],"Desenvolvimento de E-mail","Templates HTML de E-mail","Construtor de Newsletter","E-mails Transacionais","React","Next.js","TypeScript","Tailwind CSS","Fluxo de QA","CI/CD",true,"/portfolio/email-platform-lab",{"title":5,"description":234},"portfolio/email-platform-lab.pt-BR","rKYSyS9aHg77uKz3vPgolbAhoXpuGI1xCmBP-B40uPs","email-platform-lab","pt-br",[242,243,244,245,246,247,248,249,250,251],1773091123851]