Tech @ Runtastic • 20.12.2017 • Runtastic Tech Team

The Runtastic TeamPage — Why a Side Project Is Always Worth It

Written by Niklas Hösl, Software Engineer Backend

You might never have heard about this piece of software developed at Runtastic, but for every new employee it is one of the first tools they work with, and more than a few appreciate having it: the TeamPage. Doesn’t really sound like it gives you muscles or helps you finish a marathon, right? But it’s still pretty cool. The following story gives you some insights into my favorite side project at Runtastic.

Tell me about it!

It all started with — what else — a DONI in February 2015. A few months before, we had just surpassed the 100-employee mark and were now spread out over two offices in Linz and Vienna. It started getting harder and harder to know everybody, and as we were still growing, the seating plan changed every few months and (new) employees were finding it difficult to remember all the faces. We had a Wiki page with some basic information about each person, but we definitely needed something new, cool and fancy! Some developers and some members of our HR department teamed up to create the first version of a website that focused solely on our great team. It consisted of an interactive seating plan enriched with company, personnel and contact details about each employee (back then we used Skype and didn’t have a central directory for all employee accounts). Via an admin interface, HR was even able to manage the data, seat assignments and upload avatar images. Thus, the TeamPage was born.

From a technical perspective, it was a simple HTML/CSS/JS setup with jQuery and JsRender on the frontend and a simple Node.js-based service with a MongoDB store in the backend. The employee data was stored in a Google Spreadsheet (which was easy to set up and, more importantly, easy to maintain for HR) that regularly syncs with the backend. With SVG images that can handle HTML/JS events like click or mouse-over, we found an easy and flexible solution for our seating plan. As a Windows developer back then, I didn’t have many contact points to most of these technologies before and I liked working on the TeamPage to get more diversity into my developer life. We were very proud of the result and getting this whole software stack running in 1½ days, and so were many others who could now easily find their colleagues in the office.

The seed and base for new tools

It wasn’t long before new features were requested and the following DONIs (and sometimes even regular sprints ;)) were used to work on them. Due to the separation of client and server, the API used to access the employee data soon caught the interest of other internal projects. One of the first API consumers was a tool that automatically generates email signatures for each employee. Last year our agile development setup with cross-functional teams was introduced and incorporated into the TeamPage, which was then integrated back into our Wiki to keep the ever-changing team structures always up-to-date there as well. Recently we introduced a tool to keep track of all the DONI projects, and it also uses the API to access employee data. Even Slack bots integrate with it already.

During the past 2½ years, I got to work with many people from different departments a mobile developer usually doesn’t have much contact with. For example, I got some very interesting insights into how HR works and how companywide processes were improved by organizational development using the TeamPage.

Broadening my developer horizon

Switching back to the technical perspective, the project and especially my developer skills have evolved over time. Shortly after the first DONI, a dedicated server was set up for the TeamPage, and I got access. I knew Linux a bit but not very well. In the beginning, I didn’t have any experience in how a deployment is usually done. In the first months, I “deployed” the code by literally moving the files to my private web server via FTP and then using wget to move them to the TeamPage server, just because this was the only way I knew how to do it. I still remember the day when a colleague showed me how easy it is to set up an SSH access key and then git clone it in the command line. After moving to the backend team, I got more time to refactor the code base. During this time, I also tried to fix a nasty browser caching issue. That’s how I got into contact with one of our web developers who then explained their deployment process to me. With this knowledge and some additional new backend insights, I fully automated the deployment and fixed all the issues.

Conclusion

Having side projects is one of the best opportunities to get into technical fields that you don’t have anything to do with your daily work. The TeamPage may have been my initial reason to move to the backend. It also shows that a side project can even be beneficial to the whole company. This small and simple tool helps lots of people at Runtastic day after day and serves as a (data) base for many other cool projects. Even while writing this article I got two new feature requests.

Do you also have self-developed tools at your company? What tools do you use to find co-workers in your office (beyond your eyes ;))? Share your experiences in the comment section below.

***

Runtastic Tech Team

We are made up of all the tech departments at Runtastic like iOS, Android, Web, Infrastructure, DataEngineering, etc. We’re eager to tell you how we work and what we have learned along the way.


View all posts by Runtastic Tech Team »