{"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\/en\/frontify-music-catalog-management-platform\/","title":{"rendered":"Frontify – Music Catalog Management Plataform"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n \n \t\t\t

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

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

Frontify - Music Catalog Management Platform<\/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

Overview<\/h2>\n\t\t\t\t\t

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 that allows users to explore and navigate an extensive digital music catalog. Using Spotify Web API as the backend data provider, the team focused on delivering a functional MVP that prioritizes catalog visualization, real-time search functionality, and artist-centric discography browsing.<\/p>\n\t\t\t\t\t

The Challenge<\/h2>\n\t\t\t\t\t

The project required turning complex user requirements into an intuitive, responsive web application within a strict 14-day timeframe:
     - Multi-Device Responsiveness<\/strong>: The UI needed to maintain flawless usability and visual balance across desktop, tablet, and mobile screens without sacrificing feature availability.

     - API Integration & Dynamic Data Management<\/strong>: Asynchronous data handling was required to fetch dynamic album artwork, track details, and artist metadata cleanly from the Spotify Web API.

     - Agile Scope Management<\/strong>: With multiple features outlined in the backlog, the team had to prioritize core user stories across two 1-week sprints to deliver a polished, fully operational application for final client review.

     - Collaborative Design & Development<\/strong>: Aligning 4 developers to build a cohesive custom design system from scratch using Figma before writing code, maintaining clean component architecture in React.<\/p>\n\t\t\t\t\t

Our Approach<\/h2>\n\t\t\t\t\t

Working collaboratively under Agile principles, the team executed a structured workflow to deliver the application:
Custom UI\/UX & Wireframing<\/strong>:
     - Designed a clean, dark-mode-inspired interface in Figma tailored for media streaming platforms, establishing clear visual hierarchy, layout rules, and responsive breakpoints.

React Component Architecture<\/strong>:
     - Built modular React components for core features: a hero display, dynamic album cards with cover art rendering, dedicated artist view layouts, and an interactive search bar.

Spotify API Integration & Search Engine<\/strong>:
     - Connected the app to Spotify Web API endpoints to fetch live album listings, high-resolution artwork, and detailed tracklists.

     - Implemented live query filtering, enabling users to search for specific albums in real time and navigate directly to an artist\u2019s complete discography.

Iterative Sprint Prioritization<\/strong>:
     - Sprint 1 & 2 Focus<\/strong>: Focused execution on perfecting catalog visualization, search indexing, artist-filtered views, and mobile-first responsiveness.

     - Backlog Management<\/strong>: Prioritized core user experience features while documenting administrative CRUD functions (adding\/editing\/deleting albums) into the technical backlog for future iterations, ensuring a robust, bug-free client demonstration.<\/p>\n\t\t\t\t\t

Project Gallery<\/h2>\n\t\t
\n
\n \t\t\t\"\"\/\t\t\n \t\t\t

Visit the Website<\/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

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

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

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

Results<\/h2>\n\t\t\t\t\t

The 2-week sprint successfully culminated in a fully operational, visually modern web application deployed on Vercel:
     - High Visual Fidelity & Custom UI<\/strong>: Delivered an original, modern interface design executed across all target viewports (mobile, tablet, desktop).

     - Seamless Catalog & Artist Navigation<\/strong>: Enabled effortless music exploration with instant album searching and single-click navigation to view full artist discographies.

     - Reliable Asynchronous Data Flow<\/strong>: Integrated Spotify\u2019s REST API smoothly, ensuring quick response times and accurate data binding for album covers and metadata.

     - Streamlined Team Collaboration<\/strong>: Successfully coordinated a 4-person development team using Git version control and Trello task boards to deliver a production-ready MVP on time.<\/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

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

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

Frontend Web Development
UX\/UI Design
API Integration & Data Architecture
Agile Team Collaboration<\/p>\n\t\t\t\t\t

TOOLS & TECHNOLOGY<\/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

TAGS<\/p>\n\t\t

\n
\n \t\t\t

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

\n \t\t\t

Frontend Development<\/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

UX\/UI Design<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Responsive Design<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Agile Methodology<\/p>\n\t\t\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n

\n \t\t\t

Interested in a similar project?<\/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\tGet in Touch<\/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>\n\t\t","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\/en\/wp-json\/wp\/v2\/pages\/2641","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/koredesign.studio\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/koredesign.studio\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/koredesign.studio\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/koredesign.studio\/en\/wp-json\/wp\/v2\/comments?post=2641"}],"version-history":[{"count":35,"href":"https:\/\/koredesign.studio\/en\/wp-json\/wp\/v2\/pages\/2641\/revisions"}],"predecessor-version":[{"id":2727,"href":"https:\/\/koredesign.studio\/en\/wp-json\/wp\/v2\/pages\/2641\/revisions\/2727"}],"wp:attachment":[{"href":"https:\/\/koredesign.studio\/en\/wp-json\/wp\/v2\/media?parent=2641"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}