Chunk of Code

Making Of - Player Fan (A Hockey Fansite)

October 02, 2019

Player Fan logo banner

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.


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. 😊

Connor McDavid player card

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.


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.

day time tasks
09.06.2019 1 getting started
2 working on fetch-data
10.06.2019 2 studying api and working on fetch-data
11.06.2019 3 working on fetch-data
12.06.2019 2 working on fetch-data. problems with db saving functionality.
13.06.2019 2 fetch-data finally giving consistent results.
2 graphql initial setup done.
14.06.2019 4 working on graphql schema.
15.06.2019 5 working on resolvers.
16.06.2019 5 getting started with frontend
17.06.2019 4 css basic styling
18.06.2019 2 css basic styling
2 react router and navbar styling
1,5 started to implement semantic-ui instead of styled components
19.06.2019 2,5 semantic-ui implentation for now done. added user model in db
20.06.2019 5 implemented login system, user creation and forgot password
1 implemented cookies
24.06.2019 3,5 worked on the login system and personalized view for logged users
1 profile page for logged users
25.06.2019 4,5 notification system done. started to work on player algorithm
1,5 best player algorithm
26.06.2019 2,5 best player algorithm
1 frontend error handling
28.06.2019 2 studied apollo hooks and tried implementing them
3 implemented player following in the backend
30.06.2019 3 studied contextAPI and useContext hook
4 code refactoring, implementing contextAPI
01.07.2019 6 working on AuthContext and favoritePlayers view
02.07.2019 5 working on Heroku deployment
03.07.2019 1 working on Heroku deployment
3 apollo-express setup and apollo cache debugging
04.07.2019 3 fixed a bug in apollo cache. sort by gameDate instead of gamePk
1 working on the ui
05.07.2019 5 created search functionality
06.07.2019 5 worked on search and production version of the application
1 bug fix in the reduce-stats program
07.07.2019 4 unit tests
08.07.2019 5 unit tests and started studying tests for graphql
09.07.2019 5 units tests for graphql schema
1 searched for a source for player images and found one
10.07.2019 4 first version of player stats done. still needs a lot of work.
2 thinking how to reorganize the database
11.07.2019 4 started the db reorganization
12.07.2019 5 worked on data fetching scripts
14.07.2019 2 data fetching scripts
15.07.2019 2 data fetching scripts
16.07.2019 5 data fetching scripts
17.07.2019 4 finished the data fetching and created script for best players
18.07.2019 2 fixed unit test after significant changes in data structures
19.07.2019 4 bug fixes and cumulativestats resolver
20.07.2019 8,5 cumulative stats in fe and be. sorting and pagination working.
21.07.2019 8 working on standings, backend and frontend
22.07.2019 6,5 refactored the schemas and did the first proto of player profile
23.07.2019 6 fixed a cache bug and worked on the player profile.
24.07.2019 5 added support for milestones (goal videos on player profiles)
25.07.2019 4 working on the player profile / milestones
26.07.2019 2 added backside to the player cards
28.07.2019 4 best players optimization, stats table refactoring
29.07.2019 2 stats table refactoring
4 starting to design the final layout with styled components
30.07.2019 6 working on player cards
31.07.2019 6 working on player cards and card container
02.08.2019 3 working on layout
03.08.2019 4 working on layout
05.08.2019 4 working on layout
06.08.2019 5 working on layout
07.08.2019 6 working on layout
08.08.2019 4 working on layout
09.08.2019 2 Refactoring the navigation bar
27.08.2019 2 Refactoring the navigation bar
28.08.2019 4 Finished nav bar
29.08.2019 4 Working on player profile
30.08.2019 4 Working on stats and standings
31.08.2019 4 Working on search
01.09.2019 4 Working on search
02.09.2019 4 Working on search page
03.09.2019 4 Working on team profile
04.09.2019 4 Working on team profile
05.09.2019 6 Team profile and team links. Added fallback images.
06.09.2019 6 Refactored StatsTable and added highlighting
07.09.2019 6 Created loader and started working on sign up modal
08.09.2019 5 Started working on forms
10.09.2019 4 Added mailgun and relative functions
11.09.2019 6 Working on forms
12.09.2019 5 Working on forms, setup logo and favicons
13.09.2019 5 Improved mobile navi, added google analytics
14.09.2019 4 Cookie policy
15.09.2019 4 Added cookie consent banner and remember be on login
22.09.2019 5 Created a new aggregation pipeline for best players
23.09.2019 5 Added support for the new aggregation in frontend
total 340

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.