A modern, real-time dashboard displaying the top Spotify artists with detailed analytics, growth metrics, and interactive visualizations.
- 🎵 Real-time Data: Live Spotify artist rankings and metrics
- 📊 Analytics: Growth tracking, listener counts, and trend analysis
- 🔍 Search & Filter: Find artists by name with advanced filtering
- 📱 Responsive Design: Optimized for all devices
- ⚡ Fast Performance: Built with Next.js 15 and optimized for speed
- 🎨 Modern UI: Clean, minimalistic design with smooth animations
The application reads from JSON files in the public/data/ directory:
latest/top500.json- Current top 500 artistslatest/former500.json- Former top 500 artistslatest/meta.json- Metadata about the datasetartists/[id].json- Individual artist details
- Node.js 18+
- npm or yarn
# Install dependencies
npm install
# Run development server
npm run devOpen http://localhost:3000 to view the application.
# Build the application
npm run build
# Export static files
npm run exportThe application is configured for automatic deployment to GitHub Pages:
- Push changes to the
mainbranch - GitHub Actions will automatically build and deploy
- The site will be available at
https://[username].github.io/spotify-artists-scraping
# Build and export
npm run build
# Deploy to GitHub Pages
npm run deployThe application expects daily data updates from the Python scraping script. The data structure includes:
- Artist rankings and monthly listeners
- Growth metrics (1-day, 7-day, 30-day)
- Top tracks and cities
- Historical data and trends
- Next.js 15 - React framework with App Router
- TypeScript - Type safety and better development experience
- Tailwind CSS - Utility-first CSS framework
- Lucide React - Beautiful icon library
- GitHub Pages - Static site hosting
- Fork the repository
- Create a feature branch
- Make your changes
- Submit a pull request
MIT License - see LICENSE file for details.
