Pl. 04 / 13Case study
The big film franchises put back in order, with no-account watch tracking.
Motion design presentation, 15 s. Animation and soundtrack written in code, from the site’s real data.
The starting point: a specification I had written and a working prototype, a watch tracker for the Marvel universe. The visual direction was already set: paper, ink, flat colour, poster type. The goal was to turn it into a full product, with several franchises, real SEO work and a business model.
Many franchises have no obvious watch order. Release order and story chronology diverge, sometimes by a whole film (Fast and Furious), sometimes across two continuities that contradict each other (X-Men, DC). These exceptions had to be documented accurately, franchise by franchise, rather than shipped as a generic list. And the site had to stay useful with no user account and no live dependency on a third-party service.
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.
Rebuilt the architecture from the prototype: a typed data model per franchise, and TMDB metadata frozen at build time rather than queried live.
No-account progress, saved on the device and shareable through a link that encodes the checked titles. Filters by continuity and importance.
Wrote the annotated chronology for 7 franchises (200 titles), a marked-up FAQ and cross-links between pages. An indexing gap found along the way was fixed.
Domain name, DNS zone, continuous deployment from the repository, submission to Google Search Console.
Two-tier analytics, affiliate links limited to titles that are actually available, and a consent banner verified in production.
I dropped the .watch domain first considered for inorder.fr. It cost more and locked the project into video. The .fr leaves room for other kinds of order, books for instance, without renaming the site later.
The title-by-title notes only appeared in list view, while the default view is a poster grid. So they were missing from the HTML search engines index, even though they are what makes the site worth visiting. I added a server-rendered section that sits alongside the grid instead of replacing it.
The first version showed an Amazon link on every card. After auditing the real availability of the 200 titles, about half were only offered on other platforms. The link now only appears when the title can actually be bought or rented on Amazon.
Colours sampled from the project visuals.