Arquitectura moderna con microfrontends, monorepo y BFF: Caso real TCG Pocket

Introducción

En este proyecto construiremos una aplicación real usando datos de cartas del juego Pokémon TCG Pocket, siguiendo una arquitectura moderna basada en:

Microfrontends con Next.js y Module Federation
Un backend centralizado tipo BFF con NestJS
Almacenamiento de imágenes en AWS S3
Infraestructura gestionada con GitHub Actions
Seguridad, observabilidad, estado compartido y CI/CD listos para producción

Objetivo del proyecto

Crear una app web escalable y mantenible, explorando sets y cartas del juego TCG Pocket, aplicando buenas prácticas reales de arquitectura frontend y backend.

Arquitectura del sistema

Tecnologías principales:

Capa	Tecnología
Frontend	Next.js + Module Federation
Estado global	Zustand + BroadcastChannel
Backend BFF	NestJS
Almacenamiento	AWS S3 (para imágenes)
CI/CD	GitHub Actions
Observabilidad	Sentry + logs estructurados

Estructura del monorepo:

/apps
  /shell            → MFE host (layout, navegación, login)
  /sets             → Microfrontend: exploración de sets
  /cards            → Microfrontend: detalle de cartas
  /admin            → (opcional) manejo de imágenes u orden
  /bff              → Backend For Frontend con NestJS

/libs
  /shared           → Tipos TypeScript, helpers, componentes comunes
  /ui               → Design system / componentes compartidos

Microservicios y contratos

Usaremos solo un backend (BFF) centralizado que expone:

Método	Ruta	Descripción
GET	`/sets`	Lista todos los sets
GET	`/sets/:setCode`	Detalle y cartas de un set
GET	`/sets/:setCode/cards/:cardId`	Detalle completo de una carta específica

Los datos serán cargados previamente en una base de datos, a partir del scraping ya realizado. El backend BFF accederá a esta base para servir los endpoints públicos de sets y cartas.

Autenticación (más adelante)

OAuth con Google en el frontend
Validación en el BFF
Emisión de JWT propio
Uso de HttpOnly cookie o Authorization header

Almacenamiento y deployment

Imágenes ya scrapeadas → se almacenarán en AWS S3 y servidas vía CloudFront
Microfrontends: deploy en Vercel
Backend: deploy en Render o AWS ECS
CI/CD: GitHub Actions con despliegues preview por rama

Observabilidad y métricas

Sentry para capturar errores frontend y backend
Pino o Winston para logs estructurados en BFF
(Opcional) Prometheus/Grafana o Datadog para trazas y rendimiento

Fases del proyecto (posts futuros)

Setup del monorepo con Nx o Turborepo + estructura base
Implementación del shell (layout principal)
Microfrontend de sets
Microfrontend de cartas
Backend BFF con NestJS + rutas
Integración de datos y despliegue del API
Estado global compartido (Zustand + BroadcastChannel)
AWS S3: servir imágenes scrapeadas
OAuth con Google + JWT + roles
CI/CD con GitHub Actions
Observabilidad con Sentry y logs
Extras: favoritos, versión offline (PWA), etc.

Cierre

Este será el inicio de una serie completa donde aplicamos todas las decisiones arquitectónicas modernas en un proyecto real, usable y extensible. En el próximo post crearemos el monorepo, el shell de layout y comenzaremos a conectar los microfrontends.