Watch or not? No spoilers — find out if you should still watch the game you recorded.
A case study that highlights my passion for tech and my curiosity to learn.
Being a soccer fan in Canada is not an easy task. Juggling streaming services and European league games scheduled during work hours can make it difficult to catch your favorite team playing live. I've recorded games more times than I can count, and I really go the extra mile to make sure I don't get the score spoiled. There's something special about not knowing what's going to happen! I'll avoid all social media and even text my friends not to mention the game.
That being said, nothing hurts more than seeing a scoreless draw or a blowout after waiting for hours to finally sit down and watch. Eventually, I started asking my dad "Don't tell me the score, just answer these questions" and have him advise on whether I should skip the game I recorded.
For fun, I wanted to see if I could eliminate the "middle-man" (sorry dad) and develop a site that can do this for me.
Spoilers
Hard to avoid seeing the score online (sometimes even the streaming sites themselves spoil it!).
Scheduling
Difficult to catch games during the work day or early in the morning.
Entertainment
Maximize the "fun" factor and avoid watching stale games.
The soccer score checker helps you decide whether or not to watch a game based on your preferences. Do you want to watch a high-scoring game? Avoid a 0-0 draw or a complete blowout?
All you need to do is set your criteria and leave the rest to the site. The best part is that there's no indication of the actual score!
If it ain't broke...
Before starting this project, I wanted to check if something like this already existed. Regardless, I was determined to create it for myself as it sounded like fun and a great way to test out an interesting API. It would also make for a funny story to tell! Finding a starting point and drawing inspiration from existing solutions would certainly be helpful.
After researching, I came across an article that linked to a site from over 10 years ago. Although the concept was similar, it wasn't for soccer.
A little refresh can't hurt
I decided to give it a nice modern UI, add new features, and tailor it to be soccer-related. I created a quick wireframe sketch and then a pixel-perfect version using Figma.
Data requirements
I identified an API that would provide me with the necessary data to check scores and set criteira against them. It needed to have all the stats for the latest matches, and info about the teams themselves. The one I found, called API-Football, was perfect and had great documentation, which made life a lot easier!
Fortunately, I was able to combine my existing knowledge of React JS with the all-mighty ChatGPT to quickly create a very basic, functioning version of the site. ChatGPT made it so easy... I was able to request specific components, such as the search bar. I could describe desired functionality, and with minimal tweaks on my end, some references to the API documentation, I had a working score checker!
I then compared it to the Figma design and added CSS to style it. I even made it responsive and deployed it on Vercel, which had been on my list of things to try out.
Private site, public TikTok
Why "sort of"? Well, as you can probably guess, this site was not actually intended for the public. It was more so just a fun weekend hack meant for personal use. That being said, I wanted to share my process and tell the story of how I made this site through my TikTok account.
All publicity is good publicity... right?
The video ended up getting over 60k views, which was quite amusing considering the reason why it received so many views. I had a feeling that if it reached Europeans, they would call me out for saying "soccer" instead of "football," as well as for the teams I supported (I chose them when I was only 8 years old, so please forgive me for not knowing better at the time).
It was all in good fun, and although some people took it too seriously, I was surprised to hear that some people actually wanted the link!
Conditional logic — Set your criteria and you'll be advised based on your preferences.
Conditional logic — Set your criteria and you'll be advised based on your preferences.
Quick search — Easily find the latest fixture by looking for your club.
Quick search — Easily find the latest fixture by looking for your club.
Reveal score — Neat UI detail to optionally remove the blur from the score.
Reveal score — Neat UI detail to optionally remove the blur from the score.
