Le Brazier

Une refonte multi-établissements avec backoffice Directus avancé : live preview, versioning et visual editor.

Type
Refonte site multi-établissements
Stack Technique
Nuxt 4
Directus
Tailwind 4
Zod

Contexte & Enjeux

Le Brazier, entreprise de grillades haut de gamme, souhaitait renforcer son identité de marque sur un marché concurrentiel. Le site historique, techniquement daté et difficile à maintenir, a été entièrement reconstruit pour gagner en contenu et en autonomie éditoriale via un backoffice Directus.

J'ai développé le site V2 à partir d'un design Figma, sans cahier des charges — l'analyse fonctionnelle était à déduire directement des maquettes. J'ai conçu le schéma de base de données et les collections, avec carte blanche complète, tout en formant et supervisant un stagiaire.

Frontend

  1. 01.

    Stack Nuxt 4 et Tailwind v4, formulaires avec Zod et VeeValidate, protection reCAPTCHA v3, envoi d'emails via Mailgun (templates custom), carte Google Maps personnalisée.

  2. 02.

    Système multi-établissements entièrement dynamique (restaurant + boucherie), avec statut d'ouverture affiché en temps réel.

  3. 03.

    Carte de menu dynamique, guide des viandes complet par pièce, section offres d'emploi.

  4. 04.

    Formulaire de contact à 5 types de champs distincts selon la demande.

Backend / Directus

  1. 01.

    Collections créées : établissements (contenu, SEO, navigation, relations), activités, carte (sections/sous-sections récursives liées aux produits, gestion de variantes de prix), guide des viandes, témoignages, offres d'emploi.

  2. 02.

    Singletons pour la page d'accueil (slider, avis clients) et la page À propos (système de blocs dynamiques).

  3. 03.

    Implémentation du live preview et du versioning : création de contenu en brouillon, prévisualisation avant publication, planification de dates de publication — permettant de gérer plusieurs versions de carte selon la saison.

  4. 04.

    Visual editor intégré : édition du contenu directement depuis le rendu du site, sans passer par les formulaires de collections.

Captures du projet

Le défi
Concevoir une architecture entièrement dynamique pour plusieurs établissements simultanés (navigation, contenu, cartes), avec une logique récursive pour les sections/sous-sections de menu et une gestion conditionnelle du formulaire de contact selon le type de demande.
Résultat
Le client gère désormais l'intégralité de son activité depuis le site — horaires, carte, offres d'emploi et guide des viandes — sans dépendre d'un développeur, avec la possibilité de préparer et planifier ses contenus saisonniers en toute autonomie.
main*0 ↓ 1 ↑
UTF-8Vue.js / Nuxt 4