Dynamic Web Dev Final: Karaoke Flow

My NYU-ITP Dynamic Web Dev class ended up being fantastic.  We moved to Node.js Express, incorporated AJAX, MongoDB, Heroku, and Amazon S3, built a JSONic API, and toyed with socket.io and even some Processing + HTTP POST.  You can read the class notes and fork/view the github class code from Professor John Schimmel’s repositories online.

Karaoke Flow

My final project ended up being a party game.  People hit the site, probably best with a keyboard, and start creating “rhymes” based on a prompt of two topics, such as “yo momma” and “swag”, or “basketball” and “Maybach music”.

You start off with three choices: 1) start a new “flow” (an individual song) which 2) you can join into with the second choice (using autocomplete JavaScript to parse a list of open flows from the database), and 3) skip all the rhyme creation part and go right to performing a randomized flow.

If you work on an open flow, all the participants have five minutes (using a JavaScript countdown script) to come up with as many rhymes as you can.  When five minutes is up, everyone can submit one more rhyme before they’re sent to the performance page.

On the performance page, the next person up will (eventually) be able to grab a mic, start the random beat (so far I have random beats from Wiz Khalifa’s “Star of the Show”, Three Six Mafia’s “Hard Out Here for a Pimp”, and Drake’s “I’m on One”), and move up and down through the lyrics using the ‘j’ and ‘k’ keys.




I’m hoping eventually it can be recorded and people can vote on the best rendition of the performance.  People are judged (though this isn’t captured through the site yet) on how well they deliver their spontaneous flow.

I wanted to do a project related to music and parties, hence the project; hopefully at some point in my life, I’ll get to work on projects that make parties more kickass through technological integration with human party impulses.

Karaoke Flow was also my entrée into Node.js and Express, which I now love and will rewrite Galapag.us into it over the summer in preparation for my thesis next spring.

Online Presence

A demo of the site is up at Heroku: http://karaokeflow.herokuapp.com/

I have instructions on how to clone the code and install it so you can run a node.js instance at github: https://github.com/Xeus/Karaoke-Flow

Previous documentation from my blog: post #1, post #2.

Things Learned for the Future

I think what I got most out of this was an appreciation for JavaScript objects.  To be able to package up variables and containers and clone objects or pass them along into JSON, it was like what I was missing in web sites.  I’m still on the road down to something more like Backbone.js, which will allow for even more use of objects and static templating filled in with data.  Definitely enjoying being able to JSONify data into something that I can use throughout the site or offer to others.  I’m sold.

Our professor showed us passport, which is a brilliant module for handling users and security.  I was missing something similar when I was using Ruby + Sinatra.


If anyone’s interested in taking this further with me, let me know.  I definitely think some combination of karaoke, rhyme-writing, parties, and randomness would be a huge hit.