Ecommerce Headless Demo (2026)

Una demo d'ecommerce headless que separa completament el backend de gestió de la botiga del frontend de cara al públic

El Projecte

ecommerce.albertsarle.com és una implementació completa d'una botiga online amb arquitectura headless: el backend corre a ecommerceapi.albertsarle.com (Laravel + Lunar PHP) i el frontend és una aplicació Nuxt 4 completament independent que consumeix l'API REST.

L'objectiu del projecte és demostrar com construir un ecommerce modern, escalable i optimitzat per SEO sense dependre de plataformes monolítiques com WooCommerce o Shopify. El resultat: una botiga amb 514 productes, 6 categories, carret de compra, sistema de filtres, i arquitectura preparada per a producció real.

Com Funciona

Arquitectura Headless

El model headless separa dues responsabilitats ben diferenciades:

1. Backend (Laravel + Lunar PHP) → Gestiona productes, categories, carret, comandes, stock i autenticació. Exposa una API REST consumida pel frontend.
2. Frontend (Nuxt 4 + Vue 3) → Renderitza les pàgines amb SSR, gestiona l'estat de l'usuari amb Pinia, i ofereix una experiència ràpida i optimitzada.
3. Serveis de suport → Redis per a caché i sessions, MeiliSearch per a cerca full-text, PostgreSQL com a base de dades principal.

Flux de compra

1. Descoberta → L'usuari navega el catàleg (514 productes, 6 categories) filtrant per categoria, preu, disponibilitat i marca
2. Cerca → MeiliSearch ofereix resultats instantanis amb autocomplete
3. Fitxa de producte → Galeria d'imatges, descripció, especificacions i productes relacionats
4. Carret → Gestió persistent amb Redis, resum de comanda i càlcul d'enviament
5. Checkout → Flux d'autenticació amb Laravel Sanctum

Arquitectura Tècnica

Backend: Laravel + Lunar PHP

Lunar PHP és un ecommerce engine open-source per a Laravel que proporciona els models i la lògica de negoci out-of-the-box:

• Gestió de productes amb variants, atributs i preus per divisa
• Sistema de categories jeràrquiques
• Motor de carret i comandes
• Admin Hub per gestionar el catàleg

Laravel Sail (Docker) orquestra tots els serveis:

• PHP 8.3 (contenidor app)
• PostgreSQL 16 (base de dades)
• Redis (caché, sessions i cues)
• MeiliSearch (motor de cerca)
• Mailpit (emails de desenvolupament)

Seguretat i rendiment:

• Rate limiting configurat per endpoint (API: 60 req/min, Auth: 5 req/min, Cerca: 30 req/min)
• Headers de seguretat (CSP, HSTS, X-Frame-Options)
• Caché de respostes amb Redis
• Eager loading per evitar el problema N+1

Frontend: Nuxt 4 + Vue 3

Nuxt 4 amb SSR per a un SEO òptim i First Contentful Paint ràpid:

• Pàgines renderitzades al servidor per a indexació correcta
• Sitemap dinàmic i Schema.org (JSON-LD)
• Open Graph tags per a xarxes socials
• hreflang per a versió castellà i català

Estat i dades:

• Pinia per a la gestió de l'estat global (carret, usuari, filtres)
• useFetch natiu de Nuxt per a crides API amb caché automàtica
• TypeScript per a seguretat de tipus en tot el projecte

PWA amb Workbox:

• Service Worker per a caché d'assets i respostes API
• Manifest configurat per a instal·lació com a app
• Estratègies de caché diferenciades per a imatges vs. dades

Serveis Externs

• MeiliSearch: Cerca full-text amb rànquing de rellevància, filtres facetats i autocomplete instantani
• Redis: Caché de respostes API, gestió de sessions i cues de treballs en segon pla
• PostgreSQL 16: Relacions complexes entre productes, categories, variants i comandes

Stack Tecnològic

Backend

• Laravel 11 & PHP 8.3
• Lunar PHP 1.x (ecommerce engine)
• PostgreSQL 16
• Redis (caché, sessions, cues)
• MeiliSearch (cerca full-text)
• Laravel Sanctum (autenticació API)
• Laravel Sail (Docker)

Frontend

• Nuxt 4 & Vue 3 (Composition API)
• TypeScript
• Pinia (gestió d'estat)
• Tailwind CSS & Flowbite
• @nuxtjs/i18n (castellà + català)
• @vite-pwa/nuxt (PWA + Workbox)

Infraestructura

• Docker & Docker Compose
• Laravel Sail
• Bruno (col·lecció de tests d'API)
• Mailpit (emails de desenvolupament)

Característiques Principals

Catàleg i Cerca

• ✅ 514 productes en 6 categories
• ✅ Filtres per categoria (amb comptadors), preu, disponibilitat
• ✅ Ordenació configurable (rellevància, preu, novetat)
• ✅ Cerca full-text amb MeiliSearch
• ✅ Paginació del catàleg
• ✅ Breadcrumbs a la fitxa de producte

Experiència d'Usuari

• ✅ SSR per a SEO i velocitat
• ✅ Disseny responsive (mòbil, tablet, desktop)
• ✅ PWA instal·lable amb caché offline
• ✅ Trust bar (enviament, devolucions, atenció)
• ✅ Carret persistent
• ✅ Pàgines estàtiques (FAQ, enviament, devolucions, contacte)

SEO i Marketing

• ✅ Server-Side Rendering complet
• ✅ Sitemap dinàmic
• ✅ Schema.org / JSON-LD
• ✅ Open Graph tags
• ✅ Multi-idioma amb hreflang (ES + CA)
• ✅ URLs semàntiques per productes i categories

Sistema

• ✅ API REST documentada (OpenAPI / Bruno)
• ✅ Rate limiting per endpoint
• ✅ Headers de seguretat
• ✅ Admin Hub (Lunar) per gestió del catàleg
• ✅ Logs estructurats

Conclusions

El projecte demostra que és possible construir un ecommerce headless de qualitat professional amb Laravel Lunar + Nuxt 4: l'arquitectura és escalable, el SEO funciona correctament gràcies al SSR, i la separació entre backend i frontend permet evolucionar cada capa de forma independent.

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

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

Desplegat el març de 2026

Desenvolupat per Albert Sarlé