As mobile marketing continues to evolve and shape the music industry, it's essential to have access to real-time data and analytics that can help artists and fans alike. That's why we've created a modern, interactive dashboard displaying the world's top 500 Spotify artists with detailed growth metrics and trend analysis.

This innovative application provides unparalleled insights into the music scene, featuring:

  • Real-Time Data: Live rankings of the top Spotify artists, updated in real-time to reflect changing trends and listener preferences.
  • Analytics: In-depth growth tracking, listener counts, and trend analysis to help artists understand their audience and optimize their marketing strategies.
  • Search & Filter: A powerful search function that allows users to find specific artists by name, with advanced filtering options for a more personalized experience.

Built with Next.js 15 and optimized for speed, this responsive design is perfect for all devices, ensuring an seamless user experience regardless of whether you're accessing the dashboard on your mobile phone or desktop computer.

Technical Details

The application reads data from JSON files in the public/data/ directory, including:

  • latest/top500.json: The current top 500 artists
  • latest/former500.json: Former top 500 artists
  • latest/meta.json: Metadata about the dataset
  • artists/[id].json: Individual artist details

To get started with the application, simply install dependencies using npm or yarn:

# Install dependencies

npm install

Then, run the development server and open http://localhost:3000 to view the application.

Automated Deployment

The application is configured for automatic deployment to GitHub Pages. Simply push changes to the main branch, and GitHub Actions will automatically build and deploy the site:

  • Build and export: Run npm run build to generate static files
  • Deploy to GitHub Pages: Run npm run deploy to deploy the site to GitHub Pages

Data Structure

The application expects daily data updates from a Python scraping script, which includes:

  • Artist rankings and monthly listeners: Up-to-date information on artist popularity and listener counts.
  • Growth metrics (1-day, 7-day, 30-day): Insights into an artist's growth over various time periods.
  • Top tracks and cities: Information on the most popular tracks and cities for each artist.

Technical Stack

The application is built with:

  • Next.js 15: A React framework with App Router
  • TypeScript: For type safety and a better development experience
  • Tailwind CSS: A utility-first CSS framework for fast and efficient styling.
  • Lucide React: A beautiful icon library for adding visual interest to the dashboard.

Get Involved

Want to contribute to this innovative project? Fork the repository, create a feature branch, make your changes, and submit a pull request. All contributions are welcomed!

License

This project is licensed under the MIT License. See the LICENSE file for details.