This web service recommends music based on the user's mood and color preferences.
It uses the Spotify API to match colors with corresponding music, taking into account factors like energy, danceability, tempo, popularity and more.
Client: HTML5, CSS3, Javascript (ES6)
Deployment: Netlify
Others: Spotify API, Lighthouse (Chrome extension for website performance)
-
Random music recommendations based on colors and corresponding tags:
The service suggests random music that matches the selected color and associated tags. This feature enhances the user experience by providing music recommendations tailored to their preferences.
-
Animation within the website using the GSAP library and scroll events:
The website utilizes the GSAP library along with scroll events to create interactive and dynamic animations.
- 자바스크립트 : 기초부터 실전까지 올인원 / 김빛나
- How to use Spotify's API with Javascript / Avery Wicks
- GSAP ScrollTrigger / The Code Creative
I have learned the following during this project:
-
I learned the usage of the Client Credential flow in the OAuth 2.0 protocol to securely retrieve data from a server in a simplified manner.
-
I learned how to create dynamic animations easily by utilizing scroll events and the GSAP (GreenSock Animation Platform) library.
-
I learned how to use the Lighthouse extension for Chrome browser to analyze the level of optimization of a website and quantify it. Through this process, I optimized the network resources by converting high-resolution images into lower-resolution ones, based on the analysis provided by Lighthouse.