Saltar al contenido

Del clone al storefront
en 1 día

Skeleton Next.js 15 consumiendo las 8 libs. Fork, configure 3 env vars, personalice logo + color - está al aire.

Agendar diagnóstico gratis Empezar

apps/storefront-template

Qué viene dentro

Todo lo que una tienda real necesita, listo para personalizar.

  • Home

    Hero carousel + featured products + CTA

  • Listado con filtros facetados

    Filtros por categoría, brand, precio, tag

  • Detalle de producto

    Galería, variantes, precio por lista, add to cart

  • Carrito persistente

    UUID + expiry, sync con Odoo cuando logueado

  • Wishlist completa

    FAB, drawer, badge en header, sync logueado

  • Auth Supabase

    Login email/contraseña + social, recuperación, perfil

  • Checkout completo

    Direcciones, envíos, métodos de pago, NF-e

  • Dashboard cliente

    Pedidos, descargas, direcciones, datos personales

Getting started

5 pasos del clone a la personalización.

  1. 1

    Clone e instale

    Fork el monorepo, instale dependencias con pnpm. Todo listo para typecheck y 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 el template

    Edite .env.local con URLs de su Odoo, Elasticsearch y Supabase. Sin secreto, son 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 el dev server

    Hero carousel default, listado de featured products de su Elasticsearch, header con search/wishlist/cart, footer.

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

    Personalice el branding

    Logo, colores vía tokens HSL, footer. Toda la UI sigue automáticamente.

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

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

    Personalice páginas y flujos

    Sobrescriba páginas que necesite. Agregue nuevos componentes consumiendo los providers del shop-react.

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

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

Cuán profundo se puede personalizar

Del branding superficial al adapter customizado.

  • Branding visual

    1 día

    Colores, fuente, radio, logo, footer. Sin tocar código TypeScript - solo CSS vars.

  • Contenido de las páginas

    2-5 días

    Textos, imágenes, banners del hero, links del footer, FAQ. JSX directo, fácil de modificar.

  • Nuevos flujos de checkout

    1-4 semanas

    Cotización B2B, aprobación por jerarquía, pago customizado. Componga con providers existentes.

  • Integración con gateway/ERP terceiro

    1-3 semanas

    Adapter customizado enchufando como subclass de OdooHttpClient o ProductService.

¿Quiere un template white-label customizado?

KMEE entrega el template ya con su identidad visual, flujos B2B/B2C ajustados e integración con su Odoo. Lo recibe listo para deploy.

Agendar diagnóstico gratis Volver al K-Shop