ARCHITECTURE AND IMPLEMENTATION OF A WEB APPLICATION FOR INTERACTIVE VISUALISATION OF PERSONAL MUSIC STREAMING DATA

Abstract

Introduction. The rapid growth of music streaming services has led to an
accumulation of large volumes of personal data about users’ listening habits. Despite the availability
of basic analytics features within platforms such as Spotify, Apple Music, and YouTube Music, these
tools are largely static and do not support interactive exploration or flexible time-range selection.
Third-party services such as Last.fm and Stats.fm partially address this gap, yet they are limited by
incomplete retrospective data coverage and constrained analytical capabilities.
Purpose. The purpose of this article is to describe the design principles and implementation
details of a web application for collecting, storing, and interactively visualising personal Spotify
music streaming data, and to justify the chosen technology stack and architectural decisions from the
perspective of their effectiveness.
Results. A full-stack web application was developed using a client-server architecture. The
backend is implemented on Node.js and Express.js with a MongoDB database managed via
Mongoose, enabling scalable storage and complex server-side aggregation. User authentication is
handled through the OAuth 2.0 Authorization Code Flow, which provides secure server-side access to
the Spotify Web API along with refresh tokens for seamless session maintenance. A hybrid data
collection strategy was implemented: regular polling of the recently-played endpoint every five
minutes ensures up-to-date data, while complete retrospective history is obtained via GDPR data
requests from Spotify – a combination unavailable in any existing analogue. The frontend is built with
React and TypeScript, with Redux Toolkit for state management, Material-UI for interface
components, and Recharts for interactive chart rendering. Three custom chart abstractions (line
chart, bar chart, stacked bar chart) provide consistent styling across all dashboards. The application
delivers multi-faceted analytical views: listening activity over time, hourly distribution charts,
dynamic rankings of artists/tracks/albums with detailed individual statistics pages, stream graphs of
artist distribution, and charts of content characteristics (average album release date, number of
features per track, song popularity). Flexible date range selection – including fully custom intervals –
is supported across all views.
Conclusion. The developed application addresses the key limitations of existing solutions by
providing full retrospective listening history via GDPR import, flexible time-range analysis, and
hourly-level activity breakdown. The proposed hybrid data collection methodology and the
architectural approach of server-side aggregation represent contributions to the field of personalised
music analytics. The results open perspectives for further development, including the integration of
machine learning methods for automatic discovery of hidden patterns in users’ musical behaviour.