Introduction
Every so often an opportunity arises or an idea springs to mind for something new that you want to build. Even less so when you can create a website that others might find useful. Enter https://shelleyfootball.club.
The Reason
In April I visited my parents house on a Sunday afternoon, I noticed my Dad was preoccupied with something. I wandered over and asked what he was doing. He showed me a large spreadsheet with people's name, football teams and scores on it. Upon quizzing him further about it, he said that every season he runs a football sweepstake with some friends.
The Problem
Each week his friends drop £1 in a pot and pick a team from 4 leagues in the UK. Wins, Draws and Loses were researched and jotted down each week with points given out based on their pick. The process for this was all manual, with people emailing him with what team they would like that week. This was rather time consuming for him as each week my dad had to get scores for each of the teams. Update picked teams for the coming week and make sure everyone else was aware of who picked what team.
Coming up with a solution
After itching to build something new and wanting to learn more Laravel, I pitched an idea. I asked if for the next season I could build a website which would automate the entire process. The football scores could be updated each week automatically and take into account the picks we got from players. I could automatically build the league table. The idea of him still being able to run this and keep his Sunday afternoons free for other things excited him. He therefore agreed to let me do it.
I noted down all of the requirements for things he needed and various rules. These were things like:
- People can't pick the same team twice in one season
- People can't pick opposing teams.
The Build
The Framework
As mentioned before I wanted to try and use Laravel for this so I could improve my skills with it. I love the framework as a whole and the functionality it packs in is amazing. It's also free, which is perfect for this.
Emails
I built a mail server last year. It was always something I wanted to try out and felt it would allow me to learn more about security. Plus it's pretty cool to have mailboxes with your domain that you don't have to pay for!
Emails are an important part of the site as it's the only way people can pick their team. I wanted to make sure it was right so ran through some online tests for the mail server to ensure that it was as secure as possible and not be blacklisted.
The Frontend
For the frontend functionality I opted for Vue.js. Mostly because I find it much easier to use than React and Angular. Also because Laravel ships with it.
For the CSS I opted to use Bulma. It's a nice framework to use and has some nice helper classes, plus the documentation is spot on.
NOTE: You can find out about the server for this site and the Shelley Football Club one here: https://jaymeh.co.uk/updates-server-migration/
What I learnt and Conclusion
The process was a great exercise for me. Working in a development team with project managers and other developers you can often end up getting a specification created by someone else on the team. Usually it's based on a meeting they had with a client. It was great for me to go through the process of building something personally for an actual client.
The site has had a few small bugs when we launched at the start of the season. These weren't major though and overall everyone was able to get on and start picking. It was a great opportunity for me to improve my skills in Vue.js and to do some frontend too. All be it using the Bulma CSS framework but I think for a project like this, it was a perfect decision.
It's also always nice to see people using something you poured a large amount of your time into.
See you next time.
