Plover - Create awesome playlist covers

Related tags

Learning resource plover-web
Overview

Plover

Check out Plover's live demo

Plover

What is this?

Like millions of other people, I'm a heavy user of Spotify. However, everytime I create a playlist I have to manually design a neat cover image because I just don't like the default one. Plover aims to automate this process.

How does that work?

All you need to provide is your playlist's name and a keyword for the picture search. Plover than consults the Unsplash API to find a suitable background image. This image then gets resized, darkened and labelled.

TechStack

  • ⚛️ React and TypeScript to power the whole thing
  • 🧪 testing-library to make sure everything gets renderd correctly
  • 💅 styled-components to make the components prettier without CSS modules
  • 📸 html-to-dom to download the created cover art

Fetching Pictures

To get started and be able to fetch pictures from Unsplash's API, you have to request an API key. Set up a file called keys.js in the /src directory and store your API key as value of keys.unsplashAccessKey. After that, you should be able to call the API.

const keys = {
  unsplashAccessKey: "YOUR_PERSONAL_UNSPLASH_API_KEY",
}

export default keys
You might also like...

Awesome mirror.xyz.

优质 Mirror 信息源列表 目录 Mirror 信息源列表 什么是 Mirror 如何提交 为什么要收集这张列表 Mirror 信息源列表 列表上的信息源订阅数不多，暂时取消展示 RSS 订阅数。 简介 订阅链接 标签 Shawn https://submirror.xyz/dao4ever.e

Nov 7, 2022

Awesome books is a simple website that displays a list of books and allows you to add and remove books from that list

Awesome books is a simple website that displays a list of books and allows you to add and remove books from that list

Awesome books is a simple website that displays a list of books and allows you to add and remove books from that list. By building this application, you will learn how to manage data using JavaScript. Thanks to that your website will be more interactive. built with modern JavaScript and uses SPA technology.

Mar 29, 2022

Awesome critique of crypto / web3. Curated list of high quality critique plus background. Seek to be as constructive as possible.

Awesome critique of crypto/web3 Awesome critique of crypto/web3, etc. Contributions are welcome. Critique General Stephen Diehl series - https://www.s

Jan 1, 2023

"Awesome books" is a simple website that displays a list of books and allows you to add ang remove books from that list. Also you can store your data in your local storage. Build with JavaScript, HTML and CSS.

Awesome Books Creating an app that adds and delete books from a list. Built With HTML CSS JavaScript Application Page url https://TimmyChan99.github.i

Jan 28, 2022

Unofficial HelmRelease search through awesome k8s-at-home projects

Unofficial HelmRelease search through awesome k8s-at-home projects

k8s at home search (unofficial) Search Flux HelmReleases through awesome k8s-at-home projects, check it out at https://whazor.github.io/k8s-at-home-se

Jan 2, 2023

Awesome-Books project uses practical tests for JavaScript/Html and CSS functions.

Awesome-Books project uses practical tests for JavaScript/Html and CSS functions.

Awesome-Books project uses practical tests for JavaScript/Html and CSS functions. The project presents a basic website that allows users to add/remove books from a list.

Jan 31, 2022

Awesome TV is the First and Original streaming entertainment network for Global Africa from United States of America (USA).

Awesome TV is the First and Original streaming entertainment network for Global Africa from United States of America (USA).

LEADBOARD APP Awesome TV is the First and Original streaming entertainment network for Global Africa from United States of America (USA). Built With H

Apr 4, 2022

Invertio - An Awesome Image Colour Inverter Tool

Invertio - An Awesome Image Colour Inverter Tool

Invertio What Is Invertio? Invertio Is A Tool To Invert The Colours In Your Imag

Feb 10, 2022

Awesome Books Restructured

Awesome Books Restructured In this project, I restructured Awesome books app code that collaborated. The goal is to make it more organized by using mo

Mar 4, 2022
Comments
  • iOS Safari - Download issues

    iOS Safari - Download issues

    Download seems to cause problems on iOS devices (iPhone/iPad) using safari.

    Sometimes, the background-image is not "included" -> i.e. Jpg-File contains black rectangle with text.

    Relevant function in src/App.tsx:

    
  const downloadCoverImage = () => {
    let node = document.getElementById("cover")
    console.log("Download clicked")
    domtoimage
      .toJpeg(node ?? new Node(), { quality: 0.95 })
      .then(function (dataUrl: any) {
        var link = document.createElement("a")
        link.download = `${label}-plover.jpeg`
        link.href = dataUrl
        link.click()
      })
  }

    Possible causes:

    • .toJpeg(node ?? new Node(), { quality: 0.95 }): new Node is created although cover exists
    • discrepancy between React's virtual DOM and the actual DOM accessed by browser

    Feel free to PR :)

    bug help wanted dom-to-image 
    opened by LBeul 0
Owner
Louis
Louis
GitHub
Web GUI for youtube-dl (using the yt-dlp fork) with playlist support

MeTube Web GUI for youtube-dl (using the yt-dlp fork) with playlist support. Allows you to download videos from YouTube and dozens of other sites (htt

Alex 1.3k Jan 1, 2023
Awekn - Youtube Playlist Website

Awekn Youtube Playlist Website Context The idea of awekn originated because of my need for a product to hold my videos of interest. A product that is

Raja vishnu vardhan Reddy 3 Sep 19, 2022
This project is an Awesome Books web page where users can add or remove books from the site. It also displays a list of the books added to the collection. This Awesome books webpage was created using ES6.

Awesome books App using Module Awesome books App using Module This book list was built using modules and other ES6 syntax. It allows users to add/remo

Esther Udondian 6 Jul 25, 2022
An Awesome Toggle Menu created with HTML,CSS,JQuery,font-awesome and line by line comment.

Demo : https://blackx-732.github.io/AwesomeMenu/ Under open source license No ©copyright issues Anyone can be modify this code as well Specifically we

BlackX-Lolipop 2 Feb 9, 2021
A package that allows your bot of discord.js v13 & v14 to create the new awesome Discord Modals and interact with them

A package that allows your bot of discord.js v13 & v14 to create the new awesome Discord Modals and interact with them

MateoDeveloper 85 Dec 23, 2022
This simple library allows you to create awesome responsive and highly customizable popups importing just one JavaScript file.

Creativa - Popup This is a simple library that allows you to create awesome popups importing just one JavaScript file. Getting started You can import

Eduardo Mollo 5 Mar 29, 2022
The repository contains the list of awesome✨ & cool web development beginner-friendly✌️ projects!

Web-dev-mini-projects The repository contains the list of awesome ✨ & cool web development beginner-friendly ✌️ projects! Web-dev-mini-projects ADD AN

Ayush Parikh 265 Jan 3, 2023
A customizable lightweight Alert Library with Material UI and awesome features.

SoloAlert A customizable lightweight Alert Library with Material UI and awesome features. view soloalert on npm : https://www.npmjs.com/soloalert Inst

Arnav Kumar 21 Nov 30, 2022
🐢 A collection of awesome browser-side JavaScript libraries, resources and shiny things.

Awesome JavaScript A collection of awesome browser-side JavaScript libraries, resources and shiny things. Awesome JavaScript Package Managers Componen

chencheng (云谦) 29.6k Dec 29, 2022
This Repository contain awesome vanilla JavaScript projects.

Awesome JavaScript Projects You can Have a look here Website Are you a Newbie in Web development and want to dive deep into Javascript? Are you lookin

Vishal Rajput 1.5k Jan 3, 2023