Data visualization
MusyCharts
A Spotify dashboard I built to learn OAuth 2.0 properly. Ended up using OAuth at my next job - so that worked out.
- Context
- Personal project
- Year
- 2023
MusyCharts connects to the Spotify API to fetch personalized statistics and display them using amCharts 5 in interactive dashboards that reveal listening habits and top genres. The app allows users to authenticate via OAuth 2.0, select time ranges, and explore their listening trends through dynamic charts and a modern, responsive design.
It is a personal project developed to learn about API integration, OAuth authentication, and data visualization on the web (and practicing OAuth was a great choice since I ended up working with it in my next job).
The decision to use Vue.js and Vuetify was based on their ease of building reactive interfaces and modular components (although you don't really need a full framework for something like this, it was more for practice), while I chose amCharts 5 because I wanted to try another library besides Charts.js and this one looked quite promising.
Development began with setting up the environment and laying out some views (in this case I didn't use Figma and went straight to code), followed by testing and implementing OAuth 2.0 authentication. Then the dashboards were designed and developed using amCharts 5 to visually represent the fetched data.
Later on, I decided to do a complete redesign to make the interface more appealing and improve user experience, adding new visualizations and optimizing overall application performance.