JohnKaraoke

Inspiration

• We love karaoke!
• Trying to people's lives more convenient and accessible

What it does

• Transcribes the previous, current, and future lyrics on the screen
• Plays and pauses music
• Shows song progress

How we built it

• Used Javascript, React, and Node.js
• Prototyped the project layout in Figma

Challenges we ran into

• Getting the spotify-lyrics-api to properly deploy onto our project
• Making the CSS file to work with different resolutions and window dimensions
• Fixing the search feature not working as expected
• Setting up timers to keep track of the song's progress
• Correctly formatting the time progress displayed beside the progress bar

Accomplishments that we're proud of

• Extracting the lyric information from the API
• Having a finalised CSS layout and a clear HTML structure

What we learned

• To work closely and delegate tasks for everyone
• How to structure websites with containers
• Javascript.

What's next for JohnKaraoke

• Add a settings feature to alter the pace and volume of the song
• To have a split-screen to show different lyrics on the page for multiple users to read
• Let users save their songs!
• Expand the search feature to work with songs outside of Spotify
• Add music video behind lyrics

Built With

• javascript
• node.js
• react