Buyr — App para Shopify

Buyr é um app público da Shopify que permite compradores definir seu próprio preço ou negociar com um agente de IA — capturando pedidos que de outra forma seriam perdidos ao preço cheio. Merchants configuram limites de lucratividade; o Buyr cuida da negociação automaticamente.

Fui convidado para resolver um problema de animação que ninguém no time havia enfrentado antes, e acabei contribuindo nos dois lados do produto: a experiência do storefront vista pelos compradores e o painel de administração dos merchants. Trabalhando com um time distribuído entre Brasil e Estados Unidos, entregamos o MVP dentro de um prazo fixo, seguido por uma fase de melhorias pós-MVP.

As Restrições

O app roda incorporado dentro de qualquer tema de storefront da Shopify — sem controle sobre o CSS, o ambiente JavaScript ou a estrutura de componentes do host. Um merchant usando um tema minimalista e outro com um tema de marca customizado poderiam quebrar o mesmo widget de formas silenciosas e diferentes.

Além disso, os próprios critérios de aceitação da Shopify impõem limites rígidos de performance que o app precisava atingir para permanecer listado na App Store. Performance não era opcional — era um requisito de aprovação.

O widget do storefront — entrada de preço interativa com chat de negociação por IA.

Storefront

Reconstruindo o sistema de animações

O widget do storefront tinha um sistema de animações — mas apenas como JavaScript vanilla compilado, sem código-fonte legível. Fiz engenharia reversa do comportamento visualmente e o reconstruí do zero usando Framer Motion, transformando-o em um sistema orientado a estado conectado ao ciclo de vida das ofertas:

• Idle — círculos animados em segundo plano enquanto o comprador navega
• Em andamento — animação ativa enquanto a oferta é criada
• Sucesso — explosão de confetes com um círculo de marcação amarela
• Oferta existente — estado de animação distinto para compradores que retornam

O estado era gerenciado via React Context API, fluindo por toda a árvore de componentes do storefront.

Resolvendo o isolamento de CSS com Shadow DOM

Ao testar em diferentes temas da Shopify, descobri que o CSS dos merchants vazava para dentro do widget e quebrava o layout de formas imprevisíveis. Investiguei a causa raiz, identifiquei o Shadow DOM como o limite correto e o implementei para isolar completamente os estilos do app de qualquer coisa que o storefront host estivesse fazendo. Isso não era um requisito — foi uma decisão que tomei após diagnosticar o problema.

Melhorias de performance

Atender aos requisitos de performance da App Store da Shopify significou tratar performance como um entregável, não como um detalhe. Estudei apps comparáveis na loja, rastreei métricas em uma planilha e conduzi as seguintes melhorias:

• Renderização sob demanda — montar o widget apenas quando realmente necessário
• Remoção de código morto — eliminação de dependências não utilizadas e ramificações inacessíveis
• Simplificação do fluxo de oferta — redução de etapas e profundidade de componentes no caminho crítico
• Refatoração — substituição de loops ineficientes, hooks super-engenheirados e uso indevido de estado global

Administração dos Merchants

Gerenciamento de ofertas em tempo real — merchants veem e agem sobre as ofertas recebidas conforme chegam.

No lado dos merchants, construí três telas usando Shopify Polaris:

• Fluxo de aceitação de ofertas — implementação pixel-perfect de como merchants revisam e aceitam ofertas recebidas
• Tela de analytics — painel que dá aos merchants visibilidade sobre ofertas recebidas vs. aceitas ao longo do tempo
• Tela de onboarding / boas-vindas — experiência guiada de configuração para merchants instalando o app pela primeira vez

Modelos de precificação personalizados — merchants definem limites e regras de desconto por produto.

Destaques Técnicos

• Monorepo com npm workspaces — storefront (Vite + Tailwind) e admin dos merchants (Shopify Polaris) como apps completamente separados
• Framer Motion — sistema de animação com múltiplos estados e coreografia, orientado por React Context API
• Shadow DOM — isolamento de CSS em ambientes de storefront imprevisíveis
• Shopify App Bridge, Theme App Extensions e Storefront API — aprendidos e aplicados integralmente em ambos os contextos
• Entrega dentro do prazo fixo com uma fase estruturada de melhorias pós-MVP

Tecnologias

• React — widget do storefront e UI do admin dos merchants; estado gerenciado via Context API em ambos os apps
• Framer Motion — sistema de animação com múltiplos estados para o ciclo de vida das ofertas (idle, em andamento, sucesso, oferta existente)
• Shopify Polaris — biblioteca de componentes para as três telas do admin dos merchants
• Tailwind CSS — estilização do widget do storefront, escopada dentro do Shadow DOM
• Vite — bundler do storefront; decisivo para as otimizações de performance que atenderam os requisitos da App Store
• Shopify App Bridge — gerenciamento de sessão e integração com o admin da Shopify
• Theme App Extensions — mecanismo de entrega do widget do storefront nos temas dos merchants
• Storefront API — acesso a dados de produtos e carrinho da Shopify
• TypeScript — tipagem estática em ambos os apps
• npm workspaces — monorepo mantendo storefront e admin como pacotes separados