-
-
thumbnail
-
responsive design
-
annotation submission confetti
Inspiration
Two years ago, I suddenly really wanted to become a rapper. One of the steps I took during that period of time was studying the rhyme techniques of great rappers like J. Cole and Eminem. I wanted a medium that would help me quickly learn about the the rhyme techniques of these exceptional rappers since it took me a long time to finish annotating a rap song and a lot of times I missed out on a lot of rhymes--this is why I wanted to build Rhymepedia.
What it does
You can search up a song on Rhymepedia and view the rhyme annotations for that song created by any hip-hop enthusiast around the world--and of course you can also edit the rhyme annotations. Rhyme annotations are made by highlighting portions of the lyrics of a song, choosing the highlight color, and then pressing the submit button.
How we built it
The backend is a RESTful API server built with Express that's connected to MongoDB. Another Express server using a templating engine and Quill.js was built to serve the data to the user and allow them to freely highlight any part of a song. The backend also involves the use of the Genius API to scrape the lyrics.
Challenges we ran into
It was extremely difficult to make the lyric highlighting persist in the database. I was using Quill.js to highlight lyrics and it was my first time working with it so I encountered a bunch of bugs.
Accomplishments that we're proud of
I am really proud that the project is functional and that the website is pretty responsive. It was definitely one of the more fun projects that I have built : ).
What we learned
I learned a lot more about Quill.js and brushed up on my CSS skills. I also feel a lot more comfortable with Express in general now.
What's next for Rhymepedia
In the future, I would like to create more ways for users to interact with the application. Currently, I am thinking of adding a labeling feature for users to name the rhyme technique (for example: multisyllabic rhyming).
Log in or sign up for Devpost to join the conversation.