This is a fun project about creating a beautiful pictures of lyrics. It is a simple web application that allows you to create a picture of your lyrics.
I got the idea of this project from a Pinterest post then I thought of making it a web application. Here you can search any songs (obviously that has to be on the spotify server) and then you can create a picture of your lyrics. Click here to see it in action.
- HTML
- SASS/SCSS
- JavaScript
- API's
Now the challenge is to make this responsive and mobile friendly and also to make it look nice. I also have to call two APIs the first one is to search the song and the second one is to fetch the lyrics of the song.
There is some issues that I don't know how to fix it yet. Like I wanted a download button that can convert the html to beautiful picture and I used some libraries like html2canvas, domtoimage but in every cases either the rendering isn't good or there is issues with browser compatibility.
I learned how to use the API's and how to use the libraries that I used. I also learned how to make SASS and JS more modular and reusable. I also learned how to make the vertical scrollbar hidden but still scrollable. I also learned about how to hide API keys, how to use the environment variables and how to use the environment variables in the netlify functions.