Making Of - Player Fan (A Hockey Fansite)

I created a hockey player fansite. I have been super busy lately between vacation, day job and my first ever full-blown fullstack application. I will write a bit about the design process.

TL;DR

I am launching my first ever fullstack application, Player Fan. It is an NHL (National Hockey League) related website that allows you to follow specific players rather than teams, see their recent performance and have access to all their goal videos easily.

What is the site about?

The site is about NHL players. It’s main goal is to follow players, not teams. Following teams is already easy, just visit any sports site and they have team standings, game-by-game scores and some game videos easily available.

Following single players is more difficult. If you wanted to check a specific goal made by a specific player in a specific game, it is so much harder. That is what I build Player Fan for. The user can easily view the hottest players of the recent games via player cards (image below) and check the goal videos of any player that has played at least one game during the season. Of course, the player has to have scored as well, otherwise there is no video available. 😊

A registered user can also add players to his personal favorite list to see their recent stats and goals quickly every day without having to go through game recaps hoping for their player to score. This is a huge time saver for fans with limited time. Once I got the videos working, I spent at least 1,5 hours just watching goals videos (that time is excluded from the project time record that I show in a later chapter. 🤣).

How I came up with the idea

I have been a hockey fan since forever. I am Finnish and our national sport is ice hockey. There is no question about it. Football (soccer) doesn’t come even close. I don’t think there are any other countries beside Canada and Finland where the number one sport is undoubtedly ice hockey.

However, while you are a student, you have a lots of free time. If you, the reader, are a student and you disagree, just wait for the reality to hit you in the face when you start working and other stuff starts to invade you life. So, as a student I was able to follow teams, players and watch matches or at least the condensed games or game recaps. That has changed in the recent years and I haven’t been following NHL that much at all. I still know more or less which teams are doing well and who won the Stanley Cup, but I haven’t had the time to really follow the sport, even if my interest for it hasn’t gone anywhere.

I decided that something needed to be done. I wanted to create something that allows me to follow my favorite players easily and efficiently without spending too much time that I don’t have. From there, step-by-step, I started researching what was needed to create such a website. Some questions came up: “Where to get the data?”, “How to get the data?”, “Is there an API?”, “Is it expensive?”, “Does this project provide value for others?”, “Is this too big of a chunk for my current web development skills?”

After a couple of hours of research I resolved to give it a go.

Planning

I didn’t do that much planning. I was so existed to get started that I just couldn’t sit down for hours to think about how to structure the application and what was really needed. I just wanted to start getting some lines down.

That, of course, was a huge error and lead up to me refactoring a bunch of stuff many times over. I guess this is quite normal in software engineering, but sure some of it could have been avoided by some solid planning.

My planning basically went like this: “Ok. There is a cool undocumented API that surely will be fine for what I need it for. I also like React, GraphQL and Node.js so I will use those. The DB will be MongoDB, because Atlas is so easy to setup and I have used it in a smaller exercise.”

The database might have been the biggest error, because I ended up using Heroku for deployment and it has PostgreSQL integrated in it. Also, I ended up writing up some huge aggregation pipelines that probably would have been cleaner in SQL.

Anyway, making mistakes is not stupid. Not learning from them is. The next time I will contain myself and have a minimum requirement of a few hours planning before I can get started with coding.

Project time table

I kept record of my working hours on this project. It is not 100 % perfect. I surely have missed some hours here and added some hours there. I usually can’t work on a thing without interruptions, so keeping accurate record without a time tracking app (I didn’t use one) is difficult.

I did also quite a bit of off-record studying. I had little experience with MongoDB before and close to zero experience on GraphQL and CSS before starting the project. I had to tackle all of those so I spent at least some 40 hours on studying those and reading documentation.

Also the task descriptions are somewhat vague and cryptic for someone who is not me. In any case I hope that it gives you and idea on how the project developed and may give some hint to beginner devs on how much time is needed for a complete web app. Sorry for the long table.

One of my hurdles was definitely how to style the site. It is not clear from the time records, but I attempted styling the site three times. First with styled-components, then with semantic-ui and then in August I did everything again with styled-components.

If you are a seasoned programmer and you skimmed through the table, you surely also noticed that I’ve done almost no testing at all. I know. I should’ve have done some testing from the beginning. Tests are something I will definitely have to add to avoid future headaches.

I stopped recording the hours a bit more than a week ago, but I am still working on the project.

Future plans in the pipeline

I am full of new ideas for the site. The season has started and the first version of the site is out, but there is so much more to come. The current plan is to convert the site into a more social network like user interface with the possibility comment on videos and vote for the best ones.

Everything is still open though. If you have an idea or a feature request, please leave a comment below, contact me via the contact form on the site or tweet me at @playerfansite.

Thanks for reading.