-
-
Landing page with button to Login with Spotify account.
-
Users authenticate the app using Spotify
-
Users can explore their top artists and tracks, discover their top genres, explore related artists, and review recently played tracks.
-
Users can view their followed artists and their popularity and delve into a detailed audio analysis of their saved tracks.
-
Users can explore how various aspects of music, such as acousticness and danceability, have evolved over the years.
-
Users take a brief quiz to receive personalized track recommendations. In the first question, users select upto 5 genres of their choice.
-
Users then specify their preferred range for musical attributes such as acousticness, danceability, energy, popularity, and more.
-
The app displays recommended tracks based on user answers and offers options to preview tracks and add them to the user's liked songs.
Inspiration
The Spotify Dashboard was born from our passion for music and a desire to improve how we discover and enjoy songs on Spotify. As avid music lovers and Spotify users, we often found ourselves wanting more insights into our listening habits and a more personalized way to discover new tracks. The idea was to create a platform that not only provides detailed analytics of our Spotify data but also offers tailored music recommendations based on individual preferences.
What it does
The Spotify Dashboard is a web app that lets you:
- Log in securely with your Spotify account.
- Visualize your top tracks and artists, your top genres and a detailed audio analysis of your favorite tracks.
- Discover personalized music recommendations based on your preferences.
- Preview recommended tracks and add them to your Spotify library.
How we built it
We utilized Node.js and Express.js for the backend, managing user authentication and handling Spotify API requests. The frontend was crafted using EJS for dynamic templating, along with HTML, CSS, and JavaScript. Chart.js was instrumental in creating engaging charts and visualizations that enhance user interaction and data exploration. We leveraged the Spotify API to fetch user data, track details, and personalized recommendations.
Challenges we ran into
- Implementing OAuth 2.0 for secure user authentication and seamless integration with Spotify accounts.
- Designing and optimizing multiple interactive charts and visualizations to enhance user engagement.
- Ensuring a consistent and intuitive user interface design throughout the application, including navigation, visual elements, and user interactions.
- Balancing and optimizing requests to the Spotify API to avoid rate limits and ensure smooth data retrieval.
Accomplishments that we're proud of
- Successfully integrating the Spotify API to deliver personalized music recommendations and enrich user experience.
- Designing intuitive and visually appealing interfaces with interactive charts using Chart.js.
- Creating a personalized recommendation system where users take a quiz to receive track recommendations tailored to their preferences, with the ability to preview tracks and add them to their library.
What we learned
Throughout this project, we learned how to effectively use Node.js, Express.js, and EJS to build powerful web applications that can adapt and grow. We gained valuable experience integrating external services like the Spotify API and setting up secure logins using OAuth 2.0. On the frontend side, we improved our skills in HTML, CSS, and JavaScript, and learned how to create interactive charts using tools like Chart.js. This project also taught us how to focus on making our app easy to use and ensuring it runs smoothly for everyone who uses it.
What's next for Spotify Dashboard
We plan to expand the current capabilities by integrating more advanced music analytics and insights, offering users dive deeper into their listening habits and preferences. Improving accessibility and optimizing performance remain key priorities as we continue to refine the application's interface and functionality. We aim to enrich the user experience with more personalized recommendations and curated playlists based on individual music tastes.
Log in or sign up for Devpost to join the conversation.