NextStore Boutique

Aplicación de e-commerce full-stack inspirada en la experiencia de Shapermint, construida con Next.js 14, Supabase y preparada para desplegarse en Vercel.

Características principales

• 📦 Catálogo dinámico con portada, PDP, carrito, checkout, página de agradecimiento y sección de upsells.
• 🪄 Diseño editorial responsive con componentes reutilizables y tema inspirado en boutiques shapewear.
• 🛒 Estado del carrito persistente con Zustand y experiencia de carrito lateral.
• 🔐 Integración con Supabase para productos, upsells y órdenes (modo demo con seeds locales cuando no hay credenciales).
• 🚀 Server Components, Server Actions y rutas API listas para entornos serverless en Vercel.

Requisitos previos

• Node.js 18+.
• Cuenta y proyecto en Supabase (opcional para modo producción).
• Variables de entorno de Supabase:
  • NEXT_PUBLIC_SUPABASE_URL
  • NEXT_PUBLIC_SUPABASE_ANON_KEY
  • SUPABASE_SERVICE_ROLE_KEY (solo si deseas ejecutar procesos privilegiados o seeds desde scripts server-side).

Instalación

pnpm install # o npm install / yarn install
pnpm dev     # http://localhost:3000

Configuración de Supabase

1. Crea un nuevo proyecto en Supabase.
2. Ejecuta el script SQL ubicado en supabase/schema.sql para crear tablas de productos, upsells y órdenes.
3. (Opcional) Carga datos de ejemplo con supabase/seed.sql.
4. Crea un archivo .env.local en la raíz del proyecto con las llaves provistas por Supabase:

NEXT_PUBLIC_SUPABASE_URL=tu-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=tu-anon-key
SUPABASE_SERVICE_ROLE_KEY=tu-service-role

Si no configuras las variables, la aplicación funciona en modo demo utilizando los datos estáticos definidos en lib/mock-data.ts.

Scripts disponibles

• pnpm dev: entorno de desarrollo.
• pnpm build: build de producción.
• pnpm start: inicia la app compilada.
• pnpm lint: ejecuta ESLint con las reglas de Next.js.

Despliegue en Vercel

1. Haz fork del repositorio y conéctalo a Vercel.
2. Configura las variables de entorno en el dashboard de Vercel (Settings → Environment Variables).
3. Despliega; Next.js + Supabase funcionan out-of-the-box en Vercel Functions.

Estructura relevante

app/
  (store)/
    page.tsx              # Home
    cart/page.tsx         # Carrito
    checkout/page.tsx     # Checkout
    product/[slug]/page.tsx# PDP
    thank-you/page.tsx    # Gracias
    upsells/page.tsx      # Upsells
  api/checkout/route.ts   # API para crear órdenes
components/
  cart/                   # UI del carrito y proveedor
  layout/                 # Header y Footer
  product/                # Componentes de catálogo
lib/
  mock-data.ts            # Datos demo
  queries.ts              # Fetchers (Supabase + fallback)
  supabaseClient.ts       # Cliente Supabase SSR/CSR
  utils.ts                # Utilidades (currency, cn)
store/
  cart-store.ts           # Zustand store con persistencia
supabase/
  schema.sql              # Tablas
  seed.sql                # Datos de ejemplo

Próximos pasos sugeridos

• Conectar con pasarelas de pago (Stripe) desde el checkout API.
• Implementar autenticación con Supabase Auth para cuentas de clientes.
• Añadir recomendaciones personalizadas con RLS + funciones edge.

Disfruta creando experiencias de e-commerce con Next.js ⚡️