What was this learning period about?
My project: a web application called Socceristic
The requirements of the project I did were the following:
- 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.
- The entire app must run on a single page. There should be NO redirects.
- Add some interactivity. These interactions did not need to persist after reloading the page.
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.
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.
- Retrieving the desired information from the API: understanding the API documentation, architecture, and endpoints to retrieve specific data was challenging. I had to console.log many times to get the data that I needed from the JSON files.
- Bootstrap and Flexbox CSS: although Bootstrap, a free and open-source CSS framework, wasn’t required for this project, I was decided to use it. So read the Bootstrap 5 documentation to apply it for the styling of the web application. I combined it with plain CSS, including its Flexbox layout module.
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.