Socceristic: My Vanilla JavaScript project

I’ll share my reflections on the JavaScript learning process of my Software Engineering studies, including my project called Socceristic.

What was this learning period about?

This period focused on the main programming language of the web: JavaScript. It started with all the fundamentals such as variables, comparisons, conditionals, and logical operators. Then, it jumped on everything related to Functions, Scopes and Data Structures. With all the tools learned from those topics, the course introduced DOM manipulation, Events, Communication with the Server, Asynchronous JavaScript, Context, and an introduction to OOP, including Inheritance. Finally, I did a project involving almost all the concepts above mentioned.

I encountered the first modules pretty straightforward as I already had some introductory knowledge of those concepts prior to my JavaScript learning. However, the subsequent modules gradually increased the difficulty until I realised that solving a lab would take me days. I have to say that those labs that made me think for hours to find a strategy to get them solved were the most important ones in my learning process. It would let me gain a lot of intuition on approaching problems from upcoming labs and developing problem-solving skills in programming in general.

My project: a web application called Socceristic

The requirements of the project I did were the following:

  1. The app had to be an HTML/CSS/JS front-end that would access data from an API. All interactions between the client and the API had to be handled asynchronously and use JSON as the communication format.
Countries, season, league, champion, standings table, coach and venue of the selected team, and Player Lookup tool

After I completed all modules, I built a soccer app that would display the major European soccer leagues. The client would see a list of countries that respond to a click by showing the league’s logo, the last champion team, the standings table, and top scorers on a single page. The client can also look for the champion, standings, and top scorers from other years with a dropdown list displaying the last 11 seasons.

By clicking any of the teams from the standings table, the client would see the name and photo of the current coach and venue. Other features include a player Lookup search tool and, through a mock JSON server, the client would see some interesting statistics of the season 2020 from any of the leagues.

A player from the Lookup tool, top scorers and interesting statistics from the mock JSON server

To get the information, I fetched all the data from a RESTful API. The third-party API I chose was API-SPORTS due to its free plan and large image library. This app access data from an API, so no files are stored locally, except the essential ones to run the app plus the background image.

Challenges

  1. Asynchronous JavaScript: On several occasions, the HTML wasn’t rendering the information the way I expected. This project allowed me to dig deeper into this concept as I used up to 4 nested fetch requests. The strategy of storing fetch requests inside functions helped me enormously.

My strategy

Throughout the development of my code, I always made sure to test and debug my code after I added new lines, as I found out that it’s a good practice (during lab challenges, I didn’t do this, and it cost me long hours of debugging and lots of headaches). Also, I tried to encapsulate blocks of codes that I was to use more than once, so I’d store those blocks of code into functions, and I’d call them when necessary. By doing so, I sought to minimise code lines and simplify changes and/or debugging.

Another strategy that I found incredibly useful was adding comments that explain what the code is doing, as I realised that the more lines of code I had, the harder it was to read it.

I'm a Software Engineering student in the process of a career change.