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ía 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.

The Challenge

The project required turning complex user requirements into an intuitive, responsive web application within a strict 14-day timeframe:
     - Multi-Device Responsiveness: 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: Asynchronous data handling was required to fetch dynamic album artwork, track details, and artist metadata cleanly from the Spotify Web API.

     - Agile Scope Management: 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: Aligning 4 developers to build a cohesive custom design system from scratch using Figma before writing code, maintaining clean component architecture in React.

Our Approach

Working collaboratively under Agile principles, the team executed a structured workflow to deliver the application:
Custom UI/UX & Wireframing:
     - 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:
     - 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:
     - 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’s complete discography.

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

     - Backlog Management: 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.

Project Gallery

Results

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

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

     - Reliable Asynchronous Data Flow: Integrated Spotify’s REST API smoothly, ensuring quick response times and accurate data binding for album covers and metadata.

     - Streamlined Team Collaboration: Successfully coordinated a 4-person development team using Git version control and Trello task boards to deliver a production-ready MVP on time.