Pia Kim
front end developer
Pia Kim
Front end developer

UCL Studio

stack:
  • react
  • express
  • node
  • mongoDB
  • heroku
  • football-data API

Overview

The UEFA Champions League is one of the biggest soccer/football tournaments worldwide. I wanted to build on my learning of the MERN stack while working on something I enjoyed, which led to the idea for this project. It began as a challenge for myself to build out the basic framework and gather information from an API which would result in static content. I wanted to add on various features by including a database and some interactive elements, while maintaining an aesthetically pleasing design.

Process:

I first created the general mockup using Adobe XD which is the program that I am most comfortable with currently. After a long time of experimentation, I chose the color theme, basic layout of pages, and how to arrange them into components. It would consist of several repeatable components, like the navigation and project page, and use small typography.

Features:

  • Standings

  • Team information including squad

  • Player information

  • Latest news, featured stats

  • Latest matches

  • User can predict scores and see past predictions

Challenges

Organization:

My ideas for how to organize the project structure in the best way changed throughout my working on the project. This ultimately helped me learn more throughout the process because I was able to think about the structure in different ways, and as different features were added, I had to think about the users' perspective as well as the developer experience. A great thing about React is that because it's component-based, you can break down the project in any way and continue to refactor and alter things without too much trouble (but maybe time-consuming).

Working with third-party APIs:

Having previously worked with APIs before, I was excited to experiment with multiple football API sources. I personally really enjoy the process and seeing the availability of so much information with just a few steps of setting up. One of the challenges however is the server calling to the API over and over, and knowing the best practices with it (to limit the frequency of calls and amount of data), which is something I am still continuing to develop.

*The football-data.org API is very dev-friendly and contains an incredible amount of information.

Takeaways

I gained a better understanding of working with APIs, specifically with Express, and the various challenges it can present. I saw how vast the possibilities can be using dynamic data that are scraped in live time.

I also realized that I was spending too much time planning the project out, thinking everything had to be perfect, that I was not actually getting anything started. Even if the end result is not clear or things change constantly, it is sometimes better to start, and new ideas will come to you as you go. There is the well-known problem of developers having far too many unfinished projects in their Github (or local), but then there is also the problem of spending too much time on things before you even start!

©2021 Pia Kim