This project was started when I was asked by a friend to replace their version where the scores were manually entered and manually calculated, the scores were collected through WhatsApp messages which was a bit of an issue with timing as many of the players are in different countries so it was difficult keeping track of everything.

The initial version of the project had a layout very similar to the original form.

And the form building page was just on a different route, with no authentication. In fact there was no authentication at all.

Then I added in a separate 'scoreboard' tab to keep track of the scores.

Then after this I started improving the styling to make it look nicer and more readable and I also added user accounts so that each user can only overwrite their own predictions and only users with specific permissions can edit the forms and assign the outcomes

At this point we had already had a few games that had happened so a history was added in the 'form selection' tab

And then some more styling changes along with adding support for profile images and some options regarding them

As the 2020 election was coming up, we decided to have a one off game for predicting who would win: Biden or Trump

I kept needing to add players myself as there was not a tool setup to add them, so I made one

I then worked on reducing the amount of bandwidth being used by caching more assets (before => right, after => left) as I had been working on adding a 'blog' to the project as it was requested a while back (it still has not been used to this day)

The savings were even greater on the deployed site

A while after this I added club badges to the form to make it look a little nicer, along with this came a few changes including changing the team input to a dropdown with the currently mapped teams (before I was doing manual mapping of the team codes to the images but it was taking a long long time so now I leave it up to whoever is creating the form with an unmapped team)

Then a new game was introduced under the name 'six'

I had only included English clubs in the mapping tool and the next game was with Real Madrid so it required a quick fix; then later on I added all the european countries to the list, this uses lazy loading so that tens of thousands of images are not being loaded

Then some more styling changes were made

Then I started working on the charts, I ran into a few more problems here than usual regarding iOS support as Safari did not like several things that all other browsers I had tested on were fine with

You can take a look at the deployed site and use these credentials
Username a
Password test

Moala Pro