Theo Gainey

Sparkbox Team Availability Planner

This project is an internal tool for the Sparkbox team to use to plan and track team availability. For this project I worked with a small team of developers to build this tool over the course of 10 weeks. Together, with the help of our design team, we successfully built a tool that allows the company to make more informed planning decisions.

The Problem

Before this project, the tool our project managers were using for planning did a good job of tracking team availability. But, it did not provide all the information needed to make informed decisions. Why was this? Although the tool did separate team members by role, it did not provide a way to see the skill sets of each individual team member. This meant that when planning a project, project managers would have to look elsewhere to find if an individual team member would be a good fit. This was a time consuming process that needed improvement.

The Solution

The solution we came up with was to build a user friendly tool that coupled team member availability with details about their individual skills and interests. The tool allows the team to see who is available for a project, and what skills and interests they have. This allows the team to make more informed decisions about who to assign to a project.

Technical Overview

This project was built using the following technologies: React, Next.js, and SCSS. Additionally this project was deployed using Netlify. Although the deployed version of this tool is private, a demo version is available here.

My Role

On this project I was one of two developers who worked under the direction of a led developer to build this tool. During my time on this project I worked on both the front and back end. On the front end I worked to build the user interfaces, met with the project designer to refine and iterate designs, and ensured the project met accessibility standards. On the back end I worked to build the API that would allow the app to interact with team data.


One of the biggest challenges I faced on this project was that the designer only had a limited amount of time budgeted. Meaning that when design problems arose I needed to come up with possible design solutions on my own before meeting with the designer to finalize. This was a challenge for me because I do not have a design background. However, I was able to use the resources available to me to come up with possible solutions. In the process I learned a lot about design and how to better work with and communicate with designers.


Before this project I had never worked closely with a designer. Additionally the other developer on this project often approached problems differently than I did. This ended up being a great learning experience for me. I learned a lot about how to work with designers and how to better communicate with other developers. In the end, I am very proud of how this project turned out. Visually the project looks great, it was well built, and I learned a lot along the way.