Remix Competition Platform – Code Race

Day 1 – 1/6/2017:          2.5 h rs

Today my partner for project and I had our second productive meeting to set our project timeline for the next 5 months.  We decided that our first release is definitely going to correspond with a Remix Contest.  I did “” remix competitions over 10 years ago and I feel we can do a really good one again.  Today in 2017, remix competitions are a huge rage.  Most of them appear rigged, crappy prizes, or just a bad platform to interact with the contest.  With a need for a solid, simple, clean remix platform, we have added to our product line and business plan.  This implementation is a single upload version of record label’s submission system where an artist is able to submit 1 remix per contest.  After submission they are able to share their song with friends, djs, social media, and other sharing methods for boosting their remix’s superiority over other remixes.

Within just a few hours of the business meeting concluding I had the template chosen, carved out for “” and fake contest, the subdomain’s hosting setup, SSL setup, a fb developer application setup, and my Surface Pro ready for doing development.  I wanted to do all this work “out of the office” so I am working on the couch for this one.

Day 2 – 1/7/2017:          5.0 hrs

Today I started out straight away with carving the template down, adding a facebook login, then a normal signup login, and then the upload submission system.   I did not have to do much to port the code in.  I was careful to only bring what I needed, and only customized very little where the upload tied to a contest [ID] and a user [ID].  Some, if not all, of the facebook/login improvements will eventually need to be made in the main label application.  Once I had about 25 success remixes submitted, I then created the automation that would generate the templates Latest Remixes.  I set this to run everyy 15 minutes and confirmed it was properly generating html.

Day 3 –  1/8/2017:          6.0 hrs

This morning first thing I did was improve the submit system with some accountability.  When a user submits his entry into the contest they are marked complete for that contest using a database table contests_entries.   After this insert a user is not able to upload another remix on this contest.  Next I pulled the default comments html out into a separate file, then created automation to update that file from database.  I then inserted some fake comments into the database to make sure this automated flow is properly working.  Now I can tackle the user interface View Comments and Add Comments.

It took quite a bit of time to get the # of the comments clickable, and loading a remix’s comments dynamically from /api/ getComments.  I had some issues with the big black modal’s css effecting a basic white bootstrap modal and had to work through those.  Now a basic white modal (commentsModal) will work in this template too.  For the commentsModal I decided to create a scrollable text chat back and forth between users and the remix owner.  I also got a play button overlay working on top of the cover artwork.  When I add a player I can easily connect it to overlay play button.

Next I tackled the like action by creating a uploads_likes database, the like click event, an api to check for user like on contest and insert like if not already liked, and finish handler to increase the count in the parent object.  The last thing I did today was test on my iphone to make sure everything looks and works okay at the responsive mobile size.   I did notice a few focus page top issues after user interactions so I will have to handle all of those so the focus does not reset improperly. I am also going to need to block public access to the site.  We are getting some peoples attention already and I want to lock down access until we launch the site officially.

Day 4 – 1/9/2017:          2.0 hrs

Today the first thing I did was to lock the site down at the preloader and create a way into the site only if you have the “beta” password.  I then fixed some user input and user icon issues I noticed last nite testing in my iphone.  I hooked up the contact links to a new contact form and got that post all working nicely.  I then did some further testing to make sure everything is working correctly.

Day 5 – 1/10/2017:          4.0 hrs

Working in the office this morning I wanted to tackle the Ruby on Rails Work.   See Day [X] on my Ruby on Rails post where I go into detail about adjustments necessary for that application to host from dynamic urls and switch databases accordingly.  Once I have the urls working,  I want to use them as embed share codes and modal content on the local ( url.

It is easy to get lost and work on to much.  At the 16 hour point I hoped to be further along, so I want to be clear about what needs to be done in the next 6-8 hours.  1) Player 2) Real but Demo Contest 3) /contest/1/ page

After finishing the Ruby on Rails work I started on a player.  I found a really good player that used something called WaveSurfer.js:

I used the ZOOM Example and created a demo player at the bottom of the site.  I then went to work to make it play the remixes, play the original track, and hide/show the big player.   After a lot of back and forth I have it working pretty well.  I did have a few issues where Chome (windows 10) crashed a few times.  I also had issues with Edge (IE) and Firefox not allowing the page to scroll (unrelated to player).  Once I got both of those browser scrolling issues sorted the site works okay in those browsers.  Firefox still struggles to have multiple play buttons and in all browsers I am also noticing the wave form sometimes does not load even if the song does load.

Day 6:  1/11/2017        3.0 hrs

Today I spent time finishing up the index.php into a template I could copy into additional pages.  I moved the core html objects into the file library and included them back into the template.  I then copied the template to a contest page to run /contest/[ID]/ urls and the VIEW ALL REMIX link on the front page.   I also finished out the contest section to use an array of $contest settings (name, title, image, stems, artist, track, links, etc) vs a live database hook (for now).   I added a default image for remixes uploaded without mp3 id3 cover image.    I added a countdown to end of the contest. I also made some final adjustments to the player to ensure that all play actions will load the waveform and play without crashing.  When I was hidding the waveform div with class=”hidden”, and then load a new waveform, it would completely crash the browser.   My solution was to never really hide the div, but to lower it under the page fold.  I then went through some serious testing by signing up, uploading, and submitting remixes with Surface Pro’s Edge,  Internet Explorer, Chrome, and FireFox browsers.

Day 7:  1/12/2017        3.0 hrs

Today I spent time finishing up some of the last required things.  I adjusted the template to recognize #code on the url.  If a valid #code, then the page will load json from the api and replace the main site #hero area with the corresponding #code remix html.  This is the remixers share url and is extremely important.   It will also load their remix into the player instead of the original.   I did not spend time improving the page markup so I will need to come back and do that later.   Today I also got the comment count increase working with a new api call and necessary functions to place and return the count # after adding a comment.   Last but not least I finished /login/ so that anyone creating a login type user can login to the site later.

Day 8:  1/16/2017           4 hours

Today I spent my time making a summary of what is needed to get our first beta contest on the site.  I then finished up a lil design work on the #code urls some of this was really ornary.   At the end of this day I am finished with most of the startup operational work to get out first NON DEMO contest online.  The next part of this project includes resetting the data, bringing in the first beta contest, allowing entries, waiting for remixes, improving the system from feedback and testing.  I have begun asking people to specifically test entering the current fake contest.

At the end of the day I spent some time debugging and fixing issues with the #hashtag urls.  It’s amazing how much of a pain in the ass it can be to use #named anchors that have been around before anyone decided what a hashtag was.  At end of the work, clicking an Up Vote will push you to top of screen and load that remixes main html content.  It works on the main front page remix site and on the /contest/[id]/ urls.   I was able to accomplish without any page reloading, making it work very fast.  When someone shares their url, it will preload their content.  If anyone comes to the contest page without a referral code, they are going to see the latest Up Voted track.  This “King of Hill” mentality should keep people sharing urls, and the ones sharing the most, will get the most plays and top placement from our entire system traffic.

Day 9:  1/17/2017           4 hours

Today I am working with some of the things to make site more user friendly based on testing notes  from last nite.  I added a method to see your uploaded remix modal, and began working on making that information editable after submitting it.  I had a bunch of issues with tag-it and preloading the tags.  Today was even more ornary than yesterday and making good progress was tedius.  I got the play events checking if the song is already loaded, and if it is, any play action will not restart/reload it.  This seems to fix all of the issues with a new play request restarting the same song.

Day 10:  1/18/2017           1 hours

Today I just spent a small bit of time to make the default image open a modal to allow uploading a new image.  This went pretty fast as the code was already working from my Bootstrap Invoice Builder project.  The user image  works 3 ways now.  Top most is now stored in the db if the user has uploaded one, next is the facebook image if the user is a facebook user, then finally the default image.

Day 11:  1/19/2017           1 hours

Today I went to work on adjusting the upload  process so after upload completes the submit modal opens automatically.  I felt like people may miss that last step so it made sense to make modal open itself.  At first i tried to trigger the button click from the upload completion event.  It did not seem to trigger.  I moved all of the button click event code to the upload completion event for the final solution.  One less click event handler is not a bad thing.

Total Time:  35.5 hours


Current Todo:


  1. View My Remix Uploads
  2. Ability to Save Links to account (not just upload)
  3. api addLink needs check before insert
  4. Need to add comment/chat ability on the contest or main release
  5. focus issues