{"id":2508,"date":"2026-07-29T14:40:50","date_gmt":"2026-07-29T12:40:50","guid":{"rendered":"https:\/\/koredesign.studio\/?page_id=2508"},"modified":"2026-08-04T14:00:24","modified_gmt":"2026-08-04T12:00:24","slug":"filmin-frontend-platform-clone","status":"publish","type":"page","link":"https:\/\/koredesign.studio\/es\/filmin-frontend-platform-clone\/","title":{"rendered":"Filmin – Frontend Platform Clone"},"content":{"rendered":"
\n\t\t\t\t
\n \n \t\t\t

Desarrollo Web<\/p>\n\t\t\n<\/a>\n

\n\t\t\t\t\t
\n\t\t\t\t\t

Filmin - Clon de Plataforma Frontend<\/h2>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n
\n
\n \t\t\t

Descripci\u00f3n General<\/h2>\n\t\t\t\t\t

Desarrollado como un proyecto individual para el Bootcamp Frontend de Factor\u00eda F5<\/strong>, este proyecto se centr\u00f3 en dise\u00f1ar y construir un clon web funcional de Filmin<\/strong>, un servicio independiente l\u00edder de streaming y VOD. Durante una ventana de ejecuci\u00f3n intensiva de 1 semana, la iniciativa abarc\u00f3 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\u00f3n de interfaz reactiva utilizando Svelte<\/strong> impulsada por datos en tiempo real de la API The Movie Database (TMDB)<\/strong>.<\/p>\n\t\t\t\t\t

El Desaf\u00edo<\/h2>\n\t\t\t\t\t

Replicar la interfaz de usuario de una plataforma VOD consolidada presenta complejos desaf\u00edos t\u00e9cnicos y visuales con plazos de entrega ajustados:
     - Plazo de Entrega Reducido<\/strong>: Desarrollar una aplicaci\u00f3n 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<\/strong>: Traducir la identidad visual distintiva de Filmin, centrada en el contenido multimedia, a wireframes interactivos de Figma antes de trabajar con el c\u00f3digo de producci\u00f3n.

     - Gesti\u00f3n Din\u00e1mica de Datos de API<\/strong>: Estructurar solicitudes as\u00edncronas fluidas para obtener cat\u00e1logos de pel\u00edculas externos, gestionar par\u00e1metros de datos localizados (consultas en catal\u00e1n\/espa\u00f1ol) y mapear cargas JSON sin procesar a componentes de interfaz de usuario limpios.

     - Gesti\u00f3n del Alcance y las Prioridades<\/strong>: Gestionar las limitaciones del proyecto priorizando las funcionalidades principales (listas de cat\u00e1logo, carrusel principal) y gestionando estrat\u00e9gicamente los entregables no cr\u00edticos dentro del sprint.<\/p>\n\t\t\t\t\t

Nuestro Enfoque<\/h2>\n\t\t\t\t\t

Para garantizar una ejecuci\u00f3n estructurada y una alta calidad de c\u00f3digo dentro del plazo de 7 d\u00edas, se implement\u00f3 un flujo de trabajo \u00e1gil centrado en el dise\u00f1o:
Planificaci\u00f3n \u00c1gil y Prototipado con Figma<\/strong>:
     - Se formularon historias de usuario y se organiz\u00f3 un tablero de Trello espec\u00edfico (Pendientes, En curso, Terminado<\/em>) para el seguimiento del progreso incremental.

     - Se dise\u00f1aron prototipos de alta fidelidad en Figma para definir los componentes de la interfaz de usuario, las estructuras de dise\u00f1o, la jerarqu\u00eda tipogr\u00e1fica y los dise\u00f1os del carrusel principal antes de la codificaci\u00f3n.

Arquitectura Svelte Basada en Componentes<\/strong>:
     - Se aprovech\u00f3 la gesti\u00f3n de estado reactiva y la arquitectura compilada ligera de Svelte para crear componentes frontend reutilizables (Carrusel principal, Tarjetas de cuadr\u00edcula de pel\u00edculas, Listas de filas categorizadas).

Integraci\u00f3n de API y Localizaci\u00f3n Din\u00e1mica<\/strong>:
     - Se integraron los puntos finales de la API REST de TMDB para poblar din\u00e1micamente las colecciones de pel\u00edculas.

     - Se implementaron par\u00e1metros de consulta personalizados (language=ca \/ language=es) para admitir metadatos de transmisi\u00f3n localizados.

Gesti\u00f3n \u00c1gil del Alcance<\/strong>:
     - Priorizamos la navegaci\u00f3n principal de la plataforma, los carruseles destacados y los feeds de cat\u00e1logo din\u00e1micos para ofrecer un MVP s\u00f3lido y completamente funcional.

     - Documentamos las funcionalidades secundarias pendientes (como las superposiciones detalladas de estado al pasar el cursor) para futuras versiones iterativas.<\/p>\n\t\t\t\t\t

Galer\u00eda de Proyectos<\/h2>\n\t\t
\n
\n \t\t\t\"\"\/\t\t\n \t\t\t

Visita la Web<\/p>\n\t\t\n<\/a>\n\n<\/div>\n

\n \t\t\t\"\"\/\t<\/a>\t\t\n<\/div>\n
\n \t\t\t\"\"\/\t\t\n \t\t\t

Visita Figma<\/p>\n\t\t\n<\/a>\n\n<\/div>\n

\n \t\t\t\"\"\/\t\t\n \t\t\t

Visita Trello<\/p>\n\t\t\n<\/a>\n\n<\/div>\n\n<\/div>\n\t\t\t

Resultados<\/h2>\n\t\t\t\t\t

El sprint de una semana dio como resultado una aplicaci\u00f3n web frontend completamente funcional y visualmente fiel que demuestra una s\u00f3lida creaci\u00f3n de prototipos de UI\/UX y una ejecuci\u00f3n \u00e1gil del framework JavaScript:
     - Clon de Plataforma de Alta Fidelidad<\/strong>: Se replic\u00f3 con \u00e9xito la esencia est\u00e9tica y estructural del cliente web de Filmin con una interfaz de usuario moderna y responsiva.

     - Gesti\u00f3n Fluida de API y Estado<\/strong>: Se implement\u00f3 un flujo de datos as\u00edncrono y fiable desde la API de TMDB, renderizando colecciones de pel\u00edculas din\u00e1micas sin problemas en todos los componentes.

     - Ejecuci\u00f3n Eficiente en Solitario<\/strong>: Se entreg\u00f3 un flujo de trabajo completo, desde el dise\u00f1o hasta el c\u00f3digo, bajo estrictas limitaciones de una semana, utilizando una gesti\u00f3n de tareas \u00e1gil y disciplinada.

     - Base T\u00e9cnica S\u00f3lida<\/strong>: Se estableci\u00f3 una base de c\u00f3digo Svelte modular y escalable, preparada para futuras expansiones de funcionalidades y detalles de interfaz de usuario interactivos mejorados.<\/p>\n\t\t\n<\/div>\n

\n
\n
\n
\n \t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t<\/path><\/svg>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n
\n \t\t\t

A\u00d1O<\/p>\n\t\t\n<\/div>\n\t\t\t

2023<\/p>\n\t\t\n<\/div>\n

\n
\n \t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t<\/path><\/path><\/svg>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n
\n \t\t\t

SERVICIOS<\/p>\n\t\t\n<\/div>\n\t\t\t

Desarrollo Web Frontend
Dise\u00f1o y Creaci\u00f3n de Prototipos de UI\/UX
Integraci\u00f3n de API y Gesti\u00f3n de Estado<\/p>\n\t\t\t\t\t

HERRAMIENTAS Y TECNOLOG\u00cdA<\/p>\n\t\t

\n
\n \t\t\t

Svelte<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Figma<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Git<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

GitHub<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

The Movie Database<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

HTML5<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

CSS3<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

VS Code<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Trello<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Vercel<\/p>\n\t\t\n<\/div>\n\n<\/div>\n\t\t\t

ETIQUETAS<\/p>\n\t\t

\n
\n \t\t\t

Desarrollo Web<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Desarrollo Frontend<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Svelte<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Dise\u00f1o UX\/UI<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Aplicaci\u00f3n Web<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Integraci\u00f3n de API REST<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Prototipado con Figma<\/p>\n\t\t\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n

\n \t\t\t

\u00bfTe interesa un proyecto similar?<\/p>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t<\/path><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\tPonte en contacto<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n\n<\/div>\n\n<\/div>\n\t\t<\/div>","protected":false},"excerpt":{"rendered":"

Web Development Filmin – Frontend Platform Clone Overview Developed as an individual project for the Factor\u00eda F5 Frontend Bootcamp, this project focused on designing and building a functional web clone of Filmin\u2014a leading independent streaming and VOD service. Over a intensive 1-week execution window, the initiative spanned the complete frontend lifecycle: from translating platform requirements […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-2508","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/koredesign.studio\/es\/wp-json\/wp\/v2\/pages\/2508","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/koredesign.studio\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/koredesign.studio\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/koredesign.studio\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/koredesign.studio\/es\/wp-json\/wp\/v2\/comments?post=2508"}],"version-history":[{"count":31,"href":"https:\/\/koredesign.studio\/es\/wp-json\/wp\/v2\/pages\/2508\/revisions"}],"predecessor-version":[{"id":2719,"href":"https:\/\/koredesign.studio\/es\/wp-json\/wp\/v2\/pages\/2508\/revisions\/2719"}],"wp:attachment":[{"href":"https:\/\/koredesign.studio\/es\/wp-json\/wp\/v2\/media?parent=2508"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}