Blog Archives

Reddit Insight Logo

Reddit Insight: My Hack Reactor group project was featured on TechCrunch

About three weeks ago, we started our group project sprint at Hack Reactor. The class broke up into teams of 4-5 students to work on a large project of our choosing, that would showcase our full-stack development skills. I was part of a team consisting of Patrick, Elle, Alex, and Bill, and we formed an idea to create an analytics suite for

Our project is called Reddit Insight, and we launched our first version of the site 5 days ago. In that time, quite a lot has happened, and 100,000+ people (and counting!) have visited the site. The highlight of this experience so far is having TechCrunch pick up on the story and invite us to their offices to do an interview about our work.

Check out Elle and Alex on TechCrunch TV!

When we set out to create Reddit Insight, our goal was to create an app that would be interesting to the Reddit community, and would hopefully gain some traction. We also wanted to build an interesting app that would be exciting to talk about with future employers during job interviews.

Our first course of action with this project was to silo responsibilities, and then start working on the app framework. I decided to tackle the front-end MVC structure with Patrick, because that required extending skills I already had surrounding Backbone routers and controllers. We decided on a single-page structure, with dynamic views that would be shown/hidden based on the user navigation.

To help keep everything organized, we created a controller, which is typically not found in a Backbone application. We also created a global object with name-spacing, so that modules could be re-used throughout all areas of the application. We called this global object Redd, and we extended all of the Backbone events to this object, so that we could listen to all events from everywhere in the app. Some example app structure code:

//global Redd object
var Redd = _.extend({
  Views: {},
  Models: {},
  Collections: {},
  Templates: {},
  Controller: {},
  Router: {},
  d3: {},
  initialize: function() {
    //more code here...
}, Backbone.Events);

//part of the controller file
Redd.Controller = Backbone.Controller.extend({
  initialize: function() {
    this.navbar    = new Redd.Views.Navbar();
    this.header    = new Redd.Views.Header();
    //more instantiations here...

While Patrick and I were building the client-side framework, Alex and Bill were busy using Reddit’s API to download over 240,000 posts and over 200,000 SubReddits worth of data. Once we had that data in our Mongo database, they starting using Python machine-learning scripts to analyze specific segments of the data to find interesting facts that Elle could model using a d3 graphing library.

After two weeks of working on this project, we had a working prototype to show to our classmates and instructors on presentation day. We made our index page an animated info-graphic, which worked well for large-screen presentations. We had also implemented real-time performance graphing of a specific post on Reddit, thanks to Elle’s work with dynamic d3 charts.

Last Saturday, we officially launched an unfinished version of the site on the r/JavaScript SubReddit to get some early feedback. The results were not good. Most users did not like our animated info-graphic, and the site completely broke for mobile users. Users on Reddit also complained of a bad navigation experience, and pointed out a few bugs in different areas of the site. This was exactly the feedback we were looking for.

All along, our instructors had been telling us to cut all features, and to get our app to market as quickly as possible. Having an unfinished website go live to a small set of users is way more valuable than waiting to launch until you think everything has been perfected. It is better to fail fast, then refactor, than to spend a lot of time building features that the public may not even like or use.

I took the user feedback we received to heart, and I completely refactored the homepage and navigation on Sunday. I made the site mobile friendly using a responsive grid, and I created much clearer calls to action and feature lists on the homepage. The site was now ready for the spotlight.

On Monday morning we posted a link to Reddit Insight on the SubReddit r/Technology, which was the section of Reddit we had identified as having a higher positive feedback rate than any other SubReddit. The user feedback was immense and immediate. As our post climbed higher and higher on Reddit, the number of users on Reddit Insight kept growing. Eventually, we got all the way up to the #4 post on Reddit Technology:

Reddit Insight on Reddit Technology

This is about when things started to get crazy. Gregg Finn, who writes for a marketing website called Marketing Land, saw our post on Reddit and wrote a blog post about us. He then sent it out to their 40k+ followers. This post was quickly picked up by Google Analytics, who sent it out to their 270,000 followers:

Google Analytics Reddit Insight

From that tweet, Reddit Insight exploded within the marketing community. We were re-tweeted and blogged about all over the world. Our traffic load started to strain our Heroku server, so we had to add 2 additional worker dynos to help with all of the traffic.

Our app really struck a chord with the professional marketing community. There seems to be a great need for a brand awareness and analytics tool for the black box that is Reddit. If we were to move forward with this project, I believe we could focus on the marketing community, and make a tool for them that could be monetized.

Reddit Insight concurrent users

536 active users on Reddit Insight at one time!

Our press coverage reached it peak when we were invited to the TechCrunch offices to do a video interview about Reddit Insight! We couldn’t believe it. They would only let 2 of us on camera, so we used the JavaScript random number generator to decide who would get the opportunity. Alex and Elle got lucky at the right time, and they ended up doing the interview with Colleen Taylor of TechCrunch TV. The TechCrunch team was great, and they really took the time to learn everything about our project and Hack Reactor.


On set at TechCrunch TV


L to R: Patrick, myself, Elle, our mentor Larry, Alex, Bill

The TechCrunch article came out yesterday afternoon, and we experienced another traffic spike while we were at the top of their homepage. The spike was not as large as on Monday, when we were at the top of r/Technology on Reddit, but the traffic from TechCrunch stayed on our site almost 4 times longer and was much more engaged with the content.

All of this has been an incredible experience in full-stack app development, marketing and launch promotion, and dealing with scaling issues. It is incredibly satisfying to have something you build be accepted and praised by the community you built it for. Reddit Insight has been used by over 100k people in 156 countries around the world in only 5 days! That right there is what is so incredible about being able to build things for the web. There simply is no other medium in which you can reach that many people, in such diverse areas of the planet, so quickly.

A few of the websites that covered Reddit Insight:
Tech Crunch
Marketing Land
Digital Trends
The Slanted
Reddit – r/Technology Comments

We have a few more media interviews scheduled, so look for this list to be updated soon.


Check out or view the open-source code on GitHub.

Read more

A One-Day Sprint with Backbone.js – Backbone Solitaire

Today we took a break from the regularly scheduled sprints. The idea was to focus on a topic you wanted to spend more time with, and to come up with an app idea you could implement quickly. This was a good exercise in project management, along with testing how much of a skill you could put into an app on your own.

I decided to build a simple solitaire game using the Backbone.js MVC framework I talk about in my Hack Reactor Week 3 blog post, along with CoffeeScript. I already had working deck-shuffling code that I could use from the blackjack game we built, so I figured it wouldn’t take too long to translate that into a new card game. I was definitely mistaken about this.

I started the project with a whiteboard session to draw up the game layout and initial deal of all the cards. This would help break up the app into smaller chunks that could be translated in the different models and views. I then sketched out all of the individual modules and organized them into their Backbone components. I ended up creating the following models and collections: Card, Deck, Column, GameBoard, and Game. I also created corresponding views for each of these modules.


Rough styling of my solitaire views. Only the column and deck models have live data at this time.


Building a Backbone app from scratch was the biggest challenge of my day today. Laying out all of these models, collections, and views, and then making sure they can all talk to each other took much longer than I anticipated. Backbone takes a pretty big commitment of code before you can start to see your data rendered to the screen. I also spend lots of time in the Chrome JavaScript console to make sure all of my model data was in the correct place for each object.

After spending too much time diving into the details of Backbone, CJ came over to my workstation to see how things were coming along. I didn’t have much on the screen at this point, so he advised me to focus on the most simple task I could and completely get that model and view completed as my first deliverable. I decided to focus on the initial deal of the 28 cards in the main game board. This required focusing further on each individual column, and building a column model to grab the corresponding cards from the deck collection. I made some good progress once I was focused on this particular module.

Before I knew it, everyone was leaving for dinner break and I had just moved on to building the view for the 24 remaining cards in the deck after the initial board setup. This is when I realized that the project was going to take me quite a bit more time to complete, and I had been too ambitious in my project planning from the start. I should have chosen a much simpler concept, rather than a card game with complicated logic and drag-and-drop functionality. I will definitely remember this lesson when it comes to planning future projects.

My main takeaways from today:

  • Focus on the most simple version of a project.
  • A first build of an app is best accomplished by removing all features
  • Focus on small deliverables so you always have working code to commit every few hours or every day

Today was the first time we had been released on our own, to create a project from scratch. I was pleased with what I learned about Backbone.js, but I need to be less ambitious with my one-day goals at this point in my career. Hopefully I can find some time to work on this project more in the future!

I pushed my initial code to GitHub if you want to check it out, but it is most definitely a work in progress.

Read more

Hack Reactor Student Blogs

I have gathered up a selection of Hack Reactor student blogs and personal websites. You may be curious as to what past students have experienced, or what other students have built with their newly acquired web engineer skills. Enjoy browsing!

April 2013 Cohort:
Jake Seip:
Evan Peelle:
Alex Gaputin:
Eric Levin:
Dylan O’Carroll:
Brian Chu:
Bianca Gandolfo:
Elle Beal:
Patrick Stapleton:
Charles Holbrow:
Eric Levin:
Combiz Salehomoum:

March 2013 Cohort
Andrew Magliozzi:
Selby Walker:
Blake Embrey:
Mark Lee:
Nima Mehanian:

January 2013 Cohort
Mark Wilbur:
Mike Adams:
Coleman Foley:
Howard Tang:
John Katsnelson:
Tony Thomson:
Gavin McDermott:
Andreas Nauleau:

November 2012 Cohort
CJ Winslow:
Christen Thomson:
Henry Zhu:

Let me know if you know of any others to add to the list!

Read more