Chasing Greatness.

Chasing Greatness - Winter 2025

Alexander Ovechkin has been one of the National Hockey League's premier players for two decades. In that time, he has steadily closed on a record that many thought was entirely untouchable: Wayne Gretzky's all time goals record.

It's been a while since I have written a web app, and I've been reading about a framework called Vue.JS, which I would like to learn. What better way to do this than to create an app to track his progress.

Defining Scope.

When learning a new framework, I like to keep things simple. As such, this app is simply going to display data about Ovechkin's goal scoring from the NHL API. No fancy pants AI models or advanced analytics needed.

Setting up.

Much like React, creating a project with VueJS only requires a few simple commands with npm.

Creating Components.

Everything in Vue is a component, therefore our goal tracker will be as well. Our tracker will function as follows:

1.) Fetch Ovechkin's player data from the NHL API.

2.) Parse the data to filter for relevant goal scoring data.

3.) Format that data nicely to display it to the user.

Obtaining the data from the API is easy enough, there's no need for authentication or anything in this case, so we just make a simple HTTP request

This returns a fairly large JSON object. Fortunately, it is organized quite nicely, which means we can grab Ovechkin's career goals quite easily, and use this to calculate some deltas for how many goals he still needs for the record

We could get Gretzky's total goals from the API in the same way, however given that he has been retired for a quarter of a century, I believe it is safe for us to hardcode them at 894.

We'll also extract his current scoring rate from his last 5 games to give the user a rough idea of when he might break the record. There are much, much better ways to do this. One that comes to mind is to analyze shooting rates and percentages, and compare them to his career average. But as stated prior, that is outside the scope of this project, thus this will suffice.

Conclusion.

I like Vue. A lot. Utilizing it feels like a much more streamlined version of React. This whole project only took me a couple of hours, most of which was wrestling with scaling images in CSS. I'll most likely utilize Vue for any future personal projects for which it is applicable.

As per usual, the full source for this project is on my GitHub.

Google Sites

Report abuse