[{"data":1,"prerenderedAt":490},["ShallowReactive",2],{"portfolio-doc-cenas-nitrogen-br":3},{"id":4,"title":5,"body":6,"description":467,"extension":468,"meta":469,"navigation":482,"path":483,"seo":484,"stem":485,"__hash__":486,"baseSlug":487,"localeTag":488,"image":471,"category":470,"stack":473,"tags":489,"projectUrl":472,"date":481,"featured":482},"portfolio/portfolio/cenas-nitrogen.pt-BR.md","CENAS x NITROGEN",{"type":7,"value":8,"toc":444},"minimark",[9,13,18,35,38,45,49,52,83,87,137,141,146,169,173,197,200,204,208,219,223,238,241,245,259,263,284,288,302,306,309,336,339,343,346,360,363,367,370,395,399,434,437],[10,11,5],"h1",{"id":12},"cenas-x-nitrogen",[14,15,17],"h2",{"id":16},"visão-geral-do-projeto","Visão Geral do Projeto",[19,20,21,22,26,27,30,31,34],"p",{},"A CENAS é uma ",[23,24,25],"strong",{},"storefront headless na Shopify"," que eu idealizei e desenvolvi de ponta a ponta com ",[23,28,29],{},"Nuxt 4"," e a arquitetura ",[23,32,33],{},"Nitrogen"," (uma abordagem em Nuxt inspirada no Shopify Hydrogen).",[19,36,37],{},"O projeto começou como um conceito visual forte e evoluiu para uma plataforma de e-commerce pronta para produção, com jornada completa de compra: descoberta de catálogo, páginas de produto, carrinho, redirecionamento para checkout, área de conta, gestão de endereços, busca, localização, newsletter e fluxo de back-in-stock.",[19,39,40,41,44],{},"O objetivo não era só construir uma loja bonita, mas sim uma aplicação de e-commerce ",[23,42,43],{},"estável, escalável e sustentável"," para operar com segurança em produção.",[14,46,48],{"id":47},"meu-papel","Meu Papel",[19,50,51],{},"Eu construí esse projeto sozinho e assumi todo o ciclo de entrega:",[53,54,55,59,62,65,68,71,74,77,80],"ul",{},[56,57,58],"li",{},"Estratégia de produto e direção de UX",[56,60,61],{},"Arquitetura de frontend e sistema de componentes",[56,63,64],{},"Integração com Shopify Storefront API",[56,66,67],{},"Modelagem de dados com GraphQL (fragments e operations)",[56,69,70],{},"Gerenciamento de estado com Pinia",[56,72,73],{},"Otimização de performance e SEO",[56,75,76],{},"Hardening de APIs (validação, limite de payload e rate limiting)",[56,78,79],{},"Qualidade com testes e automações de CI",[56,81,82],{},"Refatoração contínua para manutenção de longo prazo",[14,84,86],{"id":85},"stack","Stack",[53,88,89,95,101,107,113,119,125,131],{},[56,90,91,94],{},[23,92,93],{},"Framework:"," Nuxt 4, Vue 3, TypeScript",[56,96,97,100],{},[23,98,99],{},"E-commerce:"," Shopify Storefront API (GraphQL)",[56,102,103,106],{},[23,104,105],{},"Arquitetura:"," composables estilo Nitrogen + proxy server-side + operações tipadas",[56,108,109,112],{},[23,110,111],{},"Estado:"," Pinia + persisted state plugin",[56,114,115,118],{},[23,116,117],{},"Estilo/UI:"," Tailwind CSS v4 + sistema tipográfico customizado",[56,120,121,124],{},[23,122,123],{},"Mídia/UX:"," Nuxt Image, Embla Carousel, GSAP, OGL, Lenis",[56,126,127,130],{},[23,128,129],{},"Marketing/Tracking:"," Klaviyo, Google Analytics/gtag, Vercel Analytics e Speed Insights",[56,132,133,136],{},[23,134,135],{},"Tooling:"," GraphQL Code Generator, ESLint, Vitest, GitHub Actions CI",[14,138,140],{"id":139},"o-que-eu-entreguei","O Que Eu Entreguei",[142,143,145],"h3",{"id":144},"experiência-completa-de-headless-commerce","Experiência Completa de Headless Commerce",[53,147,148,151,154,157,160,163,166],{},[56,149,150],{},"Páginas dinâmicas de coleções/categorias com filtros, ordenação e paginação",[56,152,153],{},"Páginas de produto com galeria de mídia, variantes, guia de tamanho, recomendações e conteúdo rico",[56,155,156],{},"Carrinho lateral e gestão completa de itens (adicionar/atualizar/remover)",[56,158,159],{},"Fluxos de autenticação: cadastro, login, recuperação e redefinição de senha",[56,161,162],{},"Área de conta: contexto do cliente, pedidos, endereços salvos (adicionar/editar/excluir + endereço padrão)",[56,164,165],{},"Busca preditiva e busca completa",[56,167,168],{},"Comportamento de storefront orientado por localização (país/idioma/moeda)",[142,170,172],{"id":171},"camada-de-servidor-modular-para-shopify","Camada de Servidor Modular para Shopify",[19,174,175,176,180,181,180,184,180,187,180,190,180,193,196],{},"Eu implementei um proxy server-side e organizei as operações por domínio (",[177,178,179],"code",{},"cart",", ",[177,182,183],{},"customer",[177,185,186],{},"product",[177,188,189],{},"collection",[177,191,192],{},"search",[177,194,195],{},"localization","), com operações GraphQL tipadas e fragments reutilizáveis.",[19,198,199],{},"Essa estrutura mantém o frontend limpo, protege credenciais e acelera desenvolvimento com menos risco.",[14,201,203],{"id":202},"soluções-de-engenharia-que-deram-estabilidade","Soluções de Engenharia Que Deram Estabilidade",[142,205,207],{"id":206},"_1-fluxo-graphql-tipado","1) Fluxo GraphQL Tipado",[53,209,210,213,216],{},[56,211,212],{},"Tipos TypeScript gerados por codegen para queries e mutations",[56,214,215],{},"Wrappers de operações tipadas por domínio de negócio",[56,217,218],{},"Refactors mais seguros e menos surpresas em runtime",[142,220,222],{"id":221},"_2-hardening-das-apis-de-integração","2) Hardening das APIs de Integração",[53,224,225,228,235],{},[56,226,227],{},"Validação de payload no backend",[56,229,230,231,234],{},"Limite de tamanho de requisição (",[177,232,233],{},"content-length",")",[56,236,237],{},"Rate limiting em memória por namespace/IP",[19,239,240],{},"Com isso, reduzi risco nas integrações externas (Shopify/Klaviyo) e aumentei resiliência contra tráfego inválido ou abusivo.",[142,242,244],{"id":243},"_3-decisões-orientadas-à-performance","3) Decisões Orientadas à Performance",[53,246,247,250,253,256],{},[56,248,249],{},"Otimização de imagens com Nuxt Image e formatos modernos",[56,251,252],{},"Bootstrap do app sem bloqueio da renderização inicial",[56,254,255],{},"Cache GraphQL com estratégia limitada (TTL + comportamento LRU)",[56,257,258],{},"Inicialização adiada de analytics/lenis para não competir com o caminho crítico de render",[142,260,262],{"id":261},"_4-base-de-seo-para-e-commerce","4) Base de SEO para E-commerce",[53,264,265,268,271,281],{},[56,266,267],{},"URLs canônicas",[56,269,270],{},"Metadados Open Graph e Twitter nas páginas-chave",[56,272,273,276,277,280],{},[177,274,275],{},"runtimeConfig"," para ",[177,278,279],{},"siteUrl"," por ambiente",[56,282,283],{},"Melhor indexação para páginas de produto, coleção e busca",[142,285,287],{"id":286},"_5-qualidade-e-manutenibilidade","5) Qualidade e Manutenibilidade",[53,289,290,293,299],{},[56,291,292],{},"Lint, type-check do Nuxt e testes unitários como gates de qualidade (incluindo workflow de CI)",[56,294,295,296],{},"Helpers de erro tipados em vez de tratamento amplo com ",[177,297,298],{},"any",[56,300,301],{},"Roadmap técnico executado em commits incrementais",[14,303,305],{"id":304},"história-de-entrega-do-visual-ao-hardening-de-produção","História de Entrega (Do Visual ao Hardening de Produção)",[19,307,308],{},"Uma parte importante desse projeto foi a evolução por etapas:",[310,311,312,318,324,330],"ol",{},[56,313,314,317],{},[23,315,316],{},"Construção visual e UX"," (nova interface, melhorias mobile, experiência mais rica em produto/coleção)",[56,319,320,323],{},[23,321,322],{},"Core de e-commerce"," (carrinho, auth, conta, filtros, busca, localização, Klaviyo)",[56,325,326,329],{},[23,327,328],{},"Hardening técnico"," (unificação de analytics, segurança de proxy, testes + CI, tipagem, cache, SEO, runtime config)",[56,331,332,335],{},[23,333,334],{},"Estabilização final"," (limpeza de lint/typecheck e consistência operacional)",[19,337,338],{},"Esse é exatamente o modelo que eu aplico em projetos freelance de e-commerce: velocidade na iteração inicial e, em seguida, hardening sistemático até a aplicação ficar confiável.",[14,340,342],{"id":341},"direção-de-design-e-frontend","Direção de Design e Frontend",[19,344,345],{},"A CENAS foi construída com linguagem visual intencional:",[53,347,348,351,354,357],{},[56,349,350],{},"Tipografia editorial marcante",[56,352,353],{},"Interações customizadas no hero e nas categorias",[56,355,356],{},"Motion/transições a favor da marca sem prejudicar clareza de UX",[56,358,359],{},"Responsividade pensada para jornada de compra em mobile e desktop",[19,361,362],{},"Resultado: uma storefront com identidade forte e, ao mesmo tempo, prática e orientada à conversão.",[14,364,366],{"id":365},"por-que-esse-projeto-é-relevante-no-meu-portfólio","Por Que Esse Projeto é Relevante no Meu Portfólio",[19,368,369],{},"Este case comprova que eu entrego:",[53,371,372,377,383,389],{},[56,373,374],{},[23,375,376],{},"Implementação completa de headless commerce",[56,378,379,382],{},[23,380,381],{},"Arquitetura Nuxt + Shopify"," pronta para produção",[56,384,385,388],{},[23,386,387],{},"Performance, SEO e hardening de integrações"," além da camada visual",[56,390,391,394],{},[23,392,393],{},"Sustentação de longo prazo"," com tipagem forte e padrões de engenharia",[14,396,398],{"id":397},"palavras-chave-serviços-para-freelancing","Palavras-chave / Serviços para Freelancing",[53,400,401,404,407,410,413,416,419,422,425,428,431],{},[56,402,403],{},"Desenvolvimento Headless Shopify",[56,405,406],{},"Desenvolvimento de e-commerce com Nuxt.js",[56,408,409],{},"Integração Shopify Storefront API",[56,411,412],{},"Arquitetura de storefront customizada",[56,414,415],{},"Builds inspiradas em Shopify Hydrogen com Nuxt",[56,417,418],{},"Otimização de performance para e-commerce",[56,420,421],{},"SEO técnico para storefront headless",[56,423,424],{},"Engenharia de frontend orientada à conversão",[56,426,427],{},"Arquitetura GraphQL + TypeScript para e-commerce",[56,429,430],{},"Integração Klaviyo (newsletter / back-in-stock)",[56,432,433],{},"Setup de qualidade com CI/CD para times de frontend",[435,436],"hr",{},[19,438,439,440,443],{},"Se você precisa de uma ",[23,441,442],{},"storefront Shopify headless"," com identidade de marca forte e engenharia sólida, esse é o tipo de projeto que eu entrego.",{"title":445,"searchDepth":446,"depth":446,"links":447},"",2,[448,449,450,451,456,463,464,465,466],{"id":16,"depth":446,"text":17},{"id":47,"depth":446,"text":48},{"id":85,"depth":446,"text":86},{"id":139,"depth":446,"text":140,"children":452},[453,455],{"id":144,"depth":454,"text":145},3,{"id":171,"depth":454,"text":172},{"id":202,"depth":446,"text":203,"children":457},[458,459,460,461,462],{"id":206,"depth":454,"text":207},{"id":221,"depth":454,"text":222},{"id":243,"depth":454,"text":244},{"id":261,"depth":454,"text":262},{"id":286,"depth":454,"text":287},{"id":304,"depth":446,"text":305},{"id":341,"depth":446,"text":342},{"id":365,"depth":446,"text":366},{"id":397,"depth":446,"text":398},"Headless Shopify storefront em Nuxt 4 com arquitetura Nitrogen, foco em performance, SEO técnico e engenharia escalável.","md",{"category":470,"image":471,"projectUrl":472,"stack":473,"tags":474,"date":481,"featured":482},"Code","/images/works/cenas.png","https://cenas.com.br/","Nuxt 4 + Shopify Storefront API + TypeScript + GraphQL",[29,475,476,477,478,479,480],"Shopify","Headless Commerce","GraphQL","TypeScript","SEO","Performance","2026-03-01",true,"/portfolio/cenas-nitrogen",{"title":5,"description":467},"portfolio/cenas-nitrogen.pt-BR","SnTvEVoACvntdm5hO0xGPbu0oVWI0KP8ISSllNMj3lQ","cenas-nitrogen","pt-br",[29,475,476,477,478,479,480],1773091123851]