Manually testing your code for intended behavior is time-consuming and tedious. We will automate this process with Karma and JSHint.

BrowserSync allows us to create a LiveReload server with additional functionality, while SASS will make sure we can author our CSS in an easy way. This will result in a fully automated build system that we can use while developing.

We’ll use localStorage to store data for some persistence. Think of data like favorite animals, past matches, and so on.

Our application obviously needs some data. We’ll add a list of animal data and write a service to query that data.

A matchup obviously needs a random opponent and a random terrain. That‘s exactly what we’re going to do here.

Every animal is assigned a couple of statistics, along with their terrain performance. We’ll need to calculate their total score to determine a winner.

Now that we have all the separate pieces, we’ll combine them to determine a winner in a matchup.

We have all the logic needed to generate a match, but we can’t display it to the user yet. Time to create a view and show that information.

We need to display the animal and terrain information in an easily digestible way. We’ll use directives for this purpose so that we can re-use them later on, if needed.

After we’ve generated a matchup containing an opponent and a terrain, we need to select our own animal to fight with. We’ll implement that in this section.

Instead of starting the application in the Arena view, having a dashboard with some metadata would be a lot cooler.

If we get any errors in the application, we’d like to know about it. Using Bugsnag will allow us to track any JS errors that might occur.

Our production version will use minified source and vendor code, along with optimized CSS. We’ll create a new app folder that contains these production-ready assets.

Now that our application is ready for production, all that’s left to do is host it somewhere. We’ll use Heroku and NodeJS to serve the application.

We will briefly go over the entire application to see what we’ve accomplished, and for additional information we will go through some links and references.

We briefly discuss a couple of problems that we experienced during the development of the application and any future steps the reader might take in order to improve the application.