Elsama Luxury Marble

Une plateforme multilingue de marbre et de surfaces architecturales de qualité éditoriale, conçue pour transformer la navigation haut de gamme en demandes commerciales qualifiées.

Elsama Luxury Marble est une application Laravel axée sur le portfolio, conçue pour une entreprise de matériaux haut de gamme nécessitant plus qu'un simple site vitrine. Elle présente des projets, des matériaux, du contenu de blog, des témoignages et le positionnement des services d'une manière qui soutient simultanément la crédibilité de la marque et la conversion des ventes. La plateforme est optimisée pour un public international, avec un routage tenant compte de la locale, une prise en charge RTL et un contenu traduit stocké directement dans le modèle de domaine. Côté opérationnel, la même base de code alimente une expérience publique en Inertia React et une couche Filament CMS/admin pour la gestion du contenu, des demandes de renseignements et des analyses.

Proposition de valeur fondamentale

Performance et évolutivité : L'expérience publique est servie via Inertia v2 avec support SSR, relations chargées avec empressement (eager-loaded), ressources JSON légères, paramètres mis en cache, files d'attente basées sur la base de données et conversion d'images en WebP pour une livraison de pages plus rapide.
Excellence UX/UI : Le frontend utilise un langage visuel éditorial de luxe avec une typographie grand format, des mises en page axées sur l'image, des cartes réactives, des interactions de type « charger plus » pour le blog, un bouton WhatsApp collant pour la conversion et un changement de direction de mise en page tenant compte de la locale.
Sécurité et fiabilité : Les soumissions de demandes sont validées côté serveur, limitées en taux par IP, mises en file d'attente pour livraison et dupliquées à la fois pour l'équipe interne et le prospect. L'interface d'administration est isolée derrière l'authentification Filament, tandis que la suppression logicielle (soft delete) du contenu et la persistance de la locale basée sur la session réduisent le risque opérationnel.

Architecture technique et stack

Frontend

Framework : React 18 avec Inertia.js v2 et points d'entrée SSR dans resources/js/app.tsx et resources/js/ssr.tsx.
État et navigation : Routeur Inertia, useForm, assistants de route via Ziggy et pagination/filtrage côté client pour les vues catalogue et blog.
Style et mouvement : Tailwind CSS, Headless UI, Framer Motion et une palette éditoriale délibérément sombre adaptée à une marque de matériaux haut de gamme.
Modèles d'UI : Shell de mise en page publique, cartes et CTA réutilisables, rendu de contenu multilingue et composition réactive des héros/sections.
Contenu riche : TipTap est disponible pour la création de contenu CMS long format dans le panneau d'administration.

Backend / API

Framework : Laravel 13 avec routage MVC classique et réponses Inertia pour le site public.
Modélisation de domaine : Champs traduits en JSON pour les noms, descriptions, copy SEO et contenu de blog ; liaison de modèle de route basée sur les slugs ; suppressions logicielles sur les entités de catalogue principales.
Accès aux données : Les ressources API dédiées normalisent les URLs de médias, le contenu traduit et les charges utiles relationnelles avant qu'elles n'aient atteint le frontend.
Services métier : Un assistant de traduction résout les fallbacks de locale, un modèle de paramètres met en cache la configuration globale, les analyses sont persistées via une couche de service et les images sont converties en WebP avant stockage.

DevOps et infrastructure

Runtime local : Le projet est conçu pour une chaîne d'outils PHP + Node standard et Laravel Herd. Aucune pile Docker n'est incluse dans le dépôt.
Files d'attente et courrier : La mise en file d'attente en base de données est le chemin par défaut, avec notifications de demande mises en file d'attente et courrier basé sur les journaux configuré pour le développement local.
Stockage : Les médias publics sont écrits sur le disque public et servis depuis storage/app/public.
Pipeline de build : Vite compile le bundle client et le bundle SSR, tandis que les scripts du dépôt lancent également le serveur d'application, l'écouteur de file d'attente et le suivi des journaux ensemble pendant le développement.
Mise en cache : Le cache Laravel est utilisé pour les paramètres globaux, et la configuration peut être échangée vers d'autres pilotes pris en charge lorsque l'environnement l'exige.

Flux de l'architecture

flowchart LR
	Browser[Public Browser] --> Inertia[Inertia React Pages]
	Inertia --> Controllers[Laravel Controllers]
	Controllers --> Resources[API Resources + Locale Manager]
	Controllers --> Models[Eloquent Models + Services]
	Models --> DB[(MySQL / SQLite)]
	Models --> Cache[(Laravel Cache)]
	Controllers --> Queue[(Database Queue)]
	Queue --> Mail[Inquiry Emails]
	Controllers --> Storage[(Public Storage / WebP Media)]
	Admin[Filament Admin] --> Controllers
	Admin --> Models
	Controllers --> Analytics[(Analytics Logs)]

Analyses techniques approfondies

1. Livraison de contenu tenant compte de la locale

Le défi ne consiste pas simplement à traduire des chaînes ; il s'agit de maintenir la cohérence des URLs, de la direction de mise en page et des charges utiles de contenu sur six locales, tout en préservant des slugs conviviaux pour le SEO et un texte lisible pour les entreprises. La solution utilise un préfixe de route {locale}, une persistance de la locale appuyée par session et un LocaleManager qui résout les valeurs traduites à partir des colonnes JSON avec des fallbacks raisonnables. L'arabe est traité comme RTL au niveau de la couche de mise en page, de sorte que le shell public met à jour la direction du document dynamiquement au lieu de s'appuyer sur des modèles dupliqués.

2. Pipeline de demandes axé sur la conversion

Un formulaire de demande de grande valeur doit être rapide, fiable et résistant aux abus. Le contrôleur de contact valide la charge utile côté serveur, la stocke en tant qu'enregistrement de demande et met en file d'attente deux e-mails : un pour l'équipe interne et un en guise de réponse automatique au prospect. Un middleware dédié à la limitation du débit limite les soumissions par IP, ce qui protège la délivrabilité et maintient la boîte de réception des ventes propre sans ajouter de friction pour les prospects légitimes.

3. Catalogue riche en médias et CMS éditorial

Le site présente des matériaux, des projets et des articles comme un catalogue visuel, et non comme des enregistrements de base de données plats. Les contrôleurs chargent avec empressement les données d'image et de relation, les ressources normalisent les URLs de médias et le contenu traduit, et le frontend rend les filtres de catégorie, le chargement progressif du blog et les grandes cartes visuelles avec une complexité côté client minimale. Côté administration, Filament fournit un CMS structuré et un tableau de bord d'analyse afin que les non-développeurs puissent mettre à jour le contenu, gérer les demandes et surveiller les modèles de trafic sans toucher au code de l'application.

ELSAMA