An AngularJS web app that takes advantage of AngularJS's two-way data binding to provide real-time score results


As most apps starts, this one started as a result of a problem that I saw in the world. A friend of mine came to me telling me about the outdated way that my former swim team was keeping track of scores at the meets. They wrote down places that each swimmer got and had to convert those to points after each points with a calculator. He asked for an app where the coaches and scorekeepers could instaneously know the current score of the meet and afterwards see the breakdown by event.


The first thing I decided was to built this as a webapp as opposed to natively with iOS and Android. I wanted to complete this project as soon as possible, but also wanted to support the wide variety of devices that members of the team carried (one even had a Windows phone at the time). These problems made the choosing a web app a relatively simple one.

While many web apps are written using a backend, I realized early on that this one would actually benefit from the simplicity of a solely front-end application written using AngularJS.


As my first AngularJS application that I built myself, I expected a number of challenges. Luckily for me, using ng-repeat, it was remarkably easy to build out the web application using Bootstrap. The biggest issue I had was with the titlebar's scoreboard. I had functions that would easily sum up each individual event, but I also needed to sum all those event scores, everytime there was a user action. Eventually, I was able to create a function using the index in the for each loop to calculate the total sum. My next problem came from the different point values of relays and individual events. Unfortunately, Angular doesn't allow you to call a function as the ng-true-value for different elements within ng-repeat, which meant that I had to go for a very "hacky" solution, where I hard-coded into an array, the indices at which the point values had to differ and if it hit those indices, the ng-true-value would be overrriden using a function. Unfortunately, this is a limitation with Angular, and one that seemed to be a common problem, so I hope that the Angular team addresses this when the overhauled Angular 2.0 is released.

Using Bootstrap, I got the website into production after working around the clock for a few days. My real troubles came after I looked at the Bootstrap version. One of the disadvantages of the widespread distribution of Bootstrap is that everyone from GitHub to the simple sites that developers make use it and create a blandness to websites. Instead, I decided to take advantage of the Angular Material Project, which brings material design to the web in the form of AngularJS. Angular Material builds off the Polymer Project, a framework that allows you to define your own HTML elements. For example, I called the toolbar <md-toolbar> and used the Material Project's CSS and JS files to render a Material Design toolbar.

So what issues did I have with Angular Material? A LOT. For starters, I spent more hours than I would've dreamed to get a single material element to properly render. Finally, I discovered that Chrome required me to run a Python server locally in order to properly display the paper elements. In addition, I faced the issues of this being a very early build. I was using version 0.6.0. After discovering that I was unable to change the colors properly, I was forced to use the release candidate version of 0.7.0, which caused my website at times to not work at all. Eventually, I was able to get a stable release, and after figuring out how to use the polymer elements, I was able to construct a material designed website using Angualar Material's components.


Visit the live site here. If you want to check out the source code, I've also published it on my GitHub.

Pirate Adventure

A tile-based adventure game utilizing arrays and objects leading to an eventual boss fight

NHS Redesign

Complete overhaul of a not-for-profit's website

Non-Stop Donut Shop

Brand new website that adapts to multiple device screen sizes by using a skeleton grid