Retour

Portfolio

ORCHESTRA – Site vitrine CMS-first & automatisation IA (Stage BTS SIO SLAM)

Contexte & problématique

ORCHESTRA est le projet réalisé durant mon stage BTS SIO SLAM chez Diligency Vision (5 janvier → 20 mars 2026 — 11 semaines). Il s'agit d'un site vitrine démonstrateur conçu pour valider l'architecture technique et documentaire que Diligency Vision proposera à ses futurs clients.

Problématique : Diligency Vision avait besoin d'un démonstrateur crédible prouvant la faisabilité d'une architecture web modulaire, réplicable et enrichie par l'IA — aucun tel démonstrateur n'existait. La mission : le concevoir, le développer et le documenter intégralement en 11 semaines, avec une responsabilité complète sur l'ensemble du cycle.

Principe cardinal : UI ≠ API ≠ Logique IA ≠ CMS — chaque couche est indépendante et ne contient pas la logique d'une autre. Ce découplage strict garantit la réutilisabilité sur de futurs projets clients.

Page d'accueil

Page Expertises — contenu 100% piloté par Sanity

Architecture technique

                Navigateur (Next.js 14 — React Server Components · Tailwind CSS)

                ↓

                API Routes Next.js (validation serveur · webhook sécurisé · chatbot IA)

                ↓                                ↓

                Sanity v5 (CMS headless · GROQ)      OpenAI gpt-4o-mini

                                                               ↓

                                                n8n v2.1.1 — Webhook HTTPS

                                                               ↓

                                               Email entreprise · Google Sheets

                ↑

                GitHub DiligencyVision + Vercel (CI/CD auto sur push main)

Stack complète :
• Frontend : Next.js 14 App Router · TypeScript · Tailwind CSS · React Server Components
• CMS headless : Sanity v5 · Requêtes GROQ · Studio déployé · Type unique page pour les 7 pages
• IA : OpenAI gpt-4o-mini · Température 0.3 · max_tokens 350 · Gouvernance stricte (interdits explicites codés)
• Automatisation : n8n v2.1.1 · Webhook HTTPS → qualification IA → email → Google Sheets
• Déploiement : GitHub DiligencyVision + Vercel (CI/CD automatique sur push main)

Pourquoi ces technologies ? — Justification des choix

Pourquoi Next.js ?
App Router permet les React Server Components — rendu serveur natif, SEO optimal, routes API intégrées sans serveur Express séparé. Idéal pour un site vitrine avec contenu dynamique piloté par CMS.

Pourquoi TypeScript ?
Typage strict obligatoire sur un projet modulaire multi-couches — aligner le schéma Sanity, la requête GROQ et le composant React en une seule opération. Sans TypeScript, une modification de schéma génère des bugs silencieux en production.

Pourquoi Sanity headless ?
Découplage CMS/Frontend — modifier le contenu sans redéployer le site. Le même frontend peut être réutilisé avec le contenu de n'importe quel client. C'est le cœur de la vision réplicabilité de Diligency Vision.

Pourquoi n8n ?
Workflow visuel déployable sur instance propre — pas de dépendance à un cloud tiers, modifiable sans toucher au code Next.js. Séparation stricte des responsabilités : le pipeline de leads n'a aucune logique dans le frontend.

Pourquoi OpenAI structuré JSON ?
La pré-réponse IA au formulaire de contact doit produire un résultat structuré exploitable par n8n (qualification HOT/WARM/COLD, résumé du besoin). Un prompt libre sans contrat JSON strict génère des sorties imprévisibles impossibles à mapper automatiquement vers Google Sheets.

Aperçu du site

Page Méthode ORCHESTRA

Page Contact — formulaire pipeline n8n

CMS headless & automatisation — sous le capot

L'architecture repose sur deux éléments invisibles à l'utilisateur final mais centraux pour comprendre le projet : le Studio Sanity qui pilote 100% du contenu éditorial, et le workflow n8n qui traite chaque lead entrant de manière automatisée et intelligente.

Principe CMS-first : toutes les pages sont des instances d'un type unique page dans Sanity. Modifier le contenu du site ne nécessite aucune intervention dans le code — l'éditeur agit directement depuis le Studio.

Flux du pipeline leads (n8n v2.1.1) :
Formulaire contact → Webhook HTTPS sécurisé → Validation serveur Next.js → Qualification IA (OpenAI — résumé + score HOT/WARM/COLD) → Email entreprise → Enregistrement Google Sheets

Sanity Studio — édition CMS-first (aucun texte codé en dur)

Workflow n8n v2.1.1 — pipeline leads Contact Pro

Sécurité — mesures mises en place

Variables d'environnement serveur
OPENAI_API_KEY et CONTACT_WEBHOOK_URL sont exclusivement côté serveur — jamais exposées au client via NEXT_PUBLIC_. Une exposition accidentelle via une variable publique a été détectée et corrigée en cours de développement.

Honeypot anti-spam
Champ caché dans le formulaire de contact — invisible pour un utilisateur humain, rempli automatiquement par les bots. Toute soumission avec ce champ rempli est rejetée côté serveur sans message d'erreur explicite.

Validation server-side stricte
Toutes les entrées du formulaire sont validées côté serveur avant tout appel n8n. La validation côté client est un complément d'UX, jamais la seule barrière.

Mode dégradé IA
Si le quota OpenAI est dépassé ou le service indisponible, un message de redirection vers le contact direct est affiché — le site reste opérationnel. Le fallback a été testé et validé en conditions réelles lors de la phase de tests.

Problèmes rencontrés & résolutions

Déploiement Vercel non déclenché

Cause : dépôt GitHub en privé, incompatible avec le plan Hobby Vercel. Diagnostic : logs Vercel vides malgré un push valide. Correction : migration du dépôt en public.

Payload JSON invalide dans n8n

Cause : injection d'une chaîne dynamique sans JSON.stringify() dans le nœud HTTP Request. Correction : ajout systématique de JSON.stringify() pour toutes les injections dynamiques.

Colonnes Google Sheets vides

Cause : mapping automatique n8n échoue sur les clés générées par l'IA. Correction : passage en mapping manuel dans le nœud Append Row — colonnes fixes explicitement déclarées.

Quota OpenAI dépassé en tests

Cause : volume de tests élevé en phase de validation du chatbot. Le fallback s'est déclenché correctement — comportement validé. Correction : limitation du volume de tests, surveillance du quota.

Hydration error React

Cause : titre saisi en Heading 2 dans un champ inline Sanity, générant un <h2> imbriqué. Correction : modification de la saisie dans le Studio + ajustement du composant RichTextInline.

Évolutions possibles

• Module blog MVP — ajout d'un type post dans Sanity + workflow n8n de génération automatique d'articles via IA
• Scoring automatique des leads — extension du workflow n8n existant avec seuils HOT/WARM/COLD basés sur les champs du formulaire
• Synchronisation knowledgeExtract ↔ CMS — mise à jour du contexte chatbot directement depuis Sanity Studio, sans intervention dans le code
• Version SaaS multi-clients — même architecture frontend, instances Sanity séparées par client, déploiements Vercel indépendants

Accéder au projet

🔗 Site en production 💻 Code source GitHub (DiligencyVision)

⚠️ ORCHESTRA est un démonstrateur fictif — support pédagogique BTS SIO SLAM, pas une entreprise réelle.