From the team that brought you "Genshin Impact" (not really), "Top Die: Episode 3", and "Dude, Where's Doublelift?" comes a new, action-packed, trivia adventure. J.A.T.T. STATS returns in its TL debut, bringing you the most relevant, factual, up-to-date statistical trivia greatness that only J.A.T.T., enhanced by the power of the Liquipedia DB, can provide. Dive in today and see if you can outsmart the J.A.T.T.

Inspiration

J.A.T.T., or the Judgemental Autonomous Telemetry Testing Unit, was a segment on the LCS Countdown during the 2019 LCS Spring Split (https://youtu.be/E9TOMP1B3Lg?t=962). Since J.A.T.T. is one of our favorite TL staff members in his new role as TL's coach, we wanted to make something that was both a tribute and a parody to him.

What it does

We compiled statistical-like questions both manually and from pulling data from LiquipediaDB that are shown, 10 at a time, to the user to answer. At the end of the quiz, the user gets a score and has an option to restart the quiz.

How I built it

This is built as a ReactJS app with an Express/NodeJS backend. We deployed it using Docker and GitHub Registry to a Digital Ocean Droplet.

Challenges I ran into

So many challenges, so I'll separate into different parts.

ReactJS Frontend

This was my first time trying to build a React application by myself. My other partner focused mostly on the deployment and in previous hackathons, there were others more well-versed in React and I only worked on smaller parts of the project. It was also my first time using Functional React Components instead of classes which definitely presented issues. One big issue was that most of the current documentation and tutorials out there for React use classes because that's the older system. Additionally, the way that async calls are handled using Functional React Components (like needing to use useEffect() and useCallback() at the right places) was difficult to grasp. Finally, the part that gave me the most trouble here was adding animations correctly. I ended up using react-transition-group, but because of the nesting of my elements, they originally weren't animating correctly. To fix this, I had to pass on additional prop parameters to my child elements in the section I wanted to animate.

LiquipediaDB API

We used the LiquipediaDB API to quickly pull information that we could then process into statistics for questions. One of the biggest issues we ran into was the lack of examples in the documentation which made it difficult to understand how to use the API. I think having some example queries or at least something built in to test these queries definitely helps (I used Postman to have something similar). Additionally, I had a lot of issues trying to figure out how to emulate the "team" option for api/v1/matchfeed and ended up having to use matchfeed even though it was deprecated. I figured out how to get all the matches for Team Liquid through match, but it was still missing some. It was hard to tell if this was because of the 5000 limit or because of other factors. This was even after filtering just for premier tournaments and matches with TL in them. The conditions and query and groupBy sections were confusing at first, but seeing the example in the Discord helped a lot. I noticed for groupBy, it doesn't collapse the data if I only select what I'm grouping by, so it would've been helpful if that worked.

Deployment

The biggest challenge with deployment was solving the issues we were facing about the frontend not being able to communicate with our backend service. We originally deployed the two parts of the application as separate Docker containers, and while one of the benefits of Docker is that networking between containers is relatively straightforward, the existing state of the server we were deploying to made this a lot more difficult. Our solution was to pivot how we were building our Docker images: instead of separating them out, we worked to combine the front and backend into one image and have the backend express server serve the production-built React frontend. This not only solved the networking issues we were having between the containers, but also allowed us to use a production build of our React application and avoided potential CORS issues between our front and backend applications.

Accomplishments that I'm proud of

The animations and the async calls to fetch questions and validate the answers. Also getting some statistics from the API despite only working with it for less than a day.

What I learned

A lot is detailed above already, but I have a better understanding of React now and also am more familiar with GitHub Actions and GitHub Registry. I also now know how to connect an Express backend to a React frontend and am more familiar with using React Functional Components instead of Class Components. Finally, I learned that a lot of the TL community is really friendly (evident by the Discord) which definitely made the hack a lot more fun!

What's next for J.A.T.T. STATS

B-) It's available on the web, so probably just sharing with friends and compiling more questions.

Built With

Share this project:

Updates