Main purpose of this project was to learn React, fetching from APIs and how to use Git and GitHub.
Developed with Mobile First Design. Idea sparked out while reading APIs features
and recalling frustration from mismatched Spotify recommendations.
- React components and states
- Fetching
- Data processing
- Git commands and terminal usage in general
- CSS pseudo-classes
- Writing README.md files
- Projects file structure
RECOMmusicENDATIONS_usage.mp4
- Only once
- I have to add you to my Projects user list, else Spotify will throw error 403 if you interact with anything. Message me email that you use for Spotify and optionally your full name
- Use test account that is already added mail: "[email protected]", password: "Test_Only"
- Click on "Get token" and login with Spotify account
- Choose what type you are looking for in filters
- Optional Select date release and/or genres in filters
- Type in a name of what you are looking for
- Click on submit button
- Browse through results and find the one you are looking for
- Click the plus button on selected result
- Add more results if you wish to*
- Press button in top left corner
- Optional Add genres*
- Click on "See results" and enjoy RECOMmusicENDATIONS
* only up to 5 results and genres combined can be chosen at once
* only up to 5 results and genres combined can be choosen at once
- Filtering by tag:new(releases from past 2 weeks) seems not to work with genres. Read more.
- Spotify uses HTTP/1.1 instead of HTTP/2
- Can't change neither format of images nor their size from Spotifys response. There are some APIs that can do the later however, their either to slow (2nd link) or have too low of a limit to be beneficial. There is also proxy option but I still would have to invest time/money into it.
- There is a lot of main-thread work being done. Most of it is what lighthouse classifies as "Other". Not really sure how to tackle this problem. Only clue.
- Total Blocking Time is high from what seems expensive animations and rendering. But it would take a lot of effort to fix it and I have not found it disturbing.
Note: "Tablet and desktop design" branch is left on purpose for nostalgic purposes.
Color palette from Spotify
Images from https://www.freepik.com/
Icons from https://icons8.com/