Why I built a company dashboard from scratch
At Sqreen, we have an initiative called “Sqreenities.” A Sqreenity is basically a week where you step away from your normal day-to-day to work on a project or topic that is important to you and that has some relevance to Sqreen or security… Pretty cool, no?
Recently, it was my turn to do a Sqreenity, and I decided to use my time to create a company dashboard that you can display on a TV anywhere in your offices. I wanted to share the project, and a bit of why I decided to use my Sqreenity time this way.
What was the issue?
Sqreen is growing really fast as we’re hiring at the speed of light and it’s getting harder and harder to keep up with everything that’s going on. We have calendars for different events and things like vacations, but it is getting more and more full between time off, international travel, conferences, etc – and so pretty hard to read and grok.
Part of the reason this is so complex for us is that we have two offices, one in San Francisco and one in Paris. So we have nine hours time difference between Paris and SF. It’s not easy every day to follow what’s happening where.
We also fly Sqreeners around the world to speak at or attend amazing conferences (for example, our engineer Vladimir recently talked about Node.js in Los Angeles for the OWASP AppSec Cali).
You’ve also seen earlier in the post that Sqreeners can sometimes take time off. Or work remotely. Or be off but only in the afternoon. Or so many other things that can happen, and it will all be in the calendar.
We also share internal events like our workout sessions or happy hours. Any pieces of information that can bring our team closer to each other.
So with all of this useful information piling up in our Google calendars and being hard to sort and understand, I thought it could be much better to gather all that nice information into slides with some other information like the weather and time in every place where Sqreeners are.
I figured the best way to present this information was to create a Google calendar dashboard where we can clearly see what is happening in our company.
How I built a Google calendar dashboard: VueJs for the win
I tried to find a service that displays employee-related information on a TV but didn’t manage to find any (maybe you know of one that I missed?). And in fact, I didn’t really want to add a new tool to manage among all the tools we already have. So I said to myself: why not use the Google API to get data from our calendar?
So I started my Vue.js application with the amazing Vue CLI and played around with the Google API to get some data. No backend needed in that case. I also used Contentful (a fellow Point Nine company) to create an employee database to use every time I need to display information about a Sqreener (like their profile picture, the birth date, etc). And if you manage to correctly setup the Google authentication, the next steps are easy. The most difficult part was to translate agendas randomly formatted in the calendar into homogenous and responsive blocks.
Here’s how I approached building the Google calendar dashboard:
First, look for the events that make sense for people to know about, and that can be logged in a calendar. In our case, it was where people were, the upcoming conferences, and our internal events. Then you almost have the shape of your first slides.
Second, find the right calendar to get that information. Google calendar gives a good amount of information, but you can also enrich it by adding information in the description in JSON format in order to enhance the event display. You’ll probably have to define naming conventions if none exist to make sure you can rely on the title to sort them out. Don’t hesitate to add other data sources to enrich your events. I used Contentful as it’s very easy to use for anybody to edit and the API is also pretty strong.
The initial problem I ran into with using Contentful as the employee database is that the Google Calendar API doesn’t give you the profile picture of the attendees. And the calendar API only shares who has accepted the event, which is not how events that are informational in nature work (like the time-off calendar). That’s why I decided to parse the event title, getting the name out of it and getting the information I needed from Contentful by matching the names.
And then comes the code.
I built everything on the frontend. I fetch all the events using vue-gapi, a very handy library that makes calendar data fetching very easy. And then, I store them in a global state using Vuex that refreshes on a regular basis to make sure the information is always up to date.
VueJs is a pretty simple framework yet very powerful. You can get your application up and running very quickly. So I built my slides, feeding them with the right data and was able to see our events collected outside of the calendar in our new Google calendar dashboard.
So what does the dashboard look like?
I was inspired by the scrolling forecast band you can see on TV channels and also by Algolia’s dashboard that they made and shared during a meetup. The goal was to make sure that all information would be easily readable from far away and easy to digest. So it’s a basic layout composed of a static header with critical information like the on-duty person or the person in charge of support for the day. The footer shows all the places Sqreeners are, the clock, and the current forecast. In the body, the slides rotate to show all the relevant information for the day and coming week.
Conclusion
Shared calendars are easy and useful to a point, but eventually, they start becoming too noisy and crowded. A more simple, visual dashboard that presents this information on TVs in our respective offices is a much cleaner and easier to understand and communicate this information. Keeping everyone in the company plugged into what’s going is important, especially when your team is split across two offices, and now we’ve got this Google calendar dashboard up and running to make it easy for everyone.
We thought, if this was useful for us, it would probably be useful for other companies with growing distributed teams. I already have many ideas to improve it.
I plan to make it open source in the next few months but it’s so easy that you should create your own right now. And if you have any questions, feel free to contact me on Twitter or by email, or if you’re in Paris, come to have a coffee and take a look at our new offices.
