CENAS x NITROGEN

Visão Geral do Projeto

A CENAS é uma storefront headless na Shopify que eu idealizei e desenvolvi de ponta a ponta com Nuxt 4 e a arquitetura Nitrogen (uma abordagem em Nuxt inspirada no Shopify Hydrogen).

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.

O objetivo não era só construir uma loja bonita, mas sim uma aplicação de e-commerce estável, escalável e sustentável para operar com segurança em produção.

Meu Papel

Eu construí esse projeto sozinho e assumi todo o ciclo de entrega:

• Estratégia de produto e direção de UX
• Arquitetura de frontend e sistema de componentes
• Integração com Shopify Storefront API
• Modelagem de dados com GraphQL (fragments e operations)
• Gerenciamento de estado com Pinia
• Otimização de performance e SEO
• Hardening de APIs (validação, limite de payload e rate limiting)
• Qualidade com testes e automações de CI
• Refatoração contínua para manutenção de longo prazo

Stack

• Framework: Nuxt 4, Vue 3, TypeScript
• E-commerce: Shopify Storefront API (GraphQL)
• Arquitetura: composables estilo Nitrogen + proxy server-side + operações tipadas
• Estado: Pinia + persisted state plugin
• Estilo/UI: Tailwind CSS v4 + sistema tipográfico customizado
• Mídia/UX: Nuxt Image, Embla Carousel, GSAP, OGL, Lenis
• Marketing/Tracking: Klaviyo, Google Analytics/gtag, Vercel Analytics e Speed Insights
• Tooling: GraphQL Code Generator, ESLint, Vitest, GitHub Actions CI

O Que Eu Entreguei

Experiência Completa de Headless Commerce

• Páginas dinâmicas de coleções/categorias com filtros, ordenação e paginação
• Páginas de produto com galeria de mídia, variantes, guia de tamanho, recomendações e conteúdo rico
• Carrinho lateral e gestão completa de itens (adicionar/atualizar/remover)
• Fluxos de autenticação: cadastro, login, recuperação e redefinição de senha
• Área de conta: contexto do cliente, pedidos, endereços salvos (adicionar/editar/excluir + endereço padrão)
• Busca preditiva e busca completa
• Comportamento de storefront orientado por localização (país/idioma/moeda)

Camada de Servidor Modular para Shopify

Eu implementei um proxy server-side e organizei as operações por domínio (cart, customer, product, collection, search, localization), com operações GraphQL tipadas e fragments reutilizáveis.

Essa estrutura mantém o frontend limpo, protege credenciais e acelera desenvolvimento com menos risco.

Soluções de Engenharia Que Deram Estabilidade

1) Fluxo GraphQL Tipado

• Tipos TypeScript gerados por codegen para queries e mutations
• Wrappers de operações tipadas por domínio de negócio
• Refactors mais seguros e menos surpresas em runtime

2) Hardening das APIs de Integração

• Validação de payload no backend
• Limite de tamanho de requisição (content-length)
• Rate limiting em memória por namespace/IP

Com isso, reduzi risco nas integrações externas (Shopify/Klaviyo) e aumentei resiliência contra tráfego inválido ou abusivo.

3) Decisões Orientadas à Performance

• Otimização de imagens com Nuxt Image e formatos modernos
• Bootstrap do app sem bloqueio da renderização inicial
• Cache GraphQL com estratégia limitada (TTL + comportamento LRU)
• Inicialização adiada de analytics/lenis para não competir com o caminho crítico de render

4) Base de SEO para E-commerce

• URLs canônicas
• Metadados Open Graph e Twitter nas páginas-chave
• runtimeConfig para siteUrl por ambiente
• Melhor indexação para páginas de produto, coleção e busca

5) Qualidade e Manutenibilidade

• Lint, type-check do Nuxt e testes unitários como gates de qualidade (incluindo workflow de CI)
• Helpers de erro tipados em vez de tratamento amplo com any
• Roadmap técnico executado em commits incrementais

História de Entrega (Do Visual ao Hardening de Produção)

Uma parte importante desse projeto foi a evolução por etapas:

1. Construção visual e UX (nova interface, melhorias mobile, experiência mais rica em produto/coleção)
2. Core de e-commerce (carrinho, auth, conta, filtros, busca, localização, Klaviyo)
3. Hardening técnico (unificação de analytics, segurança de proxy, testes + CI, tipagem, cache, SEO, runtime config)
4. Estabilização final (limpeza de lint/typecheck e consistência operacional)

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.

Direção de Design e Frontend

A CENAS foi construída com linguagem visual intencional:

• Tipografia editorial marcante
• Interações customizadas no hero e nas categorias
• Motion/transições a favor da marca sem prejudicar clareza de UX
• Responsividade pensada para jornada de compra em mobile e desktop

Resultado: uma storefront com identidade forte e, ao mesmo tempo, prática e orientada à conversão.

Por Que Esse Projeto é Relevante no Meu Portfólio

Este case comprova que eu entrego:

• Implementação completa de headless commerce
• Arquitetura Nuxt + Shopify pronta para produção
• Performance, SEO e hardening de integrações além da camada visual
• Sustentação de longo prazo com tipagem forte e padrões de engenharia

Palavras-chave / Serviços para Freelancing

• Desenvolvimento Headless Shopify
• Desenvolvimento de e-commerce com Nuxt.js
• Integração Shopify Storefront API
• Arquitetura de storefront customizada
• Builds inspiradas em Shopify Hydrogen com Nuxt
• Otimização de performance para e-commerce
• SEO técnico para storefront headless
• Engenharia de frontend orientada à conversão
• Arquitetura GraphQL + TypeScript para e-commerce
• Integração Klaviyo (newsletter / back-in-stock)
• Setup de qualidade com CI/CD para times de frontend

Se você precisa de uma storefront Shopify headless com identidade de marca forte e engenharia sólida, esse é o tipo de projeto que eu entrego.