Visites 360° immersives des églises de Rouen

Contexte du projet

Dans le cadre de ma collaboration avec Juumo, j’ai développé une plateforme de visites 360° immersives dédiée aux églises de Rouen.

L’objectif est de valoriser le patrimoine religieux rouennais à travers une expérience digitale immersive, accessible à distance comme sur place, tout en permettant une monétisation intelligente du contenu.

Le projet porte notamment sur des édifices emblématiques comme :

• Église Sainte-Jeanne d'Arc
• Église Saint-Maclou
• D'autres à venir

Mon ambition est double :

1. Offrir une immersion fidèle et qualitative
2. Construire une plateforme technique robuste, évolutive et monétisable.

La participation de Elodie Guide Local a permis à ce projet d'ajouter un contenu audio et vidéo très riche.

Pourquoi une plateforme immersive pour les églises de Rouen ?

Rouen possède un patrimoine gothique exceptionnel. Pourtant, l’expérience de visite reste limitée :

• Horaires restreints
• Peu de médiation interactive
• Difficulté à capter un public jeune ou international

Grâce aux visites 360° :

• Une découverte à distance
• Une navigation libre et interactive
• L’ajout de points d’intérêt narratifs
• L’intégration de contenus historiques enrichis

La technologie devient ici un outil de transmission culturelle.

Une architecture pensée en monorepo

Dès le départ, j’ai structuré le projet en monorepo.

Ce choix est stratégique.

L’objectif n’est pas de développer une seule visite, mais une plateforme capable de gérer plusieurs églises, sans multiplier les dépôts ni dupliquer la logique métier.

Pourquoi un monorepo ?

Mutualisation du code

Je partage :

• Les composants UI (navigation immersive, overlays, modales)
• Les modules d’authentification
• La logique Stripe
• Les hooks Supabase
• Les intégrations CMS
• Les utilitaires SEO

Chaque nouvelle église bénéficie instantanément de toute l’infrastructure existante.

Scalabilité structurelle

Si j’ajoute demain une autre église, je n’ai pas besoin de recréer une base technique.

Je duplique la configuration, j’injecte les contenus via le CMS, et je conserve la même architecture.

Maintenance simplifiée

Un correctif appliqué au moteur premium, à l’authentification ou au paiement bénéficie à l’ensemble des visites.

Je réduis :

• La dette technique
• Les divergences de versions
• Les risques d’incohérences

Le monorepo me permet donc d’industrialiser la création de visites 360 patrimoniales.

Architecture technique du projet

J’ai construit l’application autour d’une architecture moderne, découplée et centralisée :

• Frontend SSR et SEO performant
• Moteur 360 spécialisé
• CMS headless pour l’éditorial (Prismic)
• Backend serverless
• Paiement intégré
• Déploiement edge mondial
• Organisation en monorepo pour la scalabilité

Chaque choix technique répond à un besoin précis.

1. Next.js: le socle applicatif

J’utilise Next.js avec l’App Router pour structurer l’application.

Pourquoi ce choix ?

SEO stratégique

Chaque église dispose d’une page dédiée optimisée. Le rendu côté serveur me permet d’obtenir un excellent référencement sur des requêtes locales liées au patrimoine rouennais.

Performance

Le pré-rendu et l’optimisation native des images sont essentiels pour des contenus lourds comme les panoramas 360°.

Architecture modulaire

Dans le monorepo, je peux isoler :

• Le cœur applicatif
• Les packages partagés
• Les modules spécifiques à certaines églises

Cette modularité est essentielle pour la croissance du projet.

2. TypeScript: Sécurité et maintenabilité

Le projet combine :

• Données CMS
• Droits d’accès premium
• Paiements
• États utilisateurs
• Multiples entités (églises, scènes, hotspots)

TypeScript me permet :

• De structurer mes modèles (visite, église, hotspot)
• De garantir la cohérence entre les modules du monorepo
• De sécuriser la logique d’accès aux contenus premium

Dans une architecture mutualisée, le typage strict est indispensable.

3. Tailwind CSS: Interface sobre et immersive

J’utilise Tailwind CSS pour construire une interface minimaliste.

Dans un projet immersif, l’interface doit s’effacer derrière le contenu.

Grâce au monorepo, je centralise :

• Le design system
• Les tokens visuels
• Les composants réutilisables

Chaque nouvelle église conserve une cohérence graphique immédiate.

4. Krpano: Le moteur 360 professionnel

Le rendu immersif est assuré par krpano.

Pourquoi krpano ?

• Performance WebGL
• Transitions fluides entre scènes
• Hotspots interactifs
• Support VR
• Personnalisation avancée

Next.js gère l’application globale.
krpano gère l’expérience immersive.

Dans le monorepo, j’encapsule krpano dans un module réutilisable pour toutes les églises.

5. Prismic: Gestion éditoriale autonome

Pour le contenu historique et narratif, j’utilise Prismic. Je suis partenaire Prismic et expert de ce CMS

Les clients peuvent :

• Ajouter des anecdotes
• Modifier les descriptions
• Structurer les points d’intérêt
• Gérer de nouvelles locales

Le CMS alimente dynamiquement toutes les instances du monorepo.

Cela me permet de séparer totalement la couche contenu de la couche technique.

6. Supabase: Gestion des accès après paiement

Le backend repose sur Supabase.

Dans cette architecture, Supabase intervient principalement après validation du paiement.

Le fonctionnement est le suivant :

• L’utilisateur arrive sur la plateforme
• Il visionne une vidéo d’introduction
• Il est redirigé vers le paywall Stripe
• Une fois le paiement validé, un webhook met à jour son statut dans Supabase

Supabase me permet de :

• Créer automatiquement un compte utilisateur (si nécessaire)
• Enregistrer la transaction
• Activer un droit d’accès à la visite
• Sécuriser l’accès via Row Level Security

Concrètement, l’accès à la visite virtuelle des églises de Rouen n’est possible que si la base de données confirme que le paiement a été validé.

Supabase devient donc la couche d’autorité qui protège le contenu premium.

7. Stripe: Paywall et déclencheur d’accès

Pour la monétisation, j’utilise Stripe comme véritable point de bascule du parcours utilisateur.

Le flow est volontairement simple et efficace :

1. L’utilisateur découvre le projet via une vidéo d’introduction immersive (soit via internet ou en flashant un qrcode qui est disponible près des églises).
2. Il est redirigé vers un paywall Stripe sécurisé.
3. Il effectue le paiement.
4. Stripe déclenche un webhook côté serveur.
5. Le backend valide la transaction et active l’accès dans Supabase.

Stripe me permet :

• De proposer un paiement unique pour accéder à la visite
• De sécuriser les transactions
• De gérer automatiquement la TVA
• De déclencher des événements backend fiables

Le paywall n’est pas un simple formulaire : c’est un point stratégique du modèle économique.
Il transforme l’intérêt suscité par la vidéo d’introduction en engagement financier.

8. Resend: Email d’accès à la visite virtuelle

Une fois le paiement validé et l’accès activé, j’envoie automatiquement un email via Resend.

Cet email contient :

• La confirmation de paiement
• Un lien sécurisé vers la visite virtuelle
• Les informations d’accès
• Un rappel du contenu inclus (audios, vidéos d’Élodie, expérience immersive)

Cet email joue un rôle clé :

• Il rassure l’utilisateur
• Il formalise l’accès
• Il permet de revenir à la visite ultérieurement

L’utilisateur peut ainsi accéder à :

• La visite 360° immersive
• Les commentaires audio
• Les vidéos explicatives d’Élodie
• Les contenus enrichis intégrés dans l’expérience

L’email devient donc une extension naturelle du parcours premium.

9. Cloudflare: Performance mondiale

J’ajoute Cloudflare pour :

• CDN global
• Cache des panoramas 360
• Sécurité
• Optimisation réseau

Dans un projet où les assets sont lourds, cette couche est indispensable.

10. Vercel: Déploiement natif Next.js

Le déploiement est assuré par Vercel.

Grâce au monorepo :

• Je peux déployer plusieurs environnements
• Gérer des previews
• Industrialiser les mises à jour

Chaque amélioration profite immédiatement à l’ensemble des églises.

Expérience utilisateur

Nous avons conçu avec Juumo le parcours utilisateur comme une progression narrative et immersive, pensée pour transformer la curiosité en engagement.

1. Découverte et immersion initiale

L’utilisateur arrive sur la plateforme dédiée aux églises de Rouen.

Avant même d’accéder à la visite virtuelle, il découvre une vidéo d’introduction.
Cette vidéo pose le contexte :

• Présentation du patrimoine
• Mise en valeur des lieux
• Introduction par Élodie
• Création d’une attente immersive

Ce premier contact est émotionnel. Il ne s’agit pas encore de vendre, mais de susciter l’intérêt et la curiosité.

2. Redirection vers le paywall

À la fin de la vidéo, l’utilisateur est redirigé vers un paywall sécurisé via Stripe.

L’offre est claire :

• Accès complet à la visite 360°
• Audios explicatifs
• Vidéos d’Élodie intégrées dans l’expérience
• Navigation libre dans l’église

Le paiement est simple, rapide et sécurisé. 30% du montant est reversé à l'église.

3. Validation du paiement et activation des droits

Une fois la transaction validée :

• Stripe déclenche un webhook sécurisé
• Le backend met à jour le statut de l’utilisateur dans Supabase
• L’accès à la visite est activé immédiatement

L’utilisateur est alors redirigé vers la visite immersive.

4. Accès à la visite virtuelle immersive

L’utilisateur accède enfin à la visite 360° de l’église choisie.

L’expérience inclut :

• Navigation immersive fluide
• Hotspots interactifs
• Commentaires audio contextualisés
• Vidéos explicatives d’Élodie
• Contenus historiques enrichis

L’immersion est totale, structurée autour de la narration et de la découverte.

5. Email de confirmation et accès permanent

Après le paiement, un email est automatiquement envoyé via Resend.

Cet email contient :

• La confirmation de paiement
• Un lien sécurisé vers la visite
• Les informations d’accès

Cela permet à l’utilisateur de revenir ultérieurement à la visite, sans friction.

Logique stratégique du tunnel

Ce parcours repose sur une séquence volontaire :

Vidéo immersive → Désir → Paywall → Paiement → Activation → Expérience premium → Email de continuité

Je ne donne pas immédiatement accès à la visite.
Je construis une montée en valeur.

L’émotion précède la transaction.
La transaction débloque l’expérience.
L’email prolonge la relation.

Ce tunnel me permet d’aligner :

• Narration patrimoniale
• Modèle économique
• Expérience utilisateur fluide
• Infrastructure technique robuste