PlayStation Advent Calendar 2025
Une application de campagne localisée, à déblocage par date, avec cinq jeux intégrés, qui a touché environ 1 M d'utilisateurs sur quatre marchés.
- Client
- PlayStation — livré via un partenariat avec une agence
- Rôle
- Responsable du frontend
- Durée
- 3 mois de développement
- Année
- 2025
- 1M+
- Utilisateurs atteints (estimation)
- 4
- Marchés, 3 langues
- 5
- Jeux intégrés
01
Le défi
Un calendrier de l'Avent semble simple, jusqu'à ce que chaque porte doive fonctionner le bon jour, sur le bon marché et pour le bon utilisateur.
Cette campagne combinait du contenu par date, quatre marchés, trois langues, cinq jeux interactifs, l'authentification, du multijoueur en temps réel, des analytics, la gestion du consentement et des exigences d'accessibilité de niveau entreprise, le tout dans un délai fixe de trois mois.
La contrainte inhabituelle était que l'échéance n'était pas le jour du lancement, mais chaque jour qui suivait. Si l'expérience du 5 décembre échouait, la corriger le 6 décembre ne rattrapait pas cette journée.
02
Mon rôle
J'ai pris en charge la livraison du frontend sur l'ensemble de la campagne.
J'étais responsable de l'architecture et du shell de l'application, du contrôle des dates, de l'authentification, de la localisation, de la couche d'intégration des cinq jeux, des fonctionnalités d'engagement, des notifications push et de la mise en œuvre du consentement et des analytics.
J'ai travaillé aux côtés des équipes design et backend de l'agence, et face au processus de revue d'accessibilité de Sony.
03
L'ingénierie
Contenu déverrouillé par date
Le backend contrôlait les dates et la disponibilité de la campagne ; le frontend consommait cet état et gérait les expériences correspondantes du calendrier et de chaque porte.
Pour rendre la campagne de 24 jours testable avant le lancement, j'ai ajouté des surcharges de date au niveau des routes permettant de demander au backend une date de campagne précise sans attendre la vraie date du calendrier.
Un shell d'application, cinq jeux
Cinq jeux Phaser vivaient dans l'application React comme des fonctionnalités de jeu distinctes. J'ai intégré les fonctions exposées par les développeurs des jeux aux API de l'application, géré les réponses asynchrones et les résultats de récompenses, et piloté le cycle de vie de Phaser du montage jusqu'à la fin de partie et au démontage.
Lorsqu'un joueur terminait un jeu et recevait ses tickets, le jeu était proprement démonté avant de le ramener à l'expérience de la campagne.
Multijoueur en temps réel et intégrité du jeu
J'ai intégré Socket.IO côté frontend à partir de la configuration de connexion du backend, écouté les événements de jeu en temps réel et associé les réponses du socket à l'expérience de jeu en cours, y compris l'identité du joueur, les informations de profil et l'état de la session.
J'ai également géré des contrôles d'intégrité côté client, comme détecter qu'un joueur quittait l'onglet du jeu actif et l'avertir plutôt que de laisser la session se poursuivre silencieusement. Ces contrôles étaient particulièrement importants pour le quiz, où l'intégrité d'une tentative en cours comptait.
Localisation par marché
La localisation a été modélisée d'abord par marché, puis par langue. Les mécaniques de prix, l'éligibilité et les textes juridiques variaient selon le territoire, tandis que le Canada prenait en charge deux langues sous les mêmes règles de marché.
Authentification, consentement et accessibilité
L'authentification était un élément central du parcours de la campagne : les visiteurs pouvaient accéder publiquement à la page d'accueil, mais devaient se connecter pour entrer dans l'expérience principale. J'ai intégré les parcours d'authentification PSN et sociale dans le frontend et relié l'état de l'utilisateur authentifié à l'expérience de la campagne.
OneTrust gérait le consentement avant l'activation d'Adobe Analytics, et l'accessibilité a été traitée comme une exigence de mise en production tout au long du projet. J'ai mis en œuvre les exigences d'accessibilité du frontend dans toute l'application, y compris dans les expériences de jeu interactives.
04
Ce que j'ai livré
- Expérience de campagne localisée sur 4 marchés et 3 langues, avec du contenu propre à chaque marché et une disponibilité quotidienne des portes.
- Authentification PSN et sociale intégrée au parcours d'entrée de la campagne, avec connexion obligatoire pour accéder à l'expérience principale.
- Cinq jeux Phaser intégrés à l'application React, reliant les fonctions des jeux aux API du backend et gérant résultats, récompenses et cycle de vie.
- Intégration du multijoueur en temps réel avec Socket.IO : connexions socket, gestion des événements, informations joueur et session, et contrôles d'intégrité de session côté client.
- Parcours quotidiens d'engagement et de récompenses, avec états des portes, résultats de jeu, tickets et interactions associées de la campagne.
- Notifications push avec Firebase Cloud Messaging.
- Intégration du consentement et des analytics avec OneTrust et Adobe Analytics.
- Mise en œuvre de l'accessibilité sur toute l'expérience de la campagne pour répondre aux exigences internes de Sony.
05
Résultats
- A touché environ 1 million d'utilisateurs au Canada (EN/FR), en Allemagne, en France et aux Pays-Bas.
- Livré dans un délai fixe de trois mois face à une date de début de campagne immuable.
- A passé la revue interne d'accessibilité de Sony, condition préalable au lancement.
06
Stack
- Socle
- React
- TypeScript
- Vite
- Tailwind CSS
- Jeux et temps réel
- Phaser
- Socket.IO
- WebSockets
- Plateforme
- PSN auth
- Firebase Cloud Messaging
- Conformité et analytics
- OneTrust
- Adobe Analytics
- WCAG 2.1
Analyse suivante
Document Editor & Pagination Engine
J'ai diagnostiqué un bug de pagination qui provoquait des coupures de page erronées et des blocages sur les longs documents, corrigé le problème de timing des reconstructions, puis forké, documenté et publié ma propre version maintenue du package.