[{"data":1,"prerenderedAt":474},["ShallowReactive",2],{"portfolio-doc-cenas-nitrogen-en":3},{"id":4,"title":5,"body":6,"description":451,"extension":452,"meta":453,"navigation":466,"path":467,"seo":468,"stem":469,"__hash__":470,"baseSlug":471,"localeTag":472,"image":455,"category":454,"stack":457,"tags":473,"projectUrl":456,"date":465,"featured":466},"portfolio/portfolio/cenas-nitrogen.md","CENAS x NITROGEN",{"type":7,"value":8,"toc":428},"minimark",[9,14,31,34,41,45,48,79,83,133,137,142,165,169,193,196,200,204,215,219,230,233,237,251,255,269,273,288,292,295,322,325,329,332,346,349,353,356,381,385,419,422],[10,11,13],"h2",{"id":12},"project-overview","Project Overview",[15,16,17,18,22,23,26,27,30],"p",{},"CENAS is a ",[19,20,21],"strong",{},"headless Shopify storefront"," I designed and developed end-to-end using ",[19,24,25],{},"Nuxt 4"," and the ",[19,28,29],{},"Nitrogen architecture"," (a Nuxt approach inspired by Shopify Hydrogen).",[15,32,33],{},"This project started as a strong visual concept and evolved into a production-ready commerce platform with a full customer journey: catalog discovery, product pages, cart, checkout handoff, account area, address management, search, localization, newsletter, and back-in-stock flows.",[15,35,36,37,40],{},"The goal was not just to build a beautiful storefront, but to build a ",[19,38,39],{},"stable, scalable, maintainable e-commerce application"," I could confidently run in production.",[10,42,44],{"id":43},"my-role","My Role",[15,46,47],{},"I built this project solo and owned the entire delivery lifecycle:",[49,50,51,55,58,61,64,67,70,73,76],"ul",{},[52,53,54],"li",{},"Product thinking and UX direction",[52,56,57],{},"Frontend architecture and component system",[52,59,60],{},"Shopify Storefront API integration",[52,62,63],{},"Data modeling with GraphQL fragments/operations",[52,65,66],{},"State management with Pinia",[52,68,69],{},"Performance and SEO optimization",[52,71,72],{},"API hardening (validation, payload limits, rate limiting)",[52,74,75],{},"Testing and CI quality gates",[52,77,78],{},"Ongoing refactoring for long-term maintainability",[10,80,82],{"id":81},"stack","Stack",[49,84,85,91,97,103,109,115,121,127],{},[52,86,87,90],{},[19,88,89],{},"Framework:"," Nuxt 4, Vue 3, TypeScript",[52,92,93,96],{},[19,94,95],{},"Commerce:"," Shopify Storefront API (GraphQL)",[52,98,99,102],{},[19,100,101],{},"Architecture:"," Nitrogen-style composables + server proxy + typed operations",[52,104,105,108],{},[19,106,107],{},"State:"," Pinia + persisted state plugin",[52,110,111,114],{},[19,112,113],{},"Styling/UI:"," Tailwind CSS v4, custom typography system",[52,116,117,120],{},[19,118,119],{},"Media/UX:"," Nuxt Image, Embla Carousel, GSAP, OGL, Lenis",[52,122,123,126],{},[19,124,125],{},"Marketing/Tracking:"," Klaviyo, Google Analytics/gtag, Vercel Analytics & Speed Insights",[52,128,129,132],{},[19,130,131],{},"Tooling:"," GraphQL Code Generator, ESLint, Vitest, GitHub Actions CI",[10,134,136],{"id":135},"what-i-built","What I Built",[138,139,141],"h3",{"id":140},"full-headless-commerce-experience","Full Headless Commerce Experience",[49,143,144,147,150,153,156,159,162],{},[52,145,146],{},"Dynamic collection/category pages with filtering, sorting, and pagination",[52,148,149],{},"Product detail pages with media galleries, variants, size guide, recommendations, and rich product content",[52,151,152],{},"Cart drawer and cart line management (add/update/remove)",[52,154,155],{},"Authentication flows: register, login, recover password, reset password",[52,157,158],{},"Account area: profile context, orders, saved addresses (add/edit/delete + default address)",[52,160,161],{},"Predictive and full search experience",[52,163,164],{},"Localization-aware storefront behavior (country/language/currency)",[138,166,168],{"id":167},"modular-server-layer-for-shopify","Modular Server Layer for Shopify",[15,170,171,172,176,177,176,180,176,183,176,186,176,189,192],{},"I implemented a server-side proxy and organized operations by domain (",[173,174,175],"code",{},"cart",", ",[173,178,179],{},"customer",[173,181,182],{},"product",[173,184,185],{},"collection",[173,187,188],{},"search",[173,190,191],{},"localization","), with typed GraphQL operations and reusable fragments.",[15,194,195],{},"This structure keeps the frontend clean, secures credentials, and makes feature work faster and safer.",[10,197,199],{"id":198},"engineering-solutions-that-made-it-stable","Engineering Solutions That Made It Stable",[138,201,203],{"id":202},"_1-typed-graphql-workflow","1) Typed GraphQL Workflow",[49,205,206,209,212],{},[52,207,208],{},"Codegen-generated TypeScript types for queries/mutations",[52,210,211],{},"Typed operation wrappers for each commerce domain",[52,213,214],{},"Safer refactors and fewer runtime surprises",[138,216,218],{"id":217},"_2-hardened-api-proxies","2) Hardened API Proxies",[49,220,221,224,227],{},[52,222,223],{},"Request body validation",[52,225,226],{},"Content-length guards against oversized payloads",[52,228,229],{},"In-memory rate limiting per endpoint namespace/IP",[15,231,232],{},"This reduced risk in external integrations (Shopify/Klaviyo) and improved resilience under invalid or abusive traffic.",[138,234,236],{"id":235},"_3-performance-first-decisions","3) Performance-First Decisions",[49,238,239,242,245,248],{},[52,240,241],{},"Nuxt image optimization and modern formats",[52,243,244],{},"Non-blocking client bootstrap for smoother initial rendering",[52,246,247],{},"Bounded GraphQL cache strategy (TTL + LRU behavior)",[52,249,250],{},"Deferred analytics/lenis initialization to avoid competing with critical rendering",[138,252,254],{"id":253},"_4-seo-foundation-for-commerce","4) SEO Foundation for Commerce",[49,256,257,260,263,266],{},[52,258,259],{},"Canonical URLs",[52,261,262],{},"Open Graph and Twitter metadata on key pages",[52,264,265],{},"Runtime-config-driven site URL support",[52,267,268],{},"Better discoverability for product/collection/search pages",[138,270,272],{"id":271},"_5-quality-gates-and-maintainability","5) Quality Gates and Maintainability",[49,274,275,278,285],{},[52,276,277],{},"Linting, Nuxt type-checking, and unit tests as recurring quality gates (including CI workflows)",[52,279,280,281,284],{},"Typed error helpers replacing broad ",[173,282,283],{},"any","-style handling",[52,286,287],{},"Clear improvement roadmap executed in incremental commits",[10,289,291],{"id":290},"delivery-story-from-visual-build-to-production-hardening","Delivery Story (From Visual Build to Production Hardening)",[15,293,294],{},"A key part of this project was the progression:",[296,297,298,304,310,316],"ol",{},[52,299,300,303],{},[19,301,302],{},"Visual and UX build-out"," (new interface, mobile improvements, richer product/collection experiences)",[52,305,306,309],{},[19,307,308],{},"Core commerce features"," (cart, auth, account, filters, search, localization, Klaviyo)",[52,311,312,315],{},[19,313,314],{},"Technical hardening"," (analytics unification, proxy security, tests + CI, type-safety, caching, SEO, runtime config)",[52,317,318,321],{},[19,319,320],{},"Final stabilization pass"," (lint/typecheck cleanup and operational consistency)",[15,323,324],{},"This is exactly how I like to deliver freelance commerce projects: fast iteration first, then systematic hardening until the app is reliable.",[10,326,328],{"id":327},"design-and-frontend-direction","Design and Frontend Direction",[15,330,331],{},"CENAS was built with a deliberate visual voice:",[49,333,334,337,340,343],{},[52,335,336],{},"Strong editorial typography",[52,338,339],{},"Custom hero and category interactions",[52,341,342],{},"Motion and transitions that support brand feel without sacrificing UX clarity",[52,344,345],{},"Responsive behavior tailored for mobile and desktop shopping journeys",[15,347,348],{},"The result is a storefront that feels distinctive while remaining practical and conversion-oriented.",[10,350,352],{"id":351},"why-this-project-matters-in-my-portfolio","Why This Project Matters in My Portfolio",[15,354,355],{},"This case study demonstrates that I can deliver:",[49,357,358,363,369,375],{},[52,359,360],{},[19,361,362],{},"End-to-end headless commerce implementation",[52,364,365,368],{},[19,366,367],{},"Nuxt + Shopify architecture"," that is production-ready",[52,370,371,374],{},[19,372,373],{},"Performance, SEO, and integration hardening"," beyond surface-level UI work",[52,376,377,380],{},[19,378,379],{},"Long-term maintainability"," with typed systems and clear engineering standards",[10,382,384],{"id":383},"freelance-keywords-services","Freelance Keywords / Services",[49,386,387,390,393,395,398,401,404,407,410,413,416],{},[52,388,389],{},"Headless Shopify development",[52,391,392],{},"Nuxt.js e-commerce development",[52,394,60],{},[52,396,397],{},"Custom storefront architecture",[52,399,400],{},"Shopify Hydrogen-inspired builds with Nuxt",[52,402,403],{},"Performance optimization for e-commerce",[52,405,406],{},"Technical SEO for headless storefronts",[52,408,409],{},"Conversion-focused frontend engineering",[52,411,412],{},"GraphQL + TypeScript commerce architecture",[52,414,415],{},"Klaviyo integration (newsletter / back-in-stock)",[52,417,418],{},"CI/CD quality setup for frontend teams",[420,421],"hr",{},[15,423,424,425,427],{},"If you need a custom ",[19,426,21],{}," with strong branding and serious engineering quality, this is the type of project I deliver.",{"title":429,"searchDepth":430,"depth":430,"links":431},"",2,[432,433,434,435,440,447,448,449,450],{"id":12,"depth":430,"text":13},{"id":43,"depth":430,"text":44},{"id":81,"depth":430,"text":82},{"id":135,"depth":430,"text":136,"children":436},[437,439],{"id":140,"depth":438,"text":141},3,{"id":167,"depth":438,"text":168},{"id":198,"depth":430,"text":199,"children":441},[442,443,444,445,446],{"id":202,"depth":438,"text":203},{"id":217,"depth":438,"text":218},{"id":235,"depth":438,"text":236},{"id":253,"depth":438,"text":254},{"id":271,"depth":438,"text":272},{"id":290,"depth":430,"text":291},{"id":327,"depth":430,"text":328},{"id":351,"depth":430,"text":352},{"id":383,"depth":430,"text":384},"Headless Shopify storefront em Nuxt 4 com arquitetura Nitrogen, foco em performance, SEO técnico e engenharia escalável.","md",{"category":454,"image":455,"projectUrl":456,"stack":457,"tags":458,"date":465,"featured":466},"Code","/images/works/cenas.png","https://cenas.com.br/","Nuxt 4 + Shopify Storefront API + TypeScript + GraphQL",[25,459,460,461,462,463,464],"Shopify","Headless Commerce","GraphQL","TypeScript","SEO","Performance","2026-03-01",true,"/portfolio/cenas-nitrogen",{"title":5,"description":451},"portfolio/cenas-nitrogen","4Jyv0uL6qJ70-ACNxm_PzZRiUgr5lADfK4qyZOxCeb8","cenas-nitrogen","default",[25,459,460,461,462,463,464],1773091123858]