Descripción General

Desarrollado como un proyecto individual para el Bootcamp Frontend de Factoría F5, este proyecto se centró en diseñar y construir un clon web funcional de Filmin, un servicio independiente líder de streaming y VOD. Durante una ventana de ejecución intensiva de 1 semana, la iniciativa abarcó todo el ciclo de vida de la interfaz: desde traducir los requisitos de la plataforma en prototipos Figma de alta fidelidad hasta implementar una aplicación de interfaz reactiva utilizando Svelte impulsada por datos en tiempo real de la API The Movie Database (TMDB).

El Desafío

Replicar la interfaz de usuario de una plataforma VOD consolidada presenta complejos desafíos técnicos y visuales con plazos de entrega ajustados:
     - Plazo de Entrega Reducido: Desarrollar una aplicación completamente funcional, con estilo y basada en API en un plazo estricto de una semana como desarrollador individual.

     - Fidelidad de la UI/UX Frente a la Escala de la Plataforma: Traducir la identidad visual distintiva de Filmin, centrada en el contenido multimedia, a wireframes interactivos de Figma antes de trabajar con el código de producción.

     - Gestión Dinámica de Datos de API: Estructurar solicitudes asíncronas fluidas para obtener catálogos de películas externos, gestionar parámetros de datos localizados (consultas en catalán/español) y mapear cargas JSON sin procesar a componentes de interfaz de usuario limpios.

     - Gestión del Alcance y las Prioridades: Gestionar las limitaciones del proyecto priorizando las funcionalidades principales (listas de catálogo, carrusel principal) y gestionando estratégicamente los entregables no críticos dentro del sprint.

Nuestro Enfoque

Para garantizar una ejecución estructurada y una alta calidad de código dentro del plazo de 7 días, se implementó un flujo de trabajo ágil centrado en el diseño:
Planificación Ágil y Prototipado con Figma:
     - Se formularon historias de usuario y se organizó un tablero de Trello específico (Pendientes, En curso, Terminado) para el seguimiento del progreso incremental.

     - Se diseñaron prototipos de alta fidelidad en Figma para definir los componentes de la interfaz de usuario, las estructuras de diseño, la jerarquía tipográfica y los diseños del carrusel principal antes de la codificación.

Arquitectura Svelte Basada en Componentes:
     - Se aprovechó la gestión de estado reactiva y la arquitectura compilada ligera de Svelte para crear componentes frontend reutilizables (Carrusel principal, Tarjetas de cuadrícula de películas, Listas de filas categorizadas).

Integración de API y Localización Dinámica:
     - Se integraron los puntos finales de la API REST de TMDB para poblar dinámicamente las colecciones de películas.

     - Se implementaron parámetros de consulta personalizados (language=ca / language=es) para admitir metadatos de transmisión localizados.

Gestión Ágil del Alcance:
     - Priorizamos la navegación principal de la plataforma, los carruseles destacados y los feeds de catálogo dinámicos para ofrecer un MVP sólido y completamente funcional.

     - Documentamos las funcionalidades secundarias pendientes (como las superposiciones detalladas de estado al pasar el cursor) para futuras versiones iterativas.

Galería de Proyectos

Resultados

El sprint de una semana dio como resultado una aplicación web frontend completamente funcional y visualmente fiel que demuestra una sólida creación de prototipos de UI/UX y una ejecución ágil del framework JavaScript:
     - Clon de Plataforma de Alta Fidelidad: Se replicó con éxito la esencia estética y estructural del cliente web de Filmin con una interfaz de usuario moderna y responsiva.

     - Gestión Fluida de API y Estado: Se implementó un flujo de datos asíncrono y fiable desde la API de TMDB, renderizando colecciones de películas dinámicas sin problemas en todos los componentes.

     - Ejecución Eficiente en Solitario: Se entregó un flujo de trabajo completo, desde el diseño hasta el código, bajo estrictas limitaciones de una semana, utilizando una gestión de tareas ágil y disciplinada.

     - Base Técnica Sólida: Se estableció una base de código Svelte modular y escalable, preparada para futuras expansiones de funcionalidades y detalles de interfaz de usuario interactivos mejorados.