ibltsandwich / decypher

Full Stack Project inspired by Genius

DECYPHER README

Live Link

Wiki Design Documents

Description

Decypher allows users to upload and annotate song lyrics.

Technologies Used

Ruby on Rails backend with PostgreSQL database and React-Redux frontend. Javascript's built-in getSelection method was used for annotations.

getSelection()

Unfortunately, the method had some shortcomings and some workarounds had to be implemented in order to get annotations working properly. For example, highlighting an area and calling window.getSelection() provides you with the start and end indices of your selection, but only within the confines of the parent HTML Element.

Therefore, having the full lyrics in one <p> tag gives the proper indices for whatever is highlighted, but once links to the annotations are nested in as <a> tags, this disrupts the API's ability to grab the proper indices. After an inserted <a> tag, the next immediate index doesn't pick up where it left off, and instead resets back to 0. The method doesn't know to ignore HTML tags and can only accurately grab selections that are confined to one set of tags.

Annotations

The workaround here was to separate each line of the lyrics into it's own <div> tag with an id corresponding to the line number. This way the index will always start at 0 for each line, and line numbers can be used to accurately map annotations to lyrics.

Once a selected text is highlighted, the "Start Annotation" button will appear which, when clicked, will show the annotation form. The annotation form contains placeholder text that is equal to the highlighted portion of lyrics. After saving, they appear as a link that will direct the user to that annotation's url.

Comments and Upvotes

Users can submit comments on song show pages and upvote or dowvote comments. Comments can also be submitted on annotations to suggest improvements. Users may delete comments that they have authored.

decypher's Issues

Review 11/14

• Make sure errors don't persist when switching between log in and sign up
• Add ability to click out of modal
• Styling

All the functionality looks great, now it's time to focus 100% on styling. Obviously we won't be able to style everything perfectly since we'll need artists, albums, etc, but we should style everything we can without that content. Keep up the good work!

Proposal Review 11/7/18

Schema

• Everything looks good. Considerer making comments (and maybe even upvotes) polymorphic associations as a bonus so you can comment and upvote on both annotations and comments.