PlayStation Advent Calendar 2025
Una app de campaña localizada y sujeta a fechas de desbloqueo, con cinco juegos integrados, que alcanzó un estimado de 1M de usuarios en cuatro mercados.
- Cliente
- PlayStation — entregado a través de una alianza con una agencia
- Rol
- Responsable del frontend
- Duración
- 3 meses de desarrollo
- Año
- 2025
- 1M+
- Usuarios alcanzados (estimado)
- 4
- Mercados, 3 idiomas
- 5
- Juegos integrados
01
El desafío
Un calendario de adviento parece sencillo hasta que cada puerta tiene que funcionar el día correcto, en el mercado correcto y para el usuario correcto.
Esta campaña combinaba contenido por fechas, cuatro mercados, tres idiomas, cinco juegos interactivos, autenticación, multijugador en tiempo real, analítica, gestión del consentimiento y requisitos de accesibilidad corporativos, todo dentro de un plazo fijo de tres meses.
La restricción inusual era que la fecha límite no era el día del lanzamiento, sino cada día posterior. Si la experiencia del 5 de diciembre fallaba, arreglarla el 6 de diciembre no recuperaba ese día.
02
Mi rol
Me encargué de la entrega del frontend de toda la campaña.
Fui responsable de la arquitectura y el shell de la aplicación, el control de fechas, la autenticación, la localización, la capa de integración de los cinco juegos, las funciones de participación, las notificaciones push y la implementación del consentimiento y la analítica.
Trabajé junto a los equipos de diseño y backend de la agencia y frente al proceso de revisión de accesibilidad de Sony.
03
La ingeniería
Contenido controlado por fechas
El backend controlaba las fechas y la disponibilidad de la campaña; el frontend consumía ese estado y se encargaba de las experiencias del calendario y de cada puerta.
Para poder probar la campaña de 24 días antes del lanzamiento, añadí sobrescrituras de fecha a nivel de ruta que permitían solicitar al backend una fecha concreta de la campaña sin esperar a la fecha real del calendario.
Un shell de aplicación, cinco juegos
Cinco juegos Phaser vivían dentro de la aplicación React como funcionalidades de juego independientes. Integré las funciones que exponían los desarrolladores de los juegos con las API de la aplicación, gestioné las respuestas asíncronas y los resultados de recompensas, y administré el ciclo de vida de Phaser desde el montaje hasta la finalización y el desmontaje.
Cuando un jugador terminaba un juego y recibía sus tickets, el juego se desmontaba limpiamente antes de devolverlo a la experiencia de la campaña.
Multijugador en tiempo real e integridad del juego
Integré Socket.IO en el frontend usando la configuración de conexión del backend, escuché los eventos de juego en tiempo real y mapeé las respuestas del socket a la experiencia de juego activa, incluyendo la identidad del jugador, la información de perfil y el estado de la sesión.
También implementé comprobaciones de integridad en el cliente, como detectar cuándo un jugador abandonaba la pestaña del juego activo y avisarle en lugar de dejar que la sesión continuara en silencio. Estas comprobaciones fueron especialmente importantes en el quiz, donde mantener la integridad de un intento activo era clave.
Localización por mercado
La localización se modeló primero por mercado y después por idioma. Las mecánicas de premios, la elegibilidad y los textos legales variaban por territorio, mientras que Canadá admitía dos idiomas bajo las mismas reglas de mercado.
Autenticación, consentimiento y accesibilidad
La autenticación era una parte central del flujo de la campaña: los visitantes podían acceder públicamente a la página de aterrizaje, pero era necesario iniciar sesión para entrar en la experiencia principal. Integré los flujos de autenticación PSN y social en el frontend y conecté el estado del usuario autenticado con la experiencia de la campaña.
OneTrust gestionaba el consentimiento antes de activar Adobe Analytics, y la accesibilidad se trató como un requisito de lanzamiento durante toda la construcción. Implementé los requisitos de accesibilidad del frontend en toda la aplicación, incluidas las experiencias de juego interactivas.
04
Lo que entregué
- Experiencia de campaña localizada en 4 mercados y 3 idiomas, con contenido específico por mercado y disponibilidad diaria de las puertas.
- Autenticación PSN y social integrada en el flujo de entrada de la campaña, con inicio de sesión obligatorio para acceder a la experiencia principal.
- Cinco juegos Phaser integrados en la aplicación React, conectando las funciones de los juegos con las API del backend y gestionando resultados, recompensas y ciclo de vida.
- Integración de multijugador en tiempo real con Socket.IO, con conexiones de socket, gestión de eventos, información de jugador y sesión, y comprobaciones de integridad de sesión en el cliente.
- Flujos diarios de participación y recompensas, incluyendo estados de las puertas, resultados de juego, tickets e interacciones relacionadas de la campaña.
- Notificaciones push con Firebase Cloud Messaging.
- Integración de consentimiento y analítica con OneTrust y Adobe Analytics.
- Implementación de accesibilidad en toda la experiencia de la campaña para cumplir los requisitos internos de accesibilidad de Sony.
05
Resultados
- Alcanzó un estimado de 1 millón de usuarios en Canadá (EN/FR), Alemania, Francia y Países Bajos.
- Entregado dentro de un plazo fijo de tres meses frente a una fecha de inicio de campaña inamovible.
- Superó la revisión interna de accesibilidad de Sony como requisito previo al lanzamiento.
06
Stack
- Base
- React
- TypeScript
- Vite
- Tailwind CSS
- Juegos y tiempo real
- Phaser
- Socket.IO
- WebSockets
- Plataforma
- PSN auth
- Firebase Cloud Messaging
- Cumplimiento y analítica
- OneTrust
- Adobe Analytics
- WCAG 2.1
Siguiente desglose
Document Editor & Pagination Engine
Diagnostiqué un error de paginación que provocaba cortes de página incorrectos y bloqueos en documentos largos, corregí el problema de temporización de las reconstrucciones y después bifurqué, documenté y publiqué mi propia versión mantenida del paquete.