On August 14th, we had our third Thursday night minihackathon. The goal for this minihackathon was to use Firebase to create an collaborative app that should not be collaborative. (FYI, Firebase is a service that allows users to store data for their web app in an cloud database.)

Keep in mind, we had already spent 11 hours at Hackreactor doing a bunch of coding, and here was Drew (organizer of the minihackathon) asking us to voluntarily spend another 2 hours at Hackreactor doing a bunch of coding for an app that he himself said no one would ever use. Huh?

And yet, I stayed. Partly because I’ve never worked with Firebase before, and partly because the project sounded fun. I like being sarcastic, and this was the first coding project at Hackreactor that I was able to use my humorous side.

It took, like, half an hour before I could come up with a project idea that was absurd enough to keep my sarcastic side amused, and practical enough to keep my techy side challenged. After brainstorming various ideas, I decided to create a collaborative mashup where users could submit YouTube links and the page would play all the videos at the same time. Here’s the demo of Y’all Tube.

yalltube

    Challenges/Things I’ve learned

  • This was the first time I used Firebase and I was surprised at how easy it was to set up. All you have to do is sign in, give your app a name, and add three lines to your code.
    // include the Firebase script on your page.
    <script src=”https://cdn.firebase.com/js/client/1.0.19/firebase.js”> </script >
    // connect to the Firebase link for your app.
    myData = new Firebase(“https://xxxx.firebaseio.com”);
    // push the data the Firebase server.
    myData.push({key:value });

    And BAM! The data from the app is now being stored in the cloud. Yay, internet magic.

  • While storing the data in Firebase is easy, getting the data out of Firebase is a bit trickier. I’m used to working with mysql where you can do queries across multiple tables. From my quick perusal of the Firebase docs, complicated queries would be difficult, so I had to limit the features of the app.

    This project drove home a point that Hackreactor instructors have said numerous times: pick a databased based on the needs and functionality of your app. In this case, the database was chosen ahead of time, so I adjust my app design based on what I could make the database do in two hours.

  • FYI, after the hackathon, I found out that it is possible to some complicated queries in Firebase. Firebase advanced queries part 1 and part 2.
  • Simultaneously playing multiple YouTube video can slow down your computer a lot. I had to set a max limit of six simultaneous videos to a get a reasonable load time.
  • If you give people the chance to post a YouTube video, someone will inevitably post a Rick Rolled video and a cat video.