falobuster.blogg.se -

In a single app, a handful of shades of gray give the app some depth. Heroku has also provided an SSL Certificate allowing for even more security when accessing the site.If you’re an avid dark mode user like me, you’ll know that dark mode isn’t just about white text on black backgrounds. Spotify Palette has been deployed on Heroku with the domain registered under Google Domains.

musicScapes for the inspiration on using Spotify API to generate eye catching data.

Definitely check that out for all your color needs. Tinycolor.js also played a very big role in finding adjacent colors on the color wheel to make an analogous color palette. I was able to construct an algorithm to recreate a look similar to their analogous palette when you first land there. Huge thanks to Adobe Color Wheel for illustrating beautiful color palettes in various settings. Materialize.css for their grid and also easy to use navigation as well as Icons.Īnimate.css to bring the page to life with simple animations.

Puppeteer to web scrape Google's Art and Culture.

Back EndĮxpress server to handle the routes and OAuth. Spotify Palette is a Full Stack Web App with the Spotify API. Hovering over each image will allow you to click on the image source. The image data is sent to the front end and illustrated to the user in a photo grid form. Using "puppeteer", I then scrape the results image and the source to said image. Each colors hex code is then sent to the Google's Art and Culture website.

Each user has a palette that contains 5 colors. My favorite section, and one I had the most fun working on, was the "Similar Images" portion. Clicking on the album art will play the song on Spotify. A total of 50 songs were gathered, each ones adding to an overall average of valence, energy, and daceability. This section of the site will display a users top 15 tracks that were pulled from the Spotify API and helped generate a palette. Hovering over each color will also display its unique color hex code. The landing page will show the user their color palette as well as why they received that palette and what it means. Here are the three sections that users can view on the website. Users can also view their top 15 songs and see beautiful images that are similar to their palette from Google's Art and Culture database. The algorithm takes into account each songs danceability, valence, and energy.

Spotify Palette is a website that looks at a users top tracks and generates a color palette based on their listening history over the last six months.