This is a tool that's used for fetching and calculating LoL e-Sports player and team scores for a fantasy league.
1. React
I used the React Library to build the user interface for this website.
2. Next.js
I used the Next.js Framework to set-up the API and website layout for this project.
3. Material-UI
I used Material-UI to design and enhance the user-interface and user-experience.
4. Insomnia
I used Insomnia to build, design, and test the API used to fetch and POST stats.
This WebApp was created for a client that needed a tool to quickly fetch and calculate scores from an external API for their fantasy league.
I learned the importance of decoupling when building an API to allow for easy migration to a new API. I also learned how to debug more effectively, and build an API using API building tools like Insomnia.
The process of building this project was definitely challenging. Having to migrate a build that was built using one API to another showed me how important it is to keep things as loosely-coupled as possible in order to avoid headaches. The original API that was supposed to be used for this project, stopped returning the necessary data midway through. This forced me to find a new API that could provide the stat information needed by the client. The API that ended up being used wasn't like any API that I had worked with in the past. Instead of requesting from a single endpoint for relevant data, this API utilized SQL statements and Cargo Tables to be able to retrieve the needed data. A tool like Insomnia became necessary because working with the created url would've been near impossible otherwise. Interfacing with the API and building out the URL with the necessary SQL queries required the use of a wrapper that could somewhat simplify how the query was built. After searching for a couple of minutes, I found one that seemed to offer this capability and once installed I realized that it wasn't working the way it was supposed to. This required me to look into the source code and modify some aspects in order to get it working properly. After having everything set up and functioning the way it was supposed to and presenting data to the client, I realized that while the API was pulling accurate data for matches, the results were sometimes reversed and data that was meant for Team1 was being used for Team2. This issue drilled all the way down to the players as well. Of course at the time I was unaware of what was causing the issue and looked through every piece of code in the project to try and pinpoint where this error could be originating from. After a good while spent debugging, I realized that the API was switching stats around, seemingly at random and giving Team1 stats that were meant for Team2. These inconsistencies required assertion statements and a bit of pattern-finding to ensure correct data was used for the correct teams and players. While this project was challenging, it taught me a lot and was fun to work on!
