Store GG

E-commerce de jogos de alta performance em Next.js e Node.js. Projeto totalmente focado na eliminação de code smells, arquitetura limpa e UI moderna com Shadcn.

Repositório GitHub

/// 01_RESULTADOS_MEDIDOS_E_IMPACTO

-45%

JS Bundle Size

Redução no Javascript enviado ao cliente

95+

Lighthouse Score

Nota de performance técnica pós-refatoração

Zero

Code Smells

Eliminação de duplicações e acoplamentos severos

/// 02_DIAGRAMA_DE_ARQUITETURA_E_FLUXO

/// NEXT_RSC // STORE_GAMINGLCP: 0.4s

RSC ENGINEServer Rendered HTML

BUNDLE SIZE-45% REDUCED

SHADCN UIZERO CLS

FLOW_TRACE:Client Route -> Next.js RSC Engine -> Cached Query -> Rendered Static HTML + Hydrated Interactive Elements

/// 03_CONTEXTO_DE_NEGÓCIO_E_DESAFIOS

O projeto original apresentava acoplamento severo entre componentes de UI e chamadas de banco de dados, propiciando duplicação de lógica e carregamentos lentos em telas de produto.

Desafios Técnicos Identificados:

>Refatorar a estrutura do Next.js sem quebrar funcionalidades existentes de carrinho e checkout.
>Migrar componentes de cliente desnecessários para Next.js Server Components, reduzindo o bundle JS transportado ao navegador.
>Implementar design system reutilizável com Shadcn UI.

/// 04_DECISÕES_DE_ARQUITETURA

Refatoração estrutural baseada em Server-Driven Data Fetching com Next.js App Router, caching inteligente no servidor e isolamento de componentes de cliente interativos.

Adopção Massiva de React Server Components (RSC)

Busca de dados de catálogo executada no servidor, reduzindo o Javascript do lado do cliente enviado ao browser.

Padronização de Componentes UI

Substituição de CSS inline e estilizações arbitrárias por tokens unificados via Shadcn UI e Tailwind CSS.

/// 05_TRADE_OFFS_E_COMPROMISSOS_TÉCNICOS

DECISÃO ADOTADA:Uso de Server Components para a maioria das páginas de produto

✓ RATIONALE (POR QUE):Melhorou drasticamente o SEO e o LCP da loja.

⚠ DOWNSIDE (TRADE-OFF):Exige gerenciamento rigoroso dos limites entre Server e Client Component ('use client').

TECNOLOGIAS UTILIZADAS NO CASE

Next.jsNode.jsTypeScriptShadcn UITailwind CSSDocker

Ver Todos os Projetos →