L'Arc des Étoiles.
Éveiller les étoiles qui brillent en chacun
Année.
2026
Mission.
Ce projet consiste en le développement d’une application e-commerce headless pour L’Arc des Étoiles, un cabinet de psychologie. L'application est pensée pour offrir une expérience utilisateur fluide. Le front-end est conçu avec Shopify Hydrogen, tandis que toute la gestion du catalogue produits, des clients, des commandes et du contenu repose sur Shopify.
Les visiteurs peuvent parcourir le site, découvrir les services proposés, explorer une galerie immersive et acquérir différents types de produits : articles physiques, contenus numériques et livres disponibles en impression à la demande grâce à l’intégration de Lulu.
L’un des aspects clés du projet réside dans la gestion du contenu éditorial. Celui-ci est entièrement piloté via l’administration Shopify à l’aide de métaobjets et de requêtes vers l’API Storefront, permettant de faire évoluer facilement la structure des pages et les textes sans intervention sur le code. Cette approche garantit à la fois flexibilité, autonomie côté administration et une interface publique sur mesure.
Gestion du Contenu.
L’interface publique est entièrement construite à partir de données structurées dans Shopify. Les différentes sections des pages (accueil, à propos, services, etc.) sont définies via des métaobjets, permettant de séparer clairement la structure du site (gérée en React / Hydrogen) du contenu éditorial, modifiable depuis Shopify.
Chaque type de contenu (titres, textes enrichis, images, champs spécifiques) est récupéré dynamiquement via l’API Storefront, puis injecté dans des composants React dédiés. Cette approche permet de faire évoluer le contenu du site en continu, sans intervention technique.
En complément, les métadonnées SEO (titres, descriptions, images Open Graph) sont également alimentées depuis ces mêmes structures, assurant une cohérence entre le contenu affiché, le référencement et le partage sur les réseaux sociaux.
Enfin, le rendu côté serveur (SSR) est optimisé avec des stratégies de cache adaptées : les contenus éditoriaux bénéficient d’un cache longue durée avec revalidation, tandis que les données plus sensibles (produits, prix, stock) sont rafraîchies plus fréquemment afin de garantir leur exactitude.
Plusieurs types de produits pris en charge.
La boutique regroupe différents produits aux logiques d'exécution différentes, tout en conservant une expérience d’achat unifiée pour l’utilisateur
Plusieurs types de produits pris en charge.
La boutique regroupe différents produits aux logiques d'exécution différentes, tout en conservant une expérience d’achat unifiée pour l’utilisateur
01
Produits physiques
Les articles physiques sont gérés de manière classique via Shopify, avec leurs fiches produits, variantes et règles de livraison. Le panier consolide automatiquement les quantités, les prix et les frais associés avant le passage en caisse.
02
Contenus numériques
Les produits immatériels suivent le même flux d’achat que les produits physiques. Une fois le paiement effectué, l’accès aux contenus ou le téléchargement des fichiers est automatiquement délivré selon la configuration définie dans l’administration Shopify.
03
Livres en impression à la demande
L’intégration avec Lulu permet de gérer l’impression des ouvrages à la demande. Cette approche élimine la gestion de stock traditionnel et permet de produire les livres uniquement après commande, réduisant ainsi les invendus et les contraintes logistiques.
Processus d'achat.
Le parcours d'achat relie le storefront développé avec Hydrogen au checkout sécurisé de Shopify, tout en intégrant les outils logistiques nécessaires à l'exécution des commandes.
Technologies.
Le projet utilise le framework Hydrogen pour bâtir une expérience e-commerce découplée (Headless), connectée directement à l'API Storefront de Shopify. L'application s'appuie sur React Router v7 en mode SSR (Server-Side Rendering) pour garantir un affichage instantané des contenus et une gestion fluide des données structurées.
TypeScript
React
Shopify
Hydrogen
React Router (v7)
Tailwind CSS
Radix UI
Embla Carousel
GraphQL
Vite