Ecommerce Headless Demo (2026)

Una demo de ecommerce headless que separa completamente el backend de gestión de la tienda del frontend de cara al público.

El Proyecto

ecommerce.albertsarle.com es una implementación completa de una tienda online con arquitectura headless: el backend corre en ecommerceapi.albertsarle.com (Laravel + Lunar PHP) y el frontend es una aplicación Nuxt 4 completamente independiente que consume la API REST.

El objetivo del proyecto es demostrar cómo construir un ecommerce moderno, escalable y optimizado para SEO sin depender de plataformas monolíticas como WooCommerce o Shopify. El resultado: una tienda con 514 productos, 6 categorías, carrito de compra, sistema de filtros, y arquitectura preparada para producción real.

Cómo Funciona

Arquitectura Headless

El modelo headless separa dos responsabilidades bien diferenciadas:

1. Backend (Laravel + Lunar PHP) → Gestiona productos, categorías, carrito, pedidos, stock y autenticación. Expone una API REST consumida por el frontend.
2. Frontend (Nuxt 4 + Vue 3) → Renderiza las páginas con SSR, gestiona el estado del usuario con Pinia, y ofrece una experiencia rápida y optimizada.
3. Servicios de soporte → Redis para caché y sesiones, MeiliSearch para búsqueda full-text, PostgreSQL como base de datos principal.

Flujo de compra

1. Descubrimiento → El usuario navega el catálogo (514 productos, 6 categorías) filtrando por categoría, precio, disponibilidad y marca
2. Búsqueda → MeiliSearch ofrece resultados instantáneos con autocomplete
3. Ficha de producto → Galería de imágenes, descripción, especificaciones y productos relacionados
4. Carrito → Gestión persistente con Redis, resumen de pedido y cálculo de envío
5. Checkout → Flujo de autenticación con Laravel Sanctum

Arquitectura Técnica

Backend: Laravel + Lunar PHP

Lunar PHP es un ecommerce engine open-source para Laravel que proporciona los modelos y la lógica de negocio out-of-the-box:

• Gestión de productos con variantes, atributos y precios por divisa
• Sistema de categorías jerárquicas
• Motor de carrito y pedidos
• Admin Hub para gestionar el catálogo

Laravel Sail (Docker) orquesta todos los servicios:

• PHP 8.3 (contenedor app)
• PostgreSQL 16 (base de datos)
• Redis (caché, sesiones y colas)
• MeiliSearch (motor de búsqueda)
• Mailpit (emails de desarrollo)

Seguridad y rendimiento:

• Rate limiting configurado por endpoint (API: 60 req/min, Auth: 5 req/min, Búsqueda: 30 req/min)
• Headers de seguridad (CSP, HSTS, X-Frame-Options)
• Caché de respuestas con Redis
• Eager loading para evitar el problema N+1

Frontend: Nuxt 4 + Vue 3

Nuxt 4 con SSR para un SEO óptimo y First Contentful Paint rápido:

• Páginas renderizadas en el servidor para indexación correcta
• Sitemap dinámico y Schema.org (JSON-LD)
• Open Graph tags para redes sociales
• hreflang para versión castellano y catalán

Estado y datos:

• Pinia para la gestión del estado global (carrito, usuario, filtros)
• useFetch nativo de Nuxt para llamadas API con caché automática
• TypeScript para seguridad de tipos en todo el proyecto

PWA con Workbox:

• Service Worker para caché de assets y respuestas API
• Manifest configurado para instalación como app
• Estrategias de caché diferenciadas para imágenes vs. datos

Servicios Externos

• MeiliSearch: Búsqueda full-text con ranking de relevancia, filtros facetados y autocomplete instantáneo
• Redis: Caché de respuestas API, gestión de sesiones y colas de trabajos en segundo plano
• PostgreSQL 16: Relaciones complejas entre productos, categorías, variantes y pedidos

Stack Tecnológico

Backend

• Laravel 11 & PHP 8.3
• Lunar PHP 1.x (ecommerce engine)
• PostgreSQL 16
• Redis (caché, sesiones, colas)
• MeiliSearch (búsqueda full-text)
• Laravel Sanctum (autenticación API)
• Laravel Sail (Docker)

Frontend

• Nuxt 4 & Vue 3 (Composition API)
• TypeScript
• Pinia (gestión de estado)
• Tailwind CSS & Flowbite
• @nuxtjs/i18n (castellano + catalán)
• @vite-pwa/nuxt (PWA + Workbox)

Infraestructura

• Docker & Docker Compose
• Laravel Sail
• Bruno (colección de tests de API)
• Mailpit (emails de desarrollo)

Características Principales

Catálogo y Búsqueda

• ✅ 514 productos en 6 categorías
• ✅ Filtros por categoría (con contadores), precio, disponibilidad
• ✅ Ordenación configurable (relevancia, precio, novedad)
• ✅ Búsqueda full-text con MeiliSearch
• ✅ Paginación del catálogo
• ✅ Breadcrumbs en la ficha de producto

Experiencia de Usuario

• ✅ SSR para SEO y velocidad
• ✅ Diseño responsive (móvil, tablet, desktop)
• ✅ PWA instalable con caché offline
• ✅ Trust bar (envío, devoluciones, atención)
• ✅ Carrito persistente
• ✅ Páginas estáticas (FAQ, envío, devoluciones, contacto)

SEO y Marketing

• ✅ Server-Side Rendering completo
• ✅ Sitemap dinámico
• ✅ Schema.org / JSON-LD
• ✅ Open Graph tags
• ✅ Multi-idioma con hreflang (ES + CA)
• ✅ URLs semánticas para productos y categorías

Sistema

• ✅ API REST documentada (OpenAPI / Bruno)
• ✅ Rate limiting por endpoint
• ✅ Headers de seguridad
• ✅ Admin Hub (Lunar) para gestión del catálogo
• ✅ Logs estructurados

Conclusiones

El proyecto demuestra que es posible construir un ecommerce headless de calidad profesional con Laravel Lunar + Nuxt 4: la arquitectura es escalable, el SEO funciona correctamente gracias al SSR, y la separación entre backend y frontend permite evolucionar cada capa de forma independiente.

Demo en vivo: https://ecommerce.albertsarle.com

API Backend: https://ecommerceapi.albertsarle.com

Desplegado en marzo de 2026

Desarrollado por Albert Sarlé