Yesterday was the Q3 open hack day for OpenDNS engineering. Because our San Francisco engineering team just moved into a new building, our hack day team decided to build a fun dashboard to decorate the new space. The team consisted of Wei Jiang from MSP Engineering, Joshua Wertheim from Sales Engineering, and myself.


Here are the basics:

  • The back-end is Flask. We had to proxy some public APIs due to CSRF complications in the browser. With Flask and Requests, some of the proxies were as easy as this:We also use Python to convert some XML APIs, such as Muni, into JSON server-side rather than client-side.
  • The front-end uses widgets with Bootstrap-based CSS. We grabbed a theme from Bootswatch.
  • The widgets were built using ReactJS. This was beneficial because it allows us to do things like increment time by the second without causing a flicker. When data changes, React compares the real DOM to a virtual DOM, then only necessary changes rather than reloading all elements. This makes the visualization smoother.
  • We deployed using Docker on an internal Quadra hosting platform.
  • The TV dashboard is powered by a Raspberry Pi 2 computer.

If you are in our office, check out the TV by the engineering kitchen! Current widgets include the weather, latest engineering blog post, and live Muni departure times. In the future we plan to add widgets of the lunch menu, Caltrain departure times, and conference room availability.

And finally – thanks to all of the OpenLate speakers that taught us the technologies we used in this stack:

  • Peter Hunt, ReactJS contributor (OpenLate SF July 1, 2014)
  • Jameson Lee, Flask maintainer (OpenLate SF Aug 12, 2014)
  • Mark Otto, Bootstrap author (OpenLate SF October 7, 2014)
  • Jessica Gadling, OpenDNS Quadra Team (OpenLate SF October 21, 2014)
  • Jérôme Petazzoni, Docker Maintainer (OpenLate SF January 27, 2015)

This post is categorized in: