Saltar al contenido

Caso de estudio

Plataforma digital para una liga deportiva norteamericana

Dashboards y comercio electrónico para una liga deportiva de primer nivel, con Next.js App Router, TypeScript y un CMS headless, entregados a través de la red global de Publicis Sapient para un cliente Fortune 500.

Empresa
Publicis Global Delivery (PGD) · Publicis Sapient
Periodo
nov 2023 – actualidad
Mi rol
Líder de arquitectura front-end

Trabajo para un cliente: no se menciona su nombre ni hay capturas de pantalla, así que la arquitectura se describe con palabras.

El problema

Una sola plataforma debía servir dos superficies muy distintas, dashboards con mucho contenido y una tienda en línea, alimentadas por un CMS headless.

Enfoque y arquitectura

Lideré la arquitectura front-end: Next.js App Router con componentes de servidor para el contenido, islas de cliente para los dashboards interactivos, una capa GraphQL tipada sobre el CMS y un paquete de sistema de diseño compartido.

Arquitectura

  • Next.js App Router con React Server Components para las páginas de contenido e islas de cliente para los dashboards interactivos.
  • CMS headless como fuente de contenido, consumido a través de una capa GraphQL tipada.
  • Paquete de sistema de diseño compartido por los dashboards y la tienda.

Decisiones clave y sus compromisos

  • App Router en lugar de Pages Router para transmitir en streaming el contenido renderizado en el servidor y mantener pequeño el bundle en las rutas de comercio electrónico.
  • Tipado del esquema del CMS de extremo a extremo para que los cambios en el modelo de contenido aparezcan en el build y no en producción.

Datos clave

  • Cliente Fortune 500
  • Varias superficies: dashboards y comercio electrónico

Tomados del CV, sin estimaciones.

Mi rol

Líder de arquitectura front-end

Stack

  • Next.js (App Router)
  • TypeScript
  • React
  • Headless CMS
  • GraphQL
  • Tailwind CSS
  • Vercel