Pular para o conteúdo

Do clone ao storefront
em 1 dia

Skeleton Next.js 15 consumindo as 8 libs. Fork, configure 3 env vars, customize logo + cor - está no ar.

Agendar diagnóstico grátis Começar

apps/storefront-template

O que vem dentro

Tudo que uma loja real precisa, pronto para customizar.

  • Home

    Hero carousel + featured products + CTA

  • Listagem com filtros facetados

    Filtros por categoria, brand, preço, tag

  • Detalhe de produto

    Galeria, variantes, preço por lista, add to cart

  • Carrinho persistente

    UUID + expiry, sync com Odoo quando logado

  • Wishlist completa

    FAB, drawer, badge no header, sync logado

  • Auth Supabase

    Login email/senha + social, recuperação, perfil

  • Checkout completo

    Endereços, fretes, métodos pagamento, NF-e

  • Dashboard cliente

    Pedidos, downloads, endereços, dados pessoais

Getting started

5 passos do clone à customização.

  1. 1

    Clone e instale

    Fork o monorepo, instale dependências com pnpm. Tudo pronto para typecheck e tests verdes.

    git clone git@github.com:kmee/k-shop-libs.git
cd k-shop-libs
pnpm install
pnpm typecheck    # verde
pnpm test         # verde
  2. 2

    Configure o template

    Edite .env.local com URLs do seu Odoo, Elasticsearch e Supabase. Sem segredo, são 3 backends.

    # Odoo / Shopinvader
NEXT_PUBLIC_ODOO_BASE_URL=https://shop.example.com/shop

# Elasticsearch (server-side)
ELASTICSEARCH_URL=https://elastic.example.com
ELASTICSEARCH_API_KEY=YOUR-KEY
ELASTICSEARCH_PRODUCT_INDEX=products

# Supabase
NEXT_PUBLIC_SUPABASE_URL=https://YOUR.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR-ANON-KEY
  3. 3

    Suba o dev server

    Hero carousel default, listagem de featured products do seu Elasticsearch, header com search/wishlist/cart, footer.

    pnpm --filter storefront-template dev
# -> http://localhost:3000
  4. 4

    Customize o branding

    Logo, cores via tokens HSL, footer. Toda a UI segue automaticamente.

    /* app/globals.css */
@import "@kmee/shop-ui/tokens.css";

@layer base {
  :root {
    --primary: 25 100% 50%;          /* sua cor */
    --primary-foreground: 0 0% 100%;
    --radius: 0.75rem;
  }
}
  5. 5

    Customize páginas e fluxos

    Sobrescreva páginas que precisar. Adicione novos componentes consumindo os providers do shop-react.

    // app/produto-customizado/page.tsx
"use client"
import { useCart } from "@kmee/shop-react"
import { ProductCard } from "@kmee/shop-ui"

export default function Page() {
  const { addToCart } = useCart()
  // ...
}

Quão fundo dá pra customizar

Do branding superficial ao adapter customizado.

  • Branding visual

    1 dia

    Cores, fonte, raio, logo, footer. Sem tocar em código TypeScript - só CSS vars.

  • Conteúdo das páginas

    2-5 dias

    Textos, imagens, banners do hero, links do footer, FAQ. JSX direto, fácil de mexer.

  • Novos fluxos de checkout

    1-4 semanas

    Cotação B2B, aprovação por alçada, pagamento customizado. Componha com providers existentes.

  • Integração com gateway/ERP terceiro

    1-3 semanas

    Adapter customizado plugando como subclass de OdooHttpClient ou ProductService.

Modo offline para avaliar

Sem backend real? Mockando, dá pra ver a UI rodando.

Se você quiser apenas avaliar a UI sem ter Odoo + Elasticsearch + Supabase configurados, é possível mockar os adapters retornando dados estáticos. O storefront-template tem fallback com FALLBACK_SLIDES e fake products - abra app/page.tsx e lib/server.ts para o ponto de entrada do mock.

Para avaliação séria com dados reais, sugerimos colar uma instância Odoo de demo da KMEE. Pergunte no diagnóstico.

Quer um template white-label customizado?

A KMEE entrega o template já com sua identidade visual, fluxos B2B/B2C ajustados e integração com seu Odoo. Você recebe pronto para deploy.

Agendar diagnóstico grátis Voltar ao K-Shop