[{"data":1,"prerenderedAt":194},["ShallowReactive",2],{"paleta":3,"caso-circuitos-ligamagic":28,"viz-circuitos-ligamagic":184},{"projetos":4,"posts":27},[5,9,13,16,20,23],{"path":6,"title":7,"contexto":8},"\u002Fprojetos\u002Fkravva","Kravva","Produto próprio",{"path":10,"title":11,"contexto":12},"\u002Fprojetos\u002Fonboarding-erp","Onboarding digital de um ERP financeiro","Consultoria PJ",{"path":14,"title":15,"contexto":12},"\u002Fprojetos\u002Fpainel-erp","Painel administrativo do ERP",{"path":17,"title":18,"contexto":19},"\u002Fprojetos\u002Fligafest","Ingresso em grupo da LigaFest","LigaMagic · CLT",{"path":21,"title":22,"contexto":19},"\u002Fprojetos\u002Fcircuitos-ligamagic","Circuitos LigaMagic e LigaPokémon",{"path":24,"title":25,"contexto":26},"\u002Fprojetos\u002Fblippy","Blippy","Projeto pessoal",[],{"id":29,"title":22,"body":30,"contexto":19,"cor":149,"description":150,"destaque":151,"extension":152,"link":153,"meta":154,"navigation":155,"numeros":156,"ordem":169,"papel":170,"path":21,"periodo":171,"resumo":172,"seo":173,"stack":174,"stem":182,"__hash__":183},"projetos\u002Fprojetos\u002Fcircuitos-ligamagic.md",{"type":31,"value":32,"toc":135},"minimark",[33,38,42,45,48,51,55,60,63,67,76,79,83,86,90,97,103,109,113,116,119,122,126,129,132],[34,35,37],"h2",{"id":36},"o-problema","O problema",[39,40,41],"p",{},"A LigaMagic é o maior marketplace brasileiro de card games: Magic, Pokémon, Yu-Gi-Oh!, One Piece e outros. Os Circuitos são as ligas de torneios organizadas nas lojas de todo o país, com inscrição, rodadas e ranking.",[39,43,44],{},"Quando assumi o front-end, ele estava no início e mal estruturado. Já tinha usuários de verdade: na temporada 2024, os circuitos da LigaMagic e da LigaPokémon somaram mais de 2.400 torneios, em mais de 150 lojas, com mais de 6.000 jogadores. E nos dias de evento, os apps atendem mais de 2.000 jogadores durante os torneios, em eventos com mais de 12.000 pessoas.",[39,46,47],{},"Um front frágil nessas condições não é só dívida técnica. Quando algo quebra num dia de evento, há gente esperando na loja.",[39,49,50],{},"Havia ainda um segundo desafio: os circuitos derivados de cada card game tinham marcas diferentes. O produto precisava parecer um circuito de Magic num lugar e um de Pokémon em outro, sem duas bases de código.",[34,52,54],{"id":53},"o-que-eu-fiz","O que eu fiz",[56,57,59],"h3",{"id":58},"refatoração-da-base-herdada","Refatoração da base herdada",[39,61,62],{},"Refatorei praticamente toda a base de front que recebi, em Nuxt 3 e Vue 3 com TypeScript. A exceção foi o módulo de cadastro de lojas, onde mexi em partes: refatorei trechos do fluxo de inscrição e de pagamento das lojas, sem assumir o módulo inteiro.",[56,64,66],{"id":65},"theming-multi-marca","Theming multi-marca",[39,68,69,70,75],{},"Para as marcas dos circuitos, usei Tailwind com variáveis CSS. As cores e os demais ",[71,72,74],"termo",{"id":73},"design tokens","tokens"," de cada marca ficam em variáveis. Os componentes não conhecem a marca, só os tokens. Trocar de circuito é trocar os valores, e não o código.",[77,78],"viz-theming",{},[56,80,82],{"id":81},"referência-técnica-do-front","Referência técnica do front",[39,84,85],{},"Eu definia padrões e decisões de front e participava de UI\u002FUX, brainstorming e refinamento com o time de produto. Era uma referência técnica do front, sem cargo formal de liderança.",[34,87,89],{"id":88},"decisões-e-trade-offs","Decisões e trade-offs",[39,91,92,96],{},[93,94,95],"strong",{},"Refatorar quase tudo em vez de remendar."," Uma base mal estruturada, usada por milhares de jogadores, pedia uma estrutura em que eu pudesse mudar sem medo. O custo é alto: refatorar uma base em uso consome tempo que não vira funcionalidade nova, e cada mudança grande pede cuidado para não quebrar o que já funcionava. Fiz porque a alternativa era empilhar mudanças sobre um terreno instável.",[39,98,99,102],{},[93,100,101],{},"Variáveis CSS em vez de uma folha de estilos por marca."," Com uma folha por marca, cada ajuste visual seria feito várias vezes e as marcas se afastariam com o tempo. Com variáveis, o ajuste é feito uma vez, e uma marca nova vira um conjunto de valores. O custo: o sistema de tokens precisa ser bem pensado desde o início. Se um componente embute uma cor fixa, ele quebra o tema.",[39,104,105,108],{},[93,106,107],{},"Não assumir o módulo de cadastro de lojas por inteiro."," Mexi nele em partes, como o fluxo de inscrição e pagamento, mas ele não foi refatorado por mim de ponta a ponta. O custo é que algumas partes do front seguiram a organização anterior, fora do padrão que defini no resto.",[34,110,112],{"id":111},"resultado","Resultado",[39,114,115],{},"O front sustentou a temporada de 2024 e os dias de evento, com os números acima. Esses números descrevem a escala do produto, e não um ganho que eu atribua só ao meu trabalho.",[39,117,118],{},"Não tenho métricas de antes e depois para a refatoração, como quantidade de bugs ou tempo de entrega, e não vou inventar. O que posso dizer: as marcas derivadas passaram a ser tratadas como tema, e não como cópia, e o time passou a ter padrões definidos para trabalhar.",[39,120,121],{},"O trabalho foi feito durante o período em que estive na LigaMagic, em regime CLT.",[34,123,125],{"id":124},"o-que-eu-faria-diferente","O que eu faria diferente",[39,127,128],{},"Mediria desde o início. Se eu tivesse registrado taxa de erros e tempo de entrega antes de refatorar, hoje poderia mostrar o efeito em números.",[39,130,131],{},"Combinaria a refatoração com testes de interface nos fluxos críticos, como inscrição e pagamento, antes de mexer neles. Refatorar sem essa rede de segurança exige mais cuidado manual do que deveria.",[39,133,134],{},"Documentaria o sistema de tokens do theming logo no começo. A flexibilidade das variáveis só vale se todo mundo no time souber quais tokens existem e quando usar cada um.",{"title":136,"searchDepth":137,"depth":138,"links":139},"",2,3,[140,141,146,147,148],{"id":36,"depth":137,"text":37},{"id":53,"depth":137,"text":54,"children":142},[143,144,145],{"id":58,"depth":138,"text":59},{"id":65,"depth":138,"text":66},{"id":81,"depth":138,"text":82},{"id":88,"depth":137,"text":89},{"id":111,"depth":137,"text":112},{"id":124,"depth":137,"text":125},"oklch(0.65 0.18 295)","Front-end dos circuitos de torneios da LigaMagic: refatoração de uma base herdada e theming multi-marca com variáveis CSS.","+2.400 torneios em +150 lojas, num front que herdei","md",null,{},true,[157,160,163,166],{"valor":158,"rotulo":159},"+2.400","torneios na temporada 2024",{"valor":161,"rotulo":162},"+150","lojas",{"valor":164,"rotulo":165},"+6.000","jogadores na temporada",{"valor":167,"rotulo":168},"2.000+","jogadores nos apps em dias de evento",5,"Responsável pelo front-end e referência técnica","2023–2025","Fui responsável pelo front dos circuitos de torneios da LigaMagic e da LigaPokémon: +2.400 torneios, +150 lojas e +6.000 jogadores na temporada 2024.",{"title":22,"description":150},[175,176,177,178,179,180,181],"Nuxt 3","Vue 3","TypeScript","Pinia","Tailwind CSS","PrimeVue","Shadcn-Vue","projetos\u002Fcircuitos-ligamagic","rhKr_MWQFF7imXaCTHFRt64p7eXXofNI3crzw4DFe6c",[185,187,188,189,191,192],{"path":6,"title":7,"ordem":186},1,{"path":10,"title":11,"ordem":137},{"path":14,"title":15,"ordem":138},{"path":17,"title":18,"ordem":190},4,{"path":21,"title":22,"ordem":169},{"path":24,"title":25,"ordem":193},6,1791915291204]