Pl. 04 / 13Étude de cas
Les grandes sagas de cinéma remises dans l’ordre, avec un suivi de visionnage sans compte.
Présentation en motion design, 15 s. Animation et bande-son écrites en code, à partir des vraies données du site.
Inorder.fr remet dans l'ordre les grandes sagas de cinéma — Marvel, Star Wars, X-Men, DC, Fast & Furious, Transformers, la Terre du Milieu — sous forme de listes de visionnage interactives. Chaque saga a sa propre page : l'ordre chronologique de l'intrigue (et non l'ordre de sortie), avec une explication titre par titre de sa place, la durée, la plateforme où le regarder, et un suivi de progression qu'on coche au fil du visionnage. Aucun compte requis : la progression vit dans le navigateur et se partage par un simple lien. Le site répond à une question précise que Google reçoit des millions de fois par mois : « dans quel ordre regarder [saga] ». La difficulté n'est pas seulement technique — c'est éditoriale : démêler des chronologies parfois contradictoires (deux timelines chez X-Men, trois continuités chez DC, un film sorti au mauvais endroit chez Fast & Furious) et le dire honnêtement plutôt que de vendre une liste simpliste.
Beaucoup de sagas n'ont pas d'ordre de visionnage évident. L'ordre de sortie et la chronologie de l'histoire divergent, parfois d'un film entier (Fast and Furious), parfois entre deux continuités qui se contredisent (X-Men, DC). Il fallait documenter ces exceptions avec exactitude, saga par saga, plutôt que publier une liste générique. Et le site devait rester utile sans compte utilisateur, sans dépendre d'un service tiers en production.
Le projet a été construit en partant d'un prototype React fonctionnel (un composant unique pour le suivi MCU), entièrement réécrit en une architecture Next.js 15 orientée contenu et référencement : Modèle de données typé (TypeScript) où chaque saga est un fichier déclaratif — entrées, tags de filtrage, notes éditoriales, FAQ — validé au build. Synchronisation TMDB en amont du déploiement : affiches, métadonnées et disponibilité par plateforme (Disney+, Netflix, Prime Video, HBO Max…) sont figées au build, jamais interrogées en production. Le site reste rapide et fonctionne même si l'API tierce tombe. Rendu serveur pour le SEO : chaque page sert un contenu long et indexable (ordre commenté titre par titre, article de fond, FAQ balisée JSON-LD), tout en gardant une interface interactive (grille d'affiches, filtres, checklist) côté client. Persistance sans compte : progression en localStorage, partage par bitmask encodé dans l'URL (80 titres cochés tiennent dans 14 caractères). Monétisation légère : liens d'affiliation Amazon générés uniquement sur les titres réellement disponibles à la location (vérifié par les données de disponibilité), avec les mentions légales requises affichées automatiquement. Déploiement continu sur Vercel, domaine propre, Search Console, Analytics respectueux de la vie privée (sans cookie). Sept sagas et 200 titres au lancement, chacune avec son propre univers éditorial et ses propres pièges de chronologie à expliquer.
Reconstruction de l'architecture à partir du prototype : un modèle de données typé par saga, et des métadonnées TMDB figées à la compilation plutôt qu'interrogées en direct.
Une progression sans compte, sauvegardée sur l'appareil et partageable par un lien qui encode les titres cochés. Des filtres par continuité et par importance.
Rédaction de la chronologie commentée de 7 sagas (200 titres), FAQ balisée, maillage entre les pages. Un défaut d’indexation repéré en cours de route a été corrigé.
Nom de domaine, zone DNS, déploiement continu relié au dépôt, soumission à Google Search Console.
Mesure d'audience à deux niveaux, liens d'affiliation limités aux titres réellement disponibles, bandeau de consentement vérifié en production.
J'ai abandonné le .watch envisagé au départ pour inorder.fr. Il coûtait plus cher et enfermait le projet dans la vidéo. Le .fr laisse la porte ouverte à d'autres ordres, les livres par exemple, sans renommer le site plus tard.
Les explications titre par titre n'apparaissaient qu'en vue liste, alors que la vue par défaut est une grille d'affiches. Elles manquaient donc dans le HTML indexé par les moteurs, alors que ce sont elles qui font la valeur du site. J'ai ajouté une section rendue côté serveur, qui coexiste avec la grille sans la remplacer.
La première version affichait un lien Amazon sur chaque fiche. Après un audit de la disponibilité réelle des 200 titres, environ la moitié n'était proposée que sur d'autres plateformes. Le lien n'apparaît plus que si le titre est vraiment disponible à l'achat ou à la location sur Amazon.
Couleurs relevées sur les visuels du projet.