apps/storefront-template

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.

Começar → Quero white-label

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

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

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

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

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

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.

Voltar ao K-Shop → Solicitar white-label