Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/omarryhan/spotilities
Your swiss army knife for Spotify
https://github.com/omarryhan/spotilities
pwa pwa-app pwa-apps redux redux-toolkit spotify spotify-api spotify-web-api styled-components typescript
Last synced: 6 days ago
JSON representation
Your swiss army knife for Spotify
- Host: GitHub
- URL: https://github.com/omarryhan/spotilities
- Owner: omarryhan
- License: mit
- Created: 2020-05-31T10:17:14.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-07-13T13:59:53.000Z (4 months ago)
- Last Synced: 2024-07-13T15:08:30.521Z (4 months ago)
- Topics: pwa, pwa-app, pwa-apps, redux, redux-toolkit, spotify, spotify-api, spotify-web-api, styled-components, typescript
- Language: TypeScript
- Homepage: https://spotilities.vercel.app
- Size: 2.74 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# Spotilities
Your swiss army knife for Spotify.
## Live version
https://spotilities.vercel.app/
## Why I made it
I wanted to test out the song-analysis endpoints provided by Spotify through their API.
Stuff like: song's energy, danceability etc. Unfortunately, the official Spotify web app doesn't show you these stats.
Also, there used to be an app on the PlayStore that I used to use to check my top tracks and artists. It was abruptly removed for a reason I don't know, so I thought I might add these features as well.
A couple of months later, I wanted to try working with HTML canvas to prepare for a larger commercial project. So I thought, it might be nice to have a playlist cover creator right in the app. That's probably going to be the last major feature. But who knows.. maybe something else might popup, so stay tuned.
## Todo
- [x] Show top tracks and top artists for 1 month, 3 months and of all time.
- [x] Show the stats of your tracks and playlists.
- [x] Generate recommendations using Spotify's stats.
- [x] Edit playlist description
- [x] Create your own playlist cover art and upload it.
- [x] Make a very simple landing page so that users aren't automatically redirected to Spotify's login page once they visit the website.
- [x] Add the generated recommendations to a new playlist (currently you can only add the results to the queue).
- [ ] Ability to sort playlist by attribute
## Tools and tech
Spotilities is built using Next.js (a React framework) and it is a [static](https://nextjs.org/docs/advanced-features/static-html-export) website.
**More tools being used:**
- Redux
- Redux toolkit
- Konva JS & React Konva
- Styled components
- Typescript
- Testing with Jest, Sinon and React Test Renderer
- Spotify's web API
## Development
After cloning:
**Install the dependencies:**
```sh
npm install
```
**Run development server:**
```sh
npm run dev
```
**I recommend using VScode and installing the following plugins:**
1. Eslint VScode plugin
2. Stylelint VScode plugin
3. vscode-styled-components by Julien Poissonnier for styled-components linting
**Tip:**
To keep your sanity with the linting rules, I recommend that you configure VScode to auto fix linting errors on each save.
**Note:**
Development requires Node version 12+
## Deployment
To deploy it on your own, you need to get these keys:
1. Spotify OAuth2 client ID (`SPOTIFY_CLIENT_ID`)
2. Google Analytics public ID (Optional, just remove mine if you don't want GA) (`GA_TRACKING_ID`)
3. Pixabay API key (`PIXABAY_API_KEY`)
4. API key for Google's web fonts API. (`FONTS_API_KEY`)
To build the project, run:
```sh
npm run build && npm run export
```
This will generate the disribution files in the `/out` directory. After that, all you have to do is to serve this directory with a web server.
## Known issues
- Playback doesn't work for non-premium users.
- Playback doesn't work if no active official Spotify App is found.
- If you login for the first time and mistyped your password, then when you retype it correctly, authentication will fail due to missing Client ID. To solve this, you have to close the tab and reopen it and enter the correct password on your first attempt.
- Some privacy plugins like [Privacy Badger](https://privacybadger.org/) incorrectly block all traffic to: api.spotify.com. If you're stuck with a loading screen, try whitelisting api.spotify.com.
- For some very weird reason (CORS related), you might need to click on (or drag and drop) a stock image twice to make it visible in the canvas.
## Privacy
I do not collect any personal information or any sort of access whatsover. All the action is happening only between your browser and Spotify's API.
I added a Google Analytics plugin to see how users interact with the website, which pages users visit, what features users use etc. The GA plugin doesn't collect any personal information either. I also opted out from sharing the information I collect with Google (Which is kind of a moot point given that the data is already stored on Google's servers). I'd appreciate if you would stop any tracker-blocker or adblocker (not that there are any ads) for this website.