ReactViteAWSi18nZustand

Creación de un reproductor de video en cadena compartible por URL con Vite + React (sincronización de estado / i18n / despliegue en AWS)

Sloth255
Sloth255
·4 min read·773 words

¿Qué es esto?

Construí Video Chain Player, una aplicación web que te permite "encadenar solo los segmentos necesarios de videos y reproducirlos/compartirlos como una sola experiencia."

🔗 Pruébalo ahora: https://video-chain-player.sloth255.com/

  • Recorta un video especificando tiempos de inicio y fin
  • Encadena (cola) múltiples clips para reproducción continua
  • Codifica el estado de la cadena en una URL y comparte con un solo enlace

Perfecto para crear experiencias de "mostrar solo esta parte" como flujos de entrenamiento, puntos destacados de conferencias o compilaciones.

Qué pueden hacer los usuarios

  • Crear clips: Añadir videos introduciendo URL/ID y tiempos de inicio/fin
  • Reordenar: Ajustar la secuencia con arrastrar y soltar
  • Vista previa: Reproducir en el momento para verificar el timing
  • Compartir: Copiar la URL y enviarla (los destinatarios abren la misma cadena)
  • Multilingüe: Cambiar idiomas mediante URL (por ejemplo, ?lang=ja)

Stack tecnológico

Área Tecnología Notas
Frontend React 18 + TypeScript Mantenibilidad de UI y seguridad de tipos
Build/Servidor de desarrollo Vite HMR rápido, excelente DX
Routing React Router v6 Estado expresivo mediante path + query
Gestión de estado Zustand Ligero, adecuado para sincronización con URL
UI de arrastrar y soltar @dnd-kit Implementar reordenamiento
Reproductor de video react-youtube (IFrame Player API) Reproducción embebida rápida
i18n i18next + react-i18next Traducir todas las cadenas de UI
Carga de traducciones i18next-http-backend Fetch en tiempo de ejecución desde /public/locales/...
Detección de idioma i18next-browser-languagedetector Prioridad: ?lang= / localStorage / navegador
Analytics GA4 (gtag) page_view de SPA + eventos personalizados
Alojamiento S3 Static Site + CloudFront Distribución CDN
IaC Plantilla AWS SAM Gestionar S3/CloudFront como código
CI/CD GitHub Actions + OIDC Desplegar sin claves de larga duración
Testing Vitest + Testing Library Probar componentes/lógica
Lint/Format ESLint + Prettier Prevenir cambios que rompan el código

Arquitectura y aspectos destacados de la implementación

1) Sincronizar el estado de Zustand con la URL para compartir instantáneamente

Para minimizar la fricción al compartir, diseñé la aplicación para codificar la información esencial de la cadena en la URL.

  • Sin almacenamiento del lado del servidor (sin necesidad de cuenta)
  • Los destinatarios pueden reproducir el mismo estado simplemente abriendo el enlace

Para evitar que la URL sea demasiado larga (lo que dificulta compartirla), minimicé la información codificada en la URL.

  • Codificar solo el id del video y los tiempos de inicio/fin
  • Complementar títulos y miniaturas después para la visualización (evita que la URL crezca)

Ejemplo de codificación mínima:

// Codificar solo información esencial (id/inicio/fin) en URL
const minimalSegments = segments.map(({ id, start, end }) => ({ id, start, end }));

Además, los enlaces compartidos no incluyen la posición de reproducción (qué clip está reproduciendo), asegurando que "abrir el enlace empiece desde el principio."

2) Carga de i18n en tiempo de ejecución mediante HTTP Backend (independiente del build)

Inicialmente, consideré importar los JSONs de traducción en el tiempo de build, pero para mejor compatibilidad con el alojamiento estático y CI, opté por hacer fetch mediante HTTP desde /public/locales/{{lng}}/translation.json.

  • Fácil de mantener—solo añade archivos de idioma
  • El proceso de build no depende de las importaciones de traducciones

3) Manejo robusto de variaciones de URL (watch / Shorts / embed)

Soportar "solo URLs estándar" sería inconveniente, así que amplié los patrones de entrada:

  • URLs estándar de watch
  • Shorts
  • URLs de embed

Como resultado, la tasa de éxito al "simplemente pegar" aumentó, haciendo el registro masivo mucho más fácil.

4) Despliegue: S3 + CloudFront, CI: GitHub Actions (OIDC)

Al ser un sitio estático, el despliegue es sencillo:

  • S3 (alojamiento estático)
  • CloudFront (CDN)

CI/CD está automatizado mediante GitHub Actions: build → sincronización con S3 → invalidación de caché de CloudFront.

El punto clave es OIDC, que permite el despliegue sin almacenar claves de larga duración (minimizando los Secrets mientras se mantiene el control a nivel de entorno).

Incluso para sitios estáticos, poner CloudFront al frente proporciona:

  • Carga rápida mediante caché
  • Fácil asistencia de routing para SPA (por ejemplo, fallback a /)

Resumen

Video Chain Player se enfoca en "clips × reproducción continua × compartir por URL", con énfasis en:

  • Codificar el estado en URLs para minimizar la fricción al compartir
  • i18n + sincronización de idioma en URL para que los destinatarios vean el mismo idioma
  • Hacerlo "listo para producción" incluyendo despliegue y analytics

Técnicamente, pude combinar:

  • Desarrollo rápido con Vite
  • Sincronizar el estado de Zustand con URLs para mejor capacidad de compartir
  • Gestión ligera de traducciones con el backend HTTP de i18next
  • Despliegue seguro con OIDC

Construir este "stack operativo completo" de una sola vez fue lo más destacado.