RJjstore

Moda premium editorial · checkout no WhatsApp

Lojas de roupa de marca vendem por foto no Instagram, sem uma vitrine com cara de grife que transmita desejo e exclusividade.

• 01Next.js 14 (App Router) sem nenhuma dependência pesada de e-commerce: zero carrinho de terceiros, zero CMS, zero state manager externo. Só f…+

  LER O DETALHE TÉCNICO

  Next.js 14 (App Router) sem nenhuma dependência pesada de e-commerce: zero carrinho de terceiros, zero CMS, zero state manager externo. Só framer-motion, Lenis (smooth scroll) e next/font (Cormorant Garamond para os títulos editoriais, Inter para o resto). O README documenta o próprio orçamento de performance: First Load JS ≈ 156 kB na home, com todas as animações resolvidas em CSS e Framer Motion em vez de bibliotecas de canvas ou WebGL. É a decisão certa para um projeto onde o produto é a fotografia, não um efeito 3D.

• 02O carrinho é um Context puro (CartProvider) guardando { id, size, qty }[]. A chave de identidade de uma linha é o par produto e tamanho, não…+

  LER O DETALHE TÉCNICO

  O carrinho é um Context puro (CartProvider) guardando { id, size, qty }[]. A chave de identidade de uma linha é o par produto e tamanho, não só o produto, então a mesma peça em P e G vira duas linhas independentes. A persistência em localStorage usa um useRef como guarda de hidratação: o primeiro useEffect lê o storage e popula o state, e só um segundo useEffect, que checa a ref, volta a escrever. Sem essa guarda, o efeito de escrita dispararia no primeiro render com array vazio e apagaria o carrinho salvo antes mesmo de ele ser lido.

• 03Tamanho é obrigatório antes de qualquer conversão. O ProductDetail mantém um ensureSize() que bloqueia o "Adicionar à sacola" e acende um av…+

  LER O DETALHE TÉCNICO

  Tamanho é obrigatório antes de qualquer conversão. O ProductDetail mantém um ensureSize() que bloqueia o "Adicionar à sacola" e acende um aviso inline se nada foi escolhido, mas o botão de WhatsApp nunca fica desabilitado: sem tamanho, ele monta a mensagem com "a combinar" no lugar, pra não perder o lead por fricção. No carrinho completo, orderMessage() agrega todas as linhas num único texto formatado (produto, marca, tamanho, subtotal, total em negrito markdown do WhatsApp) e abre o wa.me com encodeURIComponent. Todo o fluxo de conversão termina fora do app, sem backend e sem gateway de pagamento.

• 04A estética "editorial de luxo" é construída em camadas de motion coordenadas, não em uma única lib de efeitos. O LookbookScroll fixa a seção…+

  LER O DETALHE TÉCNICO

  A estética "editorial de luxo" é construída em camadas de motion coordenadas, não em uma única lib de efeitos. O LookbookScroll fixa a seção (position: sticky) e usa useScroll e useTransform do Framer Motion pra mapear o progresso de rolagem em três transforms independentes: o trilho horizontal desliza num sentido, a imagem dentro de cada card contra-desliza em outro (scale-125 mais imgX) e a legenda se move num terceiro, criando parallax multicamada só com CSS transforms. O Spotlight (luz que segue o cursor em soft-light) é implementado com useMotionValue e useSpring, e se desliga sozinho via matchMedia('(hover: hover) and (pointer: fine)') e useReducedMotion. É luxo visual que não penaliza mobile nem acessibilidade. O toggle de tema entre Areia/Espresso e Branco evita flash de tema errado com um script inline e bloqueante no head que lê o localStorage e aplica data-theme antes da hidratação do React. E os detalhes "neo-skeuomórficos" (relevo sutil nos swatches de cor, profundidade no botão sólido) vivem isolados num único arquivo de tokens (lib/theme.ts) pra não vazar pro resto da UI, que é deliberadamente flat.

CONSTRUÍDO COM — Next.js · TypeScript · Tailwind · Framer Motion · LenisCÓDIGO ↗

Editorial de luxo · checkout no WhatsApp

PROJETO AUTORAL · DEMO

[ QUERO ALGO PARECIDO ]