https://github.com/bautista225/spotifytools
🎧 React App to manage Playlist and Profile features in Spotify
https://github.com/bautista225/spotifytools
bootstrap javascript react redux-toolkit vite
Last synced: 3 months ago
JSON representation
🎧 React App to manage Playlist and Profile features in Spotify
- Host: GitHub
- URL: https://github.com/bautista225/spotifytools
- Owner: bautista225
- License: gpl-3.0
- Created: 2024-12-13T18:54:23.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-24T10:46:58.000Z (over 1 year ago)
- Last Synced: 2025-07-12T07:33:59.779Z (12 months ago)
- Topics: bootstrap, javascript, react, redux-toolkit, vite
- Language: JavaScript
- Homepage: https://bautista225.github.io/SpotifyTools/
- Size: 276 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🎧 Spotify Tools
[](https://github.com/bautista225/SpotifyTools/actions/workflows/deploy.yml)
## 🔎 Overview
With the initial intention of sorting a long playlist by most recent added tracks, this application was born.
A responsive SPA for managin playlists and profile statistics for a Spotify Account, developed with React and Redux.
## 🌱 Key features
- Profile statistics (last year, last 6 months and last 4 weeks):
- Number of tracks and artists listened.
- Top 10 tracks.
- Top 10 artists.
- Playlists:
- Change default order of the playlist between the following values:
- Date added
- Popularity
- Duration
- Track name
- Artist name
- Get playlist's songs by Spotify popularity.
## 📖 Screenshots
## 🖥 Installation in local
### Obtaining a Spotify Client ID
Login into Spotify Web API
In the dashboard, create a new app adding the following scope:
```
playlist-read-private
playlist-read-collaborative
playlist-modify-public
playlist-modify-private
user-read-recently-played
user-top-read
user-read-private
user-read-email
```
You'll retrieve your own client ID.
### Running in local
After clonning the repository, add a `.env` file with the following content:
```
VITE_CLIENT_ID=YOUR-SPOTIFY-DEVELOPER-CLIENT-ID
```
In the root directory of the repo, install the NPM packages with:
```
npm install
```
Run an instance in localhost:5173 with:
```
npm run dev
```
## Limitations
Since 2022 the Spotify API has limitations in the number of requests and the user accounts able to login through a Developer Client ID, as it needs to add the user account in the developer panel. If you want to use it by the Github Pages link, don't hesitate to ask me 😉
## ✨ Contributions
Contributions are welcome! If you have ideas to enhance the Spotify Tools App —whether it’s adding new features, improving the design, or expanding the content— feel free to submit a pull request. You can also share suggestions or feedback to help make this project even better!
## ⭐ Support
If you find Spotify Tools App helpful or you like what we're doing, please consider giving the repository a star! It's a quick way to show your support for this project.