ARI Shopping Headless Storefront v4.0
Código base moderno para la tienda online ARI Shopping.
Stack
- Next.js 15 con App Router y Server Components.
- React 19 y TypeScript estricto.
- Tailwind CSS 4.
- Componentes accesibles estilo shadcn/ui sobre Radix UI.
- Motion for React para microinteracciones.
- Zustand con persistencia local para el carrito.
- Adaptadores headless para catálogo local, Shopify Storefront API o Medusa.
next/imagepara optimización de imágenes.- Docker multi-stage con salida standalone.
Funcionalidad incluida
- Header promocional cyan/amarillo/magenta.
- Búsqueda predictiva.
- Hero promocional Bento.
- Carrusel horizontal de novedades.
- Catálogo con búsqueda y filtros sin recarga.
- PDP dinámica con galería, zoom, variantes y recomendados.
- Botón móvil persistente para añadir al carrito.
- Carrito lateral con Zustand y persistencia.
- SEO y metadata con App Router.
- Endpoint
/api/health. - Arquitectura preparada para Shopify o Medusa.
Desarrollo
cp .env.example .env.local
npm install
npm run dev
Variables headless
El valor predeterminado es:
HEADLESS_PROVIDER=mock
Proveedores preparados:
mock
shopify
medusa
Los adaptadores Shopify y Medusa incluyen la conexión inicial y un punto claro para completar el mapeo al modelo Product.
Compatibilidad GitOps
El contenedor Next.js escucha en el puerto 80, por lo que mantiene compatibilidad con el Service y Deployment existentes que apuntaban al frontend Nginx.