{"id":2641,"date":"2026-07-30T14:56:16","date_gmt":"2026-07-30T12:56:16","guid":{"rendered":"https:\/\/koredesign.studio\/?page_id=2641"},"modified":"2026-08-04T14:28:52","modified_gmt":"2026-08-04T12:28:52","slug":"frontify-music-catalog-management-platform","status":"publish","type":"page","link":"https:\/\/koredesign.studio\/es\/frontify-music-catalog-management-platform\/","title":{"rendered":"Frontify – Music Catalog Management Plataform"},"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

Frontify - Plataforma de Gesti\u00f3n de Cat\u00e1logos Musicales<\/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

Frontify se concibi\u00f3 como una plataforma moderna de gesti\u00f3n y transmisi\u00f3n de m\u00fasica, dise\u00f1ada para competir con los servicios de m\u00fasica l\u00edderes del sector. Desarrollada durante un sprint \u00e1gil de dos semanas como proyecto de equipo (cuatro miembros) dentro del Bootcamp Frontend de Factor\u00eda F5, el objetivo era crear una aplicaci\u00f3n web responsiva en React que permitiera a los usuarios explorar y navegar por un extenso cat\u00e1logo de m\u00fasica digital. Utilizando la API web de Spotify como proveedor de datos de backend, el equipo se centr\u00f3 en ofrecer un MVP funcional que priorizara la visualizaci\u00f3n del cat\u00e1logo, la funcionalidad de b\u00fasqueda en tiempo real y la navegaci\u00f3n por discograf\u00eda centrada en el artista.<\/p>\n\t\t\t\t\t

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

El proyecto requer\u00eda transformar requisitos de usuario complejos en una aplicaci\u00f3n web intuitiva y adaptable en un plazo estricto de 14 d\u00edas:
     - Adaptabilidad Multidispositivo<\/strong>: La interfaz de usuario deb\u00eda mantener una usabilidad impecable y un equilibrio visual en pantallas de escritorio, tabletas y m\u00f3viles sin sacrificar la disponibilidad de las funciones.

     - Integraci\u00f3n de API y Gesti\u00f3n Din\u00e1mica de Datos<\/strong>: Se requer\u00eda el manejo as\u00edncrono de datos para obtener de forma limpia las car\u00e1tulas de los \u00e1lbumes, los detalles de las pistas y los metadatos de los artistas desde la API web de Spotify.

     - Gesti\u00f3n \u00c1gil del Alcance<\/strong>: Con m\u00faltiples funciones definidas en el backlog, el equipo tuvo que priorizar las historias de usuario principales en dos sprints de una semana para entregar una aplicaci\u00f3n pulida y completamente operativa para la revisi\u00f3n final del cliente.

     - Dise\u00f1o y Desarrollo Colaborativos<\/strong>: Se coordin\u00f3 a cuatro desarrolladores para crear un sistema de dise\u00f1o personalizado y coherente desde cero utilizando Figma antes de escribir el c\u00f3digo, manteniendo una arquitectura de componentes limpia en React.<\/p>\n\t\t\t\t\t

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

Trabajando en colaboraci\u00f3n bajo principios Agile, el equipo ejecut\u00f3 un flujo de trabajo estructurado para desarrollar la aplicaci\u00f3n:
UI\/UX Personalizadas y Wireframing:<\/strong>:
     - Dise\u00f1amos una interfaz limpia, inspirada en el modo oscuro, en Figma, adaptada a las plataformas de streaming multimedia, estableciendo una jerarqu\u00eda visual clara, reglas de dise\u00f1o y puntos de interrupci\u00f3n responsivos.

Arquitectura de Componentes React<\/strong>:
     - Creamos componentes React modulares para las funciones principales: una pantalla principal, tarjetas de \u00e1lbumes din\u00e1micas con renderizado de car\u00e1tulas, dise\u00f1os dedicados para la vista del artista y una barra de b\u00fasqueda interactiva.

Integraci\u00f3n con la API de Spotify y Motor de B\u00fasqueda<\/strong>:
     - Conectamos la aplicaci\u00f3n a los endpoints de la API web de Spotify para obtener listados de \u00e1lbumes en tiempo real, car\u00e1tulas de alta resoluci\u00f3n y listas de canciones detalladas.

     - Implementamos el filtrado de consultas en tiempo real, lo que permite a los usuarios buscar \u00e1lbumes espec\u00edficos al instante y navegar directamente a la discograf\u00eda completa de un artista.

Priorizaci\u00f3n Iterativa del Sprint<\/strong>:
     - Enfoque de los sprints 1 y 2<\/strong>: Ejecuci\u00f3n centrada en perfeccionar la visualizaci\u00f3n del cat\u00e1logo, la indexaci\u00f3n de b\u00fasqueda, las vistas filtradas por artista y la adaptabilidad a dispositivos m\u00f3viles.

     - Gesti\u00f3n del Backlog<\/strong>: Se priorizaron las funcionalidades clave de la experiencia del usuario, documentando las funciones administrativas CRUD (agregar, editar y eliminar \u00e1lbumes) en el backlog t\u00e9cnico para futuras iteraciones, garantizando una demostraci\u00f3n para el cliente s\u00f3lida y sin errores.<\/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 dos semanas culmin\u00f3 con \u00e9xito con una aplicaci\u00f3n web moderna y completamente operativa, implementada en Vercel:
     - Alta Fidelidad Visual e UI Personalizada<\/strong>: Se entreg\u00f3 un dise\u00f1o de interfaz original y moderno, optimizado para todos los dispositivos (m\u00f3vil, tableta y ordenador).

     - Navegaci\u00f3n Fluida por Cat\u00e1logo y Artistas<\/strong>: Se facilit\u00f3 la exploraci\u00f3n musical con b\u00fasqueda instant\u00e1nea de \u00e1lbumes y navegaci\u00f3n con un solo clic para ver la discograf\u00eda completa de cada artista.

     - Flujo de Datos As\u00edncrono Fiable<\/strong>: Se integr\u00f3 sin problemas la API REST de Spotify, garantizando tiempos de respuesta r\u00e1pidos y una vinculaci\u00f3n precisa de datos para las portadas de los \u00e1lbumes y los metadatos.

     - Colaboraci\u00f3n de Equipo Optimizada<\/strong>: Se coordin\u00f3 con \u00e9xito un equipo de desarrollo de cuatro personas utilizando el control de versiones Git y los tableros de tareas Trello para entregar un MVP listo para producci\u00f3n a tiempo.<\/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 UX\/UI
Integraci\u00f3n de API y Arquitectura de Datos
Colaboraci\u00f3n \u00c1gil en Equipo<\/p>\n\t\t\t\t\t

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

\n
\n \t\t\t

React.js<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

React Router Dom<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Spotify Web API<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

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

\n \t\t\t

HTML5<\/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

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

\n \t\t\t

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

\n \t\t\t

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

\n \t\t\t

JavaScript<\/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

React.js<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Spotify Web API<\/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

Dise\u00f1o Responsive<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Metodolog\u00eda \u00c1gil<\/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 Frontify – Music Catalog Management Platform Overview Frontify was conceptualized as a modern music streaming and administration platform designed to compete with industry-leading music services. Developed during a 2-week Agile sprint as a team project (4 members) within the Factor\u00eda F5 Frontend Bootcamp, the goal was to build a responsive React web application […]<\/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-2641","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/koredesign.studio\/es\/wp-json\/wp\/v2\/pages\/2641","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=2641"}],"version-history":[{"count":35,"href":"https:\/\/koredesign.studio\/es\/wp-json\/wp\/v2\/pages\/2641\/revisions"}],"predecessor-version":[{"id":2727,"href":"https:\/\/koredesign.studio\/es\/wp-json\/wp\/v2\/pages\/2641\/revisions\/2727"}],"wp:attachment":[{"href":"https:\/\/koredesign.studio\/es\/wp-json\/wp\/v2\/media?parent=2641"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}