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