Spotify Stats is s web application built with React that connects to the Spotify Web API to provide detailed analytics about your music listening habits. Get insights into your top tracks, artists, and albums across different time ranges (short, medium, and long-term).
⚠️ Development Mode Notice: This application is currently in Spotify's Development Mode, which means only users explicitly added to the app's user management in the Spotify Developer Dashboard can access and use the application. This is a Spotify limitation for non-commercial applications.
- Secure Spotify OAuth integration
- Seamless login experience
- Protected routes and data access
- Top Artists - Your most played artists with detailed metrics
- Top Tracks - Most listened songs with play counts
- Top Albums - Your most listened albums
- Liked Tracks - Access to your last liked song
- Time Range Analysis - Short, medium, and long-term listening patterns
- Modern, responsive design
- Spotify-inspired theme
- Loading states and error handling
- Mobile-optimized interface
- Advanced analytics and visualizations
- Music predictions and recommendations
- Social sharing capabilities
- Extended statistical analysis
- Frontend: React 18 + Vite
- Styling: Bootstrap 5 + Custom CSS
- API: Spotify Web API
- Build Tool: Vite
src/
├── components/auth/ # Authentication components
├── components/dashboard/ # Main dashboard layout
├── components/common/ # Reusable UI components
├── components/layouts/ # App layout and navigation
├── hooks/ # Custom React hooks
├── services/ # API services and data handling
├── styles/ # Modular CSS architecture
└── utils/ # Helper functions and constants
- Node.js 18+ and npm/yarn
- Spotify Developer Account
- Spotify App registration
Access Requirements: To use this application, users must be explicitly added to the Spotify app's user management in the Developer Dashboard. This is due to Spotify's Development Mode restrictions for non-commercial applications.
-
Create a Spotify App
- Go to Spotify Developer Dashboard
- Create a new app and get your
Client ID - Add your redirect URI to the app settings
-
Environment Variables
# Create .env file in root directory VITE_SPOTIFY_CLIENT_ID=your_spotify_client_id VITE_REDIRECT_URI=http://localhost:5173/callback
-
Clone the repository
git clone https://github.com/JonaVicesar/Spotify-Stats.git cd Spotify-Stats -
Install dependencies
npm install
-
Start development server
npm run dev
-
Open your browser
http://localhost:5173
# Development server
npm run dev
# Production build
npm run build
# Preview production build
npm run preview
# Lint code
npm run lint
# Fix linting issues
npm run lint:fixThis application operates under Spotify's Development Mode, which means:
- Limited User Access: Only users manually added to the app in Spotify Developer Dashboard can use it
- User Management: To add users, go to your Spotify app settings → User Management → Add users by email
- Commercial Use: Full public access requires Spotify approval and commercial licensing
- Maximum Users: Limited to 25 users in development mode
The app requests the following Spotify permissions:
user-read-private- Access to user profileuser-read-email- User email accessuser-top-read- Top artists and tracksuser-library-read- Saved tracks accessplaylist-read-private- Private playlistsuser-read-recently-played- Recent listening history
You can customize themes and colors by modifying:
src/styles/themes/spotify.css- Main theme variablessrc/styles/global.css- Global styles- Component-specific CSS files in
src/styles/components/
- Desktop: Full-featured dashboard experience
- Mobile: Streamlined interface with essential features
If you encounter any issues or have questions:
- Create an issue on GitHub
- Check the Spotify Web API Documentation