Spotify Stats Tracker
A Vue.js web application to visualize your Spotify listening statistics and top tracks
🎵 About The Project
Spotify Stats Tracks is a web application built with Vue 3 and TypeScript that allows you to explore your Spotify listening habits. Connect your Spotify account and discover your most-played tracks and favorite artists through an intuitive and modern interface.
This project leverages the Spotify Web API to fetch and display personalized statistics, offering insights into your music preferences over different time periods. While similar projects like Receiptify and Stats for Spotify already exist, I developed this application as a learning opportunity to discover Vue 3, Composition API and TypeScript while creating a practical tool me and my friends could actually use.
🎯 Key Features
- Spotify Authentication: Secure OAuth 2.0 integration with Spotify
- Top Tracks Display: View your most listened tracks
- Top Artists Statistics: Discover your favorite artists
- Time Period Selection: Filter stats by short, medium, or long term
- Modern UI: Clean and responsive interface built with Vue 3
- Real-time Data: Direct integration with Spotify's API for up-to-date statistics
- TypeScript: Fully typed codebase for better development experience
🛠️ Technical Stack
- Framework: Vue 3 (Composition API)
- Language: TypeScript
- API: Spotify Web API (OAuth 2.0)
- Styling: CSS3 / SCSS
- Build Tool: Vite
- Deployment: Vercel
- Package Manager: npm
🚀 How It Works
- Visit stats-tracks.vercel.app
- Click "Connect with Spotify" to authenticate
- Grant the necessary permissions to access your listening data
- Explore your top tracks and artists
- Switch between different time periods to see how your taste evolves
💡 What I Learned
This project was a great learning experience in:
- OAuth 2.0 Implementation: Understanding and implementing secure authentication flows
- API Integration: Working with external APIs and handling authentication tokens
- Vue 3 Composition API: Building reactive components with modern Vue patterns
- TypeScript in Vue: Leveraging type safety in a Vue application
- State Management: Handling user data and API responses efficiently
- Responsive Design: Creating a mobile-friendly music statistics interface
🔗 Links
- Live Demo: stats-tracks.vercel.app
- GitHub Repository: KaazDW/Spotify-Stats-Tracks
- Spotify API Documentation: developer.spotify.com
This project demonstrates my ability to integrate third-party APIs, implement secure authentication, and build modern web applications with Vue.js and TypeScript.